@extends('layouts.kaiadmin.master')

@section('content')
<div class="container">
    <h3 class="mb-4">Orden de Trabajo</h3>

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

        <!-- NIC -->
        <div class="form-group mb-3">
            <label>NIC (No. Cuenta)</label>
            <input type="text" name="nic" class="form-control">
        </div>

        <!-- Reporta -->
        <div class="form-group mb-3">
            <label>Reporta el daño</label>
            <input type="text" name="reporta" class="form-control">
        </div>

        <!-- Tipo de Ubicación -->
        <div class="form-group mb-3">
            <label>Tipo de Ubicación</label>
            <select name="tipo_ubicacion" id="tipo_ubicacion" class="form-control" onchange="cambiarModo(this.value)">
                <option value="">Seleccione...</option>
                <option value="U">Urbano</option>
                <option value="S">Sector</option>
            </select>
        </div>

        <!-- URBANO -->
        <div id="urbano_campos" style="display: none;">
            <!-- Calles -->
            <div class="form-group mb-3">
                <label>Calles</label>
                <div class="d-flex align-items-center" id="calle-row">
                    <select name="calles[0]" id="calle-select" class="form-control me-2" onchange="habilitarCalleSiguiente()">
                        <option value="">Seleccione...</option>
                        @for ($i = 0; $i <= 30; $i++)
                            <option value="{{ $i }}a Calle">{{ $i }}a Calle</option>
                        @endfor
                    </select>
                    <button type="button" id="calle-btn-y" class="btn btn-secondary btn-sm me-2" onclick="agregarCalleSiguiente()" disabled>Y</button>
                    <input type="text" readonly name="calles[1]" id="calle-siguiente" class="form-control me-2 d-none">
                    <button type="button" id="calle-btn-quitar" class="btn btn-danger btn-sm d-none" onclick="quitarCalleSiguiente()">Quitar</button>
                </div>
            </div>

            <!-- Avenidas -->
            <div class="form-group mb-3">
                <label>Avenidas</label>
                <div class="d-flex align-items-center" id="avenida-row">
                    <select name="avenidas[0]" id="avenida-select" class="form-control me-2" onchange="habilitarAvenidaSiguiente()">
                        <option value="">Seleccione...</option>
                        @for ($i = 1; $i <= 30; $i++)
                            <option value="{{ $i }}a Avenida">{{ $i }}a Avenida</option>
                        @endfor
                    </select>
                    <button type="button" id="avenida-btn-y" class="btn btn-secondary btn-sm me-2" onclick="agregarAvenidaSiguiente()" disabled>Y</button>
                    <input type="text" readonly name="avenidas[1]" id="avenida-siguiente" class="form-control me-2 d-none">
                    <button type="button" id="avenida-btn-quitar" class="btn btn-danger btn-sm d-none" onclick="quitarAvenidaSiguiente()">Quitar</button>
                </div>
            </div>
        </div>

        <!-- SECTOR -->
        <div id="sector_campos" style="display: none;">
            <div class="form-group mb-3">
                <label>Sector</label>
                <select name="sector" id="sector" class="form-control" onchange="cargarColonias()">
                    <option value="">Seleccione...</option>
                    <option value="Corozo">Corozo</option>
                    <option value="Entre Rios">Entre Rios</option>
                    <option value="Frontera">Frontera</option>
                    <option value="Cerro San Gil">Cerro San Gil</option>
                    <option value="Livingston">Livingston</option>
                    <option value="Manabique">Manabique</option>
                    <option value="Morales">Morales</option>
                    <option value="Puerto Barrios">Puerto Barrios</option>
                </select>
            </div>

            <div class="form-group mb-3">
                <label>Barrio / Colonia</label>
                <select name="colonia" id="colonia" class="form-control"></select>
            </div>
        </div>

        <!-- Otros campos -->
        <div class="form-group mb-3">
            <label>Referencia</label>
            <input type="text" name="referencia" class="form-control">
        </div>

        <div class="form-group mb-3">
            <label>Requerimiento</label>
            <input type="text" name="requerimiento" class="form-control">
        </div>

        <div class="form-group mb-4">
            <label>Teléfono / Correo</label>
            <input type="text" name="telefono" class="form-control">
        </div>

        <button type="submit" class="btn btn-primary">Guardar Orden</button>
    </form>
</div>
@endsection

@section('scripts')
<script>
function cambiarModo(valor) {
    const tipo = valor.toUpperCase();
    document.getElementById('urbano_campos').style.display = (tipo === 'U') ? 'block' : 'none';
    document.getElementById('sector_campos').style.display = (tipo === 'S') ? 'block' : 'none';
}

function habilitarCalleSiguiente() {
    const valor = document.getElementById('calle-select').value;
    document.getElementById('calle-btn-y').disabled = (valor === '');
}

function habilitarAvenidaSiguiente() {
    const valor = document.getElementById('avenida-select').value;
    document.getElementById('avenida-btn-y').disabled = (valor === '');
}

function agregarCalleSiguiente() {
    const select = document.getElementById('calle-select');
    const siguiente = document.getElementById('calle-siguiente');
    const btnQuitar = document.getElementById('calle-btn-quitar');
    const valor = parseInt(select.value);
    if (!isNaN(valor) && valor < 30) {
        siguiente.value = `${valor + 1}a Calle`;
        siguiente.classList.remove('d-none');
        btnQuitar.classList.remove('d-none');
        document.getElementById('calle-btn-y').disabled = true;
    }
}

function quitarCalleSiguiente() {
    document.getElementById('calle-siguiente').classList.add('d-none');
    document.getElementById('calle-btn-quitar').classList.add('d-none');
    document.getElementById('calle-btn-y').disabled = false;
}

function agregarAvenidaSiguiente() {
    const select = document.getElementById('avenida-select');
    const siguiente = document.getElementById('avenida-siguiente');
    const btnQuitar = document.getElementById('avenida-btn-quitar');
    const valor = parseInt(select.value);
    if (!isNaN(valor) && valor < 30) {
        siguiente.value = `${valor + 1}a Avenida`;
        siguiente.classList.remove('d-none');
        btnQuitar.classList.remove('d-none');
        document.getElementById('avenida-btn-y').disabled = true;
    }
}

function quitarAvenidaSiguiente() {
    document.getElementById('avenida-siguiente').classList.add('d-none');
    document.getElementById('avenida-btn-quitar').classList.add('d-none');
    document.getElementById('avenida-btn-y').disabled = false;
}

function cargarColonias() {
    const sector = document.getElementById('sector').value;
    const coloniaSelect = document.getElementById('colonia');
    coloniaSelect.innerHTML = '';

    const coloniasPorSector = {
        'Corozo': ['Aldea Piteros I', 'Aldea Piteros II', 'Calle Pichilingo', 'Caserio Manaca', 'Colonia Marleny, Corozo Milla III', 'Colonia Pacheco, Corozo Milla III', 'Corozo Laurel Milla VI', 'Corozo Milla II', 'Corozo Milla IV', 'Corozo Milla V', 'Corozo No.2 Entrada al Tunel', 'Creek Negro del Mar', 'Piedra Parada', 'Ramal Corozo Milla III', 'San Francisco Creek Ventura', 'San Francisco I', 'San Francisco II'],
        'Entre Rios': ['Aldea Chinock', 'Aldea Machacas Carretera', 'Aldea Manacas', 'Aldea Piedra Parada', 'Aldea Placa I', 'Barrios El Beneficio', 'Barrio El Centro', 'Barrios El Correo', 'Barrio El Periferico', 'Barrio El Tamarindo', 'Barrio El Triunfo, KM. 282', 'Barrio La Reforma', 'Barrio Las Flores', 'Barrio Nuevo', 'Caserio Cruce Entre Rios', 'Caserio Limones', 'Caserio Veracruz', 'Colonia Las Flores', 'Colonia Nueva Esperanza', 'Colonia San Cristobal', 'Colonia Vista Hermosa', 'Fertilaza Agua Caliente', 'Lotificación Peñitas Placa 1', 'Lotificación Santa Clara', 'Lotificación Valle los Almedros', 'Machacas Carretera', 'Milla 10', 'Milla 11', 'San Francisco Vuelta Grande'],
        'Frontera': ['Aldea Chachagualilla', 'Aldea El Cinchado', 'Aldea El Manguito', 'Aldea El Sesteadero', 'Aldea Jimeritos', 'Aldea La Gloria', 'Aldea Las Vegas', 'Aldea Mojanales', 'Cacao Frontera', 'Caserio La Laguna' ],
        'Cerro San Gil': [],
        'Livingston': [],
        'Manabique': [],
        'Morales': [],
        'Puerto Barrios': ['El Rastro',]
    };

    if (coloniasPorSector[sector]) {
        
        coloniasPorSector[sector].forEach(colonia => {
            const option = document.createElement('option');
            option.value = colonia;
            option.text = colonia;
            coloniaSelect.appendChild(option);
        });
    }
}
</script>
@endsection