@extends('layouts.admin')

@section('admin-content')
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem;">
    <a href="{{ route('admin.roles.index') }}" style="color: var(--text-muted); display: inline-flex; align-items: center;" title="Volver al listado">
        <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
    </a>
    <h2 style="font-size: 1.5rem; font-weight: 800;">Crear Nuevo Rol</h2>
</div>

@if ($errors->any())
    <div class="alert alert-error" style="font-size: 0.85rem; padding: 0.75rem 1rem; margin-bottom: 1.5rem;">
        <div style="flex: 1;">
            @foreach ($errors->all() as $error)
                <span style="display:block;">{{ $error }}</span>
            @endforeach
        </div>
    </div>
@endif

<form action="{{ route('admin.roles.store') }}" method="POST">
    @csrf

    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
        <div class="form-group">
            <label for="display_name" class="form-label">Nombre Visible del Rol <span style="color: var(--color-error);">*</span></label>
            <input type="text" id="display_name" name="display_name" value="{{ old('display_name') }}" required class="form-control" placeholder="Ej. Supervisor de Sucursal" oninput="generateSlug(this.value)">
        </div>

        <div class="form-group">
            <label for="name" class="form-label">Identificador / Slug <span style="color: var(--color-error);">*</span></label>
            <input type="text" id="name" name="name" value="{{ old('name') }}" required class="form-control" placeholder="ej. supervisor_sucursal">
            <small style="color: var(--text-muted); font-size: 0.75rem;">Solo letras, números y guiones bajos en minúsculas.</small>
        </div>
    </div>

    <div class="form-group">
        <label for="description" class="form-label">Descripción del Rol</label>
        <textarea id="description" name="description" rows="2" class="form-control" placeholder="Describe brevemente las responsabilidades y alcance de este rol...">{{ old('description') }}</textarea>
    </div>

    <!-- Permissions Matrix -->
    <div style="margin-top: 2rem;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
            <h3 style="font-size: 1.15rem; font-weight: 700; color: var(--text-primary);">Asignación de Permisos</h3>
            <div style="display: flex; gap: 0.5rem;">
                <button type="button" class="btn btn-outline btn-sm" onclick="toggleAllPermissions(true)">Marcar Todos</button>
                <button type="button" class="btn btn-outline btn-sm" onclick="toggleAllPermissions(false)">Desmarcar Todos</button>
            </div>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem;">
            @foreach($availablePermissions as $category => $permissions)
                <div class="glass" style="padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--border-color);">
                    <h4 style="font-size: 0.95rem; font-weight: 700; color: var(--secondary-color); margin-bottom: 0.75rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem;">
                        {{ $category }}
                    </h4>
                    <div style="display: flex; flex-direction: column; gap: 0.6rem;">
                        @foreach($permissions as $permKey => $permLabel)
                            <label class="form-check" style="cursor: pointer;">
                                <input type="checkbox" name="permissions[]" value="{{ $permKey }}" class="perm-checkbox" {{ is_array(old('permissions')) && in_array($permKey, old('permissions')) ? 'checked' : '' }} style="accent-color: var(--primary-color);">
                                <span style="font-size: 0.85rem;">{{ $permLabel }}</span>
                            </label>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <div style="margin-top: 2.5rem; display: flex; gap: 1rem;">
        <button type="submit" class="btn btn-primary">
            <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
            Guardar Rol
        </button>
        <a href="{{ route('admin.roles.index') }}" class="btn btn-outline">Cancelar</a>
    </div>
</form>

<script>
    function generateSlug(text) {
        const slugInput = document.getElementById('name');
        if (!slugInput.dataset.touched) {
            slugInput.value = text.toLowerCase()
                .trim()
                .normalize("NFD").replace(/[\u0300-\u036f]/g, "")
                .replace(/[^a-z0-9_]/g, '_')
                .replace(/_+/g, '_');
        }
    }

    document.getElementById('name').addEventListener('input', function() {
        this.dataset.touched = "true";
    });

    function toggleAllPermissions(checked) {
        document.querySelectorAll('.perm-checkbox').forEach(cb => cb.checked = checked);
    }
</script>
@endsection