@push('css')
    <style>
        .form-check-input:checked {
            background-color: #0D3973 !important;
            border-color: #0D3973 !important;
        }

        .form-check-input {
            background-color: #B9B9B9 !important;
            border-color: #B9B9B9 !important;
        }

        .form-check-input:focus {
            box-shadow: 0 0 0 0.1rem rgba(13, 57, 115, 0.25);
        }
    </style>
@endpush

<div style="height: 100vh;">
    <div name="header">
        <div class="header mt-md-5">
            <div class="header-body">
                <div class="row align-items-center">
                    <div class="col">
                        <h1 class="header-title">Roles y Permisos</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="row mb-3">
                <div class="col-12 d-flex justify-content-end align-items-center">
                    <div>
                        <button class="btn btn-success me-2" type="button" id="saveButton" wire:click="role"
                            wire:loading.attr="disabled">Guardar</button>
                        <a href="{{ url('users') }}" class="btn btn-outline-secondary">Volver</a>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="rol">Rol</label>
                                    <select id="rol" wire:model="idrol" name="rol" class="form-control">
                                        <option value="0">Nuevo rol</option>
                                        @foreach ($roles as $rol)
                                            <option value="{{ $rol->id }}" data-rolname="{{ $rol->name }}"
                                                data-profile="{{ $rol->profile }}" data-guard="{{ $rol->guard_name }}">
                                                {{ $rol->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="rolname">Nombre del rol</label>
                                    <input type="text" class="form-control" name="rolname" id="rolname"
                                        wire:model="rol.name">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @if ($idrol != 0)
                <div class="card">  
                    <div class="card-header d-flex justify-content-end">
                        <h3>Permisos</h3>
                    </div>
                    <div class="card-body" wire:ignore>
                        <div class="accordion" id="accordionExample" data-bs-parent="#accordionExample">
                            @foreach ($modules as $moduleKey => $permissions)
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="heading{{ Str::slug($moduleKey) }}">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapse{{ Str::slug($moduleKey) }}"
                                            aria-expanded="{{ $loop->first ? 'true' : 'false' }}"
                                            aria-controls="collapse{{ Str::slug($moduleKey) }}">
                                            {{ ucfirst($moduleKey) }}
                                        </button>
                                    </h2>
                                    <div id="collapse{{ Str::slug($moduleKey) }}"
                                        class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}"
                                        aria-labelledby="heading{{ Str::slug($moduleKey) }}">
                                        <div class="accordion-body">
                                            <div class="row">
                                                @php
                                                    $groupedPermissions = [];
                                                    foreach ($permissions as $permissionKey => $permissionLabel) {
                                                        $prefix = explode('.', $permissionKey)[0];
                                                        $groupedPermissions[$prefix][] = [
                                                            'key' => $permissionKey,
                                                            'label' => $permissionLabel,
                                                        ];
                                                    }
                                                @endphp
                                                @foreach ($groupedPermissions as $prefix => $group)
                                                    <div class="col-md-12">
                                                        <h3 class="mt-2">{{ ucfirst($prefix) }}</h3>
                                                        <div class="d-flex flex-wrap gap-3">
                                                            @foreach ($group as $permission)
                                                                <div>
                                                                    <div class="form-check form-switch">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            role="switch"
                                                                            id="{{ $permission['key'] }}"
                                                                            value="{{ $permission['key'] }}"
                                                                            wire:model="permission">
                                                                        <label class="form-check-label"
                                                                            for="{{ $permission['key'] }}">
                                                                            {{ $permission['label'] }}
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

@push('js')
    <script>
        Livewire.on('roleUpdated', (data) => {
            Swal.fire({
                title: data.title,
                text: data.text,
                icon: data.icon ? data.icon : 'success',
                confirmButtonColor: '#0d3973',
            });
        });
    </script>
@endpush