@extends('layouts.yellow')

@section('content')
<style>
    :root {
        --azul-primario: #2A4E6D;
        --azul-secundario: #3B6EA5;
        --azul-destacado: #4A90E2;
        --azul-suave: #E3F2FD;
        --degradado-azul: linear-gradient(135deg, #4A90E2 0%, #2A4E6D 100%);
        --amarillo-primario: #FFD54F;
        --amarillo-secundario: #FFECB3;
        --naranja-destacado: #FF9800;
        --verde-exito: #4CAF50;
        --rojo-error: #F44336;
        --gris-claro: #F5F7FA;
        --gris-medio: #E1E5E9;
        --gris-oscuro: #6C757D;
        --borde-principal: #D0D7DE;
        --sombra-suave: 0 4px 12px rgba(0, 0, 0, 0.05);
        --sombra-media: 0 6px 16px rgba(0, 0, 0, 0.08);
        --sombra-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
        --transicion: all 0.3s ease;
        --fuente-principal: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        --rojo-primario: #c30d0d;
    }

    .schedule-form-container {
        font-family: var(--fuente-principal);
        padding: 20px 0;
    }

    .schedule-form-card {
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #dee2e6;
        box-shadow: var(--sombra-suave);
        transition: var(--transicion);
    }

    .schedule-form-card:hover {
        box-shadow: var(--sombra-media);
    }

    .schedule-form-header {
        background: var(--degradado-azul);
        color: white;
        padding: 15px 20px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .schedule-form-header h5 {
        font-weight: 600;
        margin-bottom: 0;
        font-size: 1.2rem;
    }

    .schedule-form-body {
        padding: 25px;
        background-color: #fff;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: var(--gris-oscuro);
    }

    .form-control {
        display: block;
        width: 100%;
        padding: 10px 12px;
        font-size: 0.95rem;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: 4px;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .form-control:focus {
        color: #495057;
        background-color: #fff;
        border-color: var(--azul-destacado);
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25);
    }

    .form-control.is-invalid {
        border-color: var(--rojo-error);
    }

    .invalid-feedback {
        display: block;
        width: 100%;
        margin-top: 0.25rem;
        font-size: 0.875em;
        color: var(--rojo-error);
    }

    .btn-container {
        display: flex;
        gap: 10px;
        margin-top: 30px;
    }

    .btn-primary {
        background-color: var(--azul-destacado);
        border-color: var(--azul-destacado);
        color: white;
        padding: 8px 20px;
        border-radius: 4px;
        font-weight: 500;
        transition: var(--transicion);
    }

    .btn-primary:hover {
        background-color: var(--azul-secundario);
        border-color: var(--azul-secundario);
        transform: translateY(-2px);
        box-shadow: var(--sombra-suave);
    }

    .btn-secondary {
        background-color: var(--gris-medio);
        border-color: var(--gris-medio);
        color: white;
        padding: 8px 20px;
        border-radius: 4px;
        font-weight: 500;
        transition: var(--transicion);
    }

    .btn-secondary:hover {
        background-color: var(--gris-oscuro);
        border-color: var(--gris-oscuro);
        transform: translateY(-2px);
        box-shadow: var(--sombra-suave);
    }
</style>

<div class="schedule-form-container">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-10">
                <div class="schedule-form-card">
                    <div class="schedule-form-header">
                        <h5>{{ __('doctor-schedules.create_schedule') }}</h5>
                    </div>

                    <div class="schedule-form-body">
                        @if (session('error'))
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                {{ session('error') }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif

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

                            <div class="form-group">
                                <label for="day_of_week" class="form-label">
                                    {{ __('doctor-schedules.form.day_of_week') }}
                                </label>
                                <select id="day_of_week" name="day_of_week" class="form-control @error('day_of_week') is-invalid @enderror" required>
                                    <option value="">{{ __('Select a day') }}</option>
                                    @foreach($dayOptions as $value => $label)
                                        <option value="{{ $value }}" {{ old('day_of_week') == $value ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('day_of_week')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="start_time" class="form-label">
                                    {{ __('doctor-schedules.form.start_time') }}
                                </label>
                                <input id="start_time" type="time" 
                                    class="form-control @error('start_time') is-invalid @enderror" 
                                    name="start_time" value="{{ old('start_time') }}" required>
                                @error('start_time')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="end_time" class="form-label">
                                    {{ __('doctor-schedules.form.end_time') }}
                                </label>
                                <input id="end_time" type="time" 
                                    class="form-control @error('end_time') is-invalid @enderror" 
                                    name="end_time" value="{{ old('end_time') }}" required>
                                @error('end_time')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="timezone" class="form-label">
                                    {{ __('doctor-schedules.form.timezone') }}
                                </label>
                                <select id="timezone" name="timezone" class="form-control @error('timezone') is-invalid @enderror" required>
                                    <option value="America/Caracas" selected>America/Caracas</option>
                                </select>
                                @error('timezone')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="btn-container">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('doctor-schedules.form.submit') }}
                                </button>
                                <a href="{{ route('doctor.schedules.index') }}" class="btn btn-secondary">
                                    {{ __('Cancelar') }}
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Validación de horas
        document.querySelector('form').addEventListener('submit', function(e) {
            const startTime = document.getElementById('start_time').value;
            const endTime = document.getElementById('end_time').value;
            
            if (startTime >= endTime) {
                e.preventDefault();
                alert('La hora de fin debe ser posterior a la hora de inicio');
            }
        });
    });
</script>
@endsection 