@extends('fragments.fullTemplate')
@php
    $id_usuario = session('id_usuario');
    if (! session('id_usuario')) {
            header('location: /');
            die();
    }
@endphp
@section('contenido')
    <div class="ui big breadcrumb">
        <div class="section">Atención a clientes</div>
        <i class="right chevron icon divider"></i>
        <div class="active section">Trámites de certificación</div>
    </div>

    <div class="ui divider"></div>
    <div data-module-notifications-anchor></div>
    <div class="content">
        <div class="col-lg-12 col-md-12 col-sm-12">
            @if(session()->has('success'))
                <div class="alert alert-success text-center">
                    <strong>{{ session()->get('success') }}</strong>
                </div>
            @endif
            @if (count($errors) > 0)
            <div class="alert alert-danger">
                <strong>¡Error!</strong> Revise los campos obligatorios.<br><br>
                <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
                </ul>
            </div>
            @endif
        </div>
    </div>
    @include('Requisicion_compra.Notificacion.notificacion_requisicion_modal')
    @include('Control_documentos.Notificacion.notificacion_documento_version')
    @include('Modificaciones.notificacion_modificacion')
    @include('Modificaciones.Notificacion.notificacion_modificacion_firma_modal')
    <div class="sx-autorender">
        <div style="width: 75%">
            <canvas id="grafica_barras_certificacion"></canvas>
        </div>
        
    </div>
	@if ($permisos->crear == 1)
     
	@endif
    <a href="{{url('reporte_solicitudes_certificacion_excel')}}" class="ui button fluid green">
        <i class="download icon"></i> Reporte de solicitudes en proceso de certificación
    </a>  
    <div class="ui divider"></div>
    <div class="sx-autorender">
        <div class="sx-scroll-x">
            <p class="text-center" >{{ $datos->count() }}</strong> resultados en esta página</p>
            <table id="lang-dt" class="ui celled table unstackable">
                <thead>
                    <tr>
                        <th>Cliente informe</th>
                        <th>Número informe</th>
                        <th>Modelo</th>
                        <th>Contacto</th>
                        <th>Estatus</th>
                        <th class="collapsing">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @if($datos->count())
                    @foreach ($datos as $dato)
                        
                        <tr>
                            <td>{{ $dato->cliente_informe }}</td>
                            <td>{{ $dato->numero_informe }}</td>
                            <td>{{ $dato->modelo }}</td>
                            <td>
                                <table>
                                    <tbody>
                                        <tr>
                                            <td>{{$dato->nombre_contacto}}</td>
                                            <td>Tel. {{$dato->telefono}}</td>
                                            @if ($dato->extension != null && $dato->extension != "null")
                                                <td>Ext. {{$dato->extension}}</td>
                                            @endif
                                            @if ($dato->celular != null && $dato->celular != "null")
                                                <td>Cel. {{$dato->celular}}</td>
                                            @endif
                                        </tr> 
                                    </tbody>
                                </table>
                                
                            </td>
                            @if ($dato->estatus_certificacion != null)
                                @switch($dato->estatus_certificacion)
                                    @case("Nuevos ingresos")
                                        <td><span class="btn btn-primary">{{$dato->estatus_certificacion}}</span></td>
                                        @break
                                    @case("En revision")
                                        <td><span class="btn btn-warning">{{$dato->estatus_certificacion}}</span></td>
                                        @break
                                    @case("Preparando documentacion")
                                        <td><span class="btn btn-warning">{{$dato->estatus_certificacion}}</span></td>
                                        @break
                                    @case("Detenidos por documentos del cliente")
                                        <td><span class="btn btn-danger">{{$dato->estatus_certificacion}}</span></td>
                                        @break
                                    @case("Ingresados a organismos")
                                        <td><span class="btn btn-warning">{{$dato->estatus_certificacion}}</span></td>
                                        @break
                                    @case("Proceso de certificación")
                                        <td><span class="btn btn-warning">{{$dato->estatus_certificacion}}</span></td>
                                        @break
                                    @case("Detenidos por informacion en el organismo")
                                        <td><span class="btn btn-danger">{{$dato->estatus_certificacion}}</span></td>
                                        @break
                                    @case("Tramites concluidos")
                                        <td><span class="btn btn-success">{{$dato->estatus_certificacion}}</span></td>
                                        @break
                                    @default
                                    <td><span class="btn btn-primary">Nuevos ingresos</span></td>
                                @endswitch
                                @else
                                <td><span class="btn btn-primary">Nuevos ingresos</span></td>
                            @endif
                            <td>
                                <div class="ui tiny icon buttons">
                                  @if ($permisos->actualizar == 1)
                                    <!-- Editar -->                                    
                                    <a class="ui button green edit_tramite_certificacion" data-id_muestra="{{ $dato->id_muestra }}">
                                        <i class="pencil alternate icon"></i>
                                    </a>
                                  @endif
                                    <a title='Enviar recordatorio' class='ui button blue send_recordatorio_tramite' data-id_muestra="{{ $dato->id_muestra }}">
                                        <i class='mail alternate icon'></i>Email
                                    </a>
                                    
                                  @if ($permisos->eliminar == 1)
                                    {{--<button class="ui button red eliminarUsuario">
                                        <i class="trash alternate icon"></i>
                                    </button>--}}
                                  @endif
                                    
                                </div>
                            </td>
                        </tr>
                    @endforeach
                    @else
                    <tr>
                        <td colspan="8">No se encontraron registros</td>
                    </tr>
                    @endif
                </tbody>
            </table>
            {{-- $usuarios->links("pagination::bootstrap-4") --}}
        </div>
    </div>
    @include('Tramites_certificacion.update_modal')
    <script>
        $(document).on('click','.edit_tramite_certificacion',function(){
            //
            id_muestra=$(this).data('id_muestra');
            
            $.ajax({
                    url:"show_datos_tramite_certificaciones",
                    method:"POST",
                    data:{'id_muestra': id_muestra, '_token': _token = $('input[name="_token"]').val()},
                    success:function(response){
                        //alert(response);
                        result = JSON.parse(response); 
                        resultData = result.data;
                        
                        console.log(resultData);
                        $('#update_tramite_certificacion_modal').modal('show'); 
                    }
            });

            $('#update_tramite_certificacion_modal').on('show.bs.modal', function () {
                $('#update_flag').val(resultData['update']); 
                $('#id_muestra').val(id_muestra); 
                
                

                    $("#update_tramite_certificacion_modal :input").each(function(){
                        input = $(this).attr('id'); 
                        
                        if (resultData['datos_tramite'] != null) {
                            if(input in resultData['datos_tramite']){
                                $('#update_tramite_certificacion_modal #'+input).val(resultData['datos_tramite'][input]);
                                $('#update_tramite_certificacion_modal #'+input).selectpicker('val', resultData['datos_tramite'][input]);  
                        
                            }
                        }else{
                            if (input != 'id_muestra' && input != 'update_flag') {
                                
                                $('#update_tramite_certificacion_modal #'+input).val('');
                                $('#update_tramite_certificacion_modal #'+input).selectpicker('val', '');  
                         
                            }
                                
                        }
                        
                    });
                
            });

            
        });
    </script>
    @include('Tramites_certificacion.send_email_recordatorio')
    <script>
        $(document).on('click','.send_recordatorio_tramite',function(){
            
            id_muestra=$(this).data('id_muestra');
            $('#id_muestra_mail').val(id_muestra); 

            $.ajax({
                        url:"show_mail_cliente_certificacion",
                        method:"POST",
                        data:{'id_muestra': id_muestra, '_token': _token = $('input[name="_token"]').val()},
                        success:function(response){
                            
                            result = JSON.parse(response); 
                            resultData = result.data;
                            console.log(resultData);  

                            $('#modal_send_email_recordatorio').modal('show'); 
                        }
                    });

                    $('#modal_send_email_recordatorio').on('show.bs.modal', function () {
                        html = "";
                            i = 0;
                            
                            $.each(resultData['datos_contacto'], function(key, value_contacto) { 
                                i++;
                                console.log(value_contacto['correo']);
                                
                                html += "<label for='Tencion' class='col-sm-2 col-form-label'>Para:</label>";
                                html += "<div class='col-sm-10'>";
                                html += "<div class='form-group'>";
                                html += "<input class='form-control' type='email' id='email_destinatario_"+i+"' name='email_destinatario_"+i+"' value='' required>";
                                html += "</div>";
                                html += "</div>";
                                
                                $('#email_destinatario_div').html(html); 
                                $('#email_destinatario_'+i).val(value_contacto['correo']);  
                            });
                    });
        });
    </script>

    <script>
        num_destinatario = 1;
        $('#add_email_destinatario').click(function(){
            num_destinatario++;
            $('#add_email_destinatario_div').append('<label for="destinatario" class="col-sm-2 col-form-label">Para:</label>');
            $('#add_email_destinatario_div').append('<div class="col-sm-10"><div class="form-group"><input class="form-control" type="email" id="email_destinatario_'+(num_destinatario)+'" name="email_destinatario_'+(num_destinatario)+'" placeholder="Ingrese el email del destinatario" required></div></div>');
        });
    </script>
    <script>
        num_cc = 4;
        $('#add_email_cc').click(function(){
            num_cc++;
            $('#add_email_cc_div').append('<label for="CC" class="col-sm-2 col-form-label">CC:</label>');
            $('#add_email_cc_div').append('<div class="col-sm-10"><div class="form-group"><input class="form-control" type="email" id="email_cc_'+(num_cc)+'" name="email_cc_'+(num_cc)+'" placeholder="Ingrese el email del CC" required></div></div>');
        });
    </script>

    <script>
        labels = ['Nuevos Ingresos', 'En revisión', 'Preparando documentación', 'Detenido por documentos del cliente','Ingresados a organismos','Proceso de certificación','Detenidos por informacion en el organismo','Tramites concluidos'];
        //data = [1,2,3,4,5,6,7,8];
        data = JSON.parse("{{ json_encode($arr_datos_chart)}}");
        title = "N° de registros";
        var ctx = document.getElementById('grafica_barras_certificacion').getContext('2d');
        var chart = new Chart(ctx, {
            
            type: 'bar',
           
            data: {
                labels: labels,
                datasets: [{
                    label: title,
                    backgroundColor: [
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 205, 86, 0.2)',
                    'rgba(255, 205, 86, 0.2)',
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(255, 205, 86, 0.2)',
                    'rgba(255, 205, 86, 0.2)',
                    'rgba(255, 99, 132, 0.2)',

                    'rgba(75, 192, 192, 0.2)'
                    ],
                    borderColor: [
                    'rgb(54, 162, 235)',
                    'rgb(255, 205, 86)',
                    'rgb(255, 205, 86)',
                    'rgb(255, 99, 132)',
                    'rgb(255, 205, 86)',
                    'rgb(255, 205, 86)',
                    'rgb(255, 99, 132)',
                    'rgb(75, 192, 192)'
                    
                    ],
                    borderWidth: 1,
                    data: data
                }]
            },

            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
    </script>
@endsection