@extends('layouts.app')

@section('title', 'Crear Usuario - ERP LOGÍSTICO')
@section('header_title', 'Crear Nuevo Usuario')

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-10">
        
        <div class="d-flex justify-content-between align-items-center mb-4">
            <a href="{{ route('users.index') }}" class="btn btn-outline-secondary btn-sm px-3">
                <i class="bi bi-arrow-left"></i> Volver al listado
            </a>
            <h4 class="mb-0 fw-bold text-dark">Nuevo Perfil de Usuario</h4>
        </div>

        <div class="card shadow-sm">
            <div class="card-header bg-white">
                <h5 class="mb-0 text-dark fw-bold"><i class="bi bi-person-plus text-danger me-2"></i>Datos del Usuario y Permisos</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('users.store') }}" method="POST" id="userForm">
                    @csrf

                    <h6 class="fw-bold text-danger mb-3 border-bottom pb-2">Información General</h6>
                    
                    <div class="row g-3 mb-4">
                        <!-- Nombre -->
                        <div class="col-md-6">
                            <label for="name" class="form-label fw-semibold text-muted small">Nombre Completo <span class="text-danger">*</span></label>
                            <input type="text" class="form-control border-grey @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name') }}" required placeholder="Ej. Juan Pérez">
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Email -->
                        <div class="col-md-6">
                            <label for="email" class="form-label fw-semibold text-muted small">Correo Electrónico <span class="text-danger">*</span></label>
                            <input type="email" class="form-control border-grey @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email') }}" required placeholder="juan.perez@empresa.com">
                            @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Contraseña -->
                        <div class="col-md-6">
                            <label for="password" class="form-label fw-semibold text-muted small">Contraseña <span class="text-danger">*</span></label>
                            <input type="password" class="form-control border-grey @error('password') is-invalid @enderror" id="password" name="password" required placeholder="Mínimo 8 caracteres">
                            @error('password')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Confirmar Contraseña -->
                        <div class="col-md-6">
                            <label for="password_confirmation" class="form-label fw-semibold text-muted small">Confirmar Contraseña <span class="text-danger">*</span></label>
                            <input type="password" class="form-control border-grey" id="password_confirmation" name="password_confirmation" required placeholder="Repita la contraseña">
                        </div>

                        <!-- Rol -->
                        <div class="col-md-6">
                            <label for="role" class="form-label fw-semibold text-muted small">Rol del Sistema <span class="text-danger">*</span></label>
                            <select class="form-select border-grey @error('role') is-invalid @enderror" id="role" name="role" required>
                                <option value="" disabled {{ old('role') ? '' : 'selected' }}>-- Seleccione un Rol --</option>
                                <option value="admin" {{ old('role') === 'admin' ? 'selected' : '' }}>Administrador</option>
                                <option value="aprobador" {{ old('role') === 'aprobador' ? 'selected' : '' }}>Aprobador</option>
                                <option value="jefe_local" {{ old('role') === 'jefe_local' ? 'selected' : '' }}>Jefe de Local</option>
                                <option value="usuario" {{ old('role') === 'usuario' ? 'selected' : '' }}>Usuario / Técnico</option>
                                <option value="gerencia" {{ old('role') === 'gerencia' ? 'selected' : '' }}>Gerencia</option>
                            </select>
                            <div class="form-text mt-1 text-muted small">Al cambiar el rol, se sugerirán automáticamente los permisos por defecto para ese rol.</div>
                            @error('role')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Sucursal -->
                        <div class="col-md-6" id="sucursal_container">
                            <label for="sucursal_id" class="form-label fw-semibold text-muted small">Sucursal Asignada</label>
                            <select class="form-select border-grey @error('sucursal_id') is-invalid @enderror" id="sucursal_id" name="sucursal_id">
                                <option value="" selected>-- Multisucursal (Global / Oficina Central) --</option>
                                @foreach($sucursales as $s)
                                    <option value="{{ $s->id }}" {{ old('sucursal_id') == $s->id ? 'selected' : '' }}>
                                        {{ $s->nombre }} @if(!$s->activo) (Inactiva) @endif
                                    </option>
                                @endforeach
                            </select>
                            <div class="form-text mt-1 text-muted small">Los Jefes de Local deben tener una sucursal específica asignada obligatoriamente.</div>
                            @error('sucursal_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <h6 class="fw-bold text-danger mb-3 border-bottom pb-2">Permisos Modulo Incidencias (Acciones)</h6>
                    <p class="text-muted small mb-4">Puede ajustar los permisos individuales de forma personalizada para este usuario en particular, independientemente del rol sugerido.</p>

                    <div class="row g-3 mb-4">
                        <!-- Permiso: Crear -->
                        <div class="col-md-4">
                            <div class="card p-3 border h-100">
                                <div class="form-check form-switch mb-0">
                                    <input class="form-check-input" type="checkbox" role="switch" id="can_create_tickets" name="can_create_tickets" value="1" {{ old('can_create_tickets', '1') ? 'checked' : '' }}>
                                    <label class="form-check-label fw-semibold text-dark" for="can_create_tickets">
                                        <i class="bi bi-plus-circle text-success me-2"></i>Reportar Incidencias
                                    </label>
                                </div>
                                <div class="text-muted small mt-2">Permite ingresar nuevos tickets de soporte e incidencias al sistema.</div>
                            </div>
                        </div>

                        <!-- Permiso: Asignar -->
                        <div class="col-md-4">
                            <div class="card p-3 border h-100">
                                <div class="form-check form-switch mb-0">
                                    <input class="form-check-input" type="checkbox" role="switch" id="can_assign_tickets" name="can_assign_tickets" value="1" {{ old('can_assign_tickets') ? 'checked' : '' }}>
                                    <label class="form-check-label fw-semibold text-dark" for="can_assign_tickets">
                                        <i class="bi bi-person-fill-gear text-primary me-2"></i>Asignar Responsables
                                    </label>
                                </div>
                                <div class="text-muted small mt-2">Permite derivar tickets a un encargado (interno o externo) y comenzar el SLA.</div>
                            </div>
                        </div>

                        <!-- Permiso: Resolver -->
                        <div class="col-md-4">
                            <div class="card p-3 border h-100">
                                <div class="form-check form-switch mb-0">
                                    <input class="form-check-input" type="checkbox" role="switch" id="can_resolve_tickets" name="can_resolve_tickets" value="1" {{ old('can_resolve_tickets') ? 'checked' : '' }}>
                                    <label class="form-check-label fw-semibold text-dark" for="can_resolve_tickets">
                                        <i class="bi bi-tools text-warning me-2"></i>Registrar Resolución
                                    </label>
                                </div>
                                <div class="text-muted small mt-2">Permite ingresar comentarios técnicos y marcar un ticket como Resuelto o No Resuelto.</div>
                            </div>
                        </div>

                        <!-- Permiso: Cerrar/Validar -->
                        <div class="col-md-4">
                            <div class="card p-3 border h-100">
                                <div class="form-check form-switch mb-0">
                                    <input class="form-check-input" type="checkbox" role="switch" id="can_close_tickets" name="can_close_tickets" value="1" {{ old('can_close_tickets') ? 'checked' : '' }}>
                                    <label class="form-check-label fw-semibold text-dark" for="can_close_tickets">
                                        <i class="bi bi-clipboard-check text-info me-2"></i>Validar y Cerrar
                                    </label>
                                </div>
                                <div class="text-muted small mt-2">Permite aprobar/rechazar soluciones y archivar los tickets finalizados.</div>
                            </div>
                        </div>

                        <!-- Permiso: Eliminar -->
                        <div class="col-md-4">
                            <div class="card p-3 border h-100">
                                <div class="form-check form-switch mb-0">
                                    <input class="form-check-input" type="checkbox" role="switch" id="can_delete_tickets" name="can_delete_tickets" value="1" {{ old('can_delete_tickets') ? 'checked' : '' }}>
                                    <label class="form-check-label fw-semibold text-dark" for="can_delete_tickets">
                                        <i class="bi bi-trash text-danger me-2"></i>Eliminar Incidencias
                                    </label>
                                </div>
                                <div class="text-muted small mt-2">Permite aplicar eliminación lógica (soft-delete) sobre tickets e incidencias.</div>
                            </div>
                        </div>

                        <!-- Permiso: Ver Dashboard -->
                        <div class="col-md-4">
                            <div class="card p-3 border h-100">
                                <div class="form-check form-switch mb-0">
                                    <input class="form-check-input" type="checkbox" role="switch" id="can_view_dashboard" name="can_view_dashboard" value="1" {{ old('can_view_dashboard') ? 'checked' : '' }}>
                                    <label class="form-check-label fw-semibold text-dark" for="can_view_dashboard">
                                        <i class="bi bi-pie-chart-fill text-info me-2"></i>Ver Dashboard
                                    </label>
                                </div>
                                <div class="text-muted small mt-2">Permite acceder al panel de indicadores de control y KPIs.</div>
                            </div>
                        </div>
                    </div>

                    <div class="border-top pt-3 d-flex justify-content-end gap-2">
                        <a href="{{ route('users.index') }}" class="btn btn-light border px-4">Cancelar</a>
                        <button type="submit" class="btn btn-danger px-4 fw-semibold">
                            <i class="bi bi-check-circle me-1"></i> Guardar Usuario
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const roleSelect = document.getElementById('role');
        const sucursalSelect = document.getElementById('sucursal_id');
        
        // Switches
        const switchCreate = document.getElementById('can_create_tickets');
        const switchAssign = document.getElementById('can_assign_tickets');
        const switchResolve = document.getElementById('can_resolve_tickets');
        const switchClose = document.getElementById('can_close_tickets');
        const switchDelete = document.getElementById('can_delete_tickets');
        const switchDashboard = document.getElementById('can_view_dashboard');
 
        // Mapping typical permissions based on selected role
        const rolePermissions = {
            'admin': { create: true, assign: true, resolve: true, close: true, delete: true, dashboard: true },
            'aprobador': { create: true, assign: true, resolve: true, close: false, delete: true, dashboard: true },
            'jefe_local': { create: true, assign: false, resolve: false, close: true, delete: false, dashboard: true },
            'usuario': { create: true, assign: false, resolve: true, close: false, delete: false, dashboard: false },
            'gerencia': { create: true, assign: false, resolve: false, close: false, delete: false, dashboard: true }
        };
 
        roleSelect.addEventListener('change', function() {
            const role = this.value;
            if (rolePermissions[role]) {
                const perms = rolePermissions[role];
                switchCreate.checked = perms.create;
                switchAssign.checked = perms.assign;
                switchResolve.checked = perms.resolve;
                switchClose.checked = perms.close;
                switchDelete.checked = perms.delete;
                switchDashboard.checked = perms.dashboard;
            }
 
            // Enforce sucursal logic if Jefe de Local
            if (role === 'jefe_local') {
                sucursalSelect.setAttribute('required', 'required');
            } else {
                sucursalSelect.removeAttribute('required');
            }
        });
    });
</script>
@endsection