@extends('base')
@section('extracss')
    <style>
        .cruce_container{
            display: flex;
            gap: 10px;
            width: 100%;
            overflow-x: scroll;
        }
        table {
            font-size:12px;
        }
        .table_container,.totales{
            border: 1px solid rgb(151, 151, 151);
            border-radius: 8px;
            padding: 5px;
        }
        .totales fieldset{
            display: flex;
            margin-top: 1rem;
            gap: 2rem;
            justify-content: space-between;
        }
        .totales fieldset div{
            width: 45%;
        }
        .totales input{
            width: 100%;
        }
        .totales{
            margin-top:10px;
            width: 100%;
        }
        .nowrap{
            display: block;
            width: 60px !important;
            white-space: nowrap;
            overflow: hidden;
            width: fit-content;
            text-overflow: ellipsis !important;
        }
        .btn-parcial{
            width: 22px;
            height: 22px;
            border: none;
            font-size: 12px;
            background: rgb(19, 119, 186);
            color: white;
            border-radius: 5px;
            margin: 0;
        }
        .btn-parcial:disabled{
            background-color: gray;
        }
    </style>
@endsection
@section('extrajs')
    <script>
        // un data (representa una cuenta)
        // {
        //     id:0,
        //     isParcial:true,
        //     monto_parcial:400,
        //     saldo_total:1200,
        // }
        let Data =[{}];
        let totalPorCobrar = 0;
        let totalPorPagar = 0;
        let current_tr_parcial_changing;
        let current_table_parcial_changing;
        $(document).ready(function(){
            var y=new Date().toLocaleString("en-US", {timeZone: "America/El_Salvador"}).split(',')[0].replaceAll('/','-');
            document.querySelector('#fecha_cruce').value = (new Date(y)).toISOString().split("T")[0];
        });
        function SerializeData(documentoId,isParcial,monto_parcial,saldo_total){
            return {
                id:documentoId,
                isParcial:isParcial,
                monto_parcial:monto_parcial,
                saldo_total:saldo_total,
            }
        }
        function incl(table,event) {
            let tr = event.target.parentElement.parentElement; //el tr del check input
            let isChecked = event.target.checked; //el estado del check input
            let documentoID = parseInt(tr.getAttribute("data-documentoID")); //el id del documento
            let saldo = parseFloat(tr.getAttribute("data-A_saldar"),2);

            console.log(saldo);
            tr.querySelector('td.total').innerText = (isChecked ? saldo : "").toString();
            if(table==="tabla_porCobrar"){
                totalPorCobrar +=  isChecked ? saldo : -saldo;
                setDocumentosPorCobrar(documentoID,false,0,saldo,isChecked);
            }
            else{
                totalPorPagar +=  isChecked ? saldo : -saldo;
                setDocumentosPorPagar(documentoID,false,0,saldo,isChecked);
            }
            if (!isChecked) {
                tr.setAttribute('data-A_saldar',parseFloat(tr.getAttribute('data-saldo')).toFixed(2));
                tr.querySelector('td.parcial').innerText = "";
                tr.querySelector('.btn-parcial').disabled=true;
            }
            else{
                tr.querySelector('.btn-parcial').disabled=false;
            }
            // console.log({saldo,documentoID});

            actualizarResumen();
        }
        function onShowParcialModal(event,table){
            let tr = event.currentTarget.parentElement.parentElement;
            current_tr_parcial_changing = tr;
            document.querySelector('#modal_parcial_h5').innerText =  tr.querySelector('.doc_serial').innerText;
            document.querySelector('#modal_parcial_disponible').innerText = parseFloat(tr.getAttribute('data-saldo')).toFixed(2);
            current_table_parcial_changing = table;
        }
        function parcial(event){
            let monto = document.getElementById('parcial_monto').value;
            let saldo_disponible = parseFloat(current_tr_parcial_changing.getAttribute("data-saldo"),2);
            current_tr_parcial_changing.querySelector('td.total').innerText = "";
            current_tr_parcial_changing.querySelector('td.parcial').innerText = parseFloat(monto).toFixed(2).toString();
            current_tr_parcial_changing.setAttribute('data-A_saldar',parseFloat(monto).toFixed(2));
            let documentoID = parseInt(current_tr_parcial_changing.getAttribute('data-documentoID'));
            if(current_table_parcial_changing==="tabla_porCobrar"){
                totalPorCobrar += - 1 * parseFloat(saldo_disponible-monto).toFixed(2);
                setDocumentosPorCobrar(documentoID,true,monto,saldo_disponible,true);
            }
            else{
                totalPorPagar += -1 * parseFloat(saldo_disponible-monto).toFixed(2);
                setDocumentosPorPagar(documentoID,true,monto,saldo_disponible,true);
            }
            actualizarResumen();
            $('#modalParcial').modal('hide');

        }
        function actualizarResumen() {
            document.querySelector('#resumen_total_cobrar').value = parseFloat(totalPorCobrar).toFixed(2).toString();
            document.querySelector('#resumen_total_pagar').value = parseFloat(totalPorPagar).toFixed(2).toString();
            document.querySelector('#resumen_diferencia').value = parseFloat(totalPorCobrar - totalPorPagar).toFixed(2).toString();


            document.querySelector('#Generacion_pagos').innerText = parseFloat(totalPorPagar).toFixed(2).toString();
            document.querySelector('#Generacion_abono').innerText = parseFloat(totalPorCobrar).toFixed(2).toString();
            document.querySelector('#diferencia_de_cruce').value = parseFloat(totalPorCobrar - totalPorPagar).toFixed(2);
            Validate();
        }
        function setDocumentosPorCobrar(documentoId,isParcial,monto_parcial,saldo_total,flag){
            let inputTotalPorCobrar= document.querySelector("#documentosPorCobrar");
            let values = JSON.parse(inputTotalPorCobrar.value);
            if(flag){
                //si check == true pushea el id al arreglo final
                let is_In = false;
                values.forEach(v => {
                    console.log(v.id);
                    console.log(documentoId);
                    if(v.id==documentoId){
                        is_In=true;
                    }
                });
                if(!is_In){
                    let newRecord = SerializeData(documentoId,isParcial,monto_parcial,saldo_total);
                    values.push(newRecord);
                    console.log("isd in");
                }
                if(isParcial){
                    let newRecord = SerializeData(documentoId,isParcial,monto_parcial,saldo_total);
                    values = values.filter((v)=>{
                        return v.id!=documentoId;
                    });
                    values.push(newRecord);
                }

            }
            else{
                //si check == false elimina el id del arreglo final
                values = values.filter((v)=>{
                    return v.id!=documentoId;
                })
            }
            inputTotalPorCobrar.value = JSON.stringify(values);
            console.log(values);
        }
        function setDocumentosPorPagar(documentoId,isParcial,monto_parcial,saldo_total,flag){
            let inputTotalPorPagar= document.querySelector("#documentosPorPagar");
            let values = JSON.parse(inputTotalPorPagar.value);
            if(flag){
                //si check == true pushea el id al arreglo final
                let is_In = false;
                values.forEach(v => {
                    console.log(v.id);
                    console.log(documentoId);
                    if(v.id==documentoId){
                        is_In=true;
                    }
                });
                if(!is_In){
                    let newRecord = SerializeData(documentoId,isParcial,monto_parcial,saldo_total);
                    values.push(newRecord);
                    console.log("isd in");
                }
                if(isParcial){
                    let newRecord = SerializeData(documentoId,isParcial,monto_parcial,saldo_total);
                    values = values.filter((v)=>{
                        return v.id!=documentoId;
                    });
                    values.push(newRecord);
                }

            }
            else{
                //si check == false elimina el id del arreglo final
                values = values.filter((v)=>{
                    return v.id!=documentoId;
                })
            }
            inputTotalPorPagar.value = JSON.stringify(values);
            console.log(inputTotalPorPagar.value);
        }
        function Validate(){
            let errorMessage = document.querySelector('#cruce-error-message');
            let diferencia = document.querySelector('#resumen_diferencia');
            let submit = document.querySelector('#submit-cruce');
            if(parseFloat(diferencia.value)===0){
                submit.disabled = false;
                errorMessage.classList.add('d-none');
            }
            else{
                errorMessage.classList.remove('d-none');
                submit.disabled = true;
            }
        }
        function validateParcialAmount(input) {
            let saldo_disponible = parseFloat(current_tr_parcial_changing.getAttribute("data-saldo"),2);
            if(parseFloat(input.value) > saldo_disponible || parseFloat(input.value) < 0.01){
                document.getElementById('modal_parcial_monto').disabled = true;
                document.getElementById('error_parcial').classList.remove('d-none');
            }
            else
            {
                document.getElementById('modal_parcial_monto').disabled = false;
                document.getElementById('error_parcial').classList.add('d-none');
            }
        }
    </script>
@endsection
@section('content')
<h2 class="text-center mb-2">Maestro de Cruce de Cuentas</h2>
    @include('sessions')
    <div class="modal" tabindex="-1" id="modalParcial" role="dialog">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header bg-light">
            <h5 class="modal-title" id="modal_parcial_title">Agregar Parcial a <span id="modal_parcial_h5"></span></h5>
            <button type="button" class="btn btn-icon btn-sm btn-active-light-danger ms-2" data-bs-dismiss="modal" aria-label="Close">
                <i class="ki-outline ki-cross fs-1"></i>
            </button>
            </div>
            <div class="modal-body">
                <small>Disponible: <span id="modal_parcial_disponible"></span></small>
                <br>
                <small class="text-danger d-none" id="error_parcial">
                    <i class="fas fa-exclamation-circle"></i>
                    El monto debe ser menor o igual al saldo disponible, y mayor o igual que $ 0.01 </small>
                <br>
                <label for="parcial_monto">Monto</label>
                <input type="number" step="0.01" placeholder="0.00" class="form-control" name="" id="parcial_monto" onkeyup="validateParcialAmount(this)">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" id="modal_parcial_monto" onclick="parcial(event)">Aceptar</button>
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
            </div>
          </div>
        </div>
      </div>
    <div class="cruce_container">
        <div class="table_container">
            <table id="tabla_porCobrar" class="table table-streaped InitializeDataTable" data-DataTableConfig='{
                "language": {
                    "lengthMenu": "Mostrar _MENU_ Cuentas por página",
                    "zeroRecords": "No hay cuentas en proceso",
                    "info": "Mostrando _PAGE_ de _PAGES_ páginas",
                    "infoEmpty": "No hay páginas",
                    "infoFiltered": "(filtered from _MAX_ total records)",
                    "search":"Cliente:",
                    "paginate": {
                        "first":      "Primero",
                        "last":       "Ultimo",
                        "next":       "Siguiente",
                        "previous":   "Atrás"
                    }}}'>
                <legend>Por Cobrar</legend>
                <thead>
                    <th>Tip</th>
                    <th>Número</th>
                    <th>Concepto</th>
                    <th>Cliente</th>
                    <th>Saldo</th>
                    <th>Fec. <br> Fact.</th>
                    <th>incl</th>
                    <th>Total</th>
                    <th>Incluir Parcial</th>
                    <th>Parcial</th>
                </thead>
                <tbody>
                    @foreach ($documentosPorCobrar as $documento)
                        <tr data-documentoID="{{$documento->id}}" data-saldo="{{$documento->saldo}}"
                            data-A_saldar="{{$documento->saldo}}" data-isParcial="false">
                            <td>{{$tipoFormater($documento->tipo)}}</td>
                            <td class="doc_serial">{{$documento->documento_code}}</td>
                            <td><span class="nowrap">{{$documento->nombre_servicio}}</span></td>
                            <td><span class="nowrap">{{$documento->nombre_cliente}}</span></td>
                            <td>${{number_format($documento->saldo,2)}}</td>
                            <td>{{$dateFormater($documento->fecha)}}</td>
                            <td><input type="checkbox" autocomplete='off' onchange="incl('tabla_porCobrar',event)"></td>
                            <td class="total"></td>
                            <td>
                                <button type="button" class="btn-parcial fas fa-cut" disabled onclick="onShowParcialModal(event,'tabla_porCobrar')" data-toggle="modal" data-target="#modalParcial">
                                    {{-- <i class="fas fa-cut"></i> --}}
                                </button>
                            </td>
                            <td class="parcial"></td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="table_container">
            <table id="tabla_porPagar" class="table table-streaped InitializeDataTable" data-DataTableConfig='{
                "language": {
                    "search":"Proveedor:"
                    }}'>
                <legend>Por Pagar</legend>
                <thead>
                    <th>Tip</th>
                    <th>Número</th>
                    <th>Concepto</th>
                    <th>Proveedor</th>
                    <th>Saldo</th>
                    <th>Fec. <br> Fact.</th>
                    <th>incl</th>
                    <th>Total</th>
                    <th>Incluir Parcial</th>
                    <th>Parcial</th>
                </thead>
                <tbody>
                    @foreach ($documentosPorPagar as $documento)
                    <tr data-documentoID="{{$documento->id}}" data-saldo="{{$documento->saldo}}"
                        data-A_saldar="{{$documento->saldo}}" data-isParcial="false">
                        <td>{{$tipoFormater($documento->tipo)}}</td>
                        <td class="doc_serial">{{$documento->documento_code}}</td>
                        <td><span class="nowrap">{{$documento->nombre_servicio}}</span></td>
                        <td><span class="nowrap">{{$documento->nombreProveedor}}</span></td>
                        <td>${{number_format($documento->saldo,2)}}</td>
                        <td>{{$dateFormater($documento->fecha)}}</td>
                        <td><input type="checkbox" autocomplete='off' name="" id="" onchange="incl('tabla_porPagar',event)"></td>
                        <td class="total"></td>
                        <td>
                            <button type="button" class="btn-parcial" data-toggle="modal" disabled onclick="onShowParcialModal(event,'tabla_porPagar')" data-target="#modalParcial">
                                <i class="fas fa-cut"></i>
                            </button>
                        </td>
                        <td class="parcial"></td>
                    </tr>
                @endforeach

                </tbody>
            </table>
        </div>
    </div>
    <div class="totales">
        <fieldset>
            <legend>Totales a Incluir</legend>
            <div class="totalesAIncluir">
                <div class="form-group">
                    <label for="totalPorCobrar">Total Por Cobrar</label>
                    <input type="number" step="0.01" placeholder="0.00" class="form-control" readonly disabled min="0.00" name="totalPorCobrar" id="resumen_total_cobrar" value="0">
                </div>
                <div class="form-group">
                    <label for="totalPorPagar">Total Por Pagar</label>
                    <input type="number" step="0.01" placeholder="0.00" class="form-control" readonly disabled min="0.00" name="totalPorPagar" id="resumen_total_pagar" value="0">
                </div>
                <div class="form-group">
                    <label for="Diferencia">Diferencia</label>
                    <input type="number" step="0.01" placeholder="0.00" class="form-control" readonly disabled min="0.00" name="Diferencia" id="resumen_diferencia" value="0">
                </div>
            </div>
            <div class="resumen">
                <p>Se Generaran Abonos por $ <span id="Generacion_abono"></span></p>
                <p>Se Generaran Pagos por $ <span id="Generacion_pagos"></span> </p>
                {{-- <p>Se Generaran Cheques por $</p> --}}
            </div>
        </fieldset>
        <form action="{{route('CuentasPorCobrar.CruzarCuentas')}}" method="POST">
            @csrf
            <label for="fecha_cruce">Fecha de Cruce</label>
            <input type="date" class="form-control mb-2 w-50" name="fecha_cruce" id="fecha_cruce" required>
            <input type="hidden" id="documentosPorCobrar" name="documentosPorCobrar" value="[]">
            <input type="hidden" id="documentosPorPagar" name="documentosPorPagar" value="[]">
            <input type="hidden" id="diferencia_de_cruce" name="diferencia_de_cruce" value="">
            <small class="text-danger d-none my-2" id="cruce-error-message">
                <i class="fas fa-exclamation-circle"></i> La diferencia debe ser 0, para hacer el cruce de las cuentas.
            </small>
            <br>
            <button type="submit" class="btn btn-primary mx-auto" id="submit-cruce" disabled>Generar</button>
        </form>
    </div>
@endsection