@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">Reporte Estado de Cuenta x Servicio</li>
                    </ol>
                </div>
            </div>

            <div class="row card p-5">
                <div class="col-lg-12 col-lg-12">
                    <div class="card  card-box">
                        <div class="card-head">
                            <header>Reporte Estado de Cuenta x Servicio</header>
                        </div>

                    </div>

                    {{-- form open laravel collective --}}

                    <div class="col-7">
                        {{-- {!! Form::open(['url'=>'reportes/reporte-contratos-clientes','method'=>'POST','autocomplete'=>'off','role'=>'search']) !!} --}}
                        {!! Form::open(['url'=>'reportes/servicios_estado_cuenta_export','method'=>'POST','autocomplete'=>'off','role'=>'search', 'name' => 'frmFiltros']) !!}


                    {{-- form select to clientes laravel collective --}}

                        <label for="">Cliente</label>
                        {!! Form::select('cliente', [],  null, [
                            'id' => 'cliente',
                            'class' => 'form-control mb-4 mt-4',
                            'style' => 'width: 100%;',
                            'placeholder' => 'Seleccionar',

                        ]) !!}



                        <label for="">Contrato</label>

                        {!! Form::select('contrato',[],  null, [
                            'id' => 'contrato',
                            'class' => 'form-control mb-4 mt-4',
                            'style' => 'width: 100%;',
                            'placeholder' => 'Seleccionar',
                            'disabled' => true

                        ]) !!}


                        <label for="">Servicio</label>
                        {!! Form::select('servicio',[],  null, [
                            'id' => 'servicio',
                            'class' => 'form-control mb-4 mt-4',
                            'style' => 'width: 100%;',
                            'placeholder' => 'Seleccionar',
                            'disabled' => true

                        ]) !!}

                        {{-- form submit laravel collective --}}

                        <a href="{{ url('reportes/estado_cuenta_servicio') }}" class="btn btn-warning mt-2">Limpiar filtros</a>
                        {!! Form::submit('Generar', ['class'=>'btn btn-primary mt-2', 'id' => 'btnGenerar']) !!}

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


                </div>

            </div>

        </div>

    </div>


@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $('#cliente').select2({
                ajax: {
                    dataType: 'json',
                    url: "{{ asset('') . 'cliente/data/ajax' }}",
                    delay: 250,
                    minimumInputLength: 3,
                    data: function(params) {
                        var query = {
                            search: params.term.toLowerCase(),
                        }

                        return query;
                    },
                    processResults: function(data, page) {
                        return {
                            results: data
                        };
                    },
                    theme: "classic"
                }
            });

            $("#contrato" ).select2();
            $("#servicio").select2();

            $('#cliente').on('change', function(e){
                e.preventDefault();

                let cliente = $(this).val();
               $.ajax({
                url: "{{ asset('') . 'reportes/contratos_estado_cuenta_servicio/' }}"+cliente,
                type: "get",
                success: function(data){

                     contrato_body = "<option value=''>Seleccionar</option>";
                     for (var i in data) {
                    contrato_body += "<option value="+data[i]['contrato_id']+">Contrato Nro: "+data[i]['contrato_codigo']+"</option>";
                 }
                 $('#contrato').html(contrato_body);
                 $('#contrato').prop('disabled', false);
               }
            });
            })

            $('#contrato').on('change', function(e){
                e.preventDefault();
                let contrato = $(this).val();
               $.ajax({
                url: "{{ asset('') . 'reportes/servicios_estado_cuenta_servicio/' }}"+contrato,
                type: "get",
                success: function(data){

                     servicio_body = "<option value=''>Seleccionar</option>";
                     for (var i in data) {
                    servicio_body += "<option value="+data[i]['contrato_servicio_id']+">"+data[i]['servicio_nombre']+' ('+data[i]['estado']+")</option>";
                    console.log(data[i]);
                 }
                 $('#servicio').html(servicio_body);
                 $('#servicio').prop('disabled', false);
               }
            });
            })

            $('#btnGenerar').on('click', function(e){
                e.preventDefault();
                let servicio = $('#servicio').val();
                let cliente = $('#cliente').val();
                let contrato = $('#contrato').val();
                if(servicio == '' || cliente == '' || contrato == ''){
                    Swal.fire(
                    'Alerta',
                    'Debe seleccionar todos los campos!',
                    'error'
                    )
                    return false;
                }
                $('form[name=frmFiltros]').submit();
            })


        });
    </script>
@endsection