@extends('layouts.index', ['subHeader' => 'Nuevo 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> / Nuevo registro</span>
@endsection

@section('content')
    {{-- Botón para volver a la página de índice, fuera del contenedor del formulario --}}
    <div class="row">
        <div class="d-flex w-100 voltearv" style="flex-direction: row-reverse;">
            <div class="w-s">
                <div class="btn-group mb-2">
                    <a href="{{ route('road_safety.uploadView') }}" class="btn btn-enviar btn-lg">
                        <i class="bi bi-file-earmark-spreadsheet"></i> Subir Excel
                    </a>
                </div>
                <div class="btn-group mb-2">
                    <a href="{{ route('road_safety.index') }}" class="btn btn-enviar btn-lg btn-block">
                        <i class="bi bi-arrow-left-circle-fill"></i> Atrás
                    </a>
                </div>
            </div>
        </div>
    </div>
    <br>

    {{-- El FORMULARIO ENVUELVE TODO EL CONTENEDOR --}}
    <form action="{{ route('road_safety.store') }}" method="POST">
        @csrf

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

            {{-- Título principal y bloque de errores --}}
            <h1 class="fs-3 fw-bolder mb-4">Nuevo 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 --}}
            <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') == $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') == $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', date('Y')) }}" 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') == $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', '') }}" 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', '') }}" 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', '') }}" 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', '') }}" 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', '') }}" 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', '') }}" 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', '') }}" 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', '') }}" 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', '') }}" 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', '') }}" 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', '') }}" 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', '') }}" 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>
                    <button type="submit" class="btn btn-lg btn-enviar">Guardar</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