@extends('layouts.master')
@section('title') @lang('translation.filials') @endsection
@section('csrf')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('css')

@endsection

@section('content')

@component('components.breadcrumb')
@slot('li_1')Sucursales @endslot
@slot('title')Nueva Sucursal @endslot
@endcomponent

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">        
               <h5 class="card-title mb-0">Nueva Sucursal</h5>
            </div>
            <div class="card-body">
                <form role="form" method="post" action="{{ route('filials.store') }}">
                    @csrf
                    <input type="hidden" name="user_id" value="{{ auth()->id() }}">
                    <div class="row g-3">
                        @if (empty($emitters))
                        <input type="hidden" name="emitter_id" value="{{ Auth::user()->emitter->id }}">
                        <label for="emitterClient" class="form-label">Emisor</label>                                
                        <input class="mt-0" type="text" value="{{ Auth::user()->emitter->razon_social }}" disabled="true">
                        @else
                            <div class="col-lg-12">
                                <div>
                                    <label for="emitterClient" class="form-label">Emisor</label>
                                    <select 
                                        class="form-control" 
                                        id="emitterClient" 
                                        name="emitter_id"
                                        required="true">
                                        <option value="">Elige el emisor</option>
                                        @foreach ($emitters as $emitter)
                                        <option value="{{ $emitter->id }}">{{ $emitter->razon_social}}</option>    
                                        @endforeach
                                    </select>
                                </div>
                            </div><!--end col-->
                        @endif
                        <div class="col-12">
                            <div>
                                <label for="razonSocial" class="form-label">Nombre de la Sucursal</label>
                                <input 
                                    type="text" 
                                    class="form-control" 
                                    id="razonSocial" 
                                    name="nombre"
                                    placeholder="ingresa el nombre de la sucursal"
                                    required="true">
                            </div>
                        </div><!--end col-->
                        <div class="col-xxl-4 col-md-4">
                            <label for="phoneInput" class="form-label">Teléfono</label>
                            <input 
                                type="tel" 
                                class="form-control" 
                                id="phoneInput"
                                name="telefono" 
                                placeholder="ingresa el teléfono"
                                maxlength="10"
                                required="true">
                        </div><!--end col-->
                        <div class="col-xxl-4 col-md-4">
                            <label for="emailInput" class="form-label">Email principal</label>
                            <input 
                                type="email" 
                                class="form-control" 
                                id="emailInput" 
                                name="email1"
                                placeholder="ingresa email facturas"
                                required="true">
                        </div><!--end col-->
                        <div class="col-xxl-4 col-md-4">
                            <label for="Responsable" class="form-label">Responsable</label> 
                            <input 
                                type="text" 
                                class="form-control" 
                                id="Responsable"
                                name="responsable" 
                                placeholder="ingresa el nombre del responsable"
                                required="true">
                        </div><!--end col-->
                        <div class="col-lg-12">
                            <label class="form-label">Dirección (opcional)</label>
                            <div class="row">
                                <div class="col-6">
                                    <label for="dirCalle" class="form-label">Calle</label> 
                                    <input 
                                        type="text" 
                                        class="form-control" 
                                        id="dirCalle" 
                                        placeholder="ingresa la calle"
                                        name="dir_calle">
                                </div><!--end col-->
                                <div class="col-3">
                                    <label for="dirNumExt" class="form-label">No. Ext.</label> 
                                    <input 
                                        type="text" 
                                        class="form-control" 
                                        id="dirNumExt" 
                                        placeholder="ingresa el no. ext."
                                        name="dir_no_ext">
                                </div><!--end col-->
                                <div class="col-3">
                                    <label for="DirNumInt" class="form-label">No. Int.</label> 
                                    <input 
                                        type="text" 
                                        class="form-control" 
                                        id="DirNumInt" 
                                        placeholder="ingresa el no. int."
                                        name="dir_no_int">
                                </div><!--end col-->
                            </div>
                        </div>
                        <div class="col-xxl-6 col-md-6">
                            <label for="dirColonia" class="form-label">Colonia</label>
                            <input 
                                name="dir_colonia"
                                type="text" 
                                class="form-control" 
                                placeholder="Ingresa tu colonia"
                                id="dirColonia"
                                value="{{ old('colonia') }}">
                        </div><!--end col-->                                                                                           
                        <div class="col-xxl-6 col-md-6">
                            <div>
                                <label for="sat_pais" class="form-label">Pais</label>
                                <select 
                                    class="form-control" 
                                    id="sat_pais" 
                                    name="dir_pais" 
                                    data-choices data-choices-sorting-false>
                                    <option value="">Elige el País</option>
                                    @foreach ($paises as $c_Pais => $descripcion)
                                    <option value="{{ $c_Pais }}">{{ $descripcion }}</option>    
                                    @endforeach
                                </select>
                            </div>
                        </div><!--end col-->
                        <div class="col-xxl-6 col-md-6">
                            <div>
                                <label for="sat_estado" class="form-label">Estado</label>
                                <select 
                                    class="form-control" 
                                    id="sat_estado" 
                                    name="dir_estado"
                                    disabled="true">
                                    <option value="">Elige tu estado</option>
                                </select>
                            </div>
                        </div><!--end col-->
                        <div class="col-xxl-6 col-md-6">
                            <div>
                                <label for="sat_localidad" class="form-label">Municipio</label>
                                <select 
                                    class="form-control" 
                                    id="sat_localidad" 
                                    name="dir_localidad" 
                                    disabled="true">
                                    <option value="">Elige tu localidad</option>
                                </select>
                            </div>
                        </div><!--end col-->
                        <div class="col-lg-12">
                            <div class="hstack gap-2 justify-content-end">
                                <a href="{{ route('filials') }}" class="btn btn-light">Regresar</a>
                                <button type="submit" class="btn btn-primary">Enviar</button>
                            </div>
                        </div><!--end col-->
                    </div><!--end row-->
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="{{ URL::asset('build/js/app.js') }}"></script>
<script>

    function getCookie(name) {
        const value = "; " + document.cookie;
        const parts = value.split("; " + name + "=");
        if (parts.length === 2) return parts.pop().split(";").shift();
    }

    //** calling Estados
    document.addEventListener('DOMContentLoaded', function() {
        const paisSelect = document.getElementById('sat_pais');
        const estadoSelect = document.getElementById('sat_estado');
        /* ================================
            SANCTUM
        ================================== */
        fetch('/sanctum/csrf-cookie', {
            method: 'GET',
            credentials: 'include'
        }).then(llenarEstadosSelect());

        function llenarEstadosSelect() {
            paisSelect.addEventListener('change', function() {
                const paisId = this.value;
                estadoSelect.innerHTML='<option value="">Elige el estado</option>'
                if (!paisId) {
                    estadoSelect.disabled = true;
                    return;
                }
                // Mostrar indicador de carga
                estadoSelect.disabled = true;
                estadoSelect.innerHTML = '<option value="">Cargando estados...</option>';
                
                // Obtener el token CSRF
                const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                // Obtener el token XSRF-TOKEN
                const xsrfToken = getCookie('XSRF-TOKEN');

                // Hacer la petición AJAX
                fetch(`/api/estados/${paisId}`, {
                    method: 'GET',
                    credentials: 'include',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': csrfToken,
                        'X-XSRF-TOKEN': decodeURIComponent(xsrfToken)
                    },
                })
                .then(response => {
                    if (!response.ok) {                            
                        throw new Error(`HTTP error ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    estadoSelect.innerHTML = '<option value="">Elige el estado</option>';
                    if (data.length > 0) {
                        data.forEach(estado => {
                            const option = document.createElement('option');
                            option.value = estado.c_Estado;
                            option.textContent = estado.nombre;
                            estadoSelect.appendChild(option);
                        });
                        estadoSelect.disabled = false;
                    } else {
                        estadoSelect.innerHTML = '<option value="">Sin estados</option>';
                        estadoSelect.disabled = true;
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    estadoSelect.innerHTML = '<option value="">Error al cargar estados</option>';
                    estadoSelect.disabled = true;
                });
            });
        }
    });

    //** calling Locations
    document.addEventListener('DOMContentLoaded', function() {            
        const estadosSelect = document.getElementById('sat_estado');
        const localidadSelect = document.getElementById('sat_localidad');
        /* ================================
            SANCTUM
        ================================== */
        fetch('/sanctum/csrf-cookie', {
            method: 'GET',
            credentials: 'include'
        }).then(llenarLocalidadSelect());

        function llenarLocalidadSelect() {
            
            estadosSelect.addEventListener('change', function() {
                const estadoId = this.value;
                localidadSelect.innerHTML='<option value="">Elige tu localidad</option>'
                if (!estadoId) {
                    localidadSelect.disabled = true;
                    return;
                }
                // Mostrar indicador de carga
                localidadSelect.disabled = true;
                localidadSelect.innerHTML = '<option value="">Cargando localidades...</option>';
                
                // Obtener el token CSRF
                const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                // Obtener el token XSRF-TOKEN
                const xsrfToken = getCookie('XSRF-TOKEN');

                // Hacer la petición AJAX
                fetch(`/api/localidades/${estadoId}`, {
                    method: 'GET',
                    credentials: 'include',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': csrfToken,
                        'X-XSRF-TOKEN': decodeURIComponent(xsrfToken)
                    },
                })
                .then(response => {
                    if (!response.ok) {                            
                        throw new Error(`HTTP error ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    localidadSelect.innerHTML = '<option value="">Elige tu localidad</option>';
                    if (data.length > 0) {
                        data.forEach(localidad => {
                            const option = document.createElement('option');
                            option.value = localidad.c_Localidad;
                            option.textContent = localidad.nombre;
                            localidadSelect.appendChild(option);
                        });
                        localidadSelect.disabled = false;
                    } else {
                        localidadSelect.innerHTML = '<option value="">Sin localidades</option>';
                        localidadSelect.disabled = true;
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    localidadSelect.innerHTML = '<option value="">Error al cargar localidades</option>';
                    localidadSelect.disabled = true;
                });
            });

        }
    });

</script>
@endsection