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

@section('content')

<style>
    #gridPoyectos th {
        font-size: 10px;
    }

    table {
        table-layout: fixed;
    }

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

    #gridPoyectos td {
        white-space: inherit;
    }
</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-4">
                                <h4 class="card-title">Volumetrias de proyectos</h4>
                                <!--<p class="card-category"> Here is a subtitle for this table</p>-->
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-3">
                                <div class="input-group input-group-static">
                                    <label>Cliente:</label>
                                    <select class="form-control" id="clienteF" onchange="loadGrid();">
                                        <option value="0">-Todos-</option>
                                        @foreach ($data['clientes'] as $c)
                                        <option value="{{ $c->Id }}">{{ $c->Nom010a }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <!--<div class="col-3">
                                <div class="input-group input-group-static">
                                    <label>Asignados</label>
                                    <select class="form-control" id="asignadosF" onchange="loadGrid();">
                                        <option value="0">-Todos-</option>
                                        <option value="1">Asignados</option>
                                        <option value="2">Sin Asignar</option>
                                    </select>
                                </div>
                            </div>-->
                            <!-- <div class="col-3">
                                <div class="input-group input-group-static">
                                    <label>Estatus</label>
                                     <select class="form-control" id="estatusF" onchange="loadGrid();">
                                        <option value="0">Todos</option>
                                        <option value="Activo">Activo</option>
                                        <option value="Cierre">Cierre</option>
                                        <option value="Ganado">Ganado</option>
                                        <option value="Perdido">Perdido</option>
                                        <option value="Cancelado">Cancelado</option>
                                    </select>
                                </div>
                            </div> -->
                            <!--<div class="col-3">
                                <div class="input-group input-group-static">
                                    <label>Proyectista</label>
                                    <select class="form-control" id="proyectistaF" onchange="loadGrid();">
                                        <option value="0">-Selecciona-</option>
                                        @foreach ($data['proyectistas'] as $c)
                                            <option value="{{ $c->id }}">{{ $c->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>-->
                        </div>
                        <br>
                        <div class="row ">
                            <table class="table table-bordered table-hover" id="gridPoyectos">
                                <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">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">Cliente</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">Prioridad</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Volumetrias</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">Acciones</th>
                                </thead>
                                <tbody id="list">

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



<div class="modal fade" id="modalForm">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="newLabel" style="display: none;">Nuevo Proyecto</h4>
                <h4 class="modal-title" id="EditLabel" style="display: none;">Edita Proyecto</h4>
                <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="id_proy">
                <div class="nav-tabs-navigation">
                    <div class="nav-tabs-wrapper">
                        <ul class="nav nav-pills nav-pills-primary" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#generalProy" role="tablist" aria-expanded="false" id="generalesTabbtn">
                                    Generales
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#interProy" role="tablist" aria-expanded="false">
                                    Interlocutores
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#contratistasProy" role="tablist" aria-expanded="false">
                                    Contratistas
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>



                <!--<ul class="nav nav-pills card-header-pills">
                    <li class="nav-item">
                        <a class="nav-link active show generalProy" href="#generalProy" data-toggle="tab" role="tab" id="generalesTabbtn">Generales</a> 
                    </li>
                    <li class="nav-item">
                        <a class="nav-link interProy" href="#interProy" data-toggle="tab" role="tab">Interlocutores</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link contratistasProy" href="#contratistasProy" data-toggle="tab" role="tab">Contratistas</a>
                    </li>
                </ul>-->
                <br>
                <div class="tab-content tab-space">
                    <div class="tab-pane active generalProy" id="generalProy">
                        <div class="row">
                            <div class="col-12">
                                <div class="input-group input-group-static">
                                    <label>Nombre Proyecto</label>
                                    <input type="text" class="form-control" id="nombre">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-3">
                                <div class="input-group input-group-static">
                                    <label>Cliente</label>
                                    <select class="form-control" id="cliente" onchange="getNumProye();">
                                        <option value="0">-Selecciona-</option>
                                        @foreach ($data['clientes'] as $c)
                                        <option value="{{ $c->Id }}">{{ $c->Nom010a }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-1 d-flex align-items-center justify-content-center">
                                <button type="btn btn-danger btn-xs" onclick="verContactos()"><i class="fa fa-address-book" aria-hidden="true"></i></button>
                            </div>
                            <div class="col-4">
                                <div class="input-group input-group-static">
                                    <label>Código</label>
                                    <input type="text" class="form-control" id="codigo" value="0-0-0" readonly>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="input-group input-group-static">
                                    <label>Lider</label>
                                    <select class="form-control" id="lider">
                                        <option value="0">-Selecciona-</option>
                                        @foreach ($data['users'] as $u)
                                        <option value="{{ $u->id }}">{{ $u->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <!--<div class="row">
                            <div class="col-6">
                                <div class="input-group input-group-static">
                                    <label>Contacto</label>
                                    <select class="form-control" id="contacto" onchange="telefonoCont();"></select>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="input-group input-group-static">
                                    <label>Telefono Contacto</label>
                                    <input type="text" class="form-control" id="contactoTelefono">
                                </div>
                            </div>
                        </div>-->
                        <div class="row">
                            <div class="col-4">
                                <div class="input-group input-group-static">
                                    <label>Fecha de Envío a proyectos</label>
                                    <input type="date" class="form-control" id="fechaEnvio">
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="input-group input-group-static">
                                    <label>Fecha Entrega</label>
                                    <input type="date" class="form-control" id="fechaEntrega">
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="input-group input-group-static">
                                    <label>Fecha Ejecución</label>
                                    <input type="date" class="form-control" id="fechaEjecucion">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4">
                                <!--<div class="input-group input-group-static">
                                    <label>Presupuesto</label>
                                    <input type="text" class="form-control" id="presupuesto">
                                </div>-->
                                <div class="input-group input-group-static">
                                    <label>Presupuesto</label>
                                    <!--<span class="input-group-text">$</span>-->
                                    <input type="text" id="presupuesto" class="form-control" aria-label="Amount (to the nearest dollar)" onblur="numberFormat();">
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="input-group input-group-static">
                                    <label>Prioridad</label>
                                    <select class="form-control" id="prioridad">
                                        <option value="Baja">Baja</option>
                                        <option value="Media">Media</option>
                                        <option value="Alta">Alta</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="input-group input-group-static">
                                    <label>Giro</label>
                                    <select class="form-control" id="giro" onchange="completeCode();">
                                        <option value="0">-Selecciona-</option>
                                        @foreach ($data['giros'] as $c)
                                        <option value="{{ $c->Id }}" desc="{{ $c->DescripciconCorta }}">{{ $c->Descripcion }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <!--<div class="row">
                            <div class="col-4">
                                <div class="input-group input-group-static">
                                    <label>Contratista</label>
                                    <input type="text" class="form-control" id="contratista">
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="input-group input-group-static">
                                    <label>Contacto Contratista</label>
                                    <input type="text" class="form-control" id="contactoContratista">
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="input-group input-group-static">
                                    <label>Telefono Contratista</label>
                                    <input type="text" class="form-control" id="nombre">
                                </div>
                            </div>
                        </div>-->
                        <div class="row">
                            <div class="col-12">
                                <div class="input-group input-group-static">
                                    <label>Comentarios</label>
                                    <textarea class="form-control" id="comentarios" cols="12" rows="4"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane interProy" id="interProy">
                        <div class="row">
                            <div class="col-10">
                                <div class="input-group input-group-sm input-group-static my-3">
                                    <label>Interlocutor<span class="text-danger">*</span></label>
                                    <select id="interlocutor" class="form-control">
                                        <option value="0">-Selecciona-</option>
                                        @foreach ($data['interlocutores'] as $c)
                                        <option value="{{ $c->Id }}" telefono="{{ $c->Telefono1 }}" correo="{{ $c->Correo }}" desc="{{ $c->Descripcion }}">{{ $c->Descripcion }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-1 d-flex align-items-center justify-content-center">
                                <button type="button" class="btn btn-primary btn-xs" id="a" onclick="agregarInter()" title="Agregar Interlocutor"><i class="fa fa-plus"></i></button>
                            </div>
                            <div class="col-1 d-flex align-items-center justify-content-center">
                                <button type="button" class="btn btn-primary btn-xs" id="a" onclick="modalFormInterlocutores();" title="Nuevo Interlocutor"><i class="fa fa-user-plus"></i></button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th>Nombre</th>
                                                <th>Correo</th>
                                                <th>Teléfono</th>
                                                <th>Acciones</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tableInterlocutor">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane contratistasProy" id="contratistasProy">
                        <div class="row">
                            <div class="col-10">
                                <div class="input-group input-group-sm input-group-static my-3">
                                    <label>Contratista<span class="text-danger">*</span></label>
                                    <select id="contratista" class="form-control">
                                        <option value="0">-Selecciona-</option>
                                        @foreach ($data['contratistas'] as $c)
                                        <option value="{{ $c->Id }}" telefono="{{ $c->Telefono1 }}" correo="{{ $c->Telefono1 }}" desc="{{ $c->Descripcion }}">{{ $c->Descripcion }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-1 d-flex align-items-center justify-content-center">
                                <button type="button" class="btn btn-primary btn-xs" id="a" onclick="agregarContratista()" title="Agregar Contratista"><i class="fa fa-plus"></i></button>
                            </div>
                            <div class="col-1 d-flex align-items-center justify-content-center">
                                <button type="button" class="btn btn-primary btn-xs" id="a" onclick="modalFormContratistas()" title="Nuevo Contratista"><i class="fa fa-user-plus"></i></button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th>Nombre</th>
                                                <th>Correo</th>
                                                <th>Teléfono</th>
                                                <th>Acciones</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tableContratista">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" onclick="save();">Guardar</button>
            </div>
        </div>
    </div>
</div>




<div class="modal fade" id="modalAsingar">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Asignar Proyecto</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="idProyHide">
                <div class="row">
                    <div class="col-12">
                        <div class="input-group input-group-sm input-group-static my-3">
                            <label>Proyectista<span class="text-danger">*</span></label>
                            <select id="proyectistasInput" class="form-control">
                                <option value="0">-Selecciona-</option>
                                @foreach ($data['proyectistas'] as $c)
                                <option value="{{ $c->id }}">{{ $c->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" onclick="asignar();">Guardar</button>
            </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')
            }
        });

        loadGrid();
    });




    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));
    }



    function loadGrid() {
        //$('#').DataTable();
        $('#gridPoyectos').dataTable().fnDestroy();
        $('#gridPoyectos td').css('white-space', 'initial');
        var table = $('#gridPoyectos').DataTable({
            lengthMenu: [10, 15, 20, 50, 100],
            dom: 'Bfrtip',
            processing: true,
            responsive: true,
            scrollY: '50vh',
            scrollCollapse: true,
            ajax: {
                url: "{{url('proyectos/get_volus')}}",
                type: "POST",
                data: {
                    cliente: $('#clienteF').val(),
                    //asignados: $('#asignadosF').val(),
                    estatus: $('#estatusF').val(),
                    //proyectista: $('#proyectistaF').val(),

                }
            },
            columns: [
                // {
                //     "className": 'details-control',
                //     "orderable": false,
                //     "data": null,
                //     "defaultContent": ''
                // },
                {
                    data: "Id",
                    visible: false
                },
                {
                    data: "CodigoProyecto"
                },
                {
                    data: "Descripcion"
                },
                {
                    data: "cliente_nombre"
                },
                /*{
                    data: "proyectista_nombre"
                },*/
                {
                    data: "prioridad_display"
                },
                {
                    data: "volumetrias_num"
                },
                {
                    data: "estatus"
                },
                {
                    data: "acciones"
                },

            ],

            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'
                }

            ],
        });

        // $('#gridPoyectos 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 asignarModal(id) {
        $('#idProyHide').val(id)
        $('#modalAsingar').modal('show')
    }

    function asignar() {
        var idProy = $('#idProyHide').val();
        var idProyectista = $('#proyectistasInput').val();
        $.ajax({
                url: "{{url('proyectos/asigna_proyecto')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: idProy,
                    user: idProyectista
                },
            })
            .done(function(resp) {
                console.log("success");
                $('#modalAsingar').modal('hide')
                Swal.fire({
                    title: 'Asignado con exito!',
                    type: 'successqqq           ',
                    timer: 2000
                })
                loadGrid();
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });

    }

    function numberFormat() {
        var num = $('#presupuesto').val()
        if (num == '') {
            num = 0
        }
        var num2 = new Intl.NumberFormat('en-US', {
            style: 'currency',
            currency: 'USD'
        }).format(num)
        $('#presupuesto').val(num2)
    }
</script>
@endsection