@extends('layouts.app')

@section('custom-styles')
  <!-- Select2 -->
  <link rel="stylesheet" href="/plugins/select2/css/select2.min.css">
  <link rel="stylesheet" href="/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
  <link rel="stylesheet" href="/css/tva-select2.css">
@endsection

@section('content-header')
    <div class="col-sm-6">
        <h1 class="m-0"><i class="nav-icon fas fa-chart-pie fa-xs"></i> Reporte: {{ $titulo }}</h1>
    </div><!-- /.col -->
    <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item">Reportes</li>
        <li class="breadcrumb-item active">{{ $titulo }}</li>
        </ol>
    </div><!-- /.col -->
@endsection

@section('content')

  <!-- Main content -->
  <section class="content">

    <!-- form start -->
    <form id="editForm" class="form-horizontal" action="{{ route('reportes.generar', $id) }}" method="POST">
        @csrf

        <div class="container-fluid">

            <div class="row">            

                    <div class="col-md-9">
                        
                        <div class="card card-primary">

                            @if(!@empty(session('message')))                                
                                @switch(session('type'))
                                    @case('OK')
                                    <div class="alert alert-success alert-dismissible">
                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                        <h5><i class="icon fas fa-check"></i> Listo!</h5>
                                        {{ session('message') }}
                                    </div>
                                        @break
                                    @default
                                    <div class="alert alert-warning alert-dismissible">
                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                        <h5><i class="icon fas fa-exclamation-triangle"></i> Atención!</h5>
                                        {{ session('message') }}
                                    </div>
                                @endswitch
                            @endif

                            <div class="card-header">
                                <h3 class="card-title">Filtros</h3>
                                {{-- <a class="btn btn-default btn-sm float-right text-primary" data-toggle="modal" data-target="#modal-help" title="Ayuda" style="cursor:pointer;">
                                    <i class="fas fa-info-circle"></i> Ayuda
                                </a> --}}
                            </div>
                            <!-- /.card-header -->                            
                                            
                            <div class="card-body">

                                {{-- <div class="form-group row">
                                    <label for="local_id" class="col-sm-2 col-form-label">Local</label>
                                    <div class="col-sm-10">
                                        <select name="local_id" id="local_id" class="form-control" required>
                                            <option value="0" selected>Seleccione el local</option>
                                            @foreach($locales as $local )
                                                <option value="{{ $local->id }}" @selected(old("local_id") == $local->id) >{{ $local->bloque->descripcion }}-{{ str_pad($local->numero, 3, '0', STR_PAD_LEFT) }}: {{ $local->nombre }}</option>
                                            @endforeach
                                        </select>
                                        <span id="local_id-error" class="error invalid-feedback"></span>
                                    </div>
                                </div> --}}

                                <div class="form-group row">
                                    <label for="socio_id" class="col-sm-2 col-form-label">Socio</label>
                                    <div class="col-sm-10">
                                        <select class="select2bs4" data-placeholder="Seleccione el socio" name="socio_id" id="socio_id">
                                            <option value="0" selected>Todos</option>
                                            @foreach($socios as $socio )
                                                <option value="{{ $socio->id }}">{{ $socio->apellidos }}, {{ $socio->nombres }}</option>
                                            @endforeach
                                        </select>                            
                                        <span id="socio_id-error" class="error invalid-feedback"></span>
                                    </div>
                                </div>                                

                                <div class="form-group row">
                                    <label for="fecha_inicio" class="col-sm-2 col-form-label">Fecha desde</label>
                                    <div class="col-sm-3">
                                        <div class="input-group date" id="fecha_inicio" data-target-input="nearest">
                                            <input type="text" class="form-control datetimepicker-input" data-target="#fecha_inicio" name="fecha_inicio" id="fecha_inicio_campo" data-inputmask-alias="datetime" data-inputmask-inputformat="dd/mm/yyyy" data-mask>
                                            <div class="input-group-append" data-target="#fecha_inicio" data-toggle="datetimepicker">
                                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                            </div>
                                        </div>                            
                                        <span id="fecha_inicio-error" class="error invalid-feedback"></span>
                                    </div>
                                    <label for="fecha_fin" class="col-sm-1 col-form-label text-center"> a </label>
                                    <div class="col-sm-3">
                                        <div class="input-group date" id="fecha_fin" data-target-input="nearest">
                                            <input type="text" class="form-control datetimepicker-input" data-target="#fecha_fin" name="fecha_fin" id="fecha_fin_campo" data-inputmask-alias="datetime" data-inputmask-inputformat="dd/mm/yyyy" data-mask>
                                            <div class="input-group-append" data-target="#fecha_fin" data-toggle="datetimepicker">
                                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                            </div>
                                        </div>                            
                                        <span id="fecha_fin-error" class="error invalid-feedback"></span>
                                    </div>
                                </div>

                            </div>
                            <!-- /.card-body -->

                            <div class="card-footer text-right">
                                <a href="{{ route('home') }}" class="btn btn-default">Cancelar</a> &nbsp;
                                <button type="submit" class="btn btn-primary">Guardar</button>
                            </div>
                            <!-- /.card-footer -->
                        
                        </div>
                        <!-- /.card -->

                    </div>
                    <!-- /.col -->                    
                
            </div>
            <!-- /.row -->

        </div>
        <!-- /.container-fluid -->

    </form>

    <div class="modal fade" id="modal-help" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"><i class="fas fa-info-circle"></i> Ayuda</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <dl>
                        <dt>Local</dt>
                        <dd>Local Comercial para el cual se celebra el contrato.</dd>
                        <dd>Para que el Local aparezca disponible para el contrato, debe estar en estado: DISPONIBLE u EN OBRA.</dd>
                        <dt>Inquilino</dt>
                        <dd>Inquilino al que se vinculará el Contrato.</dd>
                        <dt>Garantía</dt>
                        <dd>Garantía que presenta el Inquilino seleccionado.</dd>
                        <dd>Para que la Garantía aparezca disponible para el contrato, debe estar en estado: APROBADA.</dd>
                        <dt>Plazo</dt>
                        <dd>Representado en años.</dd>
                    </dl>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

  </section>
  <!-- /.content -->

@endsection

@section('custom-scripts')
    <!-- jquery-validation -->
    <script src="/plugins/jquery-validation/jquery.validate.min.js"></script>
    <script src="/plugins/jquery-validation/additional-methods.min.js"></script>
    <!-- Select2 -->
    <script src="/plugins/select2/js/select2.full.min.js"></script>
    <!-- InputMask -->
    <script src="/plugins/moment/moment.min.js"></script>
    <script src="/plugins/inputmask/jquery.inputmask.min.js"></script>

<script>

    function populateGarantiasDropDown(dropdown, filtroInquilino){

        dropdown.empty();

        dropdown.append($("<option />").val(0).text('Seleccione la garantía'));
        // var parameters = {apellidos:$apellidos};

        // $('.overlay').css("display", "flex");

        $.ajax({
            url:'/garantias/get-by-inquilino/' + filtroInquilino,
            type: 'GET',
            headers:{"content-type" : "application/json"},
            // data: JSON.stringify(parameters),
            success: function(response) {
            
                $.each(response, function(index, item) {
                    dropdown.append($("<option />").val(item.id).text('#' + item.id + ' - tipo: ' + item.tipo.descripcion + ' - vencimiento: ' + moment(item.fecha_vencimiento).format('DD/MM/YYYY')));
                });

                // $('.overlay').css("display", "none");
            },
            error: function(error) {
                // $('.overlay').css("display", "none");
                console.error('Error fetching data:', error);
            }
        });            

    }

$(function () {
    //Initialize Select2 Elements
    $('.select2').select2();

    //Initialize Select2 Elements
    $('.select2bs4').select2({
        theme: 'bootstrap4'
    });

    $('#inquilino_id').on('select2:select', function (e) {
        var data = e.params.data;
        console.log(data);
        populateGarantiasDropDown($('#garantia_id'), data.id);
    });

    //Datemask2 mm/dd/yyyy
    // $('#datemask2').inputmask('mm/dd/yyyy', { 'placeholder': 'mm/dd/yyyy' })
    //Money Euro
    $('[data-mask]').inputmask()

    //Date picker
    $('#fecha_inicio').datetimepicker({
        format: 'DD/MM/YYYY',
        autoclose:true,
        language: 'es',
    });

    $('#fecha_fin').datetimepicker({
        format: 'DD/MM/YYYY',
        autoclose:true,
        language: 'es',
    });

    $.validator.addMethod("valueNotEquals", function(value, element, arg){
        return arg !== value;
    }, "Value must not equal arg.");
    
    $('#editForm').validate({
        rules: {
            local_id:{ valueNotEquals: "0" },
            inquilino_id:{ valueNotEquals: "0" },
            garantia_id:{ valueNotEquals: "0" },
            moneda_id:{ valueNotEquals: "0" },
            importe: { required: true, },
            fecha_inicio: { required: true, },
            fecha_fin: { required: true, },
            plazo: { required: true, },
            estado_id:{ valueNotEquals: "0" },
        },
        messages: {
            local_id:{
                valueNotEquals: "Por favor indica el Local",
            },
            inquilino_id:{
                valueNotEquals: "Por favor indica el Inquilino",
            },
            garantia_id:{
                valueNotEquals: "Por favor indica la Garantía",
            },
            moneda_id:{
                valueNotEquals: "Por favor indica la Moneda",
            },
            importe: {
                required: "Por favor ingresa el importe de Alquiler",
            },
            fecha_inicio: {
                required: "Por favor ingresa la fecha de inicio",
            },
            fecha_fin: {
                required: "Por favor ingresa la fecha de fin",
            },
            plazo: {
                required: "Por favor ingresa el plazo",
            },
            estado_id:{
                valueNotEquals: "Por favor indica el Estado",
            },
        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
            error.addClass('invalid-feedback');
            element.closest('.row').append(error);
        },
        highlight: function (element, errorClass, validClass) {
            $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass('is-invalid');
        },
        submitHandler: function(form) {
            form.submit();
        }
    });
    
});

  </script>
@endsection