@extends('layouts.app')
@section('content')
    <!-- start page content -->
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <div class="page-title-breadcrumb">
                    <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><i class="fa fa-file-text-o"></i>&nbsp;<a class="parent-item" href="javascript:;">Reportes</a>
                        &nbsp;<i class="fa fa-angle-right"></i>
                        </li>
                        <li class="active"><a class="parent-item" href="{{url('reportes/contratos/estado_cuentas_servicios')}}">Contratos - Estado de cuentas por servicios</a></li>
                    </ol>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <div class="card  card-box">
                        <div class="card-head">
                            <header>{{ $label["reporte_contrato_ecs"] }}</header>
                        </div>
                        {!! Form::open(['url' => '/reportes/servicios/exportar','method'=>'POST','role'=>'form','id'=>'form-reporte-contrato-cuenta-servicio']) !!}
                            <div class="card-body">
                                <div class="row mb-1 col-md-12">
                                    {!! Form::mselect('cliente', [],null, 'Cliente', $errors,6, $required=true,$label = true,$otro = false,$actions = null,$disabled=false) !!}
                                    {!! Form::mselect('contrato',[],null,'Cotrato',$errors,6, $required=true,$label = true,$otro = false,$actions = null,$disabled=true) !!}
                                    {!! Form::mselect('servicio',[],null,'Servicio',$errors,6, $required=true,$label = true,$otro = false,$actions = null,$disabled=true) !!}
                                </div>
                            </div>
                            <div class="card-footer text-center">
                                <div class="text-center">
                                    <button type="submit" class="btn bg-success">
                                        <i class="fa fa-cloud-download"></i>
                                        Generar Excel
                                    </button>
                                    <a
                                        href="{{url('reportes/estado_cuentas_servicios')}}"
                                        class="btn bg-warning">
                                        <i class="fa fa-refresh"></i>
                                        Recargar
                                    </a>
                                    <a
                                        class="btn bg-danger"
                                        href="javascript:history.go(-1)">Cancelar</a>
                                </div>
                            </div>
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end page content -->
@endsection
@section('script')
    <script>
        $(document).ready(function(){

            $("#cliente").select2({
                placeholder: 'Seleccione un cliente...',
                minimumInputLength: 3,
                language: {
                    errorLoading: function() {
                        return "Iniciando..."
                    },
                    noResults: function() {
                        return "Cliente no encontrado, intente nuevamente.";
                    },
                    searching: function() {
                        return "Buscando cliente...";
                    },
                    inputTooShort: function () {
                        return "Introduce minimo 3 caracteres, para iniciar la busqueda del cliente.";
                    }
                },
                ajax: {
                    url: "/reportes/clientes/buscar",
                    type: "post",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            _token : $('meta[name="csrf-token"]').attr('content'),
                            searchTerm: params.term // search term
                        };
                    },
                    processResults: function (response) {
                        return {
                            results: response
                        };
                    },
                    cache: true
                }
            });

            $("#contrato").select2({
                placeholder: 'Seleccione un contrato...',
            });

            $("#servicio").select2({
                placeholder: 'Seleccione un servicio...',
            });

            $('body').on('change', '#cliente', function (event) {
                event.preventDefault();
                $.ajax({
                        type:"POST",
                        url:'/reportes/clientes',
                        data:{
                            _token: $('meta[name="csrf-token"]').attr('content'),
                            cliente_id: $(this).val()
                        },
                        success: function(response){
                            if(response.success) {
                                $('#contrato').prop("disabled", false);
                                console.log(response.contratos);
                                $('#contrato').html(function(){
                                    var contrato_select = '';
                                        contrato_select +=`<option value="">Seleccione un contrato...</option>`;
                                    $.each(response.contratos, function(key, contrato) {
                                        contrato_select +=`<option value="${contrato.contrato_id}">${contrato.contrato_codigo}</option>`;

                                    });
                                    return contrato_select;
                                });
                            }
                        },
                        error: function(result){
                        },
                });
            });

            $('body').on('change', '#contrato', function (event) {
                event.preventDefault();
                if ($(this).val() != "" || $(this).val()!=null) {
                    $.ajax({
                            type:"POST",
                            url:'/reportes/servicios',
                            data:{
                                _token: $('meta[name="csrf-token"]').attr('content'),
                                contrato_id: $(this).val()
                            },
                            success: function(response){
                                console.log(response.servicios);
                                if(response.success) {
                                    $('#servicio').prop("disabled", false);
                                    console.log(response.servicios);
                                    $('#servicio').html(function(){
                                        var servicio_select = '';
                                            servicio_select +=`<option value="">Seleccione un servicio...</option>`;
                                        $.each(response.servicios, function(key, servicio) {
                                            servicio_select +=`<option value="${servicio.servicio_id}">${servicio.servicio_nombre}</option>`;

                                        });
                                        return servicio_select
                                    });
                                }
                            },
                            error: function(result){
                            },
                    });
                }
                $('#servicio').prop("disabled", true);
                $('#servicio').html(function(){
                    var servicio_select = '';
                    servicio_select +=`<option value="">Seleccione un servicio...</option>`;
                    return servicio_select;
                });
            });

            $("#form-reporte-contrato-cuenta-servicio").submit(function( event ) {
                var validacion = '';
                if($('#cliente').val() == '' || $('#cliente').val() == null){
                    validacion = 'Cliente es requerido.';
                }

                if($('#cliente').val() != '' && ($('#contrato').val() == '' || $('#contrato').val() == null)){
                    validacion = 'Contrato es requerido.';
                }

                if(($('#cliente').val() != '' && $('#contrato').val() != '') && ($('#servicio').val() == '' || $('#servicio').val() == null)){
                    validacion = 'Servicio es requerido.';
                }

                if(validacion != ''){
                    Swal.fire({
                        icon: 'error',
                        title: 'Advertencia!',
                        text: 'El campo '+validacion,
                    });
                    return false;
                }
                return true;
            });
        });
    </script>
@endsection