@extends('layouts.app', ['activePage' => 'polizas', 'menuParent' => 'consultas', 'titlePage' => __('Contabilidad - Listado de pólizas contables')])

@section('content')
@include('includes.tailwind')

<div class="content">
    <div class="container-fluid mt-4">
        <div class="row mb-4">
            <div class="col-6">
                <h6 class="text-xl font-semibold text-gray-800">Listado de pólizas contables</h6>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="bg-white rounded-lg shadow-md">
                    <div class="p-6">
                        <div class="grid grid-cols-12 gap-4 mb-4">
                            <div class="col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Ejercicio:</label>
                                <select id="ejercicio" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 select2" onchange="getPeriodo(this.value)">
                                    <option value="0" selected disabled>-Selecciona-</option>
                                    @foreach ($data['ejercicios'] as $p)
                                    <option value="{{$p->id}}" data-anio="{{$p->anio}}">{{$p->anio}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Periodo:</label>
                                <select id="periodo" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 select2" disabled="true">
                                    <option value="0" selected disabled>-Selecciona-</option>
                                </select>
                            </div>
                            <div class="col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de póliza:</label>
                                <select id="tipo_poliza" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 select2FistOption">
                                    <option value="" selected disabled>-Todos-</option>
                                    @foreach ($data['tipospolizas'] as $p)
                                    <option value="{{$p->id}}">({{$p->tipo}}) {{$p->descripcion}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Estatus:</label>
                                <select id="estatus" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 select2FistOption">
                                    <option value="" selected disabled>-Todos-</option>
                                    <option value="Activa">Activas</option>
                                    <option value="Cancelada">Canceladas</option>
                                </select>
                            </div>
                            <div class="col-span-2 mt-6">
                                <button class="bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-1.5 text-sm rounded-md transition-colors duration-200" onclick="loadGrid()">
                                    <i class="material-icons align-middle text-sm">search</i> Buscar
                                </button>
                            </div>
                        </div>

                        <div class="mb-4" id="btnEliminarPoliza" style="display:none;">
                            <button class="bg-red-500 hover:bg-red-600 text-white px-4 py-1.5 text-sm rounded-md transition-colors duration-200" onclick="eliminarPolizasSelected();">
                                <i class="material-icons align-middle text-sm">delete</i> Eliminar pólizas
                            </button>
                        </div>

                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200" id="tablePolizas">
                                <thead class="bg-gray-50 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" width="5%">
                                            <input class="checkAll float-left" type="checkbox" name="prods" id="checkAll" onclick="selectAll();">
                                        </th>
                                        <th>ID</th>
                                        <th>Tipo</th>
                                        <th>Fecha de póliza</th>
                                        <th>Descripción</th>
                                        <th>Última modificación</th>
                                        <th>Creación</th>
                                        <th>Estatus</th>
                                        <th width="15%">Acciones</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade draggable" id="modalDetallesPoliza" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-gray-50 border-b border-gray-200 px-6 py-4">
                <h4 class="modal-title text-lg font-semibold text-gray-900">Detalle de la póliza</h4>
                <button type="button" class="close text-gray-400 hover:text-gray-500 focus:outline-none" data-dismiss="modal" aria-hidden="true">
                    <i class="las la-times text-xl"></i>
                </button>
            </div>
            <div class="modal-body p-6">
                <div class="bg-blue-50 border border-blue-100 rounded-lg p-4 mb-6">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <h6 class="text-sm font-medium text-gray-600 mb-1">CONCEPTO</h6>
                            <p id="textDescripcion" class="text-base font-semibold text-blue-700"></p>
                        </div>
                        <div>
                            <h6 class="text-sm font-medium text-gray-600 mb-1">NÚMERO DE PÓLIZA</h6>
                            <p id="textNumero" class="text-base font-semibold text-blue-700"></p>
                        </div>
                    </div>
                </div>

                <div class="overflow-x-auto rounded-lg border border-gray-200">
                    <table id="tableDetalles" class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" width="30%">Referencia</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" width="30%">Cuenta</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" width="20%">Abono</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" width="20%">Cargo</th>
                            </tr>
                        </thead>
                        <tbody id="bodyTableDetalles" class="bg-white divide-y divide-gray-200">
                        </tbody>
                        <tfoot class="bg-gray-50">
                            <tr>
                                <th colspan="2" class="px-6 py-3 text-right text-sm font-medium text-gray-500">Totales:</th>
                                <th id="labelAbono" class="px-6 py-3 text-left text-sm font-medium text-gray-900"></th>
                                <th id="labelCargo" class="px-6 py-3 text-left text-sm font-medium text-gray-900"></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
            <div class="modal-footer px-6 py-4 bg-gray-50 border-t border-gray-200">
                <button type="button" class="bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" data-dismiss="modal">
                    Cerrar
                </button>
            </div>
        </div>
    </div>
</div>

<style>
    .select2-container {
        width: 100% !important;
    }

    .select2-container .select2-selection--single {
        height: 40px !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 40px !important;
    }
</style>

@endsection

@push('js')
<script>
    $(document).ready(function() {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('#tablePolizas').DataTable({
            "pagingType": "full_numbers",
            lengthMenu: [10, 25, 50, 100],
            language: {
                url: "{{asset('material/datatable_sp.json')}}"
            },
        });

        $('.select2').select2({
            placeholder: "-Selecciona-",
            width: '100%',
        });

        $('.select2FistOption').select2({
            placeholder: "-Todos-",
            width: '100%',
        });


    });


    function getPeriodo(id) {
        $.ajax({
                url: "{{route('parametros.periodos.get-periodo-filtro')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                },
            })
            .done(function(resp) {
                $('#periodo').empty();
                $('#periodo').prop('disabled', false);
                $('#periodo').append(new Option('-Selecciona-', '0', true, true));
                $.each(resp.data, function(index, value) {
                    var newOption = new Option('(' + value['periodo'] + ') ' + value['descripcion'], value['id'], false, false);
                    $('#periodo').append(newOption);
                });
                $('#periodo').trigger('change');
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function loadGrid() {
        // var ejercicio = $('#ejercicio option:selected').val();
        // var periodo = $('#periodo option:selected').attr('fecha_inicio');
        var tipo_poliza = $('#tipo_poliza option:selected').val();
        var periodo = $('#periodo option:selected').val();
        var ejercicio = $('#ejercicio option:selected').val();
        var estatus = $('#estatus option:selected').val();
        if (periodo == 0 || ejercicio == 0) {
            showNotification('error', 'top', 'center', 'danger', 'Debes ingresar el tipo de póliza, el periodo y ejercicio a consultar.', '¡ERROR!');
            return false;
        }
        $('#tablePolizas').dataTable().fnDestroy();
        $('#tablePolizas').DataTable({
            lengthMenu: [10, 25, 50, 100],
            language: {
                url: "{{asset('material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{route('consulta-polizas.get_polizas')}}",
                type: "POST",
                data: {
                    // ejercicio: ejercicio,
                    periodo: periodo,
                    tipo_poliza: tipo_poliza,
                    ejercicio: ejercicio,
                    estatus: estatus,
                },

            },
            columnDefs: [{
                orderable: false,
                targets: 0
            }],
            columns: [{
                    data: "select"
                }, {
                    data: "id"
                },
                {
                    data: "tipo"
                },
                {
                    data: "fecha"
                },
                {
                    data: "descripcion"
                },
                {
                    data: "ultima_modi"
                },
                {
                    data: "creacion"
                },
                {
                    data: "estatus"
                },
                {
                    data: "acciones"
                },


            ],
            order: [
                [1, "desc"]
            ],

        });

    }

    $('#tablePolizas').on('click', 'tbody tr', function(e) {
        var $checkbox = $(this).find('.checkPro');
        e.target.type == "checkbox" ?
            $checkbox.prop('checked', $checkbox.is(':checked')) :
            $checkbox.prop('checked', !$checkbox.is(':checked'));

        var allPages = $('#tablePolizas').dataTable().fnGetNodes();
        var contador = 0;
        $('.checkPro:checked', allPages).each(function() {
            contador++;
        });

        contador >= 1 ?
            $('#btnEliminarPoliza').show() :
            $('#btnEliminarPoliza').hide();
    });

    function selectAll() {
        if ($('#checkAll').is(':checked')) {
            $('.checkPro').prop('checked', true);
            $('#btnEliminarPoliza').show()

        } else {
            $('.checkPro').prop('checked', false);
            $('#btnEliminarPoliza').hide()

        }
        // $('#checkAll').hide();
    }


    function desactivar(estatus, id, ejercicio) {
        if (estatus == 'Cancelada') {
            txt = '¿Estas seguro de inactivar la poliza?'
            txt2 = 'Se inactivo la poliza correctamente'
        }
        if (estatus == 'Activa') {
            txt = '¿Estas seguro activar de la poliza?'
            txt2 = 'Se activo la poliza correctamente'
        }
        Swal.fire({
            title: txt,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: 'Cancelar',
            confirmButtonText: 'Si, ¡hazlo!'
        }).then((result) => {
            if (result.value) {
                $('#loadingload').modal('show');
                $.ajax({
                        url: "{{route('consulta-polizas.cancelar_poliza')}}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            estatus: estatus,
                            id: id,
                            ejercicio: ejercicio,
                        }
                    })
                    .done(function(resp) {
                        setTimeout(() => {
                            showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', txt2)
                            $('#tablePolizas').DataTable().ajax.reload();
                        }, 2000);
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function() {
                        console.log("complete");
                        setTimeout(() => {
                            $('#loadingload').modal('hide');
                        }, 2000);
                    });
            }
        })
    }

    function detallesPoliza(id, ejercicio) {
        $.ajax({
                url: "{{route('consulta-polizas.get_poliza')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                    ejercicio: ejercicio,
                },
            })
            .done(function(resp) {
                setDataPoliza(resp, resp.calculos, id)
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function setDataPoliza(data, calculos, id) {
        $('#textDescripcion').text('')
        $('#textDescripcion').text(data.poliza.descripcion)
        $('#textNumero').text(data.poliza.numero_poliza)
        $('#labelAbono').text('$' + calculos.abono.toLocaleString("en-US", {
            maximumFractionDigits: 2,
            minimumFractionDigits: 2
        }))
        $('#labelCargo').text('$' + calculos.cargo.toLocaleString("en-US", {
            maximumFractionDigits: 2,
            minimumFractionDigits: 2
        }))
        $('#bodyTableDetalles').empty();

        $.each(data.detalles, function(index, value) {
            $('#bodyTableDetalles').append(
                '<tr class="hover:bg-gray-50">' +
                '<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">' + value.referencia + '</td>' +
                '<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 break-words">' + value.cuenta + '</td>' +
                '<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 text-right">$' + value.abono.toLocaleString("en-US", {
                    maximumFractionDigits: 2,
                    minimumFractionDigits: 2
                }) + '</td>' +
                '<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 text-right">$' + value.cargo.toLocaleString("en-US", {
                    maximumFractionDigits: 2,
                    minimumFractionDigits: 2
                }) + '</td>' +
                '</tr>'
            )
        })
        $('#modalDetallesPoliza').modal('show');
    }

    function eliminarPolizasSelected(idPoliza = null) {
        //alert('okeokdoekdoekdokeodkeodkeo');
        // $('#btnaf').hide();

        var oTable = $('#tablePolizas').dataTable();
        var allPages = oTable.fnGetNodes();
        var cadena = [];
        $('input:checked', allPages).each(function() {
            cadena.push($(this, allPages).val());
        });

        if (idPoliza) cadena = [idPoliza];

        $('#loadingLoad').modal('show');
        $.ajax({
                url: "{{route('polizas.delete')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    ids: cadena,
                    ejercicio: $('#ejercicio option:selected').data('anio')
                },
            })
            .done(function(resp) {
                setTimeout(() => {
                    showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje)
                    $('#tablePolizas').DataTable().ajax.reload();
                    $('#btnEliminarPoliza').hide();
                    $('#checkAll').prop('disabled', false);
                }, 2000);
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
                setTimeout(() => {
                    $('#loadingload').modal('hide');
                }, 2000);
            });
    }

    function migrarPolizas() {
        $('#loadingload').modal('show');

        $.ajax({
                url: "{{ url('cont/listado-polizas/migrar-polizas')}}",
                type: 'POST',
                dataType: 'json',
            })
            .done(function(resp) {
                showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje)
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
                setTimeout(() => {
                    $('#loadingload').modal('hide');

                }, 2000);
            });
    }
</script>
@endpush