@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">Abonos y cargos manuales</li>
        </ol>
    </nav>
    @include('sessions')
    @include('banco.cargosyAbonos.modals.remesarCargosPendientes')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
    
           <div class="libres">
                    <nav class="mt-4">
                        <div class="nav nav-tabs" id="nav-tab" role="tablist">
                            <a class="nav-link active" id="nav-charges-tab" data-toggle="tab" href="#nav-charges" role="tab" aria-controls="nav-charges" aria-selected="true">Cargo/Retiros/Cheques</a>
                            <a class="nav-link" id="nav-payments-tab" data-toggle="tab" href="#nav-payments" role="tab" aria-controls="nav-payments" aria-selected="false">Abonos/Depósitos/Remesas</a>
                        </div>
                    </nav>
                    <div class="tab-content" id="nav-tabContent">
                        <div class="tab-pane fade show active" id="nav-charges" role="tabpanel" aria-labelledby="nav-charges-tab">
                            <fieldset class="border border-black border-8 m-2">
                                <legend>Agregar Cargo</legend>
                                <form class="d-flex flex-wrap m-4" action="{{route('cuenta.CargarACuenta')}}" method="post">
                                    @csrf
                                    <input type="hidden" name="cuenta_id" value="{{$cuenta->id}}">
                                    <div class="d-flex flex-column w-25 p-3">
                                        <div class="">
                                            <label class="m-2" for="tipo_cargo">Tipo de cargo</label>
                                            <select class="form-control" name="tipo_cargo"
                                                    onchange="showComisionLibres(this,'#comision_cargo_libre','#referencia_cargo_libre','#comision_cargo_libre_input')">
                                                @foreach ($tipo_cargo as $tipo)
                                                    <option value="{{$tipo->id}}">{{$tipo->tipo_abono}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="d-flex flex-column">
                                            <label class="m-2" for="fecha_conta">Fecha Contabilizado:</label>
                                            <input type="date" class="form-control" name="fecha_conta" required>
                                        </div>
                                        <div class="d-flex flex-column">
                                            <label class="m-2" for="fecha_conta">A nombre de:</label>
                                            <select name="supplier_id" class="form-control" id="acreedor_id">
                                                @foreach ($acreedores as $acreedor)
                                                    <option value="{{$acreedor->id}}">{{$acreedor->nombreProveedor}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="d-flex flex-column w-75 justify-content-center p-3">
                                        <div class="d-flex">
                                            <div class="">
                                                <div class="d-flex align-items-center">
                                                    <label class="m-2" for="referencia">Referencia:</label>
                                                    <input type="text" class="form-control" id="referencia_cargo_libre" name="referencia">
                                                </div>
                                                <div class="d-flex align-items-center">
                                                    <label class="m-2" for="val_cargo">Valor del cargo:</label>
                                                    <input type="number" step="0.01" placeholder="0.00" min="0.01" class="form-control" name="val_cargo" required>
                                                </div>
                                                <div class="align-items-center" id="comision_cargo_libre">
                                                    <label class="m-2" for="val_comision">Comision:</label>
                                                    <input type="number" step="0.01" placeholder="0.00" class="form-control"   id="comision_cargo_libre_input" name="val_comision" >
                                                </div>
                                            </div>
                                        </div>
                                        <div class="w-100">
                                            <label class="m-2" for="">Motivo / Observaciones</label>
                                            <textarea name="motivos_cargo" class="w-100 form-control" rows="6"></textarea>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-center w-100">
                                        <button class="btn btn-primary" type="submit">Cargar</button>
                                    </div>
                                </form>
                            </fieldset>
                        </div>
                        <div class="tab-pane fade" id="nav-payments" role="tabpanel" aria-labelledby="nav-payments-tab">
                            <div class="tab-pane fade show active" id="nav-charges" role="tabpanel" aria-labelledby="nav-charges-tab">
                                <fieldset class="border border-black border-8 m-2">
                                    <legend>Agregar Abono</legend>
                                    <form class="d-flex flex-wrap m-4" action="{{route('cuenta.AbonarACuenta')}}" method="post">
                                        @csrf
                                        <input type="hidden" name="cuenta_id" value="{{$cuenta->id}}">
                                        <div class="d-flex flex-column w-25 p-3">
                                            <div class="">
                                                <label class="m-2" for="tipo_abono">Tipo de Abono</label>
                                                <select class="form-control" name="tipo_abono"
                                                        onchange="showComisionLibres(this,'#comision_abono_libre','#referencia_abono_libre','#comision_abono_libre_input')">
                                                    @foreach ($tipo_abonos as $tipo)
                                                        <option value="{{$tipo->id}}">{{$tipo->tipo_abono}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="d-flex flex-column">
                                                <label class="m-2" for="fecha_conta">Fecha Contabilizado:</label>
                                                <input type="date" class="form-control" name="fecha_conta" required>
                                            </div>
                                        </div>
                                        <div class="d-flex flex-column w-75 justify-content-center p-3">
                                            <div class="d-flex">
                                                <div class="">
                                                    <div class="d-flex align-items-center">
                                                        <label class="m-2" for="referencia">Referencia</label>
                                                        <input type="text" class="form-control" name="referencia" id="referencia_abono_libre">
                                                    </div>
                                                    <div class="d-flex align-items-center" >
                                                        <label class="m-2" for="val_cargo">Valor del abono:</label>
                                                        <input type="number" step="0.01" placeholder="0.00" min="0.01" class="form-control" name="val_cargo" required>
                                                    </div>
                                                    <div class="align-items-center" id="comision_abono_libre">
                                                        <label class="m-2" for="val_cargo">Comision:</label>
                                                        <input type="number" step="0.01" placeholder="0.00" class="form-control" name="val_comision" id="comision_abono_libre_input">
                                                    </div>
                                                </div>
    
                                            </div>
                                            <div class="w-100">
                                                <label class="m-2" for="">Motivo / Observaciones</label>
                                                <textarea name="motivos_cargo" class="w-100 form-control"  rows="6"></textarea>
                                            </div>
                                        </div>
                                        <div class="d-flex justify-content-center w-100">
                                            <button class="btn btn-primary" type="submit">Abonar</button>
                                        </div>
                                    </form>
                                </fieldset>
                            </div>
                        </div>
                    </div>
                </div>
               
               
                
    
    
            </div>
            
    
        </div>
    
    </div>
@endsection