@extends('layouts.admin')

@section('admin-content')
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem;">
    <a href="{{ route('admin.staff.index') }}" style="color: var(--text-muted); display: inline-flex; align-items: center;">
        <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;">Nuevo Empleado</h2>
</div>

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

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

    <!-- Info del Empleado -->
    <div class="glass" style="padding: 1.5rem; border-radius: var(--radius-md); margin-bottom: 2rem;">
        <h3 style="font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; color: var(--primary-color);">Información del Empleado</h3>
        
        <div class="form-group">
            <label for="name" class="form-label">Nombre Completo</label>
            <input type="text" id="name" name="name" value="{{ old('name') }}" required class="form-control" placeholder="Ej. Ana Gómez">
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem;">
            <div class="form-group">
                <label for="role" class="form-label">Cargo / Especialidad</label>
                <input type="text" id="role" name="role" value="{{ old('role') }}" class="form-control" placeholder="Ej. Estilista Profesional, Barbero">
            </div>

            <div class="form-group">
                <label for="user_id" class="form-label">Cuenta de Usuario Vinculada</label>
                <select name="user_id" id="user_id" class="form-control">
                    <option value="">-- Sin cuenta vinculada --</option>
                    @foreach($users as $usr)
                        <option value="{{ $usr->id }}" {{ old('user_id') == $usr->id ? 'selected' : '' }}>{{ $usr->name }} ({{ $usr->email }})</option>
                    @endforeach
                </select>
            </div>

            <div class="form-group">
                <label for="status" class="form-label">Estado</label>
                <select name="status" id="status" class="form-control">
                    <option value="active" {{ old('status', 'active') === 'active' ? 'selected' : '' }}>Activo</option>
                    <option value="inactive" {{ old('status') === 'inactive' ? 'selected' : '' }}>Inactivo</option>
                </select>
            </div>
        </div>
    </div>

    <!-- Servicios del Empleado -->
    <div class="glass" style="padding: 1.5rem; border-radius: var(--radius-md); margin-bottom: 2rem;">
        <h3 style="font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; color: var(--primary-color);">Servicios Asociados</h3>
        <p style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1rem;">Selecciona los servicios que este empleado está capacitado para realizar.</p>
        
        @if($services->isEmpty())
            <p style="color: var(--text-muted); font-size: 0.9rem;">No hay servicios activos registrados. Primero debes crear servicios en la sección de Servicios.</p>
        @else
            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem;">
                @foreach($services as $srv)
                    <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none; padding: 0.5rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: rgba(255,255,255,0.02);">
                        <input type="checkbox" name="services[]" value="{{ $srv->id }}" {{ is_array(old('services')) && in_array($srv->id, old('services')) ? 'checked' : '' }} style="width: 18px; height: 18px; accent-color: var(--primary-color);">
                        <div>
                            <span style="font-weight: 600; font-size: 0.9rem; display: block;">{{ $srv->name }}</span>
                            <span style="font-size: 0.75rem; color: var(--text-muted);">Duración: {{ $srv->duration_minutes }} min</span>
                        </div>
                    </label>
                @endforeach
            </div>
        @endif
    </div>

    <!-- Horarios de Trabajo -->
    <div class="glass" style="padding: 1.5rem; border-radius: var(--radius-md); margin-bottom: 2rem;">
        <h3 style="font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; color: var(--primary-color);">Horarios y Días de Trabajo</h3>
        <p style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1.5rem;">Define qué días trabaja el empleado y en qué rango horario.</p>
        
        @php
            $days = [
                1 => 'Lunes', 2 => 'Martes', 3 => 'Miércoles',
                4 => 'Jueves', 5 => 'Viernes', 6 => 'Sábado', 0 => 'Domingo'
            ];
        @endphp

        <div style="display: flex; flex-direction: column; gap: 1rem;">
            @foreach($days as $val => $label)
                <div style="display: grid; grid-template-columns: 2fr 3fr 3fr; gap: 1rem; align-items: center; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-color);">
                    <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none; font-weight: 600;">
                        <input type="checkbox" name="schedules[{{ $val }}][active]" value="1" 
                            {{ (is_array(old('schedules')) && isset(old('schedules')[$val]['active'])) || (!is_array(old('schedules')) && $val >= 1 && $val <= 5) ? 'checked' : '' }} 
                            onchange="toggleDayInputs(this, {{ $val }})"
                            style="width: 18px; height: 18px; accent-color: var(--primary-color);">
                        <span>{{ $label }}</span>
                    </label>

                    <div id="start-time-wrapper-{{ $val }}">
                        <label class="form-label" style="font-size: 0.8rem; margin-bottom: 0.25rem;">Hora de Entrada</label>
                        <input type="time" name="schedules[{{ $val }}][start_time]" 
                            value="{{ old('schedules.'.$val.'.start_time', '09:00') }}" 
                            class="form-control" style="padding: 0.4rem 0.75rem;">
                    </div>

                    <div id="end-time-wrapper-{{ $val }}">
                        <label class="form-label" style="font-size: 0.8rem; margin-bottom: 0.25rem;">Hora de Salida</label>
                        <input type="time" name="schedules[{{ $val }}][end_time]" 
                            value="{{ old('schedules.'.$val.'.end_time', '17:00') }}" 
                            class="form-control" style="padding: 0.4rem 0.75rem;">
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <!-- Acciones -->
    <div style="display: flex; gap: 1rem;">
        <button type="submit" class="btn btn-primary">Guardar Empleado</button>
        <a href="{{ route('admin.staff.index') }}" class="btn btn-outline">Cancelar</a>
    </div>
</form>

<script>
function toggleDayInputs(checkbox, day) {
    const startInput = document.querySelector(`input[name="schedules[${day}][start_time]"]`);
    const endInput = document.querySelector(`input[name="schedules[${day}][end_time]"]`);
    if (checkbox.checked) {
        startInput.removeAttribute('disabled');
        endInput.removeAttribute('disabled');
        startInput.style.opacity = '1';
        endInput.style.opacity = '1';
    } else {
        startInput.setAttribute('disabled', 'true');
        endInput.setAttribute('disabled', 'true');
        startInput.style.opacity = '0.5';
        endInput.style.opacity = '0.5';
    }
}

// Run onload to initialize disables
document.addEventListener('DOMContentLoaded', function() {
    @foreach($days as $val => $label)
        toggleDayInputs(document.querySelector(`input[name="schedules[{{ $val }}][active]"]`), {{ $val }});
    @endforeach
});
</script>
@endsection