@extends('layouts.app', ['class' => 'off-canvas-sidebar', 'activePage' => 'facturar', 'title' => __('facturar')])

@section('content')

<div class="container">
    <div class="d-flex justify-content-center align-items-center" style="height: 150px;">
        <img src="{{ $rutaLogo }}" alt="Logo" style="max-height: 70%; max-width: 70%;">
    </div>
    <div class="card z-index-0 fadeIn3 fadeInBottom">
        <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
            <div class="bg-gradient-primary shadow-primary border-radius-lg py-3 pe-1">
                <h4 class="text-white font-weight-bolder text-center mt-2 mb-0">PORTAL DE FACTURACIÓN</h4>
            </div>

            <div class="card-body">
                <form action="#" method="POST" id="frm_facturar">
                    <div class="row d-flex justify-content-center">
                        <div class="col text-left">
                            <h3>Capture la información solicitada</h3>
                        </div>
                        <div class="col text-right">
                            <h3>Importe: ${{ number_format($importe, 2) }}</h3>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-8">
                            <label class="fw-bold">Nombre o Razón social: <span class="text-danger">*</span></label>
                            <div class="position-relative border-1">
                                <span class="material-icons-round position-absolute top-50 start-0 translate-middle-y ms-3 text-secondary">
                                    person
                                </span>
                                <input
                                    type="text"
                                    name="nombre"
                                    class="form-control ps-5 border-1"
                                    placeholder="Ingrese su nombre o razón social..."
                                    readonly
                                    value="{{ $cliente?->Nombre ?? ''  }}"
                                >
                            </div>
                        </div>
                        <div class="col">
                            <label class="fw-bold">RFC: <span class="text-danger">*</span></label>
                            <div class="position-relative border-1">
                                <span class="material-icons-round position-absolute top-50 start-0 translate-middle-y ms-3 text-secondary">
                                    article
                                </span>
                                <input
                                    type="text"
                                    class="form-control ps-5 border-1"
                                    placeholder="Ingrese su RFC..."
                                    readonly
                                    name="rfc"
                                    value="{{ $cliente?->RFC ?? ''  }}"
                                >
                            </div>
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col">
                            <label class="fw-bold">Calle: <span class="text-danger">*</span></label>
                            <div class="position-relative border-1">
                                <span class="material-icons-round position-absolute top-50 start-0 translate-middle-y ms-3 text-secondary">
                                    fmd_good
                                </span>
                                <input
                                    type="text"
                                    name="calle"
                                    class="form-control ps-5 border-1"
                                    placeholder="Ingrese su dirección..."
                                    required
                                    value="{{ $cliente?->Calle ?? ''  }}"
                                >
                            </div>
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col">
                            <label class="fw-bold">Número exterior:</label>
                            <div class="position-relative border-1">
                                <span class="material-icons-round position-absolute top-50 start-0 translate-middle-y ms-3 text-secondary">
                                    tag
                                </span>
                                <input
                                    type="text"
                                    name="ext"
                                    placeholder="Número exterior"
                                    class="form-control ps-5 border-1"
                                    value="{{ $cliente?->NumeroExterior ?? ''  }}"
                                >
                            </div>
                        </div>
                        <div class="col">
                            <label class="fw-bold">Número interior: </label>
                            <div class="position-relative border-1">
                                <span class="material-icons-round position-absolute top-50 start-0 translate-middle-y ms-3 text-secondary">
                                    tag
                                </span>
                                <input
                                    type="text"
                                    name="int"
                                    class="form-control ps-5 border-1"
                                    placeholder="Número interior..."
                                    value="{{ $cliente?->NumeroInterior ?? ''  }}"
                                >
                            </div>
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col">
                            <label class="fw-bold">Estado: <span class="text-danger">*</span></label>
                            <div class="position-relative border-1">
                                <span class="material-icons-round position-absolute top-50 start-0 translate-middle-y ms-3 text-secondary">
                                    fmd_good
                                </span>
                                <input
                                    type="text"
                                    name="estado"
                                    class="form-control ps-5 border-1"
                                    placeholder="Ingrese el estado del domicilio..."
                                    required
                                    value="{{ $cliente?->colonia?->poblacion?->municipio?->estado?->Estado ?? ''  }}"
                                >
                            </div>
                        </div>
                        <div class="col">
                            <label class="fw-bold">Municipio o Delegación: <span class="text-danger">*</span></label>
                            <div class="position-relative border-1">
                                <span class="material-icons-round position-absolute top-50 start-0 translate-middle-y ms-3 text-secondary">
                                    fmd_good
                                </span>
                                <input
                                    type="text"
                                    name="municipio"
                                    class="form-control ps-5 border-1"
                                    placeholder="Ingrese el municipio o delegación del domicilio..."
                                    required
                                    value="{{ $cliente?->colonia?->poblacion?->municipio?->Municipio ?? ''  }}"
                                >
                            </div>
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col">
                            <label class="fw-bold">Colonia: <span class="text-danger">*</span></label>
                            <div class="position-relative border-1">
                                <span class="material-icons-round position-absolute top-50 start-0 translate-middle-y ms-3 text-secondary">
                                    location_city
                                </span>

                                <input
                                    type="text"
                                    name="colonia"
                                    class="form-control ps-5 border-1"
                                    placeholder="Ingrese la colonia del domicilio..."
                                    required
                                    value="{{ $cliente?->colonia?->Descripcion ?? ''  }}"
                                >
                            </div>
                        </div>

                        <div class="col">
                            <label class="fw-bold">Código postal: <span class="text-danger">*</span></label>
                            <div class="position-relative border-1">
                                <span class="material-icons-round position-absolute top-50 start-0 translate-middle-y ms-3 text-secondary">
                                    markunread_mailbox
                                </span>
                                <input
                                    type="text"
                                    name="codigo_postal"
                                    class="form-control ps-5 border-1"
                                    placeholder="Ingrese el código postal del domicilio..."
                                    required
                                    value="{{ $esClienteMostrador ? $codigoPostalSucursal : $cliente?->colonia?->CodigoPostal }}"
                                >
                            </div>
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col">
                            <label class="fw-bold">Correo electrónico: <span class="text-danger">*</span></label>
                            <div class="position-relative border-1">
                                <span class="material-icons-round position-absolute top-50 start-0 translate-middle-y ms-3 text-secondary">
                                    mail
                                </span>
                                @if ($cliente && !$cliente?->correos->isEmpty())
                                    <select id="correo" class="form-control form-select ps-5" onchange="toggleEmailCustom(this, false)">
                                        @foreach ($cliente->correos as $correo)
                                            <option value="{{ $correo->Correo }}" @if ($loop->first) selected @endif>{{ $correo->Correo }}</option>
                                        @endforeach
                                        <option value="0">Ingresar otro correo...</option>
                                    </select>
                                    <div class="row hide-element" id="fragmento-email-custom">
                                        <div class="col d-flex flex-nowrap gap-2 align-items-center">
                                            <input
                                                type="email"
                                                id="correo_custom"
                                                class="form-control ps-5"
                                                placeholder="Ingrese su correo electrónico..."
                                            >
                                            <button 
                                                type="button" 
                                                class="btn btn-secondary"
                                                style="margin-bottom: 0px !important" 
                                                title="Seleccionar un correo del cliente."
                                                onclick="toggleEmailCustom(this, true)"
                                            >
                                                <span class="material-icons">
                                                    mark_email_read
                                                </span>
                                            </button>
                                        </div>
                                    </div>

                                @else
                                    <input
                                        type="email"
                                        id="correo_custom"
                                        class="form-control ps-5 border-1"
                                        placeholder="Ingrese su correo electrónico..."
                                        required
                                    >
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col">
                            <label class="fw-bold">Régimen fiscal: <span class="text-danger">*</span></label>
                            <div class="position-relative border-1">
                                <span class="material-icons-round position-absolute top-50 start-0 translate-middle-y ms-3 text-secondary">
                                    request_quote
                                </span>
                                <select name="regimen_fiscal" class="form-control form-select ps-5" required>
                                    @foreach ($regimenesFiscales as $regimenFiscal)
                                        <option value="{{ $regimenFiscal->id }}" @if ($cliente?->RegimenFiscal == $regimenFiscal->id ) selected @endif>{{ $regimenFiscal->c_regimenfiscal . ' - ' . $regimenFiscal->descripcion }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col">
                            <label class="fw-bold">Uso de CFDI: <span class="text-danger">*</span></label>
                            <div class="position-relative border-1">
                                <span class="material-icons-round position-absolute top-50 start-0 translate-middle-y ms-3 text-secondary">
                                    fact_check
                                </span>
                                <select name="uso_cfdi" class="form-control form-select ps-5" required>
                                    <option value="" disabled>Seleccione una opción...</option>
                                    @foreach ($usosCfdi as $uso)
                                        <option @if (($esClienteMostrador && $uso->c_usocfdi == 'S01') || (!$esClienteMostrador && $uso->c_usocfdi == 'G03')) selected @endif value="{{ $uso->id }}">{{ $uso->c_usocfdi . ' - ' . $uso->descripcion }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="col d-flex justify-content-center align-items-center">
                        <label class="text-bold" for="incluir_info_vehiculo">¿Incluir información del vehículo en la factura?</label>
                        <input type="checkbox" class="mb-2 ml-2" id="incluir_info_vehiculo">
                    </div>
                </div>
                <div class="row">
                    <div class="col d-flex justify-content-center align-items-center">
                        <button id="btnSend" class="btn btn-primary" onclick="send()">Facturar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const idDocumento = "{{ $id }}";

    const invalidFormMessage = {
        title: 'Formulario invalido',
        icon: 'warning',
        text: '¡Todos los campos marcados con (*) son obligatorios!'
    }

    const ajaxErrorMessage = {
        icon: 'error',
        title: '¡Lo sentimos!',
        text: 'Ha ocurrido un error inesperado, intentelo de nuevo más tarde'
    }

    const successMessage = {
        icon: 'success',
        title: '¡Hecho!',
        text: 'Los documentos de la factura se descargarán en breve.',
        allowOutsideClick: false,
        allowEscapeKey: false    
    }

    function toggleEmailCustom(select, isButtonTriggered) {
        if (isButtonTriggered) {
            $('#correo option:first').prop('selected', true);
            $('#correo').trigger('change');
            return false;
        }

        const selectedEmail = $(select).val();
        $('#fragmento-email-custom').toggleClass('hide-element', selectedEmail != 0)
        $('#correo').toggleClass('hide-element', selectedEmail == 0)
    }

    function send() {
        $('#btnSend').attr('disabled', true);

        const form = $('#frm_facturar')[0];

        if (!form.checkValidity()) {
            Swal.fire(invalidFormMessage)
            $('#btnSend').attr('disabled', false);
            return false;
        }

        const formData = new FormData(form);

        formData.append('id', idDocumento);

        const $fragmento = $('#fragmento-email-custom');

        const correo = $fragmento.hasClass('hide-element') ? $('#correo').val() : $('#correo_custom').val();

        if(!correoValido(correo)) {
            Swal.fire(invalidFormMessage)
            $('#btnSend').attr('disabled', false);
            return false;
        } 

        formData.append('correo', correo);

        const incluirInfoVehiculo = $('#incluir_info_vehiculo').is(':checked');

        formData.append('incluir_info_vehiculo', incluirInfoVehiculo);

        $.ajax({
            url: '../facturar',
            dataType: 'json',
            contentType: false,
            processData: false,
            type: 'POST',
            data: formData,
            success: (res, _, jqXHR) => {
                descargarArchivo(res.xmlUrl, res.xmlFilename);
                descargarArchivo(res.pdfUrl, res.pdfFilename);

                Swal.fire(successMessage).then(() => {
                    $('#btnSend').attr('disabled', true);
                    location.reload();
                })
            },
            error: (error) => {
                Swal.fire(ajaxErrorMessage);
                $('#btnSend').attr('disabled', false);
            }
        })
    }

    function descargarArchivo(url, nombre) {
        const link = document.createElement('a');
        link.href = url;
        link.download = nombre;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link); // Limpieza opcional
    }

    function correoValido(correo) {
        if (correo == '') return false;

        const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

        return regex.test(correo);
    }
</script>
@endsection