@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();
        });

        $(document).ready(function() {
          $('#cuentas-select').select2();
        //   document.querySelector('#cliente-select').parentElement.querySelector('span.select2-container').style.width="100%"
         });
        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>


    <script>
        function enviarForm(menu){
            if(menu ==1){
                $('#menu').val('cargo_abono');
            }
            if(menu ==2){
                $('#menu').val('cargo');
            }
            if(menu ==3){
                $('#menu').val('abono');
            }
            if(menu ==4){
                $('#menu').val('pago_proveedores');
            }
            if(menu ==5){
                $('#menu').val('ingreso_venta');
            }
         $('#form_tabs').submit();
        }
    </script>

@endsection
@section('content')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active" aria-current="page">Cargo y abonos automaticos</li>
        </ol>
    </nav>
    @include('sessions')
    @include('banco.cargosyAbonos.modals.remesarCargosPendientes')


    <div class="">
     <div class="row">
        <div class="col-md-12">

              <form id="form_tabs" action="{{ route('cuenta.cargosYAbonos', $id) }}">
                <input type="text" hidden name="id" value="{{ $id }}">
                <input type="text" hidden name="menu" id="menu" value="{{ $menu }}" >
                <nav class="nav nav-pills nav-justified">
                    <button type="button" onclick="enviarForm(1)" class="nav-item nav-link  @if ($menu=='cargo_abono')active @endif ">Cargo y abonos</button>
                    <button type="button" onclick="enviarForm(2)" class="nav-item nav-link @if ($menu=='cargo')active @endif" >cargos</button>
                    <button type="button" onclick="enviarForm(3)" class="nav-item nav-link @if ($menu=='abono')active @endif" >Abonos</button>
                    <button type="button" onclick="enviarForm(4)" class="nav-item nav-link @if ($menu=='pago_proveedores')active @endif" >Pago Proveedores</button>
                    <button type="button" onclick="enviarForm(5)" class="nav-item nav-link @if ($menu=='ingreso_venta')active @endif" >Ingreso por Ventas</button>
                </nav>
              </form>

        </div>
        <div class="col-md-12">
            <br>

            Fecha inicio: {{ $fechaInicio }} <br>
            Fecha Fin: {{ $fechaFin }}

            @if ($menu == 'cargo_abono')

                @include('banco.cargosyAbonos.01cargoAbonos')
            @endif

            @if ($menu == 'cargo')
           <br>
               @include('banco.cargosyAbonos.02cargos')
            @endif

            @if ($menu == 'abono')
                <br>
               @include('banco.cargosyAbonos.03abonos')
            @endif


            @if ($menu == 'pago_proveedores')
           <br>
               @include('banco.cargosyAbonos.04proveedores')
            @endif

            @if ($menu == 'ingreso_venta')
              <br>
               @include('banco.cargosyAbonos.05clientes')
            @endif


        </div>
     </div>
    </div>

<script>


</script>

@endsection