@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">
                    <!--<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">Listar Clientes</li>
                    </ol>
                </div>
            </div>
            <!-- start widget -->
            <!-- start admited patient list -->
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <div class="card  card-box">
                        <div class="card-head">
                            <header>Listar Comunicaciones</header>
                        </div>
                        <div class="card-body ">
                            <div class="row">
                                <div class="col-11">
                                    <!--<a href="{{ url('usuarios/nuevo-usuario') }}" class="btn btn-info mb-3">Crear Usuario</a>&nbsp;&nbsp;-->
                                   <!-- <a onclick="limpiar()" class="btn btn-warning mb-3">Limpiar Filtro</a>-->
                                </div>
                                <div class="tools float-right">
                                    {!! Form::open(['url' => 'reportes_comunicaciones','method'=>'get','id'=>'frmFiltros']) !!}
                                    <input type="hidden" id="accion" name="accion" value="1">
                                    <!-- Example split danger button -->
                                    <div class="btn-group">
                                      <a  href="{{url('/reportes/listar_comunicaciones')}}" class="btn btn-default" >
                                        <!-- <a onclick="limpiar()"> -->
                                            <i class="fa fa-repeat"></i>
                                        <!-- </a> -->
                                      </a href>

                                    </div>

                                    <a class="btn btn-primary" onclick="generar()"><i class="fa fa-download"></i></a>
                                </div>
                            </div><br>
                            <div class="table-wrap">
                                <span class="text-muted">Mostrando {{$data->firstItem()}} - {{$data->lastItem()}} de {{$data->total()}}</span>
                                <div class="table-responsive">
                                    <table class="table display product-overview mb-40">
                                        <thead>
                                        <tr>
                                            <th><b>#</b></th>
                                            <th><b>Cliente</b></th>
                                            <th><b>Fecha Comunicacion</b></th>
                                            <th><b>Asunto</b></th>
                                            <th><b>Medio de Comunicacion</b></th>
                                            <th><b>Se hablo con?</b></th>
                                            <th><b>Texto/Observacion</b></th>
                                            <th><b>Contactar Nuevamente</b></th>
                                            <th><b>Fecha Nuevo Contacto</b></th>
                                            <th><b>Comunicacion a Escalar</b></th>
                                            <th><b>Usuario a Escalar</b></th>
                                            <th><b>Fecha Registro</b></th>
                                            <th><b>Registrado Por</b></th>
                                            <th><b>Estado Comunicacion</b></th>
                                        </tr>
                                        <tr>
                                            <th></th>
                                            <th>
                                                <input type="hidden" name="cliente_id" value="{{$nombres}}">
                                                {!! Form::select('nombres',[],$nombres,['id'=>'nombres','class'=>'form-control','placeholder'=>'Cliente','style'=>'width: 80%;','onchange '=>"buscar('nombres')"]) !!}
                                            </th>
                                            <th>
                                                {!! Form::text('fecha_comunicacion',$fecha_comunicacion,['id'=>'fecha_comunicacion','class'=>'form-control','placeholder'=>'Fecha Comunicacion']) !!}
                                            </th>
                                            <th>
                                                {!! Form::text('asunto',$asunto,['id'=>'asunto','class'=>'form-control','placeholder'=>'Asunto','onchange '=>"buscar('asunto')"]) !!}
                                            </th>
                                            <th>
                                                {!! Form::select('medio_comunicacion', $medios_comunicacion, $medio_comunicacion, ['id'=>'medio_comunicacion','placeholder' => '-Seleccionar-','class'=>'form-control select2','style'=>'width: 80%;','onchange'=>"buscar('medio_comunicacion')"])  !!}
                                            </th>
                                            <th>
                                                {!! Form::text('sehablo_con',$sehablo_con,['id'=>'sehablo_con','class'=>'form-control','placeholder'=>'Se Hablo con','onchange '=>"buscar('sehablo_con')"]) !!}
                                            </th>
                                            <th>
                                                {!! Form::text('texto',$texto,['id'=>'texto','class'=>'form-control','placeholder'=>'Texto/Observacion','onchange '=>"buscar('texto')"]) !!}
                                            </th>
                                            <th>
                                                {!! Form::select('contactar_nuevamente', ['1'=>'Si','0'=>'No'], $contactar_nuevamente, ['id'=>'contactar_nuevamente','placeholder' => '-Seleccionar-','class'=>'form-control select2','style'=>'width: 80%;','onchange'=>"buscar('contactar_nuevamente')"])  !!}
                                            </th>
                                            <th>
                                                {!! Form::text('fecha_nuevo_contacto',$fecha_nuevo_contacto,['id'=>'fecha_nuevo_contacto','class'=>'form-control','placeholder'=>'Fecha Nuevo Contacto']) !!}
                                            </th>
                                            <th>
                                                {!! Form::select('comunicacion_escalar', ['1'=>'Si','0'=>'No'], $comunicacion_escalar, ['id'=>'comunicacion_escalar','placeholder' => '-Seleccionar-','class'=>'form-control select2','style'=>'width: 80%;','onchange'=>"buscar('comunicacion_escalar')"])  !!}
                                            </th>
                                            <th>
                                                <input type="hidden" name="usuario_escalar_id" value="{{$usuario_escalar}}">
                                                {!! Form::select('usuario_escalar',[],$usuario_escalar,['id'=>'usuario_escalar','class'=>'form-control','placeholder'=>'Usuario a Escalar:','onchange '=>"buscar('usuario_escalar')"]) !!}
                                            </th>
                                            {{-- <th>
                                                {!! Form::text('usuario_escalar',$usuario_escalar,['id'=>'usuario_escalar','class'=>'form-control','placeholder'=>'Usuario a Escalar','onchange '=>"buscar('usuario_escalar')"]) !!}
                                            </th> --}}
                                            <th>
                                                {!! Form::text('fecha_registro',$fecha_registro,['id'=>'fecha_registro','class'=>'form-control','placeholder'=>'Fecha de Registro']) !!}
                                            </th>
                                            <th>
                                                <input type="hidden" name="registrado_por_id" value="{{$registrado_por}}">
                                                {!! Form::select('registrado_por',[],$registrado_por,['id'=>'registrado_por','class'=>'form-control','placeholder'=>'Registrado Por:','onchange '=>"buscar('registrado_por')"]) !!}
                                            </th>
                                            <th>
                                                {!! Form::select('estado_comunicacion',$estados_llamada,$estado_comunicacion,['id'=>'estado_comunicacion','class'=>'form-control','placeholder'=>'Estado Comunicacion','onchange '=>"buscar('estado_comunicacion')"]) !!}
                                            </th>

                                            <th></th>
                                            {!! Form::close() !!}
                                        </tr>
                                        </thead>
                                        <tbody>
                                            @if(count($data)>0)
                                            @foreach($data as $key => $item)
                                            <tr class="gradeX odd" role="row">
                                                <td>{{$contador++}}</td>
                                                <td>{{$item->nombres }} {{$item->apellido_1 }} {{$item->apellido_2 }}</td>
                                                <td>@php
                                                    $timestamp = strtotime($item->fecha_comunicacion);
                                                    $fecha_comunicacion_new = date("d-m-Y", $timestamp );
                                                    @endphp
                                                    {{$fecha_comunicacion_new }}
                                                </td>
                                                <td>{{$item->asunto }}</td>
                                                <x-validated-td :item="$item->medio_comunicacion" />
                                                {{-- <td>{{$item->medio_comunicacion?$item->medio_comunicacion}}</td> --}}
                                                <td>{{$item->sehablo_con }}</td>

                                                <td @if(Str::length($item->texto)>50) class="resumen" data-texto-completo="{{ $item->texto }}" @endif>
                                                    @if ($item->texto)
                                                        {{ Str::limit($item->texto, 50) }}
                                                    @else
                                                        <span class="text-danger"></span>
                                                    @endif
                                                </td>
                                                {{-- <td> --}}
                                                    {{-- limit characters 50 in texto --}}
                                                    {{-- @if(strlen($item->texto) > 50)
                                                        {{ substr($item->texto, 0, 50) }}...
                                                    @else
                                                        {{ $item->texto }}
                                                    @endif
                                                </td> --}}
                                                @if ($item->contactar_nuevamente == 1)
                                                <td>{{ "SI" }}</td>
                                                    @else
                                                <td>{{ "NO" }}</td>
                                                @endif
                                                <td>@php
                                                    if ($item->fecha_nuevo_contacto != null) {
                                                        $timestamp = strtotime($item->fecha_nuevo_contacto);
                                                    $fecha_nuevo_contacto_new = date("d-m-Y", $timestamp );
                                                    }else{
                                                        $fecha_nuevo_contacto_new = "";
                                                    }
                                                    @endphp
                                                    {{$fecha_nuevo_contacto_new }}
                                                </td>
                                                @if ($item->comunicacion_escalar == 1)
                                                <td>{{ "SI" }}</td>
                                                    @else
                                                <td>{{ "NO" }}</td>
                                                @endif
                                                <td>{{$item->usuario_escalar!=null?$item->usuario_escalar:'' }}</td>
                                                <td>
                                                    @if ($item->fecha_creacion != '0000-00-00 00:00:00')
                                                    @php
                                                    $timestamp = strtotime($item->fecha_creacion);
                                                    $fecha_creacion = date("d-m-Y", $timestamp );
                                                    @endphp
                                                    {{$fecha_creacion }}
                                                    @else
                                                    <span class="text-danger"></span>
                                                    @endif

                                                </td>
                                                <td>{{$item->creado_por }}</td>
                                                <td>
                                                    @if($item->estado!=null)
                                                    @php
                                                         $description = $controlador->getDescriptionTipoComunicacion($item->estado);
                                                    @endphp
                                                    {{ $description}}
                                                    @else
                                                    <span class="text-danger"></span>
                                                    @endif

                                                </td>

                                            </tr>
                                            @endforeach
                                            @else
                                            <tr>
                                                <td colspan="10" class="text-center">No se encontraron resultados.</td>
                                            </tr>
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>
                        <div class="card-footer">
                            <div class="float-right">

                                {{ $data->appends(['nombres'=>$nombres,'fecha_comunicacion'=>$fecha_comunicacion,'asunto'=>$asunto,'medio_comunicacion'=>$medio_comunicacion,'sehablo_con'=>$sehablo_con,'texto'=>$texto,'contactar_nuevamente'=>$contactar_nuevamente,'fecha_nuevo_contacto'=>$fecha_nuevo_contacto,'comunicacion_escalar'=>$comunicacion_escalar,'usuario_escalar'=>$usuario_escalar,'fecha_registro'=>$fecha_registro,'registrado_por'=>$registrado_por,'estado_comunicacion'=>$estado_comunicacion,
                                'medios_comunicacion'=> $medios_comunicacion,
                                'controlador'=>$controlador])->links() }}



                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
      {{-- Modal --}}
      <div class="modal" id="modal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-body">
              <!-- Aquí se mostrará el contenido resumido del <td> -->
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>
            </div>
          </div>
        </div>
      </div>
@endsection
@section('script')
    <script type="text/javascript">

        $(document).ready(function() {
            $('#nombres').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"
                }
            });/*  */

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

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

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

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





//inicializar daterangepicker

let fecha_comunicacion = @json($fecha_comunicacion);


if (fecha_comunicacion != null) {
    let fechas = fecha_comunicacion.split(' - ')
    var fecha_inicio = fechas[0];

    var fecha_fin = fechas[1];

    $('input[name="fecha_comunicacion"]').daterangepicker({
    //timePicker: true,
    startDate: fecha_comunicacion != null ? fecha_inicio : '',
    endDate: fecha_comunicacion != null ? fecha_fin : '',
    locale: {
        format: 'DD-MM-YYYY'
    }
});

}else{
    $('input[name="fecha_comunicacion"]').daterangepicker({
    //timePicker: true,
    locale: {
        format: 'DD-MM-YYYY'
    }
});

$('input[name="fecha_comunicacion"]').val('');
$('input[name="fecha_comunicacion"]').attr('placeholder', moment().format('DD-MM-YYYY')+' '+moment().format('DD-MM-YYYY'));

}

$('input[name=fecha_comunicacion]').on('apply.daterangepicker', function() {
    console.log($(this).val());
    if ($(this).val() != '') {
        document.getElementById("frmFiltros").submit();
    }

})


//
   /*
fecha_nuevo_contacto
fecha_registro */

let fecha_nuevo_contacto = @json($fecha_nuevo_contacto);


if (fecha_nuevo_contacto != null) {
    let fechas = fecha_nuevo_contacto.split(' - ')
    var fecha_inicio = fechas[0];

    var fecha_fin = fechas[1];

    $('input[name="fecha_nuevo_contacto"]').daterangepicker({
    //timePicker: true,
    startDate: fecha_nuevo_contacto != null ? fecha_inicio : '',
    endDate: fecha_nuevo_contacto != null ? fecha_fin : '',
    locale: {
        format: 'DD-MM-YYYY'
    }
});

}else{
    $('input[name="fecha_nuevo_contacto"]').daterangepicker({
    //timePicker: true,
    locale: {
        format: 'DD-MM-YYYY'
    }
});

$('input[name="fecha_nuevo_contacto"]').val('');
$('input[name="fecha_nuevo_contacto"]').attr('placeholder', moment().format('DD-MM-YYYY')+' '+moment().format('DD-MM-YYYY'));

}

$('input[name=fecha_nuevo_contacto]').on('apply.daterangepicker', function() {
    console.log($(this).val());
    if ($(this).val() != '') {
        document.getElementById("frmFiltros").submit();
    }

})



let fecha_registro = @json($fecha_registro);


if (fecha_registro != null) {
    let fechas = fecha_registro.split(' - ')
    var fecha_inicio = fechas[0];

    var fecha_fin = fechas[1];

    $('input[name="fecha_registro"]').daterangepicker({
    //timePicker: true,
    startDate: fecha_registro != null ? fecha_inicio : '',
    endDate: fecha_registro != null ? fecha_fin : '',
    locale: {
        format: 'DD-MM-YYYY'
    }
});

}else{
    $('input[name="fecha_registro"]').daterangepicker({
    //timePicker: true,
    locale: {
        format: 'DD-MM-YYYY'
    }
});

$('input[name="fecha_registro"]').val('');
$('input[name="fecha_registro"]').attr('placeholder', moment().format('DD-MM-YYYY')+' '+moment().format('DD-MM-YYYY'));

}

$('input[name=fecha_registro]').on('apply.daterangepicker', function() {
    console.log($(this).val());
    if ($(this).val() != '') {
        document.getElementById("frmFiltros").submit();
    }

})

 //modal direccion completa
 $('.resumen').on('click', function() {
    var content = $(this).data('texto-completo');
    $('.modal-body').html(content);
    $('#modal').modal('show');
  });

  // Cierra el modal
  $('.modal-footer').on('click', 'button', function() {
    $('#modal').modal('hide');
  });


        });




        function generar(){
            $('#accion').val(2);
            document.getElementById("frmFiltros").submit();
        }

        function chkMarcados(){
            console.log('marcar chk');
        }

        function limpiar(){
            $('#nombres').val('');
            $('#fecha_comunicacion').val('');
            $('#asunto').val('');
            $('#medio_comunicacion').val('');
            $('#sehablo_con').val('');
            $('#texto').val('');
            $('#contactar_nuevamente').val('').change();
            $('#fecha_nuevo_contacto').val('');
            $('#comunicacion_escalar').val('').change();;
            $('#usuario_escalar').val('');
            $('#fecha_registro').val('');
            $('#registrado_por').val('');
            $('#estado_comunicacion').val('');


            document.getElementById("frmFiltros").submit();
        }


        function buscar(tipo){

            $('#accion').val(1);
            var textoSelect = $('#'+tipo).val();
            const ENTER_KEY_CODE = 13;

            switch(tipo){
                case 'documento':
                    document.querySelector('#documento').addEventListener('keyup', function(e) {
                        if (e.keyCode === ENTER_KEY_CODE) {
                            document.getElementById("frmFiltros").submit();
                        }
                    });
                break;
                case 'email':
                    document.querySelector('#email').addEventListener('keyup', function(e) {
                        if (e.keyCode === ENTER_KEY_CODE) {
                            document.getElementById("frmFiltros").submit();
                        }
                    });
                break;
                case 'fecha_comunicacion':
                    document.querySelector('#fecha_comunicacion').addEventListener('keyup', function(e) {
                        if (e.keyCode === ENTER_KEY_CODE) {
                            document.getElementById("frmFiltros").submit();
                        }
                    });
                break;
                case 'fecha_nuevo_contacto':
                    document.querySelector('#fecha_nuevo_contacto').addEventListener('keyup', function(e) {
                        if (e.keyCode === ENTER_KEY_CODE) {
                            document.getElementById("frmFiltros").submit();
                        }
                    });
                break;
                case 'fecha_registro':
                    document.querySelector('#fecha_registro').addEventListener('keyup', function(e) {
                        if (e.keyCode === ENTER_KEY_CODE) {
                            document.getElementById("frmFiltros").submit();
                        }
                    });
                break;
                default:
                    document.getElementById("frmFiltros").submit();
                break;
            }

        }
    </script>
@endsection