@extends('layouts.index', ['subHeader' => 'Editar Registro de Road Safety'])

@section('header')
    <a href="{{ route('home') }}" class="text-decoration-none text-dark">Dashboard</a>
    <a href="{{ route('road_safety.index') }}" class="text-decoration-none text-dark"> / Road Safety Platform</a>
    <span> / Editar registro #{{ $registro->id }}</span>
@endsection

@section('content')
    {{-- Botón para volver a la página de índice, fuera del contenedor del formulario --}}
    <div class="d-flex justify-content-end mb-4">
        <a href="{{ route('road_safety.index') }}" class="btn btn-enviar btn-lg">
            <i class="bi bi-arrow-left-circle-fill"></i> Atrás
        </a>
    </div>

    {{-- El FORMULARIO ENVUELVE TODO EL CONTENEDOR --}}
    {{-- CAMBIO 1: La acción apunta a la ruta 'update' y se pasa el ID del registro --}}
    <form action="{{ route('road_safety.update', $registro->id) }}" method="POST">
        @csrf
        @method('PUT') {{-- CAMBIO 2: Indicamos que es una petición PUT para la actualización --}}

        {{-- CONTENEDOR ÚNICO PARA TODO EL FORMULARIO --}}
        <div class="container-fluid shadow-s p-4 rounded">

            {{-- CAMBIO 3: Título actualizado para reflejar la acción de edición --}}
            <h1 class="fs-3 fw-bolder mb-4">Editar Registro de Road Safety Platform</h1>

            @if ($errors->any())
                <div class="alert alert-danger">
                    <strong>¡Ups! Hubo algunos problemas con tu entrada.</strong>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            {{-- SECCIÓN 1: DATOS GENERALES --}}
            {{-- Los valores de los campos ahora usan old('campo', $registro->campo) --}}
            <div class="row g-3">
                <div class="col-md-3">
                    <label for="site" class="form-label fw-bolder">Site</label>
                    <select name="site" id="site" class="form-select fromcss form-select-lg" data-control="select2" required>
                        <option value="">Seleccione un sitio...</option>
                        @foreach (\App\Models\LeadingSafetyPlatform\RoadSafetyPlatform::SITES as $key => $site)
                            <option value="{{ $key }}" {{ old('site', $registro->site) == $key ? 'selected' : '' }}>{{ $site }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="type" class="form-label fw-bolder">Type</label>
                    <select name="type" id="type" class="form-select fromcss form-select-lg" data-control="select2" required>
                        <option value="">Seleccione un tipo...</option>
                        @foreach (\App\Models\LeadingSafetyPlatform\RoadSafetyPlatform::TYPES as $key => $type)
                            <option value="{{ $key }}" {{ old('type', $registro->type) == $key ? 'selected' : '' }}>{{ $type }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="year" class="form-label fw-bolder">Year</label>
                    <input type="number" name="year" id="year" class="form-control form-control-lg" placeholder="Ej: {{ date('Y') }}" value="{{ old('year', $registro->year) }}" required>
                </div>
                <div class="col-md-3">
                    <label for="month" class="form-label fw-bolder">Month</label>
                    <select name="month" id="month" class="form-select fromcss form-select-lg" data-control="select2" required>
                        <option value="">Seleccione un mes...</option>
                        @foreach (\App\Models\LeadingSafetyPlatform\RoadSafetyPlatform::MONTHS as $key => $month)
                            <option value="{{ $key }}" {{ old('month', $registro->month) == $key ? 'selected' : '' }}>{{ $month }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            {{-- Separador visual entre secciones --}}
            <hr class="my-4">

            {{-- SECCIÓN 2: CONTEO DE VEHÍCULOS --}}
            <h2 class="fs-5 fw-bolder">Conteo de Vehículos</h2>
            <div class="row g-3 mt-2">
                <div class="col-md-4">
                    <label for="gasoil_cars" class="form-label fw-bolder">Gasoil Cars</label>
                    <input type="number" name="gasoil_cars" id="gasoil_cars" class="form-control form-control-lg" placeholder="0" value="{{ old('gasoil_cars', $registro->gasoil_cars) }}" min="0" required>
                </div>
                <div class="col-md-4">
                    <label for="hybrid_cars" class="form-label fw-bolder">Hybrid Cars</label>
                    <input type="number" name="hybrid_cars" id="hybrid_cars" class="form-control form-control-lg" placeholder="0" value="{{ old('hybrid_cars', $registro->hybrid_cars) }}" min="0" required>
                </div>
                <div class="col-md-4">
                    <label for="total_cars" class="form-label fw-bolder">Total Cars</label>
                    <input type="number" name="total_cars" id="total_cars" class="form-control form-control-lg" placeholder="Calculado automáticamente" value="{{ old('total_cars', $registro->total_cars) }}" readonly tabindex="-1">
                </div>
            </div>
            
            {{-- Separador visual entre secciones --}}
            <hr class="my-4">
            
            {{-- SECCIÓN 3: ACCIDENTES Y CONDUCTORES --}}
            <h2 class="fs-5 fw-bolder">Accidentes y Conductores</h2>
            <div class="row g-3 mt-2">
                 <div class="col-md-3">
                    <label for="preventable_accidents" class="form-label fw-bolder">Preventable Accidents</label>
                    <input type="number" name="preventable_accidents" id="preventable_accidents" class="form-control form-control-lg" placeholder="0" value="{{ old('preventable_accidents', $registro->preventable_accidents) }}" min="0" required>
                </div>
                <div class="col-md-3">
                    <label for="non_preventable_accidents" class="form-label fw-bolder">Non-Preventable Accidents</label>
                    <input type="number" name="non_preventable_accidents" id="non_preventable_accidents" class="form-control form-control-lg" placeholder="0" value="{{ old('non_preventable_accidents', $registro->non_preventable_accidents) }}" min="0" required>
                </div>
                <div class="col-md-3">
                    <label for="frequent_drivers_count" class="form-label fw-bolder">Frequent Drivers</label>
                    <input type="number" name="frequent_drivers_count" id="frequent_drivers_count" class="form-control form-control-lg" placeholder="0" value="{{ old('frequent_drivers_count', $registro->frequent_drivers_count) }}" min="0" required>
                </div>
                <div class="col-md-3">
                    <label for="occasional_drivers_count" class="form-label fw-bolder">Occasional Drivers</label>
                    <input type="number" name="occasional_drivers_count" id="occasional_drivers_count" class="form-control form-control-lg" placeholder="Calculado automáticamente" value="{{ old('occasional_drivers_count', $registro->occasional_drivers_count) }}" readonly tabindex="-1">
                </div>
            </div>

            {{-- Separador visual entre secciones --}}
            <hr class="my-4">

            {{-- SECCIÓN 4: INDICADORES Y EMISIONES --}}
            <h2 class="fs-5 fw-bolder">Indicadores y Emisiones</h2>
            <div class="row g-3 mt-2">
                 <div class="col-md-4">
                    <label for="high_risk_drivers_count" class="form-label fw-bolder">High Risk Drivers</label>
                    <input type="number" name="high_risk_drivers_count" id="high_risk_drivers_count" class="form-control form-control-lg" placeholder="0" value="{{ old('high_risk_drivers_count', $registro->high_risk_drivers_count) }}" min="0" required>
                </div>
                <div class="col-md-4">
                    <label for="annual_training_count" class="form-label fw-bolder">Annual Training</label>
                    <input type="number" name="annual_training_count" id="annual_training_count" class="form-control form-control-lg" placeholder="0" value="{{ old('annual_training_count', $registro->annual_training_count) }}" min="0" required>
                </div>
                <div class="col-md-4">
                    <label for="btw_certifications_count" class="form-label fw-bolder">BTW Certifications</label>
                    <input type="number" name="btw_certifications_count" id="btw_certifications_count" class="form-control form-control-lg" placeholder="0" value="{{ old('btw_certifications_count', $registro->btw_certifications_count) }}" min="0" required>
                </div>
                <div class="col-md-4">
                    <label for="rsc_count" class="form-label fw-bolder">RSC</label>
                    <input type="number" name="rsc_count" id="rsc_count" class="form-control form-control-lg" placeholder="0" value="{{ old('rsc_count', $registro->rsc_count) }}" min="0" required>
                </div>
                <div class="col-md-4">
                    <label for="average_co2_emission" class="form-label fw-bolder">Avg. CO2 Emission</label>
                    <input type="number" name="average_co2_emission" id="average_co2_emission" class="form-control form-control-lg" placeholder="0" value="{{ old('average_co2_emission', $registro->average_co2_emission) }}" min="0" required>
                </div>
            </div>

            {{-- SECCIÓN FINAL: BOTONES DE ACCIÓN --}}
            <div class="row mt-4">
                <div class="col-12 d-flex justify-content-end">
                    <a href="{{ route('road_safety.index') }}" class="btn btn-lg btn-cancelar me-3">Cancelar</a>
                    {{-- El botón puede decir "Actualizar" para más claridad --}}
                    <button type="submit" class="btn btn-lg btn-enviar">Actualizar Registro</button>
                </div>
            </div>

        </div>
    </form>
@endsection

@section('js')
<script>
    $(document).ready(function() {
        const gasoilInput = $('#gasoil_cars');
        const hybridInput = $('#hybrid_cars');
        const totalInput = $('#total_cars');
        const frequentInput = $('#frequent_drivers_count');
        const occasionalInput = $('#occasional_drivers_count');

        function updateCalculations() {
            const gasoilCount = parseInt(gasoilInput.val(), 10) || 0;
            const hybridCount = parseInt(hybridInput.val(), 10) || 0;
            const frequentCount = parseInt(frequentInput.val(), 10) || 0;

            const totalCars = gasoilCount + hybridCount;
            totalInput.val(totalCars);

            const occasionalDrivers = Math.max(0, totalCars - frequentCount);
            occasionalInput.val(occasionalDrivers);
        }
        
        const inputsToWatch = [gasoilInput, hybridInput, frequentInput];
        inputsToWatch.forEach(function(input) {
            input.on('input', updateCalculations);
        });

        updateCalculations();
    });
</script>
@endsection