@extends('layouts.app')

@section('content')
    <!-- end sidebar menu -->
    <!-- start page content -->
    {{-- @dump($data)
 --}}
    <div class="page-content-wrapper">
        <div class="page-content" style="min-height:1200px">
            <div class="page-bar">
                <div class="page-title-breadcrumb">
                    <!--<div class="pull-left">
                                        <div class="page-title text-danger">Sin Sucursal</div>
                                    </div>-->
                    <ol class="breadcrumb page-breadcrumb pull-right">
                        <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item"
                                href="{{ url('/dashboard') }}">Inicio</a>&nbsp;<i class="fa fa-angle-right"></i>
                        </li>
                        <li class="active">Recaudo Mensual</li>
                    </ol>
                </div>
            </div>


            <!-- start widget -->
            <!-- start admited patient list -->
            <div class="row">
                <div class="col-lg-12 col-lg-12">
                    <div class="card  card-box">
                        <div class="card-head">
                            <header>Recaudo Mensual</header>
                        </div>
                        <div class="card-body ">
                            {!! Form::open(['url' => 'reportes/recaudo-mensual', 'method' => 'get', 'id' => 'frmFiltros']) !!}
                            <input type="hidden" name="action">
                            <div class="row">
                                <div class="col-sm-12 col-md-3 col-lg-3">
                                    <label for="">Año Inicio</label><br>
                                    <input type="number" min="2000" name="year" max="2099" step="1"
                                        value="2023" class="form-control" id="year"/>


                                </div>
                                <div class="col-sm-12 col-md-3 col-lg-3">
                                    <label for="">Mes Inicio</label><br>
                                    {!! Form::select('mes', $meses, $mes, [
                                        'id' => 'mes',
                                        'class' => 'form-control select2',
                                        'style' => 'width: 100%;',
                                        'placeholder' => 'Seleccionar',
                                    ]) !!}
                                </div>
                                <div class="col-sm-12 col-md-3 col-lg-3">
                                    <label for="">Año Fin (Opcional) </label>
                                    <input type="number" min="2000" max="2099" step="1" class="form-control"
                                        name="year_fin" id="year_fin" disabled />
                                </div>
                                <div class="col-sm-12 col-md-3 col-lg-3">
                                    <label for="">Mes Fin (Opcional)</label>
                                    {!! Form::select('mes_fin', $meses, $mes_fin, [
                                        'id' => 'mes_fin',
                                        'class' => 'form-control select2',
                                        'style' => 'width: 100%;',
                                        'placeholder' => 'Seleccionar', 'disabled'
                                    ]) !!}


                                </div>
                            </div>
                            <div class="row mt-2">
                                <div class="col-4">
                                    <label for="">Forma de Pago</label>
                                    {!! Form::select('pago', $medios_pago, $pago, [
                                        'id' => 'pago',
                                        'class' => 'form-control select2',
                                        'style' => 'width: 100%;',
                                        'placeholder' => 'Seleccionar',
                                        true,
                                        true,
                                    ]) !!}
                                </div>

                                <div class="col-4">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label for="desde" class="form-label">Desde el periodo
                                                selecionado</label><br>
                                            <input type="checkbox" checked id="desde" value="desde" name="rango" data-off="No"
                                                data-on="Si" data-toggle="toggle" data-onstyle="primary"
                                                data-offstyle="danger" class="filtroRango">
                                        </div>
                                        <div class="col-md-6">
                                            <label for="hasta" class="form-label">Hasta el período seleccionado
                                                selecionado</label><br>
                                            <input type="checkbox" id="hasta" value="hasta" name="rango" data-off="No"
                                                data-on="Si" data-toggle="toggle" data-onstyle="primary"
                                                data-offstyle="danger" class="filtroRango">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            {{--  --}}
                                            <label for="solo" class="form-label">Solo período seleccionado</label><br>
                                            <input type="checkbox" id="solo" name="rango" value="solo" data-off="No"
                                                data-on="Si" data-toggle="toggle" data-onstyle="primary"
                                                data-offstyle="danger" class="filtroRango">
                                        </div>
                                        <div class="col-md-6">
                                            {{--  --}}
                                            <label for="rango" class="form-label">Solo rango de período
                                                seleccionado</label><br>
                                            <input type="checkbox" id="rango" name="rango" value="rango" data-off="No"
                                                data-on="Si" data-toggle="toggle" data-onstyle="primary"
                                                data-offstyle="danger" class="filtroRango">
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="row d-flex justify-content-center">
                                <div class="mt-3">

                                    <button class="btn btn-primary" id="generar">
                                        Generar Excel
                                    </button>
                                    <a href="{{ url('reportes/recaudo-mensual') }}" class="btn btn-success">Recargar</a>
                                </div>
                            </div>

                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endsection
    @section('script')
        <script>
            $(document).ready(function() {

                $(".toggle").click( function () {
                let current = $(this)
                let currentId = current.children().attr("id")
                let currentClass = current.children().attr("class")
                let year = new Date().getFullYear();

                switch (currentId) {
                    case 'desde':
                    $('#year_fin').val('');
                    $('#year_fin').attr('disabled','disabled');
                    $('#mes_fin').val('').trigger('change');
                    $('#mes_fin').attr('disabled','disabled');

                    $('#year').val(year);
                    $('#year').removeAttr('disabled');
                    $('#mes').val('').trigger('change');
                    $('#mes').removeAttr('disabled');

                        break;
                        case 'hasta':
                    $('#year_fin').val(year);
                    $('#year_fin').removeAttr('disabled');
                    $('#mes_fin').val('').trigger('change');
                    $('#mes_fin').removeAttr('disabled');

                    $('#year').val('');
                    $('#year').attr('disabled','disabled');
                    $('#mes').val('').trigger('change');
                    $('#mes').attr('disabled','disabled');

                        break;
                        case 'solo':
                    $('#year_fin').val('');
                    $('#year_fin').attr('disabled','disabled');
                    $('#mes_fin').val('').trigger('change');
                    $('#mes_fin').attr('disabled','disabled');

                    $('#year').val(year);
                    $('#year').removeAttr('disabled');
                    $('#mes').val('').trigger('change');
                    $('#mes').removeAttr('disabled');

                        break;

                        case 'rango':
                    $('#year_fin').val(year);
                    $('#year_fin').removeAttr('disabled');
                    $('#mes_fin').val('').trigger('change');
                    $('#mes_fin').removeAttr('disabled');

                    $('#year').val(year);
                    $('#year').removeAttr('disabled');
                    $('#mes').val('').trigger('change');
                    $('#mes').removeAttr('disabled');

                        break;


                    default:
                        break;
                }

                console.log('currentClass :', currentClass)

                $( ".toggle" ).children('.'+currentClass).each(function( index, element ) {
                    console.log('element :', element)

                     //console.log('$(this) :', $(this).name)
                     console.log('current :', current)
                     console.log('name :', '#'+name)
                     //console.log('is :', $( this ).is( '#'+name ))
                    if ( !$( this ).is( currentId ) ) {
                        console.log(index);
                        console.log(currentId);
                        $(this).bootstrapToggle('off')
                    }
                })
            })


            $('button#generar').on('click', function(event) {

                event.preventDefault();
                if($('#pago').val()==''){
                    Swal.fire({
                        icon: 'error',
                        title: 'Alerta',
                        text: 'Debe seleccionar una forma de pago',
                    })

                    return false;
                }else if($('input[name=rango]:checked').val()==undefined){
                    console.log($('input[name=rango]').length);
                    Swal.fire({
                        icon: 'error',
                        title: 'Alerta',
                        text: 'Debe seleccionar un rango de fechas',
                    })

                    return false;

                }else{
                    $('#frmFiltros').submit();
                }
            })



        });



        </script>
    @endsection