@extends('agency.layouts.app')

@section('title', 'Yeni Rol Oluştur')

@section('page_title', 'Yeni Rol Oluştur')

@php
    $breadcrumbs = [
        ['title' => 'Dashboard', 'url' => route('agency.dashboard')],
        ['title' => 'Personel ve Yetki', 'url' => '#'],
        ['title' => 'Yetkilendirme', 'url' => route('agency.staff-management.roles.index')],
        ['title' => 'Yeni Rol', 'url' => '']
    ];
@endphp

@push('styles')
    <style>
        .permission-group-card {
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 16px;
            height: 100%;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            background: #ffffff;
            overflow: hidden;
        }
        .permission-group-card:hover {
            border-color: rgba(59, 130, 246, 0.3);
            box-shadow: 0 12px 30px rgba(59, 130, 246, 0.08);
            transform: translateY(-4px);
        }
        .permission-group-header {
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            border-bottom: 1px solid rgba(0,0,0,0.04);
            padding: 16px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .permission-group-header h6 {
            color: #1e293b;
            font-weight: 700;
            font-size: 15px;
            letter-spacing: -0.3px;
        }
        .permission-list {
            padding: 16px 20px;
        }
        .permission-item {
            margin-bottom: 2px;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            padding: 8px 10px;
            border-radius: 8px;
            transition: all 0.2s;
        }
        .permission-item:hover {
            background-color: #f8fafc;
            color: #3b82f6;
        }
        .permission-item .form-check-input {
            cursor: pointer;
            box-shadow: none !important;
        }
        .permission-item .form-check-input:checked {
            background-color: #3b82f6;
            border-color: #3b82f6;
        }
        .permission-item span {
            font-weight: 500;
            color: #475569;
            transition: color 0.2s;
        }
        .permission-item:hover span {
            color: #1e293b;
        }
        .section-title {
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: -0.5px;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid text-center">
        <form action="{{ route('agency.staff-management.roles.store') }}" method="POST">
            @csrf
            
            <div class="row text-start">
                <div class="col-lg-12">
                    <div class="card shadow-sm border-0 mb-4">
                        <div class="card-header bg-white py-4 border-bottom-0 pb-0">
                            <h5 class="mb-0 fw-bold"><i class="fas fa-shield-alt text-primary me-2"></i>Rol Bilgileri</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label class="form-label fw-bold">Rol Adı (Görünen)</label>
                                        <input type="text" name="ui_name" class="form-control @error('ui_name') is-invalid @enderror" placeholder="Örn: Satış Temsilcisi" value="{{ old('ui_name') }}" required>
                                        @error('ui_name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <small class="text-muted">Arayüzde personellere gösterilecek isim.</small>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label class="form-label fw-bold">Sistem Adı (Slug)</label>
                                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" placeholder="Örn: satis-temsilcisi" value="{{ old('name') }}" required>
                                        @error('name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <small class="text-muted">Sistem tarafında kullanılacak benzersiz isim (küçük harf, tire).</small>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label class="form-label fw-bold">Açıklama</label>
                                        <input type="text" name="description" class="form-control @error('description') is-invalid @enderror" placeholder="Bu rolün görevlerini kısaca tanımlayın" value="{{ old('description') }}">
                                        @error('description')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-12">
                    <div class="card shadow-sm border-0 mb-4">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-center mb-4 pb-3 border-bottom">
                                <h5 class="mb-0 fw-bold"><i class="fas fa-key text-warning me-2"></i>Yetkiler</h5>
                                <div class="btn-group shadow-sm">
                                    <button type="button" class="btn btn-sm btn-primary" id="selectAll"><i class="fas fa-check-double me-1"></i> Tümünü Seç</button>
                                    <button type="button" class="btn btn-sm btn-light border" id="deselectAll"><i class="fas fa-times me-1"></i> Tümünü Kaldır</button>
                                </div>
                            </div>

                            <!-- Sistem Yetkileri -->
                            <div class="d-flex align-items-center mb-4 mt-2">
                                <div class="bg-primary bg-opacity-10 text-primary rounded px-3 py-2 me-3">
                                    <i class="fas fa-cogs fs-5"></i>
                                </div>
                                <h6 class="mb-0 section-title text-primary">Sistem Etkileşim Yetkileri</h6>
                            </div>
                    <div class="row">
                        @foreach($systemPermissions as $group => $groupPermissions)
                            <div class="col-md-4 col-xl-3 mb-4">
                                <div class="permission-group-card">
                                    <div class="permission-group-header">
                                        @php
                                            $groupName = explode(' - ', $groupPermissions->first()->ui_name)[0] ?? str_replace('_', ' ', $group);
                                        @endphp
                                        <h6 class="mb-0 text-capitalize">{{ $groupName }}</h6>
                                        <div class="form-check form-switch m-0">
                                            <input class="form-check-input group-toggle" type="checkbox" data-group="{{ $group }}">
                                        </div>
                                    </div>
                                    <div class="permission-list">
                                        @foreach($groupPermissions as $permission)
                                            <label class="permission-item">
                                                <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" class="form-check-input permission-checkbox" data-group="{{ $group }}" {{ is_array(old('permissions')) && in_array($permission->id, old('permissions')) ? 'checked' : '' }}>
                                                <span class="small">{{ explode(' - ', $permission->ui_name)[1] ?? str_replace($group . '.', '', $permission->name) }}</span>
                                            </label>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <!-- Ürün Yetkileri -->
                    <div class="d-flex align-items-center mb-4 mt-5">
                        <div class="bg-success bg-opacity-10 text-success rounded px-3 py-2 me-3">
                            <i class="fas fa-box-open fs-5"></i>
                        </div>
                        <h6 class="mb-0 section-title text-success">Ürün Yönetim Yetkileri</h6>
                    </div>
                    <div class="row">
                        @foreach($productPermissions as $group => $groupPermissions)
                            <div class="col-md-4 col-xl-3 mb-4">
                                <div class="permission-group-card">
                                    <div class="permission-group-header">
                                        @php
                                            $groupName = explode(' - ', $groupPermissions->first()->ui_name)[0] ?? str_replace('_', ' ', $group);
                                        @endphp
                                        <h6 class="mb-0 text-capitalize">{{ $groupName }}</h6>
                                        <div class="form-check form-switch m-0">
                                            <input class="form-check-input group-toggle" type="checkbox" data-group="{{ $group }}">
                                        </div>
                                    </div>
                                    <div class="permission-list">
                                        @foreach($groupPermissions as $permission)
                                            <label class="permission-item">
                                                <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" class="form-check-input permission-checkbox" data-group="{{ $group }}" {{ is_array(old('permissions')) && in_array($permission->id, old('permissions')) ? 'checked' : '' }}>
                                                <span class="small">{{ explode(' - ', $permission->ui_name)[1] ?? str_replace($group . '.', '', $permission->name) }}</span>
                                            </label>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="col-12 mt-2 mb-5 text-end">
                    <a href="{{ route('agency.staff-management.roles.index') }}" class="btn btn-light px-4 me-2 shadow-sm border">İptal</a>
                    <button type="submit" class="btn btn-primary px-5 shadow-sm"><i class="fas fa-save me-2"></i> Rolü Kaydet</button>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Group toggle
            document.querySelectorAll('.group-toggle').forEach(toggle => {
                toggle.addEventListener('change', function () {
                    const group = this.dataset.group;
                    const checkboxes = document.querySelectorAll(`.permission-checkbox[data-group="${group}"]`);
                    checkboxes.forEach(cb => cb.checked = this.checked);
                });
            });

            // Select All
            document.getElementById('selectAll').addEventListener('click', function() {
                document.querySelectorAll('.permission-checkbox, .group-toggle').forEach(cb => cb.checked = true);
            });

            // Deselect All
            document.getElementById('deselectAll').addEventListener('click', function() {
                document.querySelectorAll('.permission-checkbox, .group-toggle').forEach(cb => cb.checked = false);
            });

            // Name to slug helper
            const nameInput = document.querySelector('input[name="ui_name"]');
            const slugInput = document.querySelector('input[name="name"]');
            
            nameInput.addEventListener('input', function() {
                if (slugInput.value === '' || slugInput.dataset.auto === 'true') {
                    slugInput.value = this.value
                        .toLowerCase()
                        .replace(/[^\w ]+/g, '')
                        .replace(/ +/g, '-');
                    slugInput.dataset.auto = 'true';
                }
            });

            slugInput.addEventListener('input', function() {
                this.dataset.auto = 'false';
            });
        });
    </script>
@endpush