@extends('layouts.app')
@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<style>
    .content_errors div {
        margin-left: 10px;
    }

    .isDisabled {
        cursor: not-allowed;
        opacity: 0.5;
    }

    .isDisabled>a {
        color: currentColor;
        display: inline-block;
        /* For IE11/ MS Edge bug */
        pointer-events: none;
        text-decoration: none;
    }
    .custom-file-control, .form-control, .is-focused .custom-file-control, .is-focused .form-control{
        background-image: linear-gradient(0deg, #a3a3a3 1px, rgba(0, 150, 136, 0) 0), linear-gradient(0deg, rgba(0, 0, 0, 0.36) 1px, transparent 0)!important;
    }
    .btn:hover{
        background:transparent!important;
    }
    .pagination li {
        margin:15px 5px 0;
        width:35px;
        height:35px;
        background:#71b7fd;
        border-radius:50%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor:pointer;
    }
    .pagination li a {
        font-size:14px;
        font-family:'avenir book';
        color:#fff;
    }
    .pagination li:hover {
        border:2.5px solid #5990cc;
    }
    .pagination .active {
        margin:15px 5px 0;
        width:35px;
        height:35px;
        background:#71b7fd;
        border-radius:50%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor:pointer;
        border:2.5px solid #5990cc;
    }
    .circle_list3 > h2,.circle_list2 > h2,.circle_list > h2   {
        top: 26%;
        left: 37%;
        font-size: 15px;
    }
    .flex_list .content_prestamis_list:nth-child(1),.flex_list .content_prestamis_list:nth-child(2),
    .flex_list .content_prestamis_list:nth-child(4){
        flex:0 1 15%;
        margin: 0 10px;
    }
    .flex_list .content_prestamis_list:nth-child(3){
        flex:0 1 12%;
        margin: 0 10px;

    }
    .flex_list{
        padding: 5px 200px 15px;
    }
    .pagination .disabled {
        /* display:none!important; */
        background: #b3d4fc;
    }
    @media only screen and (max-width: 1420px){
        .flex_list {
            padding: 10px 140px 15px;
        }
    }
    @media only screen and (max-width: 990px){
        .flex_list {
            padding: 0 10px 10px;
        }
    }

    @media only screen and (max-width: 620px){
        .movil_title {
            top: 22.5%!important;
            left: 33.5%!important;
        }
        #content{
            padding: 150px 15px 42px;
        }
    }
</style>
@endsection
@section('content')
<ol class="breadcrumb">
    <li class="breadcrumb-item active class_select"><a href="{{ URL('/home') }}">Inicio</a></li>
    <li class="breadcrumb-item">Préstamos</li>
</ol>
<div class="row justify-content-between">
    <div class="col-12 col-xl-6">
        <h1 class="page-title">Lista de <span class="fw-semi-bold">Préstamos</span></h1>
    </div>
</div>

<div class="clearfix"></div>

@include('flash::message')

<div class="clearfix"></div>

<section class="widget" style=" padding: 0px!important; background-color:transparent">
    @include('prestamos.table')

</section>

<!-- Modal visita -->
<div class="modal fade" id="visita" tabindex="-1" role="dialog" aria-labelledby="visita" aria-hidden="true">
    <div class="modal-dialog " role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Generar Comentario</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group row">
                    <label class="col-md-12 col-form-label text-md-left" for="pago">Comentarios de la visita</label>
                    <div class="col-md-12  justify-content-center">
                        <div class="input-group pull-center">
                            <textarea name="cometario" id="cometario" cols="100" rows="5"
                                class="form-control"></textarea>
                        </div>
                        <div id="validacion_correcta_visitas" class="alert alert-primary alert-transparent alert-sm" style="display: none">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                            <span class="fw-semi-bold">Completado: Se genero una visita correctamente.</span>
                        </div>
                        <div id="validacion_incorrecta_visitas" class="alert alert-primary alert-danger alert-sm" style="display: none">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                            <span class="fw-semi-bold">Alerta: No se pudo generar tu visita, intentalo más tarde.</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn2 btnSucces" id="aplica_visita">visitar</button>
                <button type="button" class="btnDanger btn1" data-dismiss="modal">cancelar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog " role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="exampleModalLongTitle">Realizar pago</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ url('/agregar_pago') }}" method="POST" id="form_agregar_pago">
                @csrf
                <div class="modal-body">
                    <div class="form-group row">
                        <div class="col-md-12  justify-content-center">

                            <div id="montos_pago" class="row">

                                <div class="col-md-6 col-sm-12" style="margin:10px 0 ">
                                    <input type="radio" name="pago_radio" id="pago_semanal" value="">
                                    <label for="pago_radio" class="labels">Pago semanal:</label><br />
                                    <label id="pago_semanal_lb"></label>
                                </div>

                                <div class="col-md-6 col-sm-12" style="margin:10px 0 " id="pago_esperado-contenendor">
                                    <input type="radio" name="pago_radio" id="pago_esperado" value="">
                                    <label for="pago_radio" class="labels">Pago esperado:</label><br />
                                    <label for="pago_radio" id="pago_esperado_lb"></label>
                                </div>

                                <div class="col-md-6 col-sm-12" style="margin:10px 0"
                                    id="pago_esperado_sin-contenendor">
                                    <input type="radio" name="pago_radio" id="pago_esperado_sin" value="">
                                    <label for="pago_radio" class="labels">Pago esperado más cargos:</label><br />
                                    <label id="pago_esperado_sin_lb"></label>
                                </div>


                                <div class="col-md-6 col-sm-12" style="margin:10px 0 ">
                                    <input type="radio" name="pago_radio" id="abierto" value="abierto" checked>
                                    <label for="pago_radio" class="labels">Ingresar una cantidad</label>
                                    <div class="input-group pull-center" id="pago_abierto">
                                        <span class="input-group-prepend">
                                            <span class="input-group-text">$</span>
                                        </span>
                                        <input id="pago" class="form-control" size="16" type="text" value=""
                                            placeholder="0.00">
                                        <span class="input-group-append">
                                            <span class="input-group-text">
                                                .00
                                            </span>
                                        </span>
                                    </div>
                                </div>


                                <div class="col-md-6 col-sm-12" style="margin:10px 0 ">
                                    <label for="num_transaccion" class="labels">Transferencia</label>
                                    <input type="radio" name="tipo_pago_radio" value="Transferencia">
                                    <div class="input-group pull-center" id="num_transaccion_contenedor"
                                        style="display:none">
                                        <label for="num_trasferencia" style="width:100%">Número de
                                            transaccion</label><br />
                                        <input id="num_trasferencia" name="num_trasferencia" class="form-control"
                                            size="16" type="text" value="" placeholder="12345">
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12" style="margin:10px 0 ">
                                    <label for="num_transaccion" class="labels">Efectivo</label>
                                    <input type="radio" name="tipo_pago_radio" value="Efectivo" checked>
                                </div>
                                <div class="col-md-12" style="margin:10px 0 ">
                                    @if($fecha_falsa->app_mode == "DEBUG")
                                    <input type="date" value="{!! $fecha_falsa->fecha_falsa->format('Y-m-d') !!}"
                                        name="fecha_actual" id="fecha_actual">
                                    @else
                                    <input type="date" value="" name="fecha_actual" id="fecha_actual">
                                    @endif
                                </div>
                                <div class="col-md-12" style="margin:10px 0 ">
                                    <textarea placeholder="Comentario" class="form-control" name="comentario"
                                        id="comentario" cols="30" rows="2"></textarea>
                                </div>
                            </div>

                            <div id="saldo_mayor_mensaje" class="alert alert-danger alert-transparent alert-sm"
                                style="display:none">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                <span class="fw-semi-bold">El saldo que estas ingresando es mayor al monto total, valida
                                    tu monto por favor.</span>
                            </div>
                            <div id="saldo_menor_mensaje" class="alert alert-danger alert-transparent alert-sm"
                                style="display:none">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                <span class="fw-semi-bold">El saldo que estas ingresando es negativo, no aceptamos
                                    montos negativos, valida tu monto por favor.</span>
                            </div>
                            <div id="saldo_cero_mensaje" class="alert alert-danger alert-transparent alert-sm"
                                style="display:none">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                <span class="fw-semi-bold">El saldo que estas ingresando es cero,no podemos procesar tu
                                    pago si no introduces una cantidad valida, valida tu monto por favor.</span>
                            </div>
                        </div>
                    </div>
                </div>
                <input type="hidden" name="pago_request" id="pago_request">
                <input type="hidden" name="prestamo_id" id="prestamo_id">
                <input type="hidden" name="tipo_pago" id="tipo_pago">
                <div class="modal-footer">
                    <button type="button" class="btn2 btnSucces" id="aplica_pago">Guardar</button>
                    <button type="button" class="btn1 btnDanger" data-dismiss="modal">Cancelar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="modalConfirm" tabindex="-1" role="dialog" aria-labelledby="modalConfirmTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle" style="font-family:'isidora'!important;">Confirmación
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group row">
                    <div class="col-12">
                        Se realizara un pago por la cantidad de $<span id="confirm_pago">0</span>
                    </div>
                    <div class="col-12">
                        <b>¿Estás seguro de hacerlo?</b>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="btn_cancel_confirm" class="btn button-modal2"
                    data-dismiss="modal">Cancelar</button>
                <button type="button" class="btn button-modal1" id="btn_confirm_pago">Aplicar pago</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

<script>

    $('#prestamos').DataTable({
        "pagingType": "first_last_numbers",
        responsive: true,
        language: {
            "decimal": "",
            "emptyTable": "No hay información",
            "info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
            "infoEmpty": "Mostrando 0 to 0 of 0 Entradas",
            "infoFiltered": "(Filtrado de _MAX_ total entradas)",
            "infoPostFix": "",
            "thousands": ",",
            "lengthMenu": "Mostrar _MENU_ Entradas",
            "loadingRecords": "Cargando...",
            "processing": "Procesando...",
            "search": "Buscar:",
            "zeroRecords": "Sin resultados encontrados",
            "paginate": {
                "first": "Anterior",
                "last": "Siguiente",
                "next": "Siguiente",
                "previous": "Anterior"
            }
        },
    });


    var url_local = "{{ URL('/') }}"; {{--
            var abono_val = parseInt("{!!$abonos!!}", 10);
            var cargo_val = parseInt("{!!$cargos!!}", 10);
            var total_val = parseInt("{!!$total!!}", 10);
            --}}

    var userList;

    var prestamo_id = 0;
    var lat = 0;
    var lng = 0;
    var comment = '';
    var balance_final = 0;

    $(document).ready(function() {

        $('.hacer_pago').on('click', function() {
            prestamo_id = $(this).attr("data-id");
            balance_final = $(this).attr("data-balance-final");

            console.log(balance_final);
            $('#pago_esperado_sin-contenendor').hide();
            $('#pago_esperado-contenendor').hide();

            var pago_semanal = $(this).attr("data-pago-semanal");
            var pago_esperado = $(this).attr("data-pago-esperado");
            var pago_esperado_sin = $(this).attr("data-pago-esperado-sin");


            $('#pago_semanal').val(pago_semanal);
            $('#pago_esperado').val(pago_esperado);
            $('#pago_esperado_sin').val(pago_esperado_sin);

            $('#pago_semanal_lb').text( '$' + pago_semanal);
            if(pago_esperado > 0){
                $('#pago_esperado-contenendor').show();
                $('#pago_esperado_lb').text('$' + pago_esperado)
            }

            if(pago_esperado_sin > 0){
                $('#pago_esperado_sin-contenendor').show();
                $('#pago_esperado_sin_lb').text('$' + pago_esperado_sin);
            }


            console.log('empezamos');
            console.log(prestamo_id);
        });

        // ajuste de mora

        $('.ajuste_pago').on('click', function() {
            prestamo_id = $(this).attr("data-id");
            balance_final = $(this).attr("data-balance-final");

            console.log(balance_final);
            $('#pago_esperado_sin-contenendor').hide();
            $('#pago_esperado-contenendor').hide();

            var pago_semanal = $(this).attr("data-pago-semanal");
            var pago_esperado = $(this).attr("data-pago-esperado");
            var pago_esperado_sin = $(this).attr("data-pago-esperado-sin");


            $('#pago_semanal').val(pago_semanal);
            $('#pago_esperado').val(pago_esperado);
            $('#pago_esperado_sin').val(pago_esperado_sin);

            $('#pago_semanal_lb').text( '$' + pago_semanal);
            if(pago_esperado > 0){
                $('#pago_esperado-contenendor').show();
                $('#pago_esperado_lb').text('$' + pago_esperado)
            }

            if(pago_esperado_sin > 0){
                $('#pago_esperado_sin-contenendor').show();
                $('#pago_esperado_sin_lb').text('$' + pago_esperado_sin);
            }


            console.log('empezamos');
            console.log(prestamo_id);
        });

        $('#aplica_visita').on('click', function() {
            comment = $.trim($("#cometario").val());
            $("#aplica_visita").attr('disabled',true);
            getLocation()
            $("#aplica_visita").attr('disabled',false);
        });

        $('#aplica_pago').on('click', function() {

            var pago = $('input:radio[name=pago_radio]:checked').val();
            console.log(pago);
            if (pago == 'abierto') {
                pago = $('#pago').val();
            }

            console.log(pago);

            if(pago > balance_final)
            {
                $('#saldo_mayor_mensaje').show();
            }
            else if(pago < 0){
                $('#saldo_menor_mensaje').show();
            }
            else if(pago == 0){
                $('#saldo_cero_mensaje').show();
            }
            else
            {
                $('#saldo_mayor_mensaje').hide();
                $('#saldo_menor_mensaje').hide();
                $('#saldo_cero_mensaje').hide();

                $("#confirm_pago").text(pago);
                var date = $('#fecha_actual').val();

                $("#pago_request").val(pago);
                $("#prestamo_id").val( prestamo_id );
                $("#tipo_pago").val("Puro");
                $("#exampleModalCenter").modal('hide');

                setTimeout(function(){
                    $("#modalConfirm").modal();
                }, 500);
            }

        });


        $("#btn_confirm_pago").click(function(){
            $("#form_agregar_pago").submit();
            $("#modalConfirm").modal('hide');
            $(".loader-wrap").removeClass('hiding');
            $(".loader-wrap").removeClass('hide');
        });

        // console.log(abono_val);
        // console.log(abono_val.toFixed(2).toLocaleString());

        // $('#abonos').text('+' + formatMoney(abono_val.toFixed(2).toLocaleString()) + ' MXN');
        // $('#cargos').text('-' + formatMoney(cargo_val.toFixed(2).toLocaleString()) + ' MXN');
        // $('#total').text('+' + formatMoney(total_val.toFixed(2).toLocaleString()) + ' MXN');

        $('.btnPagosModa').on('click', function() {
            $('#loader_tabla_pagos').show();
            $('#users').hide();
            $('#sin_datos').hide();
            var cobranza_id = $(this).attr('data-id');
            $('#num_semana').html(' ' + $(this).attr('data-semana'));
            console.log(cobranza_id);

            var url = url_local + '/api/pagos_prestamo/' + cobranza_id;
            console.log(url);
            $.get(url, function(data) {
                console.log(data);

                if (data.data.length > 0) {
                    var options = {
                        valueNames: ['cantidad', 'fecha'],
                        // Since there are no elements in the list, this will be used as template.
                        item: '<li class="list-group-item"><span class="cantidad cantidad_titulo"></span><span class="fecha  float-right"></span></li>'
                    };

                    var values = [];

                    for (let index = 0; index < data.data.length; index++) {
                        let d = new Date(data.data[index].fecha);

                        let formatted_date = d.getDate() + "-" + (d.getMonth() + 1) + "-" + d.getFullYear()
                        console.log(formatted_date)

                        var v = {
                            cantidad: '$' + data.data[index].cantidad.toFixed(2),
                            fecha: formatted_date
                        };
                        values.push(v);
                    }

                    userList = new List('users', options, values);
                }

                setTimeout(() => {
                    $('#loader_tabla_pagos').hide();
                    if (data.data.length > 0) {
                        $('#users').show();
                    } else {
                        $('#sin_datos').show();
                    }
                }, 2000);
            });

            $('#modalPagos').on('hidden.bs.modal', function() {
                userList.clear();
                console.log('cerramos');
            });

        });
        @if($validar_vista)
        localStorage.setItem("buscador_prestamo", '');
        @endif
        $("#buscador").val(localStorage.getItem("buscador_prestamo"));
        userList.search(localStorage.getItem("buscador_prestamo"));
    });


    function actualizarPrestamo(p_id){
        prestamo_id = p_id;
    }


    function getLocation() {

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else {
            //x.innerHTML = "Geolocation is not supported by this browser.";
            //TODO: sweetalert
            Swal.fire({
                position: 'top-middle',
                icon: 'error',
                title: 'Para utilizar esta herramienta, deberás activar la geolocalización en tu navegador. Actívalo para poder continuar.',
                showConfirmButton: true,
            })
        }

        //window.location.href = "{!! URL('/') !!}/agregar_visita/" + comment + "/" + prestamo_id+'/19.073233/-98.126724';
    }

    function showPosition(position) {
        lat = position.coords.latitude;
        lng = position.coords.longitude;

        console.log(lat, lng);

        var url = "{!! URL('/') !!}/api/agregar_visita/" + comment + "/" + prestamo_id+'/'+lat+'/'+lng;
        $.ajax({
            url: url,
            type: 'GET',
            dataType: "json"
        }).done(function(data){
            console.log(data);
            if(data.data == "ERROR")
            {
                $("#validacion_correcta_visitas").hide();
                $("#validacion_incorrecta_visitas").show();
            }else{
                $("#validacion_correcta_visitas").show();
                $("#validacion_incorrecta_visitas").hide();
                setTimeout(function() {
                    $("#visita").modal('hide');
                    $("#cometario").val('');
                    $("#validacion_correcta_visitas").hide();
                }, 2000);
            }
        }).fail(function() {
            console.log('Error');
        });
    }

    function formatMoney(number, decPlaces, decSep, thouSep) {
        decPlaces = isNaN(decPlaces = Math.abs(decPlaces)) ? 1 : decPlaces,
            decSep = typeof decSep === "undefined" ? "." : decSep;
        thouSep = typeof thouSep === "undefined" ? "," : thouSep;
        var sign = number < 0 ? "-" : "";
        var i = String(parseInt(number = Math.abs(Number(number) || 0).toFixed(decPlaces)));
        var j = (j = i.length) > 3 ? j % 3 : 0;

        return sign +
            (j ? i.substr(0, j) + thouSep : "") +
            i.substr(j).replace(/(\decSep{3})(?=\decSep)/g, "$1" + thouSep) +
            (decPlaces ? decSep + Math.abs(number - i).toFixed(decPlaces).slice(1) : "");
    }

    /*PAGINACION LISTA*/
    var userList = new List('prestamos_list', {
        valueNames: [ 'nombre', 'estatus', 'telefono' ],
        page: 5,
        pagination: {
            innerWindow:1,
            left: 2,
            right: 2,
            outterWindow:1,
            paginationClass: "pagination",
        }
    });

    var length_lis = $('.list .color_back_list').length;
    if(length_lis == 0){
        $('.jPaginateNext').css('display','none');
        $('.jPaginateBack').css('display','none');
    }
    else{
        $('.jPaginateNext').css('display','block');
        $('.jPaginateBack').css('display','block');
        $('.jPaginateNext').on('click', function(){
            var list = $('.pagination').find('li');
            $.each(list, function(position, element){
                if($(element).is('.active')){
                    $(list[position+1]).trigger('click');
                }
            })
        });

        $('.jPaginateBack').on('click', function(){
            var list = $('.pagination').find('li');
            $.each(list, function(position, element){
                if($(element).is('.active')){
                    $(list[position-1]).trigger('click');
                }
            })
        });
    }

    $('.class_input').on('focusin', function() {
        $(this).parent().find('.label_class').addClass('active2');
    });

    $('.class_input').on('focusout', function() {

        if (!this.value) {
            $(this).parent().find('.label_class').removeClass('active2');
        }
    });
    var global = 0;
    $('#buscar_name').click(function(){
        if(global == 0){
            let icon = $('#icono2').text('↑');
            global =1;
        }
        else{
            let icon = $('#icono2').text('↓');
            global = 0;
        }
    });
    var global2 = 0;
    $('#buscar_status').click(function(){
        if(global2 == 0){
            let icon = $('#icono').text('↑');
            global2 =1;
        }
        else{
            let icon = $('#icono').text('↓');
            global2 =0;
        }
    });

    $("#buscador").keyup(function(){
        var buscador = $("#buscador").val();
        localStorage.setItem("buscador_prestamo", buscador);
    });
</script>
@endsection