@extends('layouts.layouts')
@section('title', 'Registrar Recarga')

@section('styles')
    <style>
        .container-custom {
            max-width: 1200px;
            margin: 0 auto;
            padding: 24px;
        }

        .card-recarga {
            background-color: #fff;
            padding: 24px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .alert {
            padding: 16px;
            margin-bottom: 16px;
            border-left: 4px solid;
            border-radius: 4px;
        }

        .alert-success {
            background-color: #d1fae5;
            border-color: #10b981;
            color: #065f46;
        }

        .alert-error {
            background-color: #fee2e2;
            border-color: #ef4444;
            color: #b91c1c;
        }

        .alert-warning {
            background-color: #fffbeb;
            border-color: #f59e0b;
            color: #92400e;
            white-space: pre-line;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-bottom: 24px;
        }

        .input-field {
            flex: 1;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 8px;
            width: 100%;
        }

        .search-button {
            padding: 8px 16px;
            background-color: #3b82f6;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .search-button:hover {
            background-color: #2563eb;
        }

        .info-box {
            background-color: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 24px;
            margin-bottom: 32px;
        }

        .info-box h3 {
            font-size: 1.25rem;
            font-weight: bold;
            margin-bottom: 16px;
            border-bottom: 1px solid #d1d5db;
            padding-bottom: 8px;
        }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px 32px;
        }

        .info-item p:first-of-type {
            color: #6b7280;
            font-size: 0.875rem;
            text-transform: uppercase;
            margin: 0;
        }

        .info-item p:last-of-type {
            font-weight: 600;
            color: #1f2937;
            margin: 0;
        }

        .form-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }

        .form-grid label {
            display: block;
            font-size: 0.875rem;
            font-weight: 500;
            color: #374151;
            margin-bottom: 4px;
        }

        .form-grid .checkbox-label {
            display: flex;
            align-items: center;
            margin-top: 16px;
        }

        .form-grid .checkbox-input {
            height: 16px;
            width: 16px;
            color: #3b82f6;
            border-radius: 4px;
            margin-right: 8px;
        }

        .submit-button {
            padding: 12px 24px;
            background-color: #1f2937;
            color: #fff;
            font-weight: bold;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            border: none;
            margin-top: 24px;
        }

        .submit-button:hover {
            background-color: #111827;
        }

        .error-message {
            color: #ef4444;
            font-size: 0.875rem;
            margin-top: 4px;
        }

        /* Add the new mobile-first CSS here */
        @media (max-width: 768px) {
            .container-custom {
                padding: 16px;
            }

            .card-recarga {
                padding: 16px;
            }

            .info-grid {
                grid-template-columns: 1fr;
                gap: 24px;
            }

            .info-item p:first-of-type {
                font-size: 0.95rem;
                font-weight: 600;
            }

            .info-item p:last-of-type {
                font-size: 1rem;
            }

            .form-grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .form-grid label {
                font-size: 1rem;
            }

            .input-field {
                width: 100%;
                padding: 10px;
            }

            .form-group {
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 8px !important;
            }

            .search-button {
                width: 100%;
                padding: 12px;
            }

            .submit-button {
                width: 100%;
                padding: 16px;
            }
        }
    </style>
    </style>
@endsection

@section('mainPage')
    <div class="container-custom">
        <div class="card-recarga">

            @if (session('success'))
                <div class="alert alert-success" role="alert">
                    {{ session('success') }}
                </div>
            @endif

            @if (session('error'))
                <div class="alert alert-error" role="alert">
                    {{ session('error') }}
                </div>
            @endif

            @if (session('alert'))
                <div class="alert alert-warning" role="alert">
                    {{ session('alert') }}
                </div>
            @endif

            <form action="{{ route('recargas.buscar') }}" method="POST" class="mb-8">
                @csrf
                <div class="form-group" style="flex-direction: row; align-items: center;">
                    <label for="busqueda">Buscar Vehículo por Placa o Cédula:</label>
                    <input type="text" id="busqueda" name="busqueda" class="input-field"
                        placeholder="Placa o Cédula de Carrocería" value="{{ old('busqueda') }}" required>
                    <button type="submit" class="search-button">
                        Buscar
                    </button>
                </div>
                @error('busqueda')
                    <div class="error-message">{{ $message }}</div>
                @enderror
            </form>

            @isset($vehiculo)
                <div class="info-box">
                    <h3>Información del Vehículo</h3>
                    <div class="info-grid">
                        <div class="info-item">
                            <p>Placa</p>
                            <p>{{ $vehiculo->placa }}</p>
                        </div>
                        <div class="info-item">
                            <p>Cedula</p>
                            <p>{{ $vehiculo->cedula }}</p>
                        </div>
                        <div class="info-item">
                            <p>Marca</p>
                            <p>{{ $vehiculo->marca }}</p>
                        </div>
                        <div class="info-item">
                            <p>Modelo</p>
                            <p>{{ $vehiculo->modelo }}</p>
                        </div>
                        <div class="info-item">
                            <p>Serial Carrocería</p>
                            <p>{{ $vehiculo->serial_carroceria }}</p>
                        </div>
                        <div class="info-item">
                            <p>Clase</p>
                            <p>{{ $vehiculo->clase ?? 'NO REGISTRADA' }}</p>
                        </div>
                        <div class="info-item">
                            <p>Flota</p>
                            <p>{{ $vehiculo->flota }}</p>
                        </div>
                        <div class="info-item">
                            <p>Año</p>
                            <p>{{ $vehiculo->ano }}</p>
                        </div>
                        <div class="info-item">
                            <p>Color</p>
                            <p>{{ $vehiculo->color }}</p>
                        </div>
                        <div class="info-item">
                            <p>Estatus</p>
                            <p>{{ ucfirst($vehiculo->estatus) }}</p>
                        </div>
                        <div class="info-item">
                            <p>Tipo de Combustible</p>
                            <p>{{ $vehiculo->tipo_combustible }}</p>
                        </div>
                        <div class="info-item">
                            <p>Último Kilometraje</p>
                            <p>{{ $vehiculo->ultimo_kilometraje ?? 'NO REGISTRADO' }}</p>
                        </div>
                        <div class="info-item">
                            <p>Dependencia</p>
                            <p>{{ $vehiculo->dependencia->nombre ?? 'NO ASIGNADA' }}</p>
                        </div>
                        <div class="info-item">
                            <p>Capacidad Tanque 1</p>
                            <p>{{ $vehiculo->capacidad_tanque_1 ?? 'NO REGISTRADO' }} LITROS</p>
                        </div>
                        <div class="info-item">
                            <p>Capacidad Tanque 2</p>
                            <p>{{ $vehiculo->capacidad_tanque_2 ?? 'NO POSEE' }}</p>
                        </div>
                        <div class="info-item">
                            <p>Acueducto</p>
                            <p>{{ $vehiculo->dependencia->acueducto->nombre ?? 'NO ASIGNADO' }}</p>
                        </div>
                        <div class="info-item">
                            <p>Odómetro</p>
                            {{-- Aquí mostramos el estado actual --}}
                            <p>{{ $vehiculo->sirve_odometro ? 'SIRVE' : 'NO SIRVE' }}</p>
                        </div>
                    </div>
                </div>

                <form action="{{ route('recargas.store') }}" method="POST">
                    @csrf
                    <input type="hidden" name="vehiculo_id" value="{{ $vehiculo->id }}">
                    <div class="info-box">
                        <div class="form-grid">
                            <div>
                                <label for="estacion_id">Estación de Servicio</label>
                                <select id="estacion_id" name="estacion_id" class="input-field">
                                    <option value="">Seleccione una estación</option>
                                    @foreach ($estaciones as $estacion)
                                        <option value="{{ $estacion->id }}">{{ $estacion->nombre }}</option>
                                    @endforeach
                                </select>
                                @error('estacion_id')
                                    <div class="error-message">{{ $message }}</div>
                                @enderror
                            </div>

                            <div>
                                <label for="pcp_id">PCP</label>
                                <select id="pcp_id" name="pcp_id" class="input-field" disabled required>
                                    <option value="">Seleccione un PCP</option>
                                </select>
                                @error('pcp_id')
                                    <div class="error-message">{{ $message }}</div>
                                @enderror
                            </div>

                            <div>
                                <label for="fecha">Fecha</label>
                                <input type="date" id="fecha" name="fecha" value="{{ old('fecha') }}"
                                    class="input-field">
                                @error('fecha')
                                    <div class="error-message">{{ $message }}</div>
                                @enderror
                            </div>

                            <div>
                                <label for="hora">Hora</label>
                                <input type="time" id="hora" name="hora" value="{{ old('hora') }}"
                                    class="input-field">
                                @error('hora')
                                    <div class="error-message">{{ $message }}</div>
                                @enderror
                            </div>

                            <div>
                                <label for="kilometraje_nuevo">Kilometraje Actual</label>
                                <input type="number" id="kilometraje_nuevo" name="kilometraje_nuevo"
                                    value="{{ old('kilometraje_nuevo') }}" class="input-field" placeholder="Ejem. 150000"
                                    min="{{ $vehiculo->ultimo_kilometraje ?? 0 }}" required>
                                @error('kilometraje_nuevo')
                                    <div class="error-message">{{ $message }}</div>
                                @enderror
                            </div>

                            <div>
                                <label for="litros">Cantidad de la Recarga (litros)</label>
                                <input type="number" id="litros" name="litros" value="{{ old('litros') }}"
                                    class="input-field" placeholder="Ejem. 50" min="1" step="0.01" required>
                                @error('litros')
                                    <div class="error-message">{{ $message }}</div>
                                @enderror
                            </div>

                            <div style="display: flex; align-items: flex-end;">
                                <label for="es_ticket" class="checkbox-label">
                                    <input type="checkbox" id="es_ticket" name="es_ticket" value="1"
                                        class="checkbox-input">
                                    Recarga por Ticket
                                </label>
                            </div>
                            {{-- Aquí añadimos la lógica condicional para el checkbox --}}
                            @if ($vehiculo->sirve_odometro === null)
                                <div>
                                    <label for="sirve_odometro" class="checkbox-label">
                                        <input type="checkbox" id="sirve_odometro" name="sirve_odometro" value="0"
                                            class="checkbox-input" {{ old('sirve_odometro') ? 'checked' : '' }}>
                                        Si odometro NO sirve, marcar
                                    </label>
                                    {{-- Si el checkbox no se marca, se guardará como 1 (Verdadero, Sí Sirve) --}}
                                    <input type="hidden" name="_sirve_odometro_default" value="1">
                                </div>
                            @else
                                {{-- Si ya tiene un valor, lo mostramos como oculto para enviarlo --}}
                                <input type="hidden" name="sirve_odometro" value="{{ $vehiculo->sirve_odometro }}">
                            @endif
                            {{-- Fin lógica condicional "Sirve Odómetro" --}}
                        </div>
                        <div>
                            <button type="submit" class="submit-button">
                                Aplicar Recarga
                            </button>
                        </div>
                    </div>
                </form>
            @endisset
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const estacionSelect = document.getElementById('estacion_id');
            const pcpSelect = document.getElementById('pcp_id');

            estacionSelect.addEventListener('change', function() {
                const estacionId = this.value;
                pcpSelect.innerHTML = '<option value="">Cargando...</option>';
                pcpSelect.disabled = true;

                if (estacionId) {
                    // Fetchea los miembros de la estación seleccionada.
                    // Según columna estaciones_servicio_id en la bd, tabla 'pcp'
                    fetch(`/pcp/by-estacion/${estacionId}`)
                        .then(response => response.json())
                        .then(data => {
                            pcpSelect.innerHTML = '<option value="">Seleccione un PCP</option>';
                            data.forEach(pcp => {
                                const option = document.createElement('option');
                                option.value = pcp.id;
                                option.textContent = pcp.nombre_completo + ' (' + pcp.cedula +
                                    ')';
                                pcpSelect.appendChild(option);
                            });
                            pcpSelect.disabled = false;
                        })
                        .catch(error => {
                            console.error('Error fetching PCP:', error);
                            pcpSelect.innerHTML = '<option value="">Error al cargar</option>';
                        });
                } else {
                    pcpSelect.innerHTML = '<option value="">Seleccione un PCP</option>';
                }
            });
        });
    </script>
@endsection