@extends('layouts.app', ['activePage' => 'clientes', 'titlePage' => __('Autos')])

@section('content')

<style>
    #gridProyectos th {
        font-size: 9px;
    }


    table {
        table-layout: fixed;
        max-width: 100%;

    }

    table td {
        word-wrap: break-word;
        max-width: 300px;
    }

    #gridProyectos td {
        white-space: inherit;
    }


    table.dataTable tbody td {
        word-break: break-all;
        font-size: 11px;
        vertical-align: top;
    }
</style>
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-3">
                                <h4 class="card-title">Reporte maestro</h4>
                                <!--<p class="card-category"> Here is a subtitle for this table</p>-->
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2 isnt-filled" style="margin-top: 3px;">
                                <div class="input-group input-group-static">
                                    <label>Rango de fechas:</label>
                                    <input type="text" class="form-control daterange" id="fechas_filtro" placeholder="10-01-2022 - 10-01-2022" />
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="input-group input-group-static">
                                    <label for="">Cliente:</label>
                                    <select class="form-control" id="cliente_filtro" style="width: 100%">
                                        <option value="">TODOS</option>
                                        @foreach ($data['clientes'] as $co)
                                        <option value="{{$co->Id}}">{{$co->Nom010a}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="input-group input-group-static">
                                    <label for="">Vendedor:</label>
                                    <select class="form-control" id="vendedor_filtro" style="width: 100%">
                                        <option value="">TODOS</option>
                                        @foreach ($data['users'] as $co)
                                        <option value="{{$co->id}}">{{$co->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="input-group input-group-static">
                                    <label for="">Giro:</label>
                                    <select class="form-control " id="giro_filtro" style="width: 100%">
                                        <option value="">TODOS</option>
                                        @foreach ($data['giros'] as $co)
                                        <option value="{{$co->Id}}">{{$co->Descripcion}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <!-- <div class="col-md-2">
                                <div class="input-group input-group-static">
                                    <label for="">Tipo de reporte:</label>
                                    <select class="form-control " id="tipo_reporte_filtro" style="width: 100%">
                                        <option value="1">Proyectos</option>
                                        <option value="2">Contratistas</option>
                                        <option value="3">Interlocutores</option>
                                    </select>
                                </div>
                            </div> -->
                            <div class="col-md-1 mt-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="mostrar_ganados">
                                    <label class="form-check-label" for="mostrar_ganados">
                                        Mostrar ganados
                                    </label>
                                </div>
                            </div>
                            <div class="col-2 mt-3">
                                <button type="button" class="btn btn-primary " id="btn1">
                                    <i class="fa fa-search" aria-hidden="true"></i>
                                    Buscar
                                </button>
                            </div>
                        </div>
                        <hr>

                        <div class="row " id="proyectosTable">
                            <table class="table table-bordered table-hover" width="100%" id="gridProyectos">
                                <thead>
                                    <!-- <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">
                                        </th> -->
                                    <th class="text-white text-xxs font-weight-bolder opacity-7">ID</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Codigo</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Nombre</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Lider</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Cliente</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Interlocutor A</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Interlocutor B</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Interlocutor C</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Interlocutor D</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Interlocutor E</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">F.E.P.</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">F.R.E.</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">F.E.E.</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Prioridad / Alerta</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Proyectista</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Volumetria</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Versiones</th>
                                    <!-- <th class="text-white  text-xxs font-weight-bolder opacity-7">T.C</th> -->
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">P.V</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Moneda</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">C.C</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Utilidad</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Giro</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Contratista</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Estatus</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Creado el</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Ganado el</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Pedido</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Comentarios</th>
                                    <!-- <th class="text-white  text-xxs font-weight-bolder opacity-7">Acciones</th> -->
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                        <!-- <div class="row " id="contratistasTable" style="display:none">
                            <table class="table table-bordered table-hover" width="100%" id="gridContratistas">
                                <thead>
                                  
                                    <th class="text-white text-xxs font-weight-bolder opacity-7">ID</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Código</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Nombre</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Lider</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Cliente</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Contratista</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">F.E.P.</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">F.R.E.</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">F.E.E.</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Prioridad / Alerta</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Proyectista</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Volumetria</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">P.V</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">C.C</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Utilidad</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Giro</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Estatus</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Fecha de creación</th>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div> -->
                        <!-- <div class="row " id="interlocutoresTable" style="display:none">
                            <table class="table table-bordered table-hover" width="100%" id="gridInterlocutores">
                                <thead>
                           
                                    <th class="text-white text-xxs font-weight-bolder opacity-7">ID</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Código</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Nombre</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Lider</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Cliente</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Interlocutor</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">F.E.P.</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">F.R.E.</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">F.E.E.</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Prioridad / Alerta</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Proyectista</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Volumetria</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">P.V</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">C.C</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Utilidad</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Giro</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Estatus</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Fecha de creación</th>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="{{asset('vendor/jquery-ui/jquery-ui.min.css')}}">
<script src="{{asset('vendor/jquery-ui/jquery-ui.min.js')}}"></script>
<script>
    $(document).ready(function() {
        $('.dropify').dropify();

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $(".numeros").on('input', function(evt) {
            $(this).val($(this).val().replace(/[^0-9]/g, ''));
        });
        $('.correo').keyup(function() {

            //var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
            var validRegex = /^[-\w.%+]{1,64}@(?:[A-Z0-9-]{1,63}\.){1,125}[A-Z]{2,63}$/i;

            if (this.value.match(validRegex)) {

                $(this).css('color', 'green');
                $(this).attr('valid', true);
                return true;

            } else {
                $(this).focus();
                $(this).css('color', 'red');
                $(this).attr('valid', false);
                return false;
            }

        })
        var date = new Date()
        $('.daterange').daterangepicker({
            startDate: moment().subtract(1, 'months'),
            endDate: moment().startOf('hour').add(32, 'hour'),
            locale: {
                format: 'DD-MM-YYYY',
                applyLabel: "Aplicar",
                cancelLabel: "Cancelar",
            }
        });

        /*$('#modallistaInter').on('shown.bs.modal', function () {
            loadlistaInterlocutores()
        })*/
        loadGridProyecto();
    });


    function blockSpecialChar(e) {
        var k;
        document.all ? k = e.keyCode : k = e.which;
        return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || k == 32 || (k >= 48 && k <= 57));
    }


    $('#btn1').on('click', () => {

        loadGridProyecto();

        // if ($('#tipo_reporte_filtro').val() == '1') {
        //     $('#proyectosTable').show();
        //     $('#contratistasTable').hide();
        //     $('#interlocutoresTable').hide();
        //     loadGridProyecto();
        // } else if ($('#tipo_reporte_filtro').val() == '2') {
        //     $('#proyectosTable').hide();
        //     $('#contratistasTable').show();
        //     $('#interlocutoresTable').hide();
        //     loadGridContratista();
        // } else {
        //     $('#proyectosTable').hide();
        //     $('#contratistasTable').hide();
        //     $('#interlocutoresTable').show();
        //     loadGridInterlocutor();
        // }

    });

    function loadGridProyecto() {
        //$('#').DataTable();
        $('#gridProyectos').dataTable().fnDestroy();
        $('#gridProyectos td').css('white-space', 'initial');
        var fecha = $('#fechas_filtro').val().split(' - ');
        var table = $('#gridProyectos').DataTable({
            lengthMenu: [10, 15, 20, 50, 100],
            dom: 'Bflrtip',
            processing: true,
            scrollY: '50vh',
            scrollCollapse: true,
            scrollX: true,
            ajax: {
                url: "{{url('reportes/maestro/get_proyectos')}}",
                type: "POST",
                data: {
                    vendedor: $('#vendedor_filtro').val(),
                    cliente: $('#cliente_filtro').val(),
                    giro: $('#giro_filtro').val(),
                    // tipo_reporte: $('#tipo_reporte_filtro').val(),
                    desde: fecha[0],
                    hasta: fecha[1],
                    mostrar_ganados: $('#mostrar_ganados').is(':checked') ? 1 : 0,
                }
            },
            columns: [
                // {
                //     "className": 'details-control',
                //     "orderable": false,
                //     "data": null,
                //     "defaultContent": ''
                // },
                {
                    data: "Id",
                    visible: false
                },
                {
                    data: "CodigoProyecto"
                },

                {
                    data: "Descripcion"
                },
                {
                    data: "lider_nombre"
                },
                {
                    data: "cliente_nombre"
                },
                {
                    data: "nivel_1"
                },
                {
                    data: "nivel_2"
                },
                {
                    data: "nivel_3"
                },
                {
                    data: "nivel_4"
                },
                {
                    data: "nivel_5"
                },
                {
                    data: "FechaEnvioAProyectos"
                },
                {
                    data: "FechaRequeridaEntrega"
                },
                {
                    data: "FechaEstimadaEjecucion"
                },
                {
                    data: "prioridad_display"
                },
                {
                    data: "proyectista_nombre"
                },
                {
                    data: "num_versiones"
                },
                {
                    data: {
                        data: "ultimaVersion",
                        data: "versionActiva",
                    },
                    render: function(data) {

                        if (data['ultimaVersion'] == '' && data['versionActiva'] == '') {
                            return '<div align="center"><span class="badge badge-xs bg-gradient-secondary">Sin versiones</span></div>';
                        }
                        return `Ultima version: ${data['ultimaVersion']} <br> Version activa: ${data['versionActiva']}`;
                    }
                },
                // {
                //     data: "TipoCambio"
                // },
                {
                    data: "precio_venta"
                },
                {
                    data: "moneda"
                },
                {
                    data: "costo_compra"
                },
                {
                    data: "utilidad"
                },

                {
                    data: "giro_nombre"
                },
                {
                    data: "contratista_nombre"
                },
                {
                    data: "Estatus"
                },
                {
                    data: "creado_fecha"
                },
                {
                    data: "fecha_ganado"
                },
                {
                    data: "folioPedido"
                },
                {
                    data: "comentarios"
                },
            ],

            order: [
                [0, "desc"]
            ],
            buttons: [{
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copiar'
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel'
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV'
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF',
                    orientation: 'landscape',
                    pageSize: 'LEGAL'
                }

            ],
        });

        // $('#gridProyectos tbody').on('click', 'td.details-control', function() {
        //     var tr = $(this).closest('tr');
        //     var row = table.row(tr);

        //     if (row.child.isShown()) {
        //         // This row is already open - close it
        //         row.child.hide();
        //         tr.removeClass('shown');
        //     } else {
        //         // Open this row
        //         row.child(format(row.data())).show();
        //         tr.addClass('shown');
        //     }
        // });
    }


    function loadGridContratista() {
        //$('#').DataTable();
        $('#gridContratistas').dataTable().fnDestroy();
        $('#gridContratistas td').css('white-space', 'initial');
        var fecha = $('#fechas_filtro').val().split(' - ');
        var table = $('#gridContratistas').DataTable({
            lengthMenu: [10, 15, 20, 50, 100],
            dom: 'Bflrtip',
            processing: true,
            scrollY: '50vh',
            scrollCollapse: true,
            scrollX: true,
            ajax: {
                url: "{{url('reportes/maestro/get_proyectos')}}",
                type: "POST",
                data: {
                    vendedor: $('#vendedor_filtro').val(),
                    cliente: $('#cliente_filtro').val(),
                    giro: $('#giro_filtro').val(),
                    tipo_reporte: $('#tipo_reporte_filtro').val(),
                    desde: fecha[0],
                    hasta: fecha[1],
                }
            },
            columns: [

                {
                    data: "Id",
                    visible: false
                },
                {
                    data: "CodigoProyecto"
                },
                {
                    data: "Descripcion"
                },
                {
                    data: "lider_nombre"
                },
                {
                    data: "cliente_nombre"
                },
                {
                    data: "contratista_nombre"
                },
                {
                    data: "FechaEnvioAProyectos"
                },
                {
                    data: "FechaRequeridaEntrega"
                },
                {
                    data: "FechaEstimadaEjecucion"
                },
                {
                    data: "prioridad_display"
                },
                {
                    data: "proyectista_nombre"
                },
                {
                    data: "num_versiones"
                },
                {
                    data: "precio_venta"
                },
                {
                    data: "costo_compra"
                },
                {
                    data: "utilidad"
                },
                {
                    data: "giro_nombre"
                },
                {
                    data: "Estatus"
                },
                {
                    data: "creado_fecha"
                },

            ],

            order: [
                [0, "desc"]
            ],
            buttons: [{
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copiar'
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel'
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV'
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF'
                }

            ],
        });

        // $('#gridProyectos tbody').on('click', 'td.details-control', function() {
        //     var tr = $(this).closest('tr');
        //     var row = table.row(tr);

        //     if (row.child.isShown()) {
        //         // This row is already open - close it
        //         row.child.hide();
        //         tr.removeClass('shown');
        //     } else {
        //         // Open this row
        //         row.child(format(row.data())).show();
        //         tr.addClass('shown');
        //     }
        // });
    }

    function loadGridInterlocutor() {
        //$('#').DataTable();
        $('#gridInterlocutores').dataTable().fnDestroy();
        $('#gridInterlocutores td').css('white-space', 'initial');
        var fecha = $('#fechas_filtro').val().split(' - ');
        var table = $('#gridInterlocutores').DataTable({
            lengthMenu: [10, 15, 20, 50, 100],
            dom: 'Bflrtip',
            processing: true,
            scrollY: '50vh',
            scrollCollapse: true,
            scrollX: true,
            ajax: {
                url: "{{url('reportes/maestro/get_proyectos')}}",
                type: "POST",
                data: {
                    vendedor: $('#vendedor_filtro').val(),
                    cliente: $('#cliente_filtro').val(),
                    giro: $('#giro_filtro').val(),
                    tipo_reporte: $('#tipo_reporte_filtro').val(),
                    desde: fecha[0],
                    hasta: fecha[1],
                }
            },
            columns: [

                {
                    data: "Id",
                    visible: false
                },
                {
                    data: "CodigoProyecto"
                },
                {
                    data: "Descripcion"
                },
                {
                    data: "lider_nombre"
                },
                {
                    data: "cliente_nombre"
                },
                {
                    data: "interlocutor_nombre"
                },
                {
                    data: "FechaEnvioAProyectos"
                },
                {
                    data: "FechaRequeridaEntrega"
                },
                {
                    data: "FechaEstimadaEjecucion"
                },
                {
                    data: "prioridad_display"
                },
                {
                    data: "proyectista_nombre"
                },
                {
                    data: "num_versiones"
                },
                {
                    data: "precio_venta"
                },
                {
                    data: "costo_compra"
                },
                {
                    data: "utilidad"
                },
                {
                    data: "giro_nombre"
                },
                {
                    data: "Estatus"
                },
                {
                    data: "creado_fecha"
                },

            ],

            order: [
                [0, "desc"]
            ],
            buttons: [{
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copiar'
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel'
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV'
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF'
                }

            ],
        });

        // $('#gridProyectos tbody').on('click', 'td.details-control', function() {
        //     var tr = $(this).closest('tr');
        //     var row = table.row(tr);

        //     if (row.child.isShown()) {
        //         // This row is already open - close it
        //         row.child.hide();
        //         tr.removeClass('shown');
        //     } else {
        //         // Open this row
        //         row.child(format(row.data())).show();
        //         tr.addClass('shown');
        //     }
        // });
    }
</script>
@endsection