@extends('layouts.main')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Crear o cargar un segmento</div>

                <div class="card-body">
                    <form method="POST" action="{{ route('segment.store') }}">
                        @csrf
			<div class="form-group">
    			    <label for="correlativo_segmento">Correlativo de Segmento</label>
    			    <input type="number" name="correlativo_segmento" id="correlativo_segmento" class="form-control" required>
			</div>	
                        <!-- Región -->
                        <div class="form-group">
                            <label for="region">Región</label>
                            <select name="region" id="region" class="form-control" required>
                                <option value="">Seleccione una región</option>
                                @foreach($regiones as $region)
                                    <option value="{{ $region->codigo }}">{{ $region->nombre }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Departamento -->
                        <div class="form-group">
                            <label for="departamento">Departamento</label>
                            <select name="departamento" id="departamento" class="form-control" required>
                                <option value="">Seleccione un departamento</option>
                            </select>
                        </div>

                        <!-- Municipio -->
                        <div class="form-group">
                            <label for="municipio">Municipio</label>
                            <select name="municipio" id="municipio" class="form-control" required>
                                <option value="">Seleccione un municipio</option>
                            </select>
                        </div>

                        <!-- Distrito -->
                        <div class="form-group">
                            <label for="distrito">Distrito</label>
                            <select name="distrito" id="distrito" class="form-control" required>
                                <option value="">Seleccione un distrito</option>
                            </select>
                        </div>

                        <!-- Cantón -->
                        <div class="form-group">
                            <label for="canton">Cantón</label>
                            <select name="canton" id="canton" class="form-control" required>
                                <option value="">Seleccione un cantón</option>
                            </select>
                        </div>

                        <!-- Estado -->
                        <div class="form-group">
                            <label for="active">Estado</label>
                            <select name="active" id="active" class="form-control" required>
                                <option value="1">Activo</option>
                                <option value="0">Inactivo</option>
                            </select>
                        </div>

                        <!-- Botón -->
                        <button type="submit" class="btn btn-primary">Guardar Segmento</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // Cargar departamentos al seleccionar región
    console.log("jQuery listo");
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    	}
    });
    $('#region').on('change', function() {
        let region = $(this).val();
	console.log("Evento change disparado");
        if(region) {
	    console.log("Valor de región: " + region); // Debug
            $.ajax({
            	url: '/api/departamentos/' + region,
                type: 'GET',
                success: function(data) {
                    $('#departamento').empty().append('<option value="">Seleccione un departamentos</option>');
                    $.each(data, function(key, value) {
                    	$('#departamento').append('<option value="'+ value.codigo +'">'+ value.nombre +'</option>');
                    });
                },
                error: function(xhr) {
                console.log(xhr.responseText);
                }
            });
        }
    });

    // Cuando cambia el departamento
    $('#departamento').change(function() {
        let departamento = $(this).val();
        if(departamento) {
	    console.log("Valor de departamento: " + departamento); // Debug
            $.get(`/api/municipios/${departamento}`, function(data) {
                $('#municipio').empty().append('<option value="">Seleccione</option>');
                $.each(data, function(index, municipio) {
                    $('#municipio').append('<option value="'+municipio.codigo+'">'+municipio.nombre+'</option>');
                });
            });
        }
    });
    // Cuando cambia el municipio
    $('#municipio').change(function() {
        let municipio = $(this).val();
        if(municipio) {
            $.get(`/api/distritos/${municipio}`, function(data) {
                $('#distrito').empty().append('<option value="">Seleccione</option>');
                $.each(data, function(index, distrito) {
                    $('#distrito').append('<option value="'+distrito.codigo+'">'+distrito.nombre+'</option>');
                });
            });
        }
    });
    // Cuando cambia el distrito
    $('#distrito').change(function() {
        let distrito = $(this).val();
	let municipio = $('#municipio').val();
        if(distrito) {
            $.get(`/api/cantones/${municipio}/${distrito}`, function(data) {
                $('#canton').empty().append('<option value="">Seleccione</option>');
                $.each(data, function(index, canton) {
                    $('#canton').append('<option value="'+canton.codigo+'">'+canton.nombre+'</option>');
                });
            });
        }
    });
});
</script>
@endsection