@extends('layouts.app')

@section('title', 'Gestion des droits')

@section('breadcrumb')
    <li class="breadcrumb-item active">Gestion des droits</li>
@endsection

@section('content')
<form method="POST" action="{{ route('permissions.update') }}">
    @csrf
    @method('PUT')

    <div class="card">
        <div class="card-header d-flex align-items-center justify-content-between">
            <div>
                <h5 class="mb-0"><i class="bi bi-shield-lock me-2"></i>Droits d'accès par rôle</h5>
                <small class="text-muted">Définissez les sous-menus accessibles à chaque type d'utilisateur.</small>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('roles.index') }}" class="btn btn-outline-primary btn-sm">
                    <i class="bi bi-person-badge me-1"></i> Gérer les rôles
                </a>
                <button type="submit" class="btn btn-success">
                    <i class="bi bi-save me-1"></i> Enregistrer
                </button>
            </div>
        </div>

        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-bordered table-hover mb-0 align-middle">
                    <thead class="table-dark">
                        <tr>
                            <th style="width:25%" class="py-3 ps-4">Sous-menu</th>

                            @foreach($roles as $role)
                            <th class="text-center">
                                <span class="badge bg-primary fs-6 px-3 py-2">
                                    <i class="bi bi-person-badge me-1"></i> {{ ucfirst($role) }}
                                </span>
                                <div class="small text-white-50 mt-1 fw-normal">Voir &nbsp;|&nbsp; Modifier</div>
                            </th>
                            @endforeach

                            {{-- Admin (info fixe) --}}
                            <th class="text-center">
                                <span class="badge bg-danger fs-6 px-3 py-2">
                                    <i class="bi bi-shield-fill me-1"></i> Administrateur
                                </span>
                                <div class="small text-white-50 mt-1 fw-normal">Accès complet (fixe)</div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @php $currentGroup = null; @endphp

                        @foreach($modules as $key => $module)

                        {{-- Ligne d'en-tête de groupe --}}
                        @if($module['group'] !== $currentGroup)
                            @php $currentGroup = $module['group']; @endphp
                            @php $groupIcon = \App\Models\RolePermission::GROUPS[$currentGroup] ?? 'bi-folder'; @endphp
                            <tr class="table-secondary">
                                <td colspan="{{ count($roles) + 2 }}" class="fw-bold ps-3 py-2">
                                    <i class="bi {{ $groupIcon }} me-2 text-primary"></i>{{ $currentGroup }}
                                </td>
                            </tr>
                        @endif

                        <tr>
                            <td class="ps-5">
                                <i class="bi {{ $module['icon'] }} me-2 text-success"></i>
                                {{ $module['label'] }}
                            </td>

                            @foreach($roles as $role)
                            <td class="text-center">
                                <div class="d-flex justify-content-center align-items-center gap-4">
                                    <div class="form-check form-check-inline m-0">
                                        <input class="form-check-input perm-view"
                                               type="checkbox"
                                               id="{{ $role }}_view_{{ $key }}"
                                               name="permissions[{{ $role }}][{{ $key }}][can_view]"
                                               value="1"
                                               data-role="{{ $role }}"
                                               data-module="{{ $key }}"
                                               {{ ($permissions[$role][$key]['can_view'] ?? true) ? 'checked' : '' }}>
                                        <label class="form-check-label small" for="{{ $role }}_view_{{ $key }}">Voir</label>
                                    </div>
                                    <div class="form-check form-check-inline m-0">
                                        <input class="form-check-input perm-write"
                                               type="checkbox"
                                               id="{{ $role }}_write_{{ $key }}"
                                               name="permissions[{{ $role }}][{{ $key }}][can_write]"
                                               value="1"
                                               data-role="{{ $role }}"
                                               data-module="{{ $key }}"
                                               {{ ($permissions[$role][$key]['can_write'] ?? true) ? 'checked' : '' }}>
                                        <label class="form-check-label small" for="{{ $role }}_write_{{ $key }}">Modifier</label>
                                    </div>
                                </div>
                            </td>
                            @endforeach

                            {{-- Admin (toujours coché, désactivé) --}}
                            <td class="text-center">
                                <div class="d-flex justify-content-center gap-4">
                                    <span class="text-success"><i class="bi bi-check-circle-fill"></i> Voir</span>
                                    <span class="text-success"><i class="bi bi-check-circle-fill"></i> Modifier</span>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card-footer text-muted small">
            <i class="bi bi-info-circle me-1"></i>
            <strong>Voir</strong> : l'utilisateur peut consulter le sous-menu.
            &nbsp;|&nbsp;
            <strong>Modifier</strong> : l'utilisateur peut créer, éditer et supprimer (nécessite "Voir" activé).
            &nbsp;|&nbsp;
            L'<strong>Administrateur</strong> a toujours accès complet à tous les sous-menus.
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
document.querySelectorAll('.perm-view').forEach(function(viewCb) {
    viewCb.addEventListener('change', function() {
        const role   = this.dataset.role;
        const module = this.dataset.module;
        const writeCb = document.querySelector(
            `.perm-write[data-role="${role}"][data-module="${module}"]`
        );
        if (!this.checked && writeCb) {
            writeCb.checked = false;
        }
    });
});

document.querySelectorAll('.perm-write').forEach(function(writeCb) {
    writeCb.addEventListener('change', function() {
        const role   = this.dataset.role;
        const module = this.dataset.module;
        const viewCb = document.querySelector(
            `.perm-view[data-role="${role}"][data-module="${module}"]`
        );
        if (this.checked && viewCb) {
            viewCb.checked = true;
        }
    });
});
</script>
@endpush