@extends('layouts.base')

@section('title')
    Ajouter un rôle
@endsection

@section('style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <link href="{{ asset('assets/vendor/select/select2.min.css') }}" rel="stylesheet" type="text/css">
    <style>
        .select2-container--default .select2-selection--multiple {
            min-height: 48px;
            padding: 5px;
        }
    </style>
@endsection

@section('content')
<div class="row">
            {{--@include('includes.alert.alert_success_error') --}}



    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Ajouter un rôle</h5>
                <a href="{{ route('gestion_utilisateur_agence.liste_role') }}" class="btn btn-outline-danger mx-1">
                    <i class="fa-solid fa-arrow-left"></i> Retour à la liste
                </a>
            </div>

            <div class="card-body">

                <form action="{{ route('gestion_utilisateur_agence.ajout_role') }}" method="POST" class="row g-3 app-form">
                    @csrf

                    {{-- Nom du rôle --}}
                    <div class="col-md-6">
                        <label for="name">Nom du rôle<span class="text-danger">*</span></label>
                        <input name="name" type="text" value="{{ old('name') }}" class="form-control @error('name') is-invalid @enderror">
                        @error('name') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    {{-- Utilisateurs à affecter --}}
                    <div class="col-md-6">
                        <label for="users">Utilisateurs à affecter</label>
                        <select name="users[]" multiple class="select-basic-multiple-four w-100 select_primary" id="users">
                            @foreach($utilisateurs as $user)
                                <option value="{{ $user->id }}" {{ collect(old('users'))->contains($user->id) ? 'selected' : '' }}>
                                    {{ $user->first_name }} {{ $user->last_name }}
                                </option>
                            @endforeach
                        </select>
                        @error('users') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>


                    {{-- Description --}}
                    <div class="col-12">
                        <label for="description">Description</label>
                        <textarea name="description" rows="3" class="form-control @error('description') is-invalid @enderror">{{ old('description') }}</textarea>
                        @error('description') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    {{-- Permissions --}}
                    <div class="col-12">
                        <h5 class="mt-3">Permissions</h5>
                        @error('permissions') <span class="text-danger">{{ $message }}</span> @enderror

                        @foreach($permissionsParModule as $module => $permissions)
                            <div class="border p-3 mb-2 rounded permission-module">
                                <div class="d-flex justify-content-between align-items-center">
                                    <strong>{{ $module }}</strong>
                                    <div class="d-flex gap-1">
                                        <button type="button" class="btn btn-sm btn-outline-secondary check-all">Tout cocher</button>
                                        <button type="button" class="btn btn-sm btn-outline-secondary uncheck-all">Tout décocher</button>
                                        <button type="button" class="btn btn-sm btn-outline-primary toggle-permissions">
                                            <i class="fa fa-chevron-down"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="permissions-list mt-2">
                                    <div class="row">
                                        @foreach($permissions as $permission)
                                            <div class="col-md-4">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox"
                                                        name="permissions[]" value="{{ $permission['nom'] }}"
                                                        {{ is_array(old('permissions')) && in_array($permission['nom'], old('permissions')) ? 'checked' : '' }}>
                                                    <label class="form-check-label">
                                                        {{ $permission['description'] }}
                                                    </label>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    {{-- Bouton submit --}}
                    <div class="col-12 text-end">
                        <button type="submit" class="btn btn-primary">
                            <i class="fa fa-save"></i> Enregistrer le rôle
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="{{ asset('assets/vendor/select/select2.min.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        $('.select_primary').select2();

        document.querySelectorAll('.toggle-permissions').forEach(button => {
            button.addEventListener('click', () => {
                const container = button.closest('.permission-module');
                const permissionsList = container.querySelector('.permissions-list');

                const isHidden = permissionsList.style.display === 'none' || permissionsList.style.display === '';
                permissionsList.style.display = isHidden ? 'block' : 'none';
                button.innerHTML = `<i class="fa fa-chevron-${isHidden ? 'up' : 'down'}"></i>`;
            });
        });

        // Tout cocher / Tout décocher par module
        document.querySelectorAll('.permission-module').forEach(module => {
            const checkAllBtn = module.querySelector('.check-all');
            const uncheckAllBtn = module.querySelector('.uncheck-all');
            const toggleBtn = module.querySelector('.toggle-permissions');
            const list = module.querySelector('.permissions-list');
            const inputs = module.querySelectorAll('.form-check-input');

            if (checkAllBtn) {
                checkAllBtn.addEventListener('click', () => {
                    inputs.forEach(i => { i.checked = true; });
                    if (list) { list.style.display = 'block'; }
                    if (toggleBtn) { toggleBtn.innerHTML = '<i class="fa fa-chevron-up"></i>'; }
                });
            }
            if (uncheckAllBtn) {
                uncheckAllBtn.addEventListener('click', () => {
                    inputs.forEach(i => { i.checked = false; });
                });
            }
        });

        // Par défaut : replier tout
        document.querySelectorAll('.permission-module').forEach(module => {
            const permissionsList = module.querySelector('.permissions-list');
            const toggleButton = module.querySelector('.toggle-permissions');

            // Vérifie s'il y a une checkbox cochée dans ce module
            const hasChecked = module.querySelector('.form-check-input:checked');

            if (hasChecked) {
                permissionsList.style.display = 'block';
                toggleButton.innerHTML = '<i class="fa fa-chevron-up"></i>';
            } else {
                permissionsList.style.display = 'none';
                toggleButton.innerHTML = '<i class="fa fa-chevron-down"></i>';
            }
        });
    });
</script>
@endsection