@extends('layouts.app')
@section('content')
    @php
        $total = 0;
        $total_cash = 0;
    @endphp
    <!-- start page content -->
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <div class="page-title-breadcrumb">
                    <div class="pull-left">
                        <div class="page-title text-info">Nota de Ingreso</div>
                    </div>
                    <ol class="breadcrumb page-breadcrumb pull-right">
                        <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item" href="#">Inicio</a>&nbsp;<i
                                class="fa fa-angle-right"></i>
                        </li>

                        <li class="active">Nota de Ingreso</li>
                    </ol>
                </div>
            </div>
            <div class="row">


                @if (!$readonly)
                    <div class="col-md-12 text-right mt-5 mb-5  ">
                        <a href="#" class="btn btn-info" id="confirm-bitacora" data-toggle="modal"
                            data-target="#myModal">
                            Cierre de Ingreso
                        </a>
                    </div>
                @else
                    <div class="col-md-3 text-center mt-5 mb-5  ">
                        Total Efectivo: <span style="font-size: 16px !important; padding: 1px 25px;" class="badge badge-primary">  {{$moneda}}  {{ $closing_collect->expected_amount }} </span>
                    </div>
                    <div class="col-md-3 text-center mt-5 mb-5  ">
                        Total Pagado: <span style="font-size: 16px !important; padding: 1px 25px;" class="badge badge-primary"> {{$moneda}}  {{ $closing_collect->closure_amount }}    </span>
                    </div>

                    <div class="col-md-3 text-center mt-5 mb-5  ">
                        Referencia: {{ $closing_collect->reference }}
                    </div>

                     <div class="col-md-3 text-center mt-5 mb-5  ">
                       <a href="{{url('cobrador/nota-de-ingreso/'.$closing_collect->id.'/excel')}}"   class="btn btn-success"  target="_blank" >
                        Descargar Excel 
                        </a>
                    </div>
                @endif


                <input type="hidden" id="accion" name="accion" value="1">

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

                        <div class="card-body">
                            <div class="tab-content">
                                <div class="active tab-pane" id="pagos_oficina">

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="table-responsive">
                                                <table class="table table-wrap">
                                                    <thead>
                                                        <tr>
                                                            <th>#</th>
                                                            <th>Orden #</th>
                                                            <th>Cliente</th>
                                                            <th>Valor Total Pagado</th>
                                                            <th>Valor Saldo Pendiente</th>
                                                            <th>Fecha Creación</th>
                                                            <th>Estado</th>
                                                            <th></th>
                                                        </tr>

                                                    </thead>
                                                    <tbody>

                                                        @if (count($payments) < 1)
                                                            :
                                                            <tr>
                                                                <td colspan="14" class="text-center">Sin registros.</td>
                                                            </tr>
                                                        @endif

                                                        @foreach ($payments as $index => $payment)
                                                            <tr>
                                                                <td>

                                                                    {{ $index + 1 }}

                                                                    <input type="hidden" name="payment_id[]"
                                                                        value="{{ $payment->pago_id }}" />

                                                                </td>
                                                                <td>

                                                                    @if (!$readonly)
                                                                        {{ $payment->pago_consecutivo }}
                                                                    @else
                                                                        <a href="{{ url('imprimir-ticket-asociaciones-2/' . $payment->pago_id) }}"
                                                                            target="_blank" class="text-primary">

                                                                            {{ $payment->pago_consecutivo }}

                                                                        </a>
                                                                    @endif

                                                                </td>
                                                                <td> {{ $payment->customer->cliente_nombres }}
                                                                    {{ $payment->customer->cliente_apellido1 }} </td>

                                                                <td>  {{$moneda}}  {{ $payment->pago_valor }}  </td>

                                                                @php
                                                                    $total += $payment->pago_valor;

                                                                    if (
                                                                        $payment->PagoMedioDePago[0]
                                                                            ->pago_por_medio_de_pago_medio_de_pago_id ==
                                                                        '1'
                                                                    ) {
                                                                        $total_cash += $payment->pago_valor;
                                                                    }

                                                                @endphp

                                                                <td>  {{$moneda}}  {{ $payment->pago_saldo_despues_pago }}   </td>
                                                                <td> {{ date('d/m/Y h:s:i', strtotime($payment->pago_fecha)) }}
                                                                </td>


                                                                <td>Activo </td>
                                                                <td></td>
                                                            </tr>
                                                        @endforeach



                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /.tab-content -->
                        </div><!-- /.card-body -->
                    </div>
                    <!-- /.nav-tabs-custom -->
                </div>
                <!-- /.col -->
            </div>
        </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Cierre (Nota de Ingreso)</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="form-collect">
                        <div id="loading" style="display: flex; justify-content: center;"><span class="loader"></span>
                        </div>

                        <div class="form-group">
                            <label for="total">Total</label>
                            <input type="number" readonly value="{{ $total }}" class="form-control" id="total"
                                placeholder="Ingrese el total">
                        </div>

                        <div class="form-group">
                            <label for="efectivo">Total en Efectivo</label>
                            <input type="number" readonly value="{{ $total_cash }}" class="form-control" id="efectivo"
                                placeholder="Ingrese el total en efectivo">
                        </div>
                        <div class="form-group">
                            <label for="fecha">Fecha</label>
                            <input type="date" readonly class="form-control" id="fecha" value="2025-12-11">
                        </div>
                        <div class="form-group">
                            <label for="referencia">Referencia</label>
                            <input type="text" required class="form-control" id="referencia"
                                placeholder="Ingrese la referencia">
                        </div>
                        <div class="form-group">
                            <label for="archivos">Adjuntar PDFs o Imágenes</label>
                            <input type="file" class="form-control-file" id="archivos" name="archivos[]" multiple
                                accept=".pdf,.png,.jpg,.jpeg">
                        </div>

                    </form>




                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" id="btn-save">Guardar Cierre</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        function toggleLoadingAlert(control) {

            if (control) {
                $("#loading").show();
            } else {
                $("#loading").hide();
            }
        }

        toggleLoadingAlert(false)


        function save_closing() {


            const fileInput = document.getElementById('archivos');
            const files = fileInput.files;

            const formData = new FormData();
            Array.from(files).forEach(file => {
                formData.append('archivos[]', file);
            });



            toggleLoadingAlert(true)

            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            let payment_id = $("input[name='payment_id[]']")

            let lines = []

            for (let i = 0; i < payment_id.length; i++) {
                let e = payment_id[i]
                lines.push({
                    'payment_id': e.value
                })
            }

            data = {
                'total': $("#total").val(),
                'total_cash': $("#efectivo").val(),
                'referencia': $("#referencia").val(),
                'fecha': $("#fecha").val(),
                'pagos': lines
            }

            formData.append('total' ,   data.total)
            formData.append('total_cash' ,   data.total_cash)
            formData.append('referencia' ,   data.referencia)
            formData.append('fecha' ,   data.fecha)


            Array.from(data.pagos).forEach(pago => {
                formData.append('pagos[]',  JSON.stringify(pago ));
            });

            

            fetch("{{ asset('') . 'cobrador/nota-de-ingreso' }}", {
                    method: "POST",
                     body: formData,
                    headers: {
                        'X-CSRF-Token': csrfToken,
                    },
                })
                .then(response => response.json())
                .then(data => {
                    toggleLoadingAlert(false);
                    $("myModal").hide();
                    window.location.reload()
                })
                .catch(error => {
                    console.error('Error:', error);
                    toggleLoadingAlert(false);
                });

        }

        $("#btn-save").click(() => {
            save_closing()
        })


        $("#download-excel").click( ()=>{
            alert()
        })
    </script>



    <style>
        .loader {
            width: 16px;
            height: 16px;
            position: relative;
            left: -32px;
            border-radius: 50%;
            color: #fff;
            background: currentColor;
            box-shadow: 32px 0, -32px 0, 64px 0;
        }

        .loader::after {
            content: '';
            position: absolute;
            left: -32px;
            top: 0;
            width: 16px;
            height: 16px;
            border-radius: 10px;
            background: #FF3D00;
            animation: move 3s linear infinite alternate;
        }

        @keyframes move {

            0%,
            5% {
                left: -32px;
                width: 16px;
            }

            15%,
            20% {
                left: -32px;
                width: 48px;
            }

            30%,
            35% {
                left: 0px;
                width: 16px;
            }

            45%,
            50% {
                left: 0px;
                width: 48px;
            }

            60%,
            65% {
                left: 32px;
                width: 16px;
            }

            75%,
            80% {
                left: 32px;
                width: 48px;
            }

            95%,
            100% {
                left: 64px;
                width: 16px;
            }
        }
    </style>
@endsection