@extends('adminlte::page')

@section('title', env('APP_NAME') . ' - Pagos')
@section('plugins.Select2', true)
@section('plugins.Datatables', true)
@section('content_header')
    <h1>Listado de Pagos</h1>
@stop

@section('content')
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Pagos Registrados</h3>
        </div>
        <div class="card-body">

            <div class="row mb-3">
                <div class="col-md-3">
                    <label for="searchDate">Buscar por Fecha:</label>
                    <input type="date" id="searchDate" class="form-control">
                </div>
                <div class="col-md-1 d-flex align-items-end">
                    <button id="filterButton" class="btn btn-primary"> <i class="fa fa-search"></i> Buscar</button>
                </div>
            </div>

            <!-- Tabla de Pagos Maestros -->
            <div class="table-responsive">
                <table class="table table-bordered table-hover" id="table-pagos-maestros">
                    <thead>
                        <tr>
                            <th width="5%">#</th>
                            <th width="15%">Cliente</th>
                            <th width="12%">Monto Total</th>
                            <th width="12%">Método Pago</th>
                            <th width="12%">Cuenta</th>
                            <th width="12%">N° Operación</th>
                            <th width="12%">Fecha</th>
                            <th width="8%">Estado</th>
                            <th width="12%">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!--
                                    datatables ajax
                                -->
                    </tbody>
                </table>
            </div>


        </div>
    </div>

    <!-- Modal Dinámico de Detalles -->
    <div class="modal fade" id="detallesModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Detalles del Pago Maestro</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="modalContent">
                    <div class="text-center">
                        <div class="spinner-border" role="status">
                            <span class="sr-only">Cargando...</span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal para ver Boucher -->
    <div class="modal fade" id="boucherModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Boucher de Pago</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <img id="boucherImage" src="" alt="Boucher de Pago" class="img-fluid"
                        style="max-height: 500px;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    <a id="downloadBoucher" href="" class="btn btn-primary" download>
                        <i class="fa fa-download"></i> Descargar
                    </a>
                </div>
            </div>
        </div>
    </div>

@stop

@section('css')

@stop

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>

    <script>
        $(document).ready(function() {
            // Inicializar DataTable con Ajax
            var table = $('#table-pagos-maestros').DataTable({
                processing: false,
                serverSide: false, // Cambiado a false porque no estamos usando serverSide
                ajax: "{{ route('pagos-maestros.index') }}",
                responsive: true,
                autoWidth: false,
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'cliente_nombre',
                        name: 'cliente_nombre'
                    },
                    {
                        data: 'monto_formateado',
                        name: 'monto_formateado'
                    },
                    {
                        data: 'metodo_pago',
                        name: 'metodo_pago'
                    },
                    {
                        data: 'cuenta',
                        name: 'cuenta'
                    },
                    {
                        data: 'num_operacion',
                        name: 'num_operacion'
                    },
                    {
                        data: 'fecha_formateada',
                        name: 'fecha_formateada'
                    },
                    {
                        data: 'estado_badge',
                        name: 'estado_badge'
                    },
                    {
                        data: 'acciones',
                        name: 'acciones',
                        orderable: false,
                        searchable: false
                    }
                ],
                order: [
                    [0, "asc"]
                ],
                columnDefs: [{
                    targets: [0, 1, 2, 3, 4, 5, 6, 7, 8],
                }],
                "language": {
                    "url": "/js/spanish.json"
                }
            });

            // Filtro por fecha
            $('#filterButton').on('click', function() {
                var selectedDate = $('#searchDate').val();

                if (selectedDate === '') {
                    Swal.fire({
                        title: 'Error',
                        text: 'Debe seleccionar una fecha',
                        icon: 'error'
                    });
                    return;
                }

                if (selectedDate) {
                    var formattedDate = moment(selectedDate).format('DD/MM/YYYY');
                    table.column(6).search('^' + formattedDate + '$', true, false).draw();
                } else {
                    table.column(6).search('').draw();
                }
            });

            // Anulación de Pago Maestro - Usando delegación de eventos
            $(document).on('click', '.btnEliminar', function(e) {
                e.preventDefault(); // Prevenir el comportamiento por defecto del enlace
                var pagoMaestroId = $(this).data('id');
                var dataDescripcion =
                '<strong>Datos Pago Mestro: </strong> <br> '+
                'Cliente: ' + $(this).data('cliente') + '<br>' +
                'Monto: ' + $(this).data('monto') + '<br>' +
                'N° Operación: ' + $(this).data('num-operacion') + '<br>' +
                'Fecha: ' + $(this).data('fecha') + '<br>';

                Swal.fire({
                    title: '¿Está seguro de anular?',
                    html: 'Esta acción no se puede deshacer <br> <br>' + dataDescripcion,
                    icon: 'warning',
                    input: 'text',
                    inputLabel: 'Motivo de anulación',
                    inputPlaceholder: 'Ingrese el motivo de la anulación...',
                    inputValidator: (value) => {
                        if (!value) {
                            return 'Debe ingresar un motivo de anulación';
                        }
                        if (value.length < 10) {
                            return 'El motivo debe tener al menos 10 caracteres';
                        }
                    },
                    showCancelButton: true,
                    confirmButtonText: 'Si, Anular',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            type: "DELETE",
                            url: '/pagos-maestros/' + pagoMaestroId,
                            data: {
                                _token: $('meta[name="csrf-token"]').attr('content'),
                                pagoMaestroId: pagoMaestroId,
                                motivo_anulacion: result.value
                            },
                            dataType: "Json",
                            success: function(response) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Éxito',
                                    text: 'El Pago Maestro fue anulado correctamente',
                                    showConfirmButton: false,
                                    timer: 1000
                                }).then(() => {
                                    table.ajax
                                        .reload(); // Recargar la tabla en lugar de la página
                                });
                            },
                            error: function(xhr, status, error) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: 'Ocurrió un error al procesar la solicitud.',
                                });
                            }
                        });
                    }
                });
            });

            // Ver detalles del Pago Maestro - Usando delegación de eventos
            $(document).on('click', '.btnVerDetalles', function(e) {
                e.preventDefault(); // Prevenir el comportamiento por defecto del enlace
                var pagoMaestroId = $(this).data('id');

                // Mostrar modal con spinner
                $('#detallesModal').modal('show');
                $('#detallesModal .modal-title').text('Detalles del Pago Maestro #' + pagoMaestroId);
                $('#modalContent').html(
                    '<div class="text-center"><div class="spinner-border" role="status"><span class="sr-only">Cargando...</span></div></div>'
                );

                // Cargar contenido del modal via AJAX
                $.ajax({
                    type: "GET",
                    url: '/pagos-maestros/' + pagoMaestroId + '/detalles',
                    success: function(response) {
                        $('#modalContent').html(response);
                    },
                    error: function(xhr, status, error) {
                        $('#modalContent').html(
                            '<div class="alert alert-danger">Error al cargar los detalles del Pago Maestro</div>'
                        );
                    }
                });
            });

            // Función global para ver boucher
            window.verBoucher = function(imagenPath) {
                // Construir la URL completa de la imagen
                var baseUrl = window.location.origin;
                var fullImagePath = baseUrl + '/storage/' + imagenPath;

                // Configurar la imagen en el modal
                $('#boucherImage').attr('src', fullImagePath);
                $('#downloadBoucher').attr('href', fullImagePath);

                // Mostrar el modal
                $('#boucherModal').modal('show');
            };
        });
    </script>



    </script>
@stop