@extends('layouts.app')

@section('title', $item ? 'Editar Peaje' : 'Nuevo Peaje')
@section('page-title', $item ? 'Editar Peaje' : 'Nuevo Peaje')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('web.catalogos.index') }}">Catálogos</a></li>
<li class="breadcrumb-item"><a href="{{ route('web.catalogos.peajes') }}">Peajes</a></li>
<li class="breadcrumb-item active">{{ $item ? 'Editar' : 'Nuevo' }}</li>
@endsection

@push('styles')
<link href="{{ asset('assets/css/mantenimientos.css') }}" rel="stylesheet">
<style>
    .form-container { max-width: 650px; margin: 0 auto; }
    .form-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
    .form-card-header { padding: 1rem 1.5rem; background: #f8fafc; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; gap: 0.75rem; }
    .form-card-header .icon-box { width: 36px; height: 36px; background: #ea580c; color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
    .form-card-header h5 { margin: 0; font-size: 1rem; font-weight: 600; color: #1a3a5c; }
    .form-card-body { padding: 1.5rem; }
    .form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-bottom: 1.25rem; }
    @media (max-width: 576px) { .form-row { grid-template-columns: 1fr; } }
    .form-row .full-width { grid-column: 1 / -1; }
    .form-group { margin-bottom: 0; }
    .form-label-custom { font-size: 0.8rem; font-weight: 600; color: #475569; margin-bottom: 0.375rem; display: block; }
    .form-label-custom .required { color: #ef4444; margin-left: 0.25rem; }
    .form-control-custom { border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.625rem 0.875rem; font-size: 0.9rem; width: 100%; }
    .form-control-custom:focus { border-color: #1a3a5c; box-shadow: 0 0 0 3px rgba(26, 58, 92, 0.1); outline: none; }
    .checkbox-custom { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer; }
    .checkbox-custom:hover { background: #f8fafc; border-color: #cbd5e1; }
    .checkbox-custom.checked { background: rgba(26, 58, 92, 0.04); border-color: #1a3a5c; }
    .checkbox-custom input { display: none; }
    .checkbox-box { width: 22px; height: 22px; border: 2px solid #e2e8f0; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
    .checkbox-custom.checked .checkbox-box { background: #1a3a5c; border-color: #1a3a5c; color: #fff; }
    .checkbox-info h6 { margin: 0; font-size: 0.9rem; font-weight: 600; color: #1a3a5c; }
    .checkbox-info span { font-size: 0.75rem; color: #64748b; }
    .estado-toggle { display: flex; gap: 1rem; }
    .estado-option { flex: 1; display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border: 2px solid #e2e8f0; border-radius: 8px; cursor: pointer; }
    .estado-option input { display: none; }
    .estado-option.activo.selected { border-color: #059669; background: rgba(5, 150, 105, 0.04); }
    .estado-option.inactivo.selected { border-color: #dc2626; background: rgba(220, 38, 38, 0.04); }
    .estado-radio { width: 18px; height: 18px; border: 2px solid #e2e8f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
    .estado-option.activo.selected .estado-radio { border-color: #059669; background: #059669; }
    .estado-option.inactivo.selected .estado-radio { border-color: #dc2626; background: #dc2626; }
    .estado-radio::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; display: none; }
    .estado-option.selected .estado-radio::after { display: block; }
    .estado-label { font-size: 0.85rem; font-weight: 500; color: #475569; }
    .estado-option.activo.selected .estado-label { color: #059669; }
    .estado-option.inactivo.selected .estado-label { color: #dc2626; }
    .form-actions { display: flex; gap: 0.75rem; justify-content: flex-end; padding: 1.25rem 1.5rem; background: #f8fafc; border-top: 1px solid #e2e8f0; }
    .coords-info { font-size: 0.75rem; color: #94a3b8; margin-top: 0.25rem; }
</style>
@endpush

@section('content')
<div class="form-container">
    <form action="{{ $item ? route('web.catalogos.peajes.update', $item->id_centro) : route('web.catalogos.peajes.store') }}" method="POST">
        @csrf
        @if($item) @method('PUT') @endif

        <div class="form-card">
            <div class="form-card-header">
                <div class="icon-box"><i class="fas fa-building"></i></div>
                <h5>{{ $item ? 'Editar Peaje' : 'Nuevo Peaje' }}</h5>
            </div>

            <div class="form-card-body">
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label-custom">Número de Peaje <span class="required">*</span></label>
                        <input type="number" name="num_peaje" class="form-control form-control-custom @error('num_peaje') is-invalid @enderror"
                               value="{{ old('num_peaje', $item->num_peaje ?? '') }}" required min="1">
                        @error('num_peaje')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-group">
                        <label class="form-label-custom">Concesión <span class="required">*</span></label>
                        <select name="id_concesion" class="form-select form-control-custom @error('id_concesion') is-invalid @enderror" required>
                            <option value="">Seleccionar...</option>
                            @foreach($concesiones as $concesion)
                            <option value="{{ $concesion->id_concesion }}"
                                {{ old('id_concesion', $item->id_concesion ?? '') == $concesion->id_concesion ? 'selected' : '' }}>
                                {{ $concesion->nombre }}
                            </option>
                            @endforeach
                        </select>
                        @error('id_concesion')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-group full-width">
                        <label class="form-label-custom">Nombre del Centro <span class="required">*</span></label>
                        <input type="text" name="nombre_centro" class="form-control form-control-custom @error('nombre_centro') is-invalid @enderror"
                               value="{{ old('nombre_centro', $item->nombre_centro ?? '') }}" required placeholder="Ej: Peaje Norte Quito">
                        @error('nombre_centro')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-group">
                        <label class="form-label-custom">Latitud</label>
                        <input type="text" name="latitud" class="form-control form-control-custom @error('latitud') is-invalid @enderror"
                               value="{{ old('latitud', $item->latitud ?? '') }}" placeholder="-0.180653">
                        <div class="coords-info">Ej: -0.180653</div>
                        @error('latitud')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-group">
                        <label class="form-label-custom">Longitud</label>
                        <input type="text" name="longitud" class="form-control form-control-custom @error('longitud') is-invalid @enderror"
                               value="{{ old('longitud', $item->longitud ?? '') }}" placeholder="-78.467838">
                        <div class="coords-info">Ej: -78.467838</div>
                        @error('longitud')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-group">
                        <label class="form-label-custom">Frecuencia Mantenimiento (días)</label>
                        <input type="number" name="frecuencia_mant" class="form-control form-control-custom @error('frecuencia_mant') is-invalid @enderror"
                               value="{{ old('frecuencia_mant', $item->frecuencia_mant ?? 30) }}" min="1">
                        @error('frecuencia_mant')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-group full-width">
                        <label class="checkbox-custom {{ old('mantenimiento', $item->mantenimiento ?? false) ? 'checked' : '' }}"
                               id="checkbox-mant" onclick="toggleCheckbox('mant')">
                            <input type="checkbox" name="mantenimiento" value="1"
                                   {{ old('mantenimiento', $item->mantenimiento ?? false) ? 'checked' : '' }}>
                            <span class="checkbox-box"><i class="fas fa-check"></i></span>
                            <div class="checkbox-info">
                                <h6><i class="fas fa-wrench me-1"></i> Habilitado para Mantenimiento</h6>
                                <span>Este peaje aparecerá en la programación de mantenimientos</span>
                            </div>
                        </label>
                    </div>

                    @if($item)
                    <div class="form-group full-width">
                        <label class="form-label-custom">Estado <span class="required">*</span></label>
                        <div class="estado-toggle">
                            <label class="estado-option activo {{ old('estado', $item->estado) == 1 ? 'selected' : '' }}" onclick="selectEstado(1)">
                                <input type="radio" name="estado" value="1" {{ old('estado', $item->estado) == 1 ? 'checked' : '' }}>
                                <span class="estado-radio"></span>
                                <span class="estado-label"><i class="fas fa-check-circle me-1"></i> Activo</span>
                            </label>
                            <label class="estado-option inactivo {{ old('estado', $item->estado) == 0 ? 'selected' : '' }}" onclick="selectEstado(0)">
                                <input type="radio" name="estado" value="0" {{ old('estado', $item->estado) == 0 ? 'checked' : '' }}>
                                <span class="estado-radio"></span>
                                <span class="estado-label"><i class="fas fa-times-circle me-1"></i> Inactivo</span>
                            </label>
                        </div>
                    </div>
                    @endif
                </div>
            </div>

            <div class="form-actions">
                <a href="{{ route('web.catalogos.peajes') }}" class="btn btn-outline-secondary"><i class="fas fa-times me-1"></i> Cancelar</a>
                <button type="submit" class="btn btn-success"><i class="fas fa-save me-1"></i> {{ $item ? 'Guardar' : 'Crear' }}</button>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
function toggleCheckbox(id) {
    const wrapper = document.getElementById('checkbox-' + id);
    const checkbox = wrapper.querySelector('input[type="checkbox"]');
    checkbox.checked = !checkbox.checked;
    wrapper.classList.toggle('checked', checkbox.checked);
}

function selectEstado(valor) {
    document.querySelectorAll('.estado-option').forEach(opt => opt.classList.remove('selected'));
    const radio = document.querySelector('input[name="estado"][value="' + valor + '"]');
    radio.checked = true;
    radio.closest('.estado-option').classList.add('selected');
}
</script>
@endpush