@extends('template.main')

@section('titulo','Reporte de pagos y abonos')

@section('cabecera')

    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script>
        $(document).ready(function () {
            $("#validacion").submit(function(e){
                e.preventDefault();
                $.ajax({
                    data: $(this).serialize(),
                    type: "POST",
                    url: "{{ route('reportes.abonospagosBusqueda') }}",

                    beforeSend: function () {
                        $('#contenedor').html("<center><p>Por favor espere. La información se encuentra descargando.</p><img src=\"{{ asset('img/loading.gif') }}\" style=\"max-width: 100px\"></center>");
                    },

                    success: function (response) {

                        $('#contenedor').html(response);

                    },
                    error: function () {
                        $('#contenedor').html("Error la descargar la información.");
                    }
                });

            });
        });
    </script>
@endsection

@section('contenido')
    <div class="row" style="margin: 10px;">
        <div class="col-lg-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fas fa-home"></i> Inicio </a></li>
                    <li class="breadcrumb-item">Reportes</li>
                    <li class="breadcrumb-item active" aria-current="page"><i class="fas fa-users-cog"></i> Reporte de pagos y abonos</li>
                </ol>
            </nav>
            <hr>
        </div>
        <div class="col-lg-12">
            <h3 class="contexto"> <i class="fas fa-users-cog"></i> Reporte de pagos y abonos</h3>
        </div>
        <div class="col-lg-4">
            <form method="post" id="validacion">
                @csrf
                <label>Seleccione rango de fechas.</label>
                <input type="text" name="fechas" id="campo" class="form-control">
        </div>
        <div class="col-lg-4">
            <label>Seleccione por tipo de pago</label>
            <select name="tipoPago" class="form-control">
                <option value="">Seleccione una opción</option>
                @foreach($tipoPagos as $tipoPago)
                    <option value="{{ $tipoPago->id }}">{{ $tipoPago->nombre }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-lg-4">
            <label>Seleccione por concepto</label>
            <select name="concepto" class="form-control">
                <option value="">Seleccione una opción</option>
                @foreach($conceptos as $concepto)
                    <option value="{{ $concepto->id }}">{{ $concepto->concepto }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-lg-12">
            <br>
            <button type="submit" style="float: right" class="btn btn-success">Buscar</button>
        </div>
        </form>
        <div id="contenedor" class="col-lg-12">

        </div>



        <script>
            $(document).ready(function () {
                $('#campo').daterangepicker({
                    "autoApply": true,
                    "locale": {
                        "format": "YYYY-MM-DD",
                        "separator": " - ",
                        "applyLabel": "Aplicar",
                        "cancelLabel": "Cancelar",
                        "fromLabel": "Desde",
                        "toLabel": "Hasta",
                        "customRangeLabel": "Custom",
                        "weekLabel": "S",
                        "daysOfWeek": [
                            "Do",
                            "Lu",
                            "Ma",
                            "Mi",
                            "Ju",
                            "Vi",
                            "Sa"
                        ],
                        "monthNames": [
                            "Enero",
                            "Febrero",
                            "Marzo",
                            "Abril",
                            "Mayo",
                            "Junio",
                            "Julio",
                            "Agosto",
                            "Septiembre",
                            "Octubre",
                            "Noviembre",
                            "Deciembre"
                        ],
                        "firstDay": 1
                    },
                    "startDate": "{{ date("Y-m-d") }}",
                    "endDate": "{{ date("Y-m-d", strtotime("+14 days")) }}"
                }, function(start, end, label) {
                    console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
                });
            });
        </script>

    </div>
@endsection