@extends('layouts.master')

@section('title') @lang('translation.clients') @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')Ventas @endslot
@slot('title')Cotizaciones @endslot
@endcomponent

<template id="trow">
<tr>
    <td class="p-0" style="width: 35%; height:24px !important;">
        <select
            name="ps[]"
            class="form-select form-select-sm Producto" 
            id="productIdForm2"
            data-choices data-choices-sorting-false
            required="true">
            <option value="">Elige...</option>
            @foreach ($products as $id => $nombre)
            <option value="{{ $id }}">{{$nombre }}</option>
            @endforeach
        </select>
    </td>
    <td class="p-0" style="width: 15%">
        <input
            name="pr[]"
            type="text" 
            class="form-control Precio bg-light" 
            value="0"
            readonly>
    </td>
    <td class="p-0" style="width: 15%">
        <input
            name="us[]"
            type="text" 
            class="form-control Cantidad">
    </td>
    <td class="p-0" style="width: 15%">
        <input
            name="ds[]"
            type="text" 
            class="form-control Descuento">
    </td>
    <td class="p-0" style="width: 20%">
        <input
            name="tt[]"
            type="text" 
            class="form-control Total bg-light" readonly>
    </td>
    <td style="display: none;">
        <input type="hidden" name="tit[]" class="tIt">
        <input type="hidden" name="tir[]" class="tIr">
    </td>
    <td>
        <button type="button" class="btn btn-danger btn-sm DeleteBtn" onclick="this.closest('tr').remove()">
            X
        </button>
    </td>
</tr>
</template>

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Nueva Cotización</h5>
            </div>
            <div class="card-body">
                <form role="form" method="post" action="{{ route('quots.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 }}">
                            <input type="text" readonly 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-select form-select-tf" 
                                        aria-label=".form-select-tf" 
                                        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-lg-12">
                            <div>
                                <label for="NombreInput" class="form-label">Nombre de la cotización</label>
                                <input
                                    id="NombreInput"
                                    name="nombre"
                                    type="text" 
                                    class="form-control"
                                    required="true">
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div>
                                <label for="folioInput" class="form-label">Folio</label>
                                <input 
                                    type="text" 
                                    class="form-control" 
                                    id="folioInput" 
                                    name="folio"
                                    required="true"
                                    readonly
                                    value="{{ $folio }}">
                            </div>
                        </div><!--end col-->
                        <div class="col-lg-4">
                            <div>
                                <label for="textInputDate1" class="form-label">Fecha Expiración</label>
                                <input 
                                    name="fecha_expiracion"
                                    type="date" 
                                    class="form-control" 
                                    id="textInputDate1">
                            </div>
                        </div><!--end col-->
                        <div class="col-lg-4">
                            <div>
                                <label for="EstatusInputSelect" class="form-label">Estatus</label>
                                <select
                                    id="EstatusInputSelect"
                                    name="estatus" 
                                    class="form-select mb-3" 
                                    aria-label="EstatusInputSelect"
                                    required="true">
                                    <option selected="">Elige el estatus</option>
                                    <option value="edicion">Edición</option>
                                    <option value="terminada">Terminada</option>
                                </select>
                            </div>
                        </div><!--end col-->
                        <div class="col-lg-6">
                            <div>
                                <label for="clientIdForm" class="form-label">Cliente</label>
                                <select 
                                    class="form-control" 
                                    id="clientIdForm" 
                                    name="client_id" 
                                    data-choices data-choices-sorting-false
                                    required="true">
                                    <option value="">Elige el cliente</option>
                                    @foreach ($clients as $id => $razon_social)
                                    <option 
                                        value="{{ $id }}"
                                        {{(old('client_id',$client_id)==$id)?'selected':''}}>
                                        {{$razon_social }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div><!--end col-->
                        <div class="col-lg-3">
                            <div>
                                <label for="MonedaInputSelect" class="form-label">Moneda</label>
                                <select
                                    class="form-control MonedaInputSelect" 
                                    id="MonedaInputSelect"
                                    name="moneda"                                    
                                    data-choices data-choices-sorting-false
                                    required="true">
                                    <option selected="">Elige...</option>
                                    @foreach ($monedas as $c_Moneda => $nombre)
                                    <option 
                                        value="{{ $c_Moneda }}"
                                        {{(old('moneda')==$c_Moneda)?'selected':''}}>
                                        {{$nombre }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div><!--end col-->
                        <div class="col-lg-3">
                            <div>
                                <label for="tipo_cambioInput" class="form-label">Tipo de cambio</label>
                                <input 
                                    type="text" 
                                    class="form-control" 
                                    id="tipo_cambioInput" 
                                    name="tipo_cambio"
                                    disabled
                                    value="">
                            </div>
                        </div><!--end col--> 
                        <div class="col-lg-12">                                                    
                            <hr class="mt-0 mb-0">
                            <div class="row">
                                <h5 class="col-6 fs-16 align-middle mt-2 mb-0">Productos y servicios</h5>
                                <div class="col-6 d-flex mt-1 justify-content-sm-end">
                                    <button id="aRow" type="button" class="btn btn-primary btn-sm">
                                        <i class="ri-add-fill align-middle"></i> Producto o Servicio
                                    </button>
                                </div>
                            </div>
                            <hr class="mt-1">
                        </div>
                        <div class="col-lg-12 mt-0">
                            <table id="tProServCotiza" class="table table-bordered nowrap table-striped align-middle">
                                <thead>
                                    <tr class="align-middle text-center m-0">
                                        <th class="p-0" style="width: 35%;">Producto</th>
                                        <th class="p-0" style="width: 15%;">Precio unitario</th>
                                        <th class="p-0" style="width: 15%;">Cantidad</th>
                                        <th class="p-0" style="width: 15%;">Decuento</th>
                                        <th class="p-0" style="width: 20%;">Total</th>
                                        <th><i class="ri-delete-bin-5-line"></i></th>
                                    </tr>
                                </thead>
                                <tbody id="t-body">
                                    <tr>
                                        <td class="p-0" style="width: 35%; height:24px !important;">
                                            <select
                                                name="ps[]"
                                                class="form-select form-select-sm Producto" 
                                                id="productIdForm1"
                                                data-choices data-choices-sorting-false
                                                required="true">
                                                <option value="">Elige...</option>
                                                @foreach ($products as $id => $nombre)
                                                <option 
                                                    value="{{ $id }}"
                                                    {{(old('ps[]')==$id)?'selected':''}}>
                                                    {{$nombre }}
                                                </option>
                                                @endforeach
                                            </select>                                            
                                        </td>
                                        <td class="p-0" style="width: 15%">
                                            <input
                                                name="pr[]"
                                                type="text" 
                                                class="form-control Precio bg-light"
                                                required="true"
                                                readonly>
                                        </td>
                                        <td class="p-0" style="width: 15%">
                                            <input
                                                name="us[]"
                                                type="text" 
                                                class="form-control Cantidad"
                                                required="true">
                                        </td>
                                        <td class="p-0" style="width: 15%">
                                            <input
                                                name="ds[]"
                                                type="text" 
                                                class="form-control Descuento" value="0.00">
                                        </td>
                                        <td class="p-0" style="width: 20%">
                                            <input
                                                name="tt[]"
                                                type="text" 
                                                class="form-control Total bg-light"
                                                required="true"
                                                readonly>
                                        </td>
                                        <td style="display: none;">
                                            <input type="hidden" name="tit[]" class="tIt">
                                            <input type="hidden" name="tir[]" class="tIr">
                                        </td>
                                        <td>
                                            <button 
                                                type="button" 
                                                class="btn btn-danger btn-sm DeleteBtn" 
                                                onclick="this.closest('tr').remove()">
                                                X
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="3"></td>
                                        <td class="p-0">
                                            Total antes descuento
                                        </td>
                                        <td class="p-0" style="width: 15%">
                                            <input 
                                                id="subtotal"
                                                name="subtotal"
                                                type="text" 
                                                class="form-control bg-light"
                                                placeholder="0.00"
                                                readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3"></td>
                                        <td class="p-0" style="width: 15%">
                                            Descuento
                                        </td>
                                        <td class="p-0" style="width: 15%">
                                            <input 
                                                id="totalDescuento" 
                                                name="descuento"
                                                type="text" 
                                                class="form-control bg-light"
                                                required="true"
                                                placeholder="0.00"
                                                readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3"></td>
                                        <td class="p-0" style="width: 15%">
                                            Subtotal
                                        </td>
                                        <td class="p-0" style="width: 20%">
                                            <input 
                                                id="totalGeneral" 
                                                type="text" 
                                                class="form-control bg-light"
                                                placeholder="0.00"
                                                readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3"></td>
                                        <td class="p-0" style="width: 15%">
                                            TRASLADO IMPUESTOS
                                        </td>
                                        <td class="p-0" style="width: 20%">
                                            <input 
                                                id="toc_t"
                                                name="toc_t" 
                                                type="number"
                                                step="0.01"
                                                class="form-control bg-light TOC_T"
                                                required="true"
                                                readonly
                                                placeholder="0.00">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3"></td>
                                        <td class="p-0" style="width: 15%">
                                            RETENCIÓN IMPUESTOS
                                        </td>
                                        <td class="p-0" style="width: 20%">
                                            <input 
                                                id="toc_r"
                                                name="toc_r" 
                                                type="number"
                                                step="0.01"
                                                class="form-control bg-light TOC_R"
                                                required="true"
                                                readonly
                                                placeholder="0.00">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3"></td>
                                        <td class="p-0" style="width: 15%">
                                            Total
                                        </td>
                                        <td class="p-0" style="width: 20%">
                                            <input 
                                                id="totalTotal" 
                                                name="total"
                                                type="text" 
                                                class="form-control bg-light"
                                                placeholder="0.00"
                                                readonly>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        <div class="col-lg-12">
                            <div>
                                <label for="CondPagoInput" class="form-label">Condiciones de pago</label>
                                <textarea 
                                    type="text" 
                                    class="form-control" 
                                    id="CondPagoInput" 
                                    name="condiciones_pago"
                                    required="true"
                                    maxlength="180" 
                                    placeholder="Ingresa las condiciones (max. 190 cars.)..."></textarea>
                            </div>
                        </div><!--end col-->
                        <div class="col-lg-12">
                            <div>
                                <label for="NotasIntArea" class="form-label">Notas internas</label>
                                <textarea
                                    id="NotasIntArea"
                                    name="notas_int" 
                                    class="form-control" 
                                    aria-label="NotasIntArea" 
                                    required="true"
                                    placeholder="Información visible al vendedor..."></textarea>
                            </div>
                        </div><!--end col-->
                        <div class="col-lg-12">
                            <div>
                                <label for="NotasExtArea" class="form-label">Observaciones</label>
                                <textarea
                                    id="NotasExtArea"
                                    name="notas_ext" 
                                    class="form-control mb-3" 
                                    aria-label="NotasExtArea" 
                                    required="true"
                                    placeholder="Información visible a tu cliente..."></textarea>
                            </div>
                        </div><!--end col-->
                        <div class="col-lg-12">
                            <div class="hstack gap-2 justify-content-end">
                                <a href="{{ route('quots') }}" class="btn btn-light">Regresar</a>
                                <button type="submit" class="btn btn-primary">Guardar</button>
                            </div>
                        </div><!--end col-->
                    </div>
                </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>
    
    // Constantes
    const precios = @json($aproducts);
    const moneda = @json(config('app.modeda_local'));
    const impuestos_traslado = @json($impuestos_traslado);
    const impuestos_retencion = @json($impuestos_retencion);

    // Listeners
    // *** Agregar conceptos
    document.addEventListener("DOMContentLoaded", function () {
        agregarFila = document.getElementById("aRow");
        agregarFila.addEventListener('click', function() {
            const template = document.getElementById("trow");
            const clone = template.content.cloneNode(true);

            clone.querySelectorAll("input").forEach(input => input.value = "");
            clone.querySelectorAll("select").forEach(select => select.selectedIndex = 0);

            const tbody = document.getElementById("t-body");
            tbody.appendChild(clone);

            // Reinicializar Choices
            tbody.querySelectorAll("select[data-choices]:not(.choices__input)").forEach(el => {
                new Choices(el, {
                    shouldSort: false
                });
                el.classList.add("choices-initialized");
            }); 
        });
    });
    
    // Cualquier cambio durante la interacción
    document.addEventListener("change", e => {
        
        // Se ha seleccionado un producto
        if (e.target.classList.contains("Producto")) {
            let row = e.target.closest("tr");
            let precio = precios[e.target.value] || 0;
            let tIt=0;
            let tIr=0;
            row.querySelector(".Precio").value = precio;
            Array.from(impuestos_traslado[e.target.value]).map(rowt => {
                tIt += parseFloat(rowt['toc']) || 0;
            })
            row.querySelector(".tIt").value = tIt;
            Array.from(impuestos_retencion[e.target.value]).map(rowr => {
                tIr += parseFloat(rowr['toc']) || 0;
            })
            row.querySelector(".tIr").value = tIr;
        }

        // Selección de la moneda
        if (e.target.classList.contains("MonedaInputSelect")) {
            const moneda_def = e.target.value;
            if (moneda_def != moneda) {
                document.getElementById('tipo_cambioInput').disabled=false;
            } else{
                document.getElementById('tipo_cambioInput').disabled=true;
            }
        }

    });

    function calcular() {

        let subtotal = 0;
        let totalDescuento = 0;
        let totalGeneral = 0;
        let tTraslado = 0;
        let tRetencion = 0;

        document.querySelectorAll("#tProServCotiza tbody tr").forEach(row => {

            let cantidad = parseFloat(row.querySelector(".Cantidad").value) || 0;
            let precio = parseFloat(row.querySelector(".Precio").value) || 0;
            let descuento = parseFloat(row.querySelector(".Descuento").value) || 0;
            let total = (cantidad * precio) - descuento;
            // impuestos
            let traslado =  parseFloat(row.querySelector(".tIt").value) || 0;
            let retencion = parseFloat(row.querySelector(".tIr").value) || 0;
            tTraslado += total * traslado;
            tRetencion += total * retencion; 
            row.querySelector(".Total").value = total.toFixed(2);
            subtotal += cantidad * precio;
            totalDescuento += descuento;
            totalGeneral += total;
        });

        document.getElementById("subtotal").value = subtotal.toFixed(2);
        document.getElementById("totalDescuento").value = totalDescuento.toFixed(2);
        document.getElementById("toc_t").value = tTraslado.toFixed(2);
        document.getElementById("toc_r").value = tRetencion.toFixed(2);
        document.getElementById("totalGeneral").value = totalGeneral.toFixed(2);
        
        let totalTotal = totalGeneral + tTraslado - tRetencion;
        document.getElementById("totalTotal").value = totalTotal.toFixed(2);
    }
    
    // cambios en los inputs de cada concepto
    document.addEventListener("input", function(e) {

        if (
            e.target.classList.contains("Cantidad") ||
            e.target.classList.contains("Descuento")
        ) {
            calcular();
        }
    });

    document.addEventListener("click", e => {
        if (e.target.classList.contains("DeleteBtn")){
            calcular();
        }
    });

</script>
@endsection