@extends('admin.layouts.master')

@section('title', 'Bloquear Horario - Lash Vanshy')

@section('page-title', 'Bloquear Horario')

@section('content')
<!-- Breadcrumb -->
<nav aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{{ route('admin.horarios.index') }}">Horarios Bloqueados</a></li>
        <li class="breadcrumb-item active" aria-current="page">Bloquear Horario</li>
    </ol>
</nav>

<div class="row">
    <div class="col-lg-8">
        <div class="card-admin">
            <div class="card-header">
                <i class="fas fa-ban me-2"></i>Bloquear Horario
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('admin.horarios.store') }}">
                    @csrf
                    
                    <div class="row">
                        <!-- Fecha -->
                        <div class="col-md-6 mb-3">
                            <label for="fecha" class="form-label">
                                Fecha <span class="text-danger">*</span>
                            </label>
                            <input type="date" 
                                   class="form-control @error('fecha') is-invalid @enderror" 
                                   id="fecha" 
                                   name="fecha" 
                                   value="{{ old('fecha') }}"
                                   min="{{ date('Y-m-d') }}"
                                   required>
                            @error('fecha')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @else
                            <small class="text-muted">
                                <i class="fas fa-info-circle me-1"></i>
                                No se podrán agendar citas en esta fecha
                            </small>
                            @enderror
                        </div>
                    </div>
                    
                    <div class="row">
                        <!-- Hora Inicio -->
                        <div class="col-md-6 mb-3">
                            <label for="hora_inicio" class="form-label">
                                Hora de Inicio <span class="text-danger">*</span>
                            </label>
                            <select class="form-select @error('hora_inicio') is-invalid @enderror" 
                                    id="hora_inicio" 
                                    name="hora_inicio"
                                    required>
                                <option value="">Seleccionar hora</option>
                                @for($hora = 9; $hora < 19; $hora++)
                                <option value="{{ sprintf('%02d:00:00', $hora) }}" 
                                        {{ old('hora_inicio') == sprintf('%02d:00:00', $hora) ? 'selected' : '' }}>
                                    {{ sprintf('%02d:00', $hora) }} AM
                                </option>
                                @endfor
                                @for($hora = 12; $hora < 19; $hora++)
                                <option value="{{ sprintf('%02d:00:00', $hora) }}" 
                                        {{ old('hora_inicio') == sprintf('%02d:00:00', $hora) ? 'selected' : '' }}>
                                    {{ $hora > 12 ? sprintf('%02d:00', $hora - 12) : sprintf('%02d:00', $hora) }}:00 {{ $hora >= 12 ? 'PM' : 'AM' }}
                                </option>
                                @endfor
                            </select>
                            @error('hora_inicio')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <!-- Hora Fin -->
                        <div class="col-md-6 mb-3">
                            <label for="hora_fin" class="form-label">
                                Hora de Fin <span class="text-danger">*</span>
                            </label>
                            <select class="form-select @error('hora_fin') is-invalid @enderror" 
                                    id="hora_fin" 
                                    name="hora_fin"
                                    required>
                                <option value="">Seleccionar hora</option>
                                @for($hora = 9; $hora < 19; $hora++)
                                <option value="{{ sprintf('%02d:00:00', $hora) }}" 
                                        {{ old('hora_fin') == sprintf('%02d:00:00', $hora) ? 'selected' : '' }}>
                                    {{ sprintf('%02d:00', $hora) }}:00 {{ $hora >= 12 ? 'PM' : 'AM' }}
                                </option>
                                @endfor
                            </select>
                            @error('hora_fin')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @else
                            <small class="text-muted">
                                El bloqueo dura hasta esta hora
                            </small>
                            @enderror
                        </div>
                    </div>
                    
                    <!-- Motivo -->
                    <div class="mb-3">
                        <label for="motivo" class="form-label">Motivo</label>
                        <input type="text" 
                               class="form-control @error('motivo') is-invalid @enderror" 
                               id="motivo" 
                               name="motivo" 
                               value="{{ old('motivo') }}"
                               placeholder="Ej: Vacaciones, Mantenimiento, Evento especial...">
                        @error('motivo')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @else
                        <small class="text-muted">
                            Opcional. Ej: "Vacaciones de Semana Santa"
                        </small>
                        @enderror
                    </div>
                    
                    <!-- Quick Options -->
                    <div class="mb-4">
                        <label class="form-label">Opciones Rápidas</label>
                        <div class="d-flex flex-wrap gap-2">
                            <button type="button" class="btn btn-secondary-admin btn-sm" onclick="bloquearDiaCompleto()">
                                <i class="fas fa-calendar me-2"></i>Bloquear Día Completo
                            </button>
                            <button type="button" class="btn btn-secondary-admin btn-sm" onclick="bloquearManana()">
                                <i class="fas fa-sun me-2"></i>Bloquear Mañana (9am-12pm)
                            </button>
                            <button type="button" class="btn btn-secondary-admin btn-sm" onclick="bloquearTarde()">
                                <i class="fas fa-moon me-2"></i>Bloquear Tarde (12pm-7pm)
                            </button>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between mt-4">
                        <a href="{{ route('admin.horarios.index') }}" class="btn btn-secondary-admin">
                            <i class="fas fa-arrow-left me-2"></i>Volver
                        </a>
                        <button type="submit" class="btn btn-primary-admin">
                            <i class="fas fa-lock me-2"></i>Bloquear Horario
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- Sidebar -->
    <div class="col-lg-4">
        <div class="card-admin mb-3">
            <div class="card-header">
                <i class="fas fa-info-circle me-2"></i>Información
            </div>
            <div class="card-body">
                <ul class="text-muted">
                    <li class="mb-2">Los horarios bloqueados prevents the agendamiento de citas.</li>
                    <li class="mb-2">Puedes bloquear días completos o solo tramos específicos.</li>
                    <li class="mb-2">El bloqueo no afecta las citas ya existentes.</li>
                    <li class="mb-2">Los clientes no podrán ver estos horarios.</li>
                </ul>
            </div>
        </div>
        
        <div class="card-admin">
            <div class="card-header">
                <i class="fas fa-calendar-alt me-2"></i>Horario de Atención
            </div>
            <div class="card-body">
                <ul class="text-muted mb-0">
                    <li>Lunes a Sábado: <strong>9:00 AM - 7:00 PM</strong></li>
                    <li>Último turno: <strong>6:00 PM</strong></li>
                    <li>Duración cita: <strong>60 minutos</strong></li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const hoy = new Date().toISOString().split('T')[0];
document.getElementById('fecha').setAttribute('min', hoy);

function bloquearDiaCompleto() {
    document.getElementById('hora_inicio').value = '09:00:00';
    document.getElementById('hora_fin').value = '19:00:00';
    document.getElementById('motivo').value = 'Día completo bloqueado';
}

function bloquearManana() {
    document.getElementById('hora_inicio').value = '09:00:00';
    document.getElementById('hora_fin').value = '12:00:00';
    document.getElementById('motivo').value = 'Mañana bloqueada';
}

function bloquearTarde() {
    document.getElementById('hora_inicio').value = '12:00:00';
    document.getElementById('hora_fin').value = '19:00:00';
    document.getElementById('motivo').value = 'Tarde bloqueada';
}
</script>
@endpush