@extends('plantilla.header')

@section('titulo')
  Reporte Pagos
@stop

@section('js')
<script>
    
    $("#szona").change(function(event){
        $("#scomunidad").empty();
        $("#scomunidad").append('<option value="" selected="selected">ESPERE UN MOMENTO</option>');
        var request = new XMLHttpRequest();

        var p = '/'+event.target.value;

        if (event.target.value == 'T') {
            $("#tipo option:contains('LISTA')").attr("disabled","disabled");
        } else {
            $("#tipo option:contains('LISTA')").removeAttr("disabled","disabled");
        }

        request.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {

                var myObj = JSON.parse(this.responseText);

                $("#scomunidad").empty();
                $("#scomunidad").append('<option value="" selected="selected">SELECCIONE</option>');

                for (var i = 0; i < myObj.datos.length; i++) {
                    $("#scomunidad").append('<option value="'+myObj.datos[i].id+'">'+myObj.datos[i].nombre+'</option>');
                }

                $("#scomunidad").append('<option value="T">TODOS</option>');

            }
        };

        request.open('GET', "{{url('/bzona')}}"+p);
        request.send();
  });

    const elem = document.getElementById('date');
    const dateRangePicker = new DateRangePicker(elem, {
        days: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
        daysShort: ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"],
        daysMin: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
        months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
        monthsShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
        today: "Hoy",
        monthsTitle: "Meses",
        clear: "Borrar",
        weekStart: 1,
        format: "dd/mm/yyyy"
    });


</script>

@stop

@section('contenido')
{!!Form::open(['url' => route('reportepagos'), 'method' => 'POST', 'class' => 'login-form'])!!}
<div class="col-12 col-xl-12">
    <div class="card card-body bg-white border-light shadow-sm mb-4">
        <h3 class="h5 mb-4">Reporte | Pagos</h3>
        <div class="row">
            <div class="col-md-3 mb-3">
                <div class="form-group">
                    <label for="city">Zona</label>
                    <select class="form-select" name="szona" id="szona" required>
                        <option value="" selected>SELECCIONE</option>
                        <option value="A">ZONA A</option>
                        <option value="B">ZONA B</option>
                        <option value="C">ZONA C</option>
                        <option value="T">TODOS</option>
                    </select>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="form-group">
                    <label for="city">Comunidad</label>
                    <select class="form-select" name="scomunidad" id="scomunidad" required>
                        
                    </select>
                </div>
            </div>
            <div class="col-md-4 mb-3">
                <label for="city">Fechas</label>
                <div id="date" class="input-group mb-3 input-daterange">
                    <input type="text" name="desde" placeholder="Desde" class="form-control" required>
                    <span class="input-group-text">to</span>
                    <input type="text" name="hasta" placeholder="Hasta" class="form-control" required>
                </div>
            </div>
            <div class="col-md-2 mb-3">
                <div class="form-group">
                    <label for="city">Tipo</label>
                    <select class="form-select" name="tipo" id="tipo" required>
                        <option value="" selected>SELECCIONE</option>
                        <option value="C">CONSOLIDADO</option>
                        <option value="L">LISTA</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6 mb-3">
                <div class="form-group">
                    
                </div>
            </div>
            <div class="col-sm-6" style="text-align: right;">
                <div class="form-group">
                    <button type="submit" class="btn btn-primary"><i class="fa-solid fa-check"></i> Seleccionar</button>
                </div>
            </div>
        </div>

    </div>
</div>
{!! Form::close() !!}
@stop