@extends('layouts.app')

@section('title', 'Roles - SICA')
@section('page-icon')
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M12 2a4 4 0 0 1 4 4a4 4 0 0 1 -4 4a4 4 0 0 1 -4 -4a4 4 0 0 1 4 -4"/><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/><path d="M15.5 5a3.5 3.5 0 0 1 0 5"/><path d="M19.5 7a6 6 0 0 1 0 3"/></svg>
@endsection
@section('page-title', 'Roles')

@section('page-actions')
<button class="btn btn-primary" id="btn-create">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M12 5l0 14"/><path d="M5 12l14 0"/></svg>
    Nuevo Rol
</button>
@endsection

@section('content')
<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-vcenter card-table" id="roles-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Nombre</th>
                    <th>Tipo</th>
                    <th>Creado</th>
                    <th class="w-1">Acciones</th>
                </tr>
            </thead>
            </table>
        </div>
    </div>
</div>

{{-- Modal crear/editar rol --}}
<div class="modal modal-blur fade" id="modal-role" tabindex="-1">
    <div class="modal-dialog modal-lg modal-fullscreen-sm-down">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-role-title">Nuevo Rol</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="form-role">
                <input type="hidden" name="_method" id="form-method" value="POST">
                <input type="hidden" id="form-role-id" value="">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Nombre del rol</label>
                        <input type="text" name="name" id="input-name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="is_super" id="input-is-super" value="1">
                            <span class="form-check-label">SuperAdmin (acceso total a todo el sistema)</span>
                        </label>
                    </div>

                    {{-- Matriz de permisos --}}
                    <div id="permissions-section">
                        <label class="form-label">Permisos por modulo</label>
                        <div class="table-responsive">
                            <table class="table table-vcenter table-bordered" id="permissions-table">
                                <thead>
                                    <tr>
                                        <th>Modulo</th>
                                        <th class="text-center">Vista<br><input class="form-check-input col-check-all" type="checkbox" data-action="can_view" title="Seleccionar todos"></th>
                                        <th class="text-center">Alta<br><input class="form-check-input col-check-all" type="checkbox" data-action="can_create" title="Seleccionar todos"></th>
                                        <th class="text-center">Cambio<br><input class="form-check-input col-check-all" type="checkbox" data-action="can_update" title="Seleccionar todos"></th>
                                        <th class="text-center">Baja<br><input class="form-check-input col-check-all" type="checkbox" data-action="can_delete" title="Seleccionar todos"></th>
                                        <th class="text-center" style="width:50px;">Todos</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($menus as $slug => $label)
                                    <tr data-menu="{{ $slug }}">
                                        <td>{{ $label }}</td>
                                        <td class="text-center">
                                            <input class="form-check-input perm-check" type="checkbox" data-menu="{{ $slug }}" data-action="can_view">
                                        </td>
                                        <td class="text-center">
                                            <input class="form-check-input perm-check" type="checkbox" data-menu="{{ $slug }}" data-action="can_create">
                                        </td>
                                        <td class="text-center">
                                            <input class="form-check-input perm-check" type="checkbox" data-menu="{{ $slug }}" data-action="can_update">
                                        </td>
                                        <td class="text-center">
                                            <input class="form-check-input perm-check" type="checkbox" data-menu="{{ $slug }}" data-action="can_delete">
                                        </td>
                                        <td class="text-center">
                                            <input class="form-check-input row-check-all" type="checkbox" data-menu="{{ $slug }}" title="Seleccionar todos">
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn me-auto" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success" id="btn-save">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10"/></svg>
                        Guardar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    var rolesDataUrl = "{{ route('roles.data') }}";
    var rolesStoreUrl = "{{ route('roles.store') }}";
    var rolesBaseUrl = "{{ url('roles') }}";
</script>
<script src="{{ asset('js/roles/index.js') }}?v={{ filemtime(public_path('js/roles/index.js')) }}"></script>
@endpush