@extends('layouts.app')
@section('content')
<!-- end sidebar menu -->
<!-- start page content -->

<div class="page-content-wrapper">
    <div class="page-content">
        <div class="page-bar">

            <div class="page-title-breadcrumb">

                <a href="{{ url('cliente/ver/datos/'.$id) }}" class="btn btn-primary">
                    Volver
                </a>
                <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-square"></i>&nbsp;<a class="parent-item" href="{{ url('/puestos') }}">Registrar Comunicación</a>
                        &nbsp;<i class="fa fa-angle-right"></i>
                    </li>
                </ol>

            </div>
        </div>

        <div class="card card-box p-5">
            {!! Form::open([ 'url' => 'cliente/create/comunicacion_new/' .$id ,'method'=>'POST','role'=>'form' ,'id'=>'frmCominicacion']) !!}

            <div class="row">

                <div class="col-md-6">
                    {!! Form::mselect('cliente',$cliente,$id,'Cliente',$errors,null,true,true,false,null,true) !!}

                </div>

                <div class="col-md-6">
                    <label for="">Fecha Comunicación</label>
                    {{-- {!! Form::datetimeLocal('fecha_contacto_nuevo',isset($today) ? $today  : $today, ['class' =>'form-control']) !!} --}}
                    {!! Form::datetimeLocal('fecha_novedad', $today, ['class' =>'form-control']) !!}
                </div>

                <div class="col-md-6">
                    {!! Form::mselect('medio',$medio_comunicacion,$medio,'Medio Comunicación',$errors,null) !!}
                </div>

                <div class="col-md-6">

                    {!! Form::mtext('contacto',($data->cliente_nombres.' '.$data->cliente_apellido1.' '.$data->cliente_apellido2),'Se Habló Con?',$errors,null,false,true,[['onkeyup'=>'javascript:this.value=this.value.toUpperCase()']]) !!}
                </div>


                <div class="col-md-6">

                    {!! Form::mselect('asunto', $asuntos, $asunto, 'Asunto', $errors, null, true, ['onchange' => 'habilitarCamposAcuerdo()']) !!}
                    <input name="asunto_text" id="asunto_text" type="hidden">

                </div>
                <div class="col-md-6">
                    {!! Form::mselect('comunicacion',$comunicacion_por,$comunicacion,'Estado Comunicación',$errors,null,true) !!}
                </div>

                <div class="col-md-6">
                    {!! Form::mselect('contrato_codigo',$contrato_codigo,null,'Contrato',$errors,null,true) !!}
                </div>

                <div class="col-md-6">

                </div>

            </div>

            <div class="row col-md-12">
                    <label for="">Observación</label>
                    <textarea name="observacion" id="" cols="30" rows="10" class="form-control" style="resize: none"></textarea>
            </div>
<br>
                <div class="col-6">
                    <label for="contactar" class="form-label">Contactar Nuevamente? </label><br>
                    <input type="checkbox" class="contactar" name="contactar" id="contactar" onchange="seleccionar_concatco('contactar','select_contacto')" data-off="No" data-on="Si" data-toggle="toggle" data-onstyle="primary" data-offstyle="danger">
                </div>

                <div class="col-md-6" id="select_contacto" style="display: none;">
                    {!! Form::mDate('fecha_contacto_nuevo',null,'Fecha Nuevo Contacto',$errors,12,false) !!}
                </div>


                <div class="mt-2">
                    <div class="col-6">
                        <label for="escalar" class="form-label">Se Debe Escalar?</label><br>
                        <input type="checkbox" class="escalar_user" name="escalar" id="escalar" onchange="seleccionar_concatco('escalar','select_usuario')" data-off="No" data-on="Si" data-toggle="toggle" data-onstyle="primary" data-offstyle="danger">
                    </div>
                    <div class="col-6" id="select_usuario" style="display: none;">
                        {!! Form::mselect('escalar_usuario',[],null,'Usuario A Escalar',$errors,12,true) !!}
                    </div>
                </div>


            <div class="row mt-5">

                <div class="col-12">
                    <button class="btn btn-primary" type="submit">
                        Guardar
                    </button>
                </div>

            </div>

            {!! Form::close() !!}
        </div>
    </div>
</div>
@endsection
@section('script')
<script type="text/javascript">
    function seleccionar_concatco(control, campo) {
        var control = document.getElementById(control).checked;
        if (control)
            document.getElementById(campo).style.display = 'block';
        else
            document.getElementById(campo).style.display = 'none';
    }
    $("#asunto").on("change", function() {
        //alert(1);
        var selectedText = $("#asunto option:selected").text();
        if(selectedText=='Seleccionar'){
            $("#asunto_text").val("");
        }else{
            $("#asunto_text").val(selectedText);
        }

    });



    $(document).ready(function() {
        $('#frmCominicacion').validate({
            rules: {
                cliente: {
                    required: true
                },
                fecha_comunicacion: {
                    required: true
                },
                medio: {
                    required: true
                },
                contacto: {
                    required: true
                },
                asunto: {
                    required: true
                },
                comunicacion: {
                    required: true
                },
            },
            messages: {
                cliente: {
                    required: "Campo cliente es requerido"
                },
                fecha_comunicacion: {
                    required: "Campo fecha de comunicacion es requerido"
                },
                medio: {
                    required: "Campo medio de comunicacion es requerido"
                },
                contacto: {
                    required: "Campo se hablo con es requerido"
                },
                asunto: {
                    required: "Campo asunto es requerido"
                },
                comunicacion: {
                    required: "Campo estado comunicacion es requerido"
                },
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function(element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            },
            submitHandler: function(form) {
                var val_contactar = document.getElementById('contactar').checked;
                var val_data_escalar = $('#escalar_usuario').val();
                var var_escalar = document.getElementById('escalar').checked;

                var error = 0;
                if (var_escalar && val_data_escalar == '') {
                    error++;
                    Swal.fire({
                        icon: 'error',
                        title: 'Advertencia',
                        text: 'Se requiere seleccionar un usuario a escalar',
                    });
                } else {
                    form.submit();
                }
            }
        });

        $('#escalar_usuario').select2({
            ajax: {
                dataType: 'json',
                url: '{{ url("ajax/empleados") }}',
                delay: 250,
                //minimumInputLength: 3,
                data: function(params) {
                    var query = {
                        search: params.term.toLowerCase()
                    }

                    console.log('query :', query)
                    return query;
                },
                processResults: function(data, page) {
                    return {
                        results: data
                    };
                },
                theme: "classic"
            }
        });
    });
</script>
@endsection