@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-12">
                                <h4 class="card-title">Volumetrias / {{ $data->Descripcion }} - ({{ $data->CodigoProyecto }})</h4>
                                <!--<p class="card-category"> Here is a subtitle for this table</p>-->
                                <input type="hidden" id="idProyecto" value="{{ $data->Id }}">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12" align="right">
                                <!--<a class="btn btn-primary" href="{{ url('proyectos/volumetrias/nueva/'.$data->Id) }}">Nueva Volumetria</a>-->
                                <button class="btn btn-primary " onclick="nuevaVolumetria();">Nueva Volumetria</button>
                            </div>
                        </div>
                        <div class="row ">
                            <table class="table table-bordered table-hover" id="gridVolumetrias">
                                <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">Version</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">Lider</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">Fecha</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Acciones</th>
                                </thead>
                                <tbody id="list">
                                    @foreach ($data->volumetrias as $v)
                                    <tr>
                                        <!--<td>{{ $v->id }}</td>-->
                                        <td>{{ $v->version }}</td>
                                        <td><span class="badge badge-secondary"> {{ $v->estatus }}</span></td>
                                        <td>{{ $v->usuario->name }}</td>
                                        <td>{{ $v->created_at }}</td>
                                        <td>
                                            @if ($v->estatus=='Rechazada' || $v->estatus=='Aceptada')
                                            <a class="btn btn-primary btn-sm" href="{{ url('proyectos/volumetrias/editar/'.$v->id) }}">Ver</a>
                                            @else
                                            <a class="btn btn-primary btn-sm" href="{{ url('proyectos/volumetrias/editar/'.$v->id) }}">Editar</a>
                                            @endif

                                            @if (auth()->user()->id_perfil=='1' || auth()->user()->id_perfil=='3' || auth()->user()->id == $lider )
                                            <button class="btn btn-info btn-sm" onclick="cambiaEstatus(`{{ $v->id }}`,`{{ $v->version }}`, `{{ $v->estatus }}`);">Estatus</button>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="puedehacer" value="{{ $volactivas }}">
</div>


<div class="modal fade" id="cambiaEstatus">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title ">Cambiar estatus / <label id="versionLabel" class="h4 text-white"></label></h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <input type="hidden" id="idvolhiden">
                    <div class="col-12">
                        <div class="input-group input-group-static mb-4">
                            <label for="estatus">Estatus:</label>
                            <select class="form-control" id="estatus">
                                @foreach($estatus_volumetrias as $vl)
                                <option value="{{$vl}}">{{$vl}}</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="cambiaEstatusw();">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();
        loadgrid1();
    });




    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 loadgrid1() {
        $('#gridVolumetrias').dataTable().fnDestroy();
        $('#gridVolumetrias td').css('white-space', 'initial');
        var table = $('#gridVolumetrias').DataTable({
            lengthMenu: [10, 15, 20, 50, 100],
            dom: 'Bfrtip',
            processing: true,
            responsive: true,
            scrollY: '50vh',
            scrollCollapse: true,
            order: [
                [0, "asc"]
            ],
            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'
                }

            ],
        });
    }

    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: "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 nuevaVolumetria() {
        if ($('#puedehacer').val() != '0') {
            Swal.fire({
                title: 'Tienes Volumetrias pendientes.',
                type: 'warning',
                timer: 1000
            })
        } else {
            window.location.href = "{{url('proyectos/volumetrias')}}/nueva/{{ $data->Id }}";
        }

    }

    function cambiaEstatus(id, version, estatus) {
        $('#idvolhiden').val(id)
        $('#estatus').val(estatus)
        $('#versionLabel').text('Versión ' + version)
        $('#cambiaEstatus').modal('show')
    }

    function cambiaEstatusw() {
        var estatus = $('#estatus').val()
        var id = $('#idvolhiden').val();

        $.ajax({
                url: "{{url('proyectos/set_estatus_volu')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    estatus: estatus,
                    id: id
                },
            })
            .done(function() {
                console.log("success");
                showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', 'Se ha cambiado el estatus correctamente.', 2000)
                $('#cambiaEstatus').modal('hide')
                setTimeout(() => {
                    window.location.reload();
                }, 2000);
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });

    }
</script>
@endsection