@extends('layouts.master')
@section('title')
    @lang('translation.emitter')
@endsection
@section('csrf')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            Configuración
        @endslot
        @slot('title')
            Emisor
        @endslot
    @endcomponent

    @if(session('success'))
    <div class="row">
        <div class="col-lg-12">
            <div class="alert alert-success alert-dismissible fade show">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        </div>
    </div>
    @endif

    <form role="form" method="post" action="{{ route('emitter.store') }}" enctype="multipart/form-data" >
        @csrf
        <input type="hidden" name="id" value="{{ $emitter->id }}"/>
        <input type="hidden" name="user_id" value="{{ auth()->id() }}">
    <div class="row">
        <div class="col-xxl-6">
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">Información general del Emisor</h4>
                </div><!-- end card header -->
                <div class="card-body">
                    <div class="live-preview">    
                        <div class="row">
                            <div class="row mt-2 mb-2 align-items-center g-3">
                                <h5 class="fs-16">Emisor</h5>
                            </div>
                            <!--end col-->
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="ForminputFile0" class="form-label">Logotipo (300x300)</label>
                                    <input 
                                        name='logotipo'
                                        class="form-control" 
                                        type="file" 
                                        id="ForminputFile0" 
                                        accept=".png">
                                </div>
                            </div>
                            <!--end col--> 
                            <div class="col-md-8">
                                <div class="mb-3">
                                    <label for="compnayNameinput" class="form-label">Razón Social</label>
                                    <input 
                                        name="razon_social"
                                        type="text" 
                                        class="form-control" 
                                        placeholder="Razón Social"
                                        id="compnayNameinput"
                                        required="true"
                                        value="{{ old('razon_social', $emitter->razon_social) }}"
                                        >
                                </div>
                            </div>
                            <!--end col-->
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="PersonaNameinput" class="form-label">Persona</label>
                                    <select 
                                        name="tipo_persona" 
                                        class="form-select mb-3" 
                                        aria-label="PersonaNameinput">
                                        <option>Selecciona</option>
                                        <option value="0"
                                        {{ $emitter->tipo_persona == '0' ? 'selected' : '' }}>Fisica</option>
                                        <option value="1"
                                        {{ $emitter->tipo_persona == '1' ? 'selected' : '' }}>Moral</option>
                                    </select>
                                </div>
                            </div>
                            <!--end col-->
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="rfcInput" class="form-label">RFC</label>
                                    <input 
                                        name="rfc"
                                        type="text" 
                                        class="form-control" 
                                        placeholder="MAIR690209LF4"
                                        id="rfcInput"
                                        required="true"
                                        style="text-transform: uppercase;"
                                        value="{{ old('rfc', $emitter->rfc) }}">
                                </div>
                            </div>
                            <!--end col-->
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="emailidInput" class="form-label">Email</label>
                                    <input 
                                        name="email"
                                        type="email" 
                                        class="form-control" 
                                        placeholder="example@gamil.com"
                                        id="emailidInput"
                                        required="true"
                                        value="{{ old('email', $emitter->email) }}">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="firstSelectInput" class="form-label">Regimen Fiscal</label>
                                    <select 
                                        name="regimen_fiscal" 
                                        class="form-select mb-3" 
                                        aria-label="firstSelectInput"
                                        required="true">
                                        <option selected="">Selecciona</option>
                                        @foreach ($regimen_fiscal as $item)
                                            <option value="{{ $item->c_RegimenFiscal }}" 
                                                {{($item->c_RegimenFiscal==$emitter->regimen_fiscal)?' selected=""':''}}>
                                                {{ $item->c_RegimenFiscal }} - {{ $item->descripcion }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <!--end col-->
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="lastNameinput" class="form-label">Código Postal</label>
                                    <input 
                                        name="codigo_postal_fiscal"
                                        type="text" 
                                        class="form-control" 
                                        placeholder="20000"
                                        id="lastNameinput"
                                        required="true"
                                        value="{{ old('email', $emitter->codigo_postal_fiscal) }}">
                                </div>
                            </div>
                            <!--end col-->
                            <div class="row mt-2 mb-2 align-items-center g-3">
                                <h5 class="fs-16">Domicilio Fiscal</h5>
                            </div>
                            <!--end col-->
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="address1ControlTextarea" class="form-label">Calle</label>
                                    <input 
                                        name="calle"
                                        type="text" 
                                        class="form-control" 
                                        placeholder="Address 1"
                                        id="address1ControlTextarea"
                                        value="{{ old('calle', $emitter->domicilio_fiscal['calle']) }}"
                                        required="true">
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="firstDirinput1" class="form-label">No. Ext</label>
                                    <input 
                                        name="num_ext"
                                        type="text" 
                                        class="form-control" 
                                        placeholder="Num. Ext"
                                        id="firstDirinput1"
                                        value="{{ old('num_ext', $emitter->domicilio_fiscal['num_ext'] ?? '') }}"
                                        required="true">
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="firstDirinput2" class="form-label">No. Int</label>
                                    <input 
                                        name="num_int"
                                        type="text" 
                                        class="form-control" 
                                        placeholder="Num. Int."
                                        id="firstDirinput2"
                                        value="{{ old('num_int', $emitter->domicilio_fiscal['num_int'] ?? '') }}">
                                </div>
                            </div>
                            <!--end col-->
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="neighnameInput" class="form-label">Colonia</label>
                                    <input 
                                        name="colonia"
                                        type="text" 
                                        class="form-control" 
                                        placeholder="Ingresa tu colonia"
                                        id="neighnameInput"
                                        value="{{ old('colonia', $emitter->domicilio_fiscal['colonia'] ?? '') }}"
                                        required="true">
                                </div>
                            </div>
                            <!--end col-->
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="paisNameInputSel" class="form-label">Pais</label>
                                    <select 
                                        id="paisNameInputSel" 
                                        class="form-select" 
                                        data-choices
                                        data-choices-sorting="true"
                                        name="pais"
                                        required="true">
                                        <option value="">Elige el Pais</option>
                                        @foreach ($paises as $pais)
                                        <option value="{{ $pais->c_Pais }}"
                                            {{ old('pais') == $pais->c_Pais ? 'selected' : ($emitter->domicilio_fiscal['pais']==$pais->c_Pais? 'selected':'') }}>
                                            {{ $pais->nombre }} 
                                        </option>    
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <!--end col-->

                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="estadoNameInputSel" class="form-label">Estado</label>
                                    <select 
                                        id="estadoNameInputSel" 
                                        class="form-select" 
                                        name="estado"
                                        required="true"
                                        {{ empty(old('pais')) && ($emitter->domicilio_fiscal['estado']=='') ? 'disabled' : '' }}>
                                        <option value="">Elige el Estado</option>
                                        @if((old('estado') && old('pais')) || ($emitter->domicilio_fiscal['estado']!=''))
                                            @foreach($estados as $estado)
                                                <option value="{{ $estado->c_Estado }}" 
                                                    {{ old('estado') == $estado->c_Estado ? 'selected' : ($emitter->domicilio_fiscal['estado']==$estado->c_Estado? 'selected':'') }}>
                                                    {{ $estado->nombre }}
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <!--end col-->

                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="localidadNameInputSel" class="form-label">Localidad</label>
                                    <select 
                                        id="localidadNameInputSel" 
                                        class="form-select" 
                                        name="localidad"
                                        required="true"
                                        {{ empty(old('estado')) && $emitter->domicilio_fiscal['localidad']==''? 'disabled' : '' }}>
                                        <option value="">Elige tu localidad</option>
                                        @if((old('localidad') && old('estado')) || ($emitter->domicilio_fiscal['localidad']!=''))
                                            @foreach ($localidades as $localidad)
                                                <option value="{{ $localidad->c_Localidad }}"
                                                    {{ old('localidad') == $localidad->c_Localidad ? 'selected' : ($emitter->domicilio_fiscal['localidad']==$localidad->c_Localidad?'selected':'') }}> 
                                                    {{ $localidad->nombre}} 
                                                </option>    
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <!--end col-->

                            <div class="row mt-2 mb-2 align-items-center g-3">
                                <h5 class="fs-16">Certificados digitales</h5>
                            </div>            
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="ForminputFile1" class="form-label">Archivo .cer</label>
                                    <input 
                                        name='cer'
                                        class="form-control" 
                                        type="file" 
                                        id="ForminputFile1" 
                                        accept=".cer">
                                </div>
                            </div>
                            <!--end col--> 
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="ForminputFile2" class="form-label">Archivo .key</label>
                                    <input 
                                        name="key"
                                        class="form-control" 
                                        type="file" 
                                        id="ForminputFile2" 
                                        accept=".key">
                                </div>
                            </div>
                            <!--end col-->
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="pwdInputText" class="form-label">Contraseña</label>
                                    <input 
                                        name="contrasena"
                                        type="text" 
                                        class="form-control" 
                                        placeholder="contraseña"
                                        id="pwdInputText">
                                </div>
                            </div>
                            <!--end col-->
                            @if (empty($emitter->id))
                            
                            <div class="row mt-2 mb-2 align-items-center g-3">
                                <h5 class="fs-16">CONFIGURACIÓN</h5>
                            </div>
                            <!--end col-->

                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="planTimbresInput" class="form-label">Timbres disponibles</label>
                                    <input
                                        name="timbres_restantes"
                                        type="text" 
                                        class="form-control" 
                                        aria-label="Timbres disponibles"
                                        placeholder="Timbres disponibles"
                                        id="planTimbresInput"
                                        required="true"
                                        value="{{ old('timbres_restantes', $emitter->timbres_restantes) }}">
                                    
                                </div>                                    
                            </div>
                            <!--end col-->

                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="planUsuariosInput" class="form-label">Usuarios disponibles</label>
                                    <input
                                        name="usuarios_permitidos"
                                        type="text" 
                                        class="form-control" 
                                        aria-label="Usuarios disponibles"
                                        placeholder="Usuarios disponibles"
                                        id="planUsuariosInput"
                                        required="true"
                                        value="{{ old('usuarios_permitidos', $emitter->usuarios_permitidos) }}">
                                    
                                </div>                                    
                            </div>
                            <!--end col-->

                            <div class="col-lg-6">
                                <div class="mb-3">
                                    <label for="textInputDate1" class="form-label">Fecha Inicio</label>
                                    <input 
                                        type="date" 
                                        class="form-control" 
                                        id="textInputDate1"
                                        name="fecha_inicial"
                                        required="true"
                                        value="{{ old('fecha_inicial', $emitter->fecha_inicial) }}"
                                    >
                                </div>
                            </div>
                            <!--end col-->
                            <div class="col-lg-6">
                                <div class="mb-3">
                                    <label for="textInputDate2" class="form-label">Fecha Caducidad</label>
                                    <input 
                                        type="date" 
                                        class="form-control" 
                                        id="textInputDate2"
                                        name="fecha_final"
                                        required="true"
                                        value="{{ old('fecha_final', $emitter->fecha_final) }}"
                                    >
                                </div>
                            </div>
                            <!--end col-->

                            <div class="row mt-2 mb-2 align-items-center g-3">
                                <h5 class="fs-16">Credenciales de acceso</h5>
                            </div>
                            <!--end col-->
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label for="emailUsrInput" class="form-label">Email</label>
                                    <input 
                                        name="email_usr"
                                        type="email" 
                                        class="form-control" 
                                        placeholder="Email acceso"
                                        id="emailUsrInput"
                                        pattern="[^ @]*@[^ @]*"
                                        required="true"
                                        value="{{ old('email_usr', $emitter->user->email) }}"
                                        >
                                </div>
                            </div>
                            <!--end col-->
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="PwdUsrinput" class="form-label">Contraseña</label>
                                    <input 
                                        name="password"
                                        type="password" 
                                        class="form-control"
                                        id="PwdUsrinput">
                                </div>
                            </div>
                            <!--end col-->
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="rfcInput" class="form-label">Repetir contraseña</label>
                                    <input 
                                        name="password_confirmation"
                                        type="password" 
                                        class="form-control"
                                        id="PwdUsrinput">
                                </div>
                            </div>
                            <!--end col-->
                            @endif
                        </div>
                        <!--end row-->                        
                    </div>
                </div>
                <div class="card-footer">
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary">Enviar</button>
                        </div>
                    <!--end col-->    
                </div>
            </div>
        </div> <!-- end col -->
    </div>
    </form>
        

    
@endsection
@section('script')
    <script src="{{ URL::asset('build/libs/prismjs/prism.js') }}"></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('paisNameInputSel');
            const estadoSelect = document.getElementById('estadoNameInputSel');
            const localidadesSelect = document.getElementById('sat_localidad');
            /* ================================
                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>'
                    localidadesSelect.innerHTML='<option value="">Elige tu localidad</option>'
                    if (!paisId) {
                        estadoSelect.disabled = true;
                        localidadesSelect.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('estadoNameInputSel');
            const localidadSelect = document.getElementById('localidadNameInputSel');
            /* ================================
                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