@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