@extends('layouts.master')
@section('title') @lang('translation.clients') @endsection
@section('csrf')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('css')
<!--datatable css-->
<link href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" rel="stylesheet" type="text/css" />
<!--datatable responsive css-->
<link href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
@endsection

@section('content')

@component('components.breadcrumb')
@slot('li_1')Clientes @endslot
@slot('title')Nuevo Cliente @endslot
@endcomponent

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">        
               <h5 class="card-title mb-0">Nuevo cliente</h5>
            </div>
            <div class="card-body">
                <div class="px-2 pt-2">
                    <ul class="nav nav-tabs mb-3" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#FormPane" role="tab" aria-selected="false">
                                Formulario
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#constPane" role="tab" aria-selected="false">
                                Constancia
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="tab-content  text-muted">
                    <div class="tab-pane active" id="FormPane" role="tabpanel">
                        <form role="form" method="post" action="{{ route('clients.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-8">
                                    <div>
                                        <label for="razonSocial" class="form-label">Razón Social</label>
                                        <input 
                                            type="text" 
                                            class="form-control" 
                                            id="razonSocial" 
                                            name="razon_social"
                                            placeholder="ingresa la Razón Social"
                                            required="true">
                                    </div>
                                </div><!--end col-->
                                <div class="col-4">
                                    <div>
                                        <label for="rfcInput" class="form-label">RFC</label>
                                        <input 
                                            type="text" 
                                            class="form-control" 
                                            id="rfcInput" 
                                            name="rfc"
                                            placeholder="RFC"
                                            maxlength="13"                                                            
                                            required="true"
                                            style="text-transform: uppercase;">
                                    </div>
                                </div><!--end col-->
                                <div class="col-xxl-12">
                                    <div>
                                        <label for="sat_uso_cfdi" class="form-label">Uso de CFDI</label>
                                        <select 
                                            class="form-control" 
                                            id="sat_uso_cfdi" 
                                            name="uso_cfdi" 
                                            data-choices data-choices-sorting-false
                                            required="true">
                                            <option value="">Elige el uso de cfdi</option>
                                            @foreach ($uso_cfdi as $c_UsoCFDI => $descripcion)
                                            <option value="{{ $c_UsoCFDI }}">{{ $c_UsoCFDI}} - {{$descripcion }}</option>    
                                            @endforeach
                                        </select>
                                    </div>
                                </div><!--end col-->
                                <div class="col-lg-12">
                                    <label class="form-label">Persona</label>
                                    <div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="persona" id="inlineRadio1" value="fisica">
                                            <label class="form-check-label" for="inlineRadio1">Física</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="persona" id="inlineRadio2" value="moral">
                                            <label class="form-check-label" for="inlineRadio2">Moral</label>
                                        </div>
                                    </div>
                                </div><!--end col-->
                                <div class="col-xxl-6">
                                    <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-6">
                                    <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-6">
                                    <label for="emailInput2" class="form-label">Email cotizaciones</label> 
                                    <input 
                                        type="email" 
                                        class="form-control" 
                                        id="emailInput2"
                                        name="email2"
                                        placeholder="ingresa email cotizaciones"
                                        required="true">
                                </div><!--end col-->
                                <div class="col-xxl-6">
                                    <label for="emailInput3" class="form-label">Email cotizaciones (opcional)</label> 
                                    <input 
                                        type="email" 
                                        class="form-control" 
                                        id="emailInput3"
                                        name="email3"
                                        placeholder="ingresa email cotizaciones">
                                </div><!--end col-->
                                <div class="col-xxl-8">
                                    <div>
                                        <label for="sat_regimen_fiscal" class="form-label">Regimen Fiscal</label>
                                        <select 
                                            class="form-control" 
                                            id="sat_regimen_fiscal" 
                                            name="regimen_fiscal" 
                                            data-choices data-choices-sorting-false
                                            required="true">
                                            <option value="">Elige regimen fiscal</option>
                                            @foreach ($regimen_fiscal as $c_RegimenFiscal => $descripcion)
                                            <option value="{{ $c_RegimenFiscal }}">{{ $c_RegimenFiscal }} - {{ $descripcion }}</option>    
                                            @endforeach
                                        </select>
                                    </div>
                                </div><!--end col-->
                                <div class="col-xxl-4">
                                    <label for="codigoPostal" class="form-label">Código Postal</label> 
                                    <input 
                                        type="text" 
                                        class="form-control" 
                                        id="codigoPostal"
                                        name="codigo_postal" 
                                        placeholder="ingresa el codigo postal"
                                        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">
                                    <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">
                                    <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">
                                    <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">
                                    <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('clients') }}" class="btn btn-light" data-bs-dismiss="modal">Regresar</a>
                                        <button type="submit" class="btn btn-primary">Enviar</button>
                                    </div>
                                </div><!--end col-->
                            </div><!--end row-->
                        </form>
                    </div>
                    <div class="tab-pane" id="constPane" role="tabpanel">
                        <form role="form" method="post" action="{{ route('clients.show') }}" enctype="multipart/form-data">
                            @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-md-6">
                                    <div class="mb-3">
                                        <label for="FormInputFilePdf" class="form-label">Constancia de situación fiscal (PDF)</label>
                                        <input 
                                            name='constancia'
                                            class="form-control" 
                                            type="file" 
                                            id="FormInputFilePdf"
                                            required="true" 
                                            accept=".pdf">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="hstack gap-2 justify-content-end">
                                        <a href="{{ route('clients') }}" class="btn btn-light" data-bs-dismiss="modal">Regresar</a>
                                        <button type="submit" class="btn btn-primary">Enviar</button>
                                    </div>
                                </div><!--end col-->
                            </div>
                        </form>
                    </div>
                </div>
            </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