@extends('base')
@section('extrajs')
    <script>
        
        let comentarios = [];
        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)
        });
        function aRemesar(checkbox,monto) {
            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('#cliente_id').value = checkbox.getAttribute('data-cliente_id');
            document.querySelector('#valor_cargo_form').value = total.value;
            document.querySelector('#btn-remesar').disabled = !parseFloat(total.value) > 0;

            //agregamos el doc en el input
            let id = parseInt(checkbox.getAttribute('data-idTransaccion'));
            includeAbono(id,checkbox.checked);
            includeComentario(id,checkbox.getAttribute('data-documento_num'),
            checkbox.getAttribute('data-tipoDoc'), checkbox.checked);
            renderComentarios();
        }
        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);
                    }
                });

                temp = gg;
            }

            temp = temp.join('|');
            input.value = temp;
        }
        function includeComentario(id,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 renderComentarios() {
            // let comentario="Documentos: \n";
            let comentario="";
            comentarios.forEach(comment => {
                comentario += `- Documento: ${comment.documento_code} Tipo: ${comment.tipo} \n`;
            });
            document.querySelector('#comentario_cierre').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').value = "";
                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();
                }
                else
                    document.querySelector('#remesa_referencia').value = "";
                    document.querySelector('#remesa_referencia').readOnly =false;
            }
        }
        function getLastChequeCorrelativo() {
            return;
            let res =[];
            $.ajax({
            url: "{{route('controlseriales.GETLastCodeVarios','CHE')}}",
            type:"GET",
            data: {},
            success: function(result){
                document.querySelector('#remesa_referencia').value = `${result.new}`;
                document.querySelector('#remesa_referencia').readOnly =true;
                }
            });

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

        document.querySelector('#fecha_remesa').value = (new Date(y)).toISOString().split("T")[0];
    </script>
@endsection
@section('content')
    @include('cuentasPorCobrar.modals.CierreDeCajaRemesar')
    <h1 class="text-center">Cierre de Caja</h1>
    @include('sessions')

    <div class="d-flex w-100 justify-content-between align-items-center mb-4">
        <button class="btn btn-primary" disabled  type="button"  id="btn-remesar" data-toggle="modal" data-target="#modalRemesar">Remesar</button>
        <div class="">
            <label for="">Total a remesar</label>
            <input type="number" step="0.01" value="0.00" readonly class="form-control" id="total_a_remesar">
        </div>
    </div>
    <table class="table table-bordered table-hover">
        <thead class="bg-dark text-white">
            <th>#</th>
            <th>Tipo Doc</th>
            <th>Fecha</th>
            <th>Doc</th>
            <th>Monto</th>
            <th>Acciones</th>
        </thead>
        <tbody>
            @php
                $x=1
            @endphp
            @foreach ($transaccionesSinRemesar as $tr)
                <tr>
                    <td>{{$x++}}</td>
                    <td>{{$tipoFormater($tr->tipoDoc)}}</td>
                    <td>{{$tr->fecha}}</td>
                    <td>{{$tr->documento_code}}</td>
                    <td>$ {{number_format($tr->monto,2)}}</td>
                    <td>
                        <input type="checkbox" 
                            data-idTransaccion="{{$tr->id}}" 
                            data-tipoDoc="{{$tipoFormater($tr->tipoDoc)}}" 
                            data-documento_num="{{$tr->documento_code}}"
                            data-cliente_id="{{$tr->cliente_id}}"
                            onchange="aRemesar(this,{{$tr->monto}})"
                        >
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
@endsection