@extends('base')
@section('title',"Cargos y Abonos de la cuenta")
@section('extracss')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">

    <style>

        .tabladocs{

        }
        .table_container{
            max-height: 400px;
            /* overflow: scroll; */
        }
        .nav .nav-link.active{
            background: var(--primary) !important;
            color: white !important;
            font-weight: bolder;
        }
        .libres{
            background-color: aliceblue !important;
            padding: 10px;
        }
        .primeros{
            padding: 10px;
        }
        button:disabled{
            cursor: not-allowed !important;

        }
        .hidden{
            visibility: hidden
        }
    </style>
@endsection
@section('extrajs')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    {{-- <script src="//cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script> --}}

    <script>
        let supplier_id_remesar = 0;
        let comentarios=[];
        var y=new Date().toLocaleString("en-US", {timeZone: "America/El_Salvador"}).split(',')[0].replaceAll('/','-');

        document.querySelector('#fecha_remesa_cargos').value = (new Date(y)).toISOString().split("T")[0];
        var formatter = new Intl.NumberFormat('en-US', {
            style: 'currency',
            currency: 'USD',

            // These options are needed to round to whole numbers if that's what you want.
            //minimumFractionDigits: 0, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1)
            //maximumFractionDigits: 0, // (causes 2500.99 to be printed as $2,501)
        });

        $(document).ready(function(){
            $('#acreedor_id').select2();
        });

        $(document).ready(function(){
            $('#proveedor').select2();
        });

        $(document).ready(function(){
            $('#cliente').select2();
        });
        function aRemesar(checkbox,monto) {
            let supplier_id = checkbox.getAttribute('data-supplier_id');

            if(parseInt(supplier_id)<0){
                // alert("estas rpagando una caja chica");
                aRemesarCajaChica(checkbox.checked,checkbox.getAttribute('data-idTransaccion'));
                // return;
            }
            let total = document.querySelector('#total_a_remesar');
            total.value = parseFloat(total.value) + (checkbox.checked ? monto: -1 * monto);
            document.querySelector('#total_remesar_modal').querySelector('span').innerText = formatter.format(parseFloat(total.value));
            document.querySelector('#valor_cargo_form').value = total.value;
            document.querySelector('#btn-remesar-cargos').disabled = !parseFloat(total.value) > 0;

            //agregamos el doc en el input
            let id = parseInt(checkbox.getAttribute('data-idTransaccion'));
            includeAbono(id,checkbox.checked);
            includeComentario(checkbox.getAttribute('data-documento_num',checkbox.getAttribute('data-tipoDoc'),checkbox.checked),
            checkbox.getAttribute('data-tipoDoc'), checkbox.checked);
            includeSupplier(parseInt(supplier_id));
            renderComentarios();
            console.log(comentarios);
        }
        function includeAbono(id,flag){
            let input = document.querySelector('input[name="abonos_involucrados"]');
            let temp = input.value.split('|');
            if(flag){
                if(!temp.includes(id)){
                    temp.push(id);
                }
            }
            else{
                let gg= [];
                temp.forEach(element => {
                    if(element!=id){
                        gg.push(element); h
                    }
                });

                temp = gg;
            }

            temp = temp.join('|');
            input.value = temp;
        }
        function includeComentario(documento_code,tipo,flag) {
            if(flag){
                if (!comentarios.some(e => e.documento_code === documento_code)) { //verificar si ya esta uno con el id del input
                    comentarios.push({documento_code,tipo}); //si no existe una data con el id, introducirlo
                }
            }
            else{
                comentarios = comentarios.filter(e => e.documento_code != documento_code);
            }
        }
        function includeSupplier(supplier_id) {
            if(supplier_id_remesar == 0){
                supplier_id_remesar=supplier_id;
            }
            if(comentarios.length==0){
                supplier_id_remesar = 0;
            }
            document.getElementById('supplier_id_remesar').value = supplier_id_remesar;
        }
        function renderComentarios() {
            // let comentario="Documentos: \n";
            let comentario="";
            comentarios.forEach(comment => {
                comentario += `- Documento: ${comment.documento_code} Tipo: ${comment.tipo} \n`;
            });
            document.querySelector('#comentario_cargos').innerHTML=comentario;
        }
        function showComision(select){
            let flag = select.selectedOptions[0].value == 5;
            let comisionContainer = document.querySelector('#comision_form_container');
            if(flag){
                comisionContainer.classList.remove('d-none');
                document.querySelector('#remesa_referencia').readOnly =false;

            }
            else{
                if(!comisionContainer.classList.contains('d-none'))
                    comisionContainer.classList.add('d-none');
                comisionContainer.querySelector('input[name="comision"]').value = "0.00";

                if(select.selectedOptions[0].value == 4){
                    getLastChequeCorrelativo('#remesa_referencia');
                }
                else
                    document.querySelector('#remesa_referencia').value = "";
                    document.querySelector('#remesa_referencia').readOnly =false;
            }
        }

        function showComisionLibres(select,comision_container_selector,referencia_input,comision_input){
            let flag = select.selectedOptions[0].value == 5;
            let comisionContainer = document.querySelector(comision_container_selector);
            if(flag){
                comisionContainer.classList.remove('d-none');
                document.querySelector(referencia_input).readOnly =false;
                document.querySelector(referencia_input).value = "";
            }
            else{
                if(!comisionContainer.classList.contains('d-none'))
                    comisionContainer.classList.add('d-none');
                document.querySelector(comision_input).value = "";

                if(select.selectedOptions[0].value == 4){
                    getLastChequeCorrelativo(referencia_input);
                }
                else
                    {document.querySelector(referencia_input).value = "";
                    document.querySelector(referencia_input).readOnly =false;}
            }
        }
        function getLastChequeCorrelativo(remesa_selector) {
            let res =[];
            $.ajax({
            url: "{{route('controlseriales.GETLastCodeVarios','CHE')}}",
            type:"GET",
            data: {},
            success: function(result){
                document.querySelector(remesa_selector).value = `${result.new}`;
                document.querySelector(remesa_selector).readOnly =true;
                }
            });

        }
        function aRemesarCajaChica(flag,idTR) {
            let tabla = document.getElementById('notas_deCargoPagar');
            let trs = [...(tabla.tBodies[0].children)];

            trs.forEach( tr=>{
                let current_check= tr.querySelector('input');
                if(idTR!=current_check.getAttribute('data-idTransaccion'))
                    current_check.disabled=flag;
            });
            document.getElementById('warning_pagando_chica').classList.toggle('hidden');
            document.getElementById('a_cuenta_de_form_container').classList.toggle('d-none');
        }

    </script>

@endsection
@section('content')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active" aria-current="page">Listado de Cuentas</li>
        </ol>
    </nav>
    @include('sessions')
    @include('banco.cargosyAbonos.modals.remesarCargosPendientes')
    <div class="border-dark border-2">
        <div class="d-flex justify-content-around">
            <input type="hidden" name="cuenta_id" value="{{$cuenta->id}}">
            <div class="form-group">
                <label for="banco">Banco:</label>
                <input type="text" class="form-control" name="banco" readonly disabled value="{{ $cuenta->banco->nombre_banco.' '.$cuenta->banco->pais }} ">
            </div>

            <div class="form-group">
                <label for="cuenta">Cuenta:</label>
                <input type="text" class="form-control" name="cuenta" readonly disabled value="{{ $cuenta->numero_cuenta }}">
            </div>
        </div>
            <h3>Listado de Cargos y Abonos</h3>
            <div class="primeros">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link " id="cargos_abonos-tab" data-toggle="tab" href="#cargos_abonos" role="tab" aria-controls="cargos_abonos" aria-selected="true">Cargos y abonos</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" id="cargos-tab" data-toggle="tab" href="#cargos" role="tab" aria-controls="cargos" aria-selected="false">Cargos</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" id="abonos-tab" data-toggle="tab" href="#abonos" role="tab" aria-controls="abonos" aria-selected="false">Abonos</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="{{$documentosPorPagar != null? 'nav-link activate':'nav-link'}}" id="notas_cargo-tab" data-toggle="tab" href="#notas_cargo" role="tab" aria-controls="notas_cargo" aria-selected="false">Pago a proveedores</a>
                    </li>
                    <li class="nav-item" role="presentation" >
                        <a class="nav-link {{ old('tab_code') ? 'active' :'' }}" id="notas_cargo_remesadas-tab" data-toggle="tab" href="#notas_cargo_remesadas" role="tab" aria-controls="notas_cargo_remesadas" aria-selected={{ old('tab_code') ? 'true' :'false' }}  >Ingresos por Ventas</a>
                    </li>
                </ul>
                <div class="tab-content px-2" id="myTabContent" style="height: 400px;overflow-y:scroll;">
                    <div class="tab-pane fade show  mb-4"  id="cargos_abonos" role="tabpanel" aria-labelledby="cargos_abonos-tab">
                        <div class="table_container mb-4 pb-4">
                            <table class="table mt2 table-bordered table-hover" id="table_cargos_abonos">
                                <thead class="bg-primary">
                                <tr class="text-white">
                                    <th>Fecha</th>
                                    <th>Tipo</th>
                                    <th>Referencia</th>
                                    <th>Motivo / Observaciones</th>
                                    <th>Debe</th>
                                    <th>Haber</th>
                                    <th>Con.</th>
                                    <th>Saldo</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach ($transacciones_totales as $tr)
                                    <tr>
                                        <td>{{date('d/m/Y',strtotime($tr->fecha_conta))}}</td>
                                        <td style="max-width: 100px;">{{$tr->tipo_abono}}</td>
                                        <td style="max-width: 100px;">{{$tr->referencia}}</td>
                                        <td>{{$tr->comentario}}</td>
                                        <td class="text-success text-right" style="font-weight: bolder;" >
                                            @if ($tr->isCargo==0)
                                                <span class="float-left">$&nbsp;&nbsp;&nbsp;</span>{{number_format($tr->valor_cargo,2)}}
                                            @endif
                                        </td>
                                        <td class="text-danger text-right" style="font-weight: bolder;" >
                                            @if ($tr->isCargo==1)
                                                <span class="float-left">$&nbsp;&nbsp;&nbsp;</span>{{number_format($tr->valor_cargo,2)}}
                                            @endif
                                        </td>
                                        <td
                                            @if ($tr->conciliada==1)
                                            class="text-center text-success"
                                            @else
                                            class="text-center text-warning"
                                            @endif
                                        ><i class="fas fa-square"></i></td>
                                        <td style="font-weight: bolder;">$ {{number_format($tr->saldo_cuenta,2)}}</td>
                                    </tr>
                                @endforeach

                                </tbody>
                            </table>
                        </div>
                    </div>

                        <div class="tab-pane fade" id="cargos" role="tabpanel" aria-labelledby="cargos-tab">
                            <div class="table_container mb-4">
                                <table class="table mt2 table-bordered table-hover" id="table_cargos">
                                    <thead class="bg-primary">
                                    <tr class="text-white">
                                        <th>Fecha</th>
                                        <th>Tipo</th>
                                        <th>Referencia</th>
                                        <th>Motivo / Observaciones</th>
                                        <th>Cargo</th>
                                        <th>Numero</th>
                                        <th>Cheque</th>
                                        {{-- <th>Saldo</th> --}}
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <form method="post" action="{{route('cuenta.cancelarCheque.crear')}}">
                                        @csrf
                                    @foreach ($transacciones_cargos as $tr)
                                        @if($tr->cancelado == 1)
                                            <tr>
                                                <td>{{$tr->fecha_conta}}</td>
                                                <td style="max-width: 100px;">{{$tr->tipo_abono}}</td>
                                                <td style="max-width: 100px;">{{$tr->referencia}}</td>
                                                <td>ANULADO</td>
                                                <td class="text-danger text-right" style="font-weight: bolder;" >
                                                    <span class="float-left">$&nbsp;&nbsp;&nbsp;</span>{{number_format(0,2)}}
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" name="numeroChequeNuevo">
                                                    <input type="hidden" value="{{$tr->id}}" name="transaccion_bancaria_id">
                                                </td>
                                                <td>
                                                    <button type="submit" class="btn btn-primary">Crear</button>
                                                </td>
                                            </tr>
                                        @else
                                            <tr>
                                                <td>{{$tr->fecha_conta}}</td>
                                                <td style="max-width: 100px;">{{$tr->tipo_abono}}</td>
                                                <td style="max-width: 100px;">{{$tr->referencia}}</td>
                                                <td>{{$tr->comentario}}</td>
                                                <td class="text-danger text-right" style="font-weight: bolder;" >
                                                    <span class="float-left">$&nbsp;&nbsp;&nbsp;</span>{{number_format($tr->valor_cargo,2)}}
                                                </td>
                                                <td>
                                                    @if ($tr->tipo_abono_id==4 && $tr->cancelado == null)
                                                        <a target="_blank" href="{{route('ReportesContabilidad.ChequePDF')}}?cuenta={{$cuenta->id}}&tr={{$tr->id}}"><i class="fas fa-money-check mr-1"></i></a>
                                                        <a target="_blank" href="{{route('ReportesContabilidad.ChequePDF')}}?cuenta={{$cuenta->id}}&tr={{$tr->id}}&noBKG=1"><i class="fas fa-money-bill"></i></a>
                                                        <a target="_blank" href="{{route('cuenta.cancelarCheque')}}?cuenta={{$cuenta->id}}&tr={{$tr->id}}" title="Anular"><i class="ki-outline ki-shield-cross fs-2x text-danger mx-2"></i></a>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endif
                                    @endforeach
                                    </form>

                                    </tbody>
                                </table>
                            </div>
                        </div>

                    <div class="tab-pane fade" id="abonos" role="tabpanel" aria-labelledby="abonos-tab">
                        <div class="table_container mb-4">
                            <table class="table mt2 table-bordered table-hover" id="table_abonos">
                                <thead class="bg-primary">
                                <tr class="text-white">
                                    <th>Fecha</th>
                                    <th>Tipo</th>
                                    <th>Referencia</th>
                                    <th>Motivo / Observaciones</th>
                                    <th>Abono</th>
                                    {{-- <th>Saldo</th> --}}
                                </tr>
                                </thead>
                                <tbody>
                                @foreach ($transacciones_abonos as $tr)
                                    <tr>
                                        <td>{{$tr->fecha_conta}}</td>
                                        <td style="max-width: 100px;">{{$tr->tipo_abono}}</td>
                                        <td style="max-width: 100px;">{{$tr->referencia}}</td>
                                        <td>{{$tr->comentario}}</td>
                                        <td class="text-success text-right" style="font-weight: bolder;" >
                                            <span class="float-left">$&nbsp;&nbsp;&nbsp;</span>{{number_format($tr->valor_cargo,2)}}
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    {{-- pendientes --}}
                    <div class="tab-pane fade " id="notas_cargo" role="tabpanel" aria-labelledby="notas_cargo-tab">
                        <div class="d-flex justify-content-between">
                            <form method="get" action="{{route('cuenta.cargosYAbonos',$cuenta->id)}}">
                                    <label for="proveedor" class="col-form-label">Proveedor</label>
                                    <select name="proveedor" id="proveedor" class="form-control">
                                        @foreach ($proveedores as $item)
                                            <option value="{{$item->id}}">{{$item->codProveedor}}-{{$item->nombreProveedor}}</option>
                                        @endforeach
                                    </select>


                                <button class="btn btn-primary"><i class="ki-outline ki-magnifier fs-2"></i> Buscar documentos</button>


                            </form>

                            <div class="">
                                <label for="">Total a pagar</label>
                                <input type="number" class="form-control" step="0.01" value="0.00" readonly id="total_a_remesar">
                            </div>
                        </div>
                        <small class="text-danger hidden " id="warning_pagando_chica">Pagando Caja Chica, se desactivaron los demás pagos pendientes</small>
                        <form method="post" action="{{route('cuenta.pagoProveedor')}}">
                            @csrf
                            <input type="hidden" name="cuenta_bancaria_id" value="{{$cuenta->id}}">
                            <table class="table mt2 table-bordered table-hover" id="notas_deCargoPagar">
                                <thead class="bg-primary">
                                <tr class="text-white">
                                    <th>#</th>
                                    <th class="text-center">Tipo</th>
                                    <th class="text-center">Fecha</th>
                                    <th>Documento</th>
                                    <th>Monto</th>
                                    <th>Saldo pendiente</th>
                                    <th>Parcial</th>
                                    <th>Acciones</th>
                                </tr>
                                </thead>
                                <tbody>
                                @php
                                    $x=1;
                                @endphp
                                @foreach ($documentosPorPagar as $tr)
                                    <tr>
                                        <input type="hidden" name="documentos[]" value="{{$tr['documento_id']}}">
                                        <td>{{$x++}}</td>
                                        <td style="max-width:50px; ">{{$tr['tipo']}}</td>
                                        <td class="text-center">{{'x/x/x'}}</td>
                                        <td>{{$tr['documento_code']}}</td>
                                        <td class="text-right"><span class="float-left">$&nbsp;&nbsp;&nbsp;</span>{{number_format($tr['total'],2)}}</td>
                                        <td class="text-right"><span class="float-left">$&nbsp;&nbsp;&nbsp;</span>{{number_format($tr['pagos'],2)}}</td>
                                        <td> <input class="form-control" type="number" step="any" name="parcial[]"> </td>
                                        <td><input name="cancelado[]" type="checkbox"></td>
                                    </tr>
                                @endforeach
                                </tbody>
                                <tfoot>
                                <tr>
                                    <td><button type="submit" class="btn btn-primary">Pagar seleccionados</button></td>
                                    <td><label>Fecha</label><input type="date" name="fecha_cheque" class="form-control"></td>
                                    <td><label>Referencia</label><input type="text" name="referencia_cheque" class="form-control"></td>
                                    <td><label>No negociable</label><input type="checkbox" name="no_negociable" class="form-control"></td>
                                    <td><label>Cargo Comision</label><input type="number" step="any" name="cargo_comision" class="form-control"></td>
                                    <td><label>Iva Comision</label><input type="number" step="any" name="iva_comision" class="form-control"></td>
                                </tr>

                                </tfoot>
                            </table>
                        </form>

                    </div>
                    
                    <div class="tab-pane fade" id="notas_cargo_remesadas" role="tabpanel" aria-labelledby="notas_cargo_remesadas-tab">
                        <h3 class="my-2">Ingreso por venta</h3>
                        <form method="get" action="{{route('cuenta.cargosYAbonos',$cuenta->id)}}">
                            <div class="col-md-6">
                                <label for="proveedor" class="col-form-label">Cliente</label>
                                <select name="cliente" id="cliente" class="form-control">

                                    @foreach ($clientes as $item)
                                        <option value="{{$item->id}}">{{$item->codigo}}-{{$item->nombre_cliente}}</option>
                                    @endforeach

                                </select>
                                <input type="text" name="tab_code" value="notas_cargo_remesadas">

                                <button class="btn btn-primary"><i class="ki-outline ki-magnifier fs-2"></i> Buscar documentos</button>

                            </div>

                        </form>
                        <form method="post" action="{{route('cuenta.ingresoVenta')}}">
                            @csrf
                            <input type="hidden" name="cuenta_bancaria_id" value="{{$cuenta->id}}">
                            <input type="text" name="tab_code" value="notas_cargo_remesadas">
                            <table class="table mt2 table-bordered table-hover" id="notas_deCargoPagar">
                                <thead class="bg-primary">
                                <tr class="text-white">
                                    <th>#</th>
                                    <th class="text-center">Tipo</th>
                                    <th class="text-center">Fecha</th>
                                    <th>Documento</th>
                                    <th>Monto</th>
                                    <th>Pago Parcial</th>
                                    <th>Acciones</th>
                                </tr>
                                </thead>
                                <tbody>
                                @php
                                    $x=1;
                                @endphp
                                @if(isset($documentosPorCobrar)>0)
                                    @foreach ($documentosPorCobrar as  $tr)
                                        <tr>
                                            <input type="hidden" name="documentos[]" value="{{$tr['documento_id']}}">
                                            <td>{{$x++}}</td>
                                            <td style="max-width:50px; ">{{$tr['tipo']}}</td>
                                            <td class="text-center">{{'x/x/x'}}</td>
                                            <td>{{$tr['documento_code']}}</td>
                                            <td class="text-right"><span class="float-left">$&nbsp;&nbsp;&nbsp;</span>{{number_format($tr['total'],2)}}</td>
                                            <td><input type="number" min="0" step="any" class="form-control" name="ingreso_parcial[]"></td>
                                            <td><input name="cancelado[]" type="checkbox"></td>
                                        </tr>
                                    @endforeach
                                @endif
                                </tbody>
                                <tfoot>
                                <tr>
                                    <td><button type="submit" class="btn btn-primary">Remesar</button></td>
                                    <td>
                                        <label for="tipo_transaccion"> Seleccione el tipo de transaccion</label>
                                        <select class="form-control" name="tipo_transaccion" required>
                                            <option value ="1">Remesa</option>
                                            <option value ="2">Transferencia</option>

                                        </select>
                                    </td>
                                    <td><label>Cargo Comision</label><input type="number" step="any" name="cargo_comision" class="form-control"></td>
                                    <td><label>Iva Comision</label><input type="number" step="any" name="iva_comision" class="form-control"></td>

                                </tr>
                                </tfoot>
                            </table>
                        </form>
                    </div>
                </div>
            </div>
           
           
           


        </div>
        

    </div>

@endsection