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

@section('content')

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

    table {
        table-layout: fixed;
    }

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

    #gridAutos 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">Autos</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 mb-4">
                                    <label for="">Placas:</label>
                                    <input style="text-transform: uppercase;" type="text" class="form-control" id="Placasss" onclick="javascript:this.value=''">
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="input-group input-group-static mb-4">
                                    <label for="">Cliente:</label>
                                    <input style="text-transform: uppercase;" type="text" class="form-control" id="cliente_fil" onclick="javascript:this.value=''">
                                </div>
                            </div>
                            <div class="col-2 mt-3">
                                <button type="button" class="btn btn-primary " onclick="loadGrid()" id="btn1">
                                    <i class="fa fa-search" aria-hidden="true"></i>
                                    Buscar
                                </button>
                            </div>
                            <div class="col-4 mt-3 text-right">
                                <button type="button" class="btn btn-primary " id="addA">
                                    <i class="fa fa-user-plus" aria-hidden="true"></i>
                                    Nuevo auto
                                </button>
                            </div>
                        </div>
                        <div class="row ">
                            <table class="table table-bordered table-hover" id="gridAutos">
                                <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">Placas</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Sub-marca</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Color</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">Calcomania</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="modalAutos" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-normal" id="titleModal">Agregar autos</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <input type="hidden" id="idAutoHidden">
            <div class="modal-body">
                <div class="row">
                    <div class="col-4 ">
                        <div class="input-group input-group-static mb-4">
                            <label for="">Placa</label>
                            <input type="text" style="text-transform: uppercase;" class="form-control" id="Placas" onkeypress="return blockSpecialChar(event)">
                        </div>
                    </div>
                    <div class="col-8">
                        <div class="input-group input-group-static mb-4">
                            <label for="">Cliente</label>
                            <select class="form-control select" style="width: 100%" id="Cliente_id">
                                <option value="0" selected>-[Seleccione una opción]-</option>
                                @if(isset($data['clientes']))
                                @foreach ($data['clientes'] as $c)
                                <option value="{{$c->Id}}">{{$c->Nombre}}</option>
                                @endforeach
                                @endif
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-4">
                        <div class="input-group input-group-static mb-4">
                            <label for="">Marca</label>
                            <select class="form-control" id="Marca" style="width: 100%" onchange="set_submarca();">
                                <option value="0" selected>-[Seleccione una opción]-</option>
                                @if(isset($data['marcas']))
                                @foreach ($data['marcas'] as $m)
                                <option value="{{$m->Id}}">{{$m->Marca}}</option>
                                @endforeach
                                @endif
                            </select>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="input-group input-group-static mb-4">
                            <label for="">Sub-marca</label>
                            <select class="form-control" id="SubMarca_id" style="width: 100%">
                                <option value="0" selected>-[Seleccione una opción]-</option>

                            </select>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="input-group input-group-static mb-4">
                            <label for="">Calcomania</label>
                            <select id="Calcomania_id" class="form-control" style="width: 100%">
                                <option value="0" selected>-[Seleccione una opción]-</option>
                                @if(isset($data['calcomanias']))
                                @foreach ($data['calcomanias'] as $cm)
                                <option value="{{$cm->Id}}">{{$cm->Descripcion}}</option>
                                @endforeach
                                @endif
                            </select>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="input-group input-group-static mb-4">
                            <label for="">Color</label>
                            <select class="form-control " id="Color_id" style="width: 100%">
                                <option value="0" selected>-[Seleccione una opción]-</option>
                                @if(isset($data['colores']))
                                @foreach ($data['colores'] as $co)
                                <option value="{{$co->Id}}">{{$co->Color}}</option>
                                @endforeach
                                @endif
                            </select>
                        </div>
                    </div>
                    <div class="row col-12">
                        <div class="col-3">
                            <div class="input-group input-group-static mb-4">
                                <label for="">Estatus</label>
                                <select class="form-control " id="Estatus" style="width: 100%">
                                    <option value="1" selected>Activo</option>
                                    <option value="2">Cancelar</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-3 ">
                            <div class="input-group input-group-static mb-4">
                                <label for="">Número membresia</label>
                                <input type="text" class="form-control" id="FolioMembresia">
                            </div>
                        </div>
                        <div class="col-3 ">
                            <div class="input-group input-group-static mb-4">
                                <label for="">Vigencia membresia</label>
                                <input type="text" class="form-control datepicker" id="VenceMembresia">
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn btn-primary" onclick="agregarAuto();">Guardar</button>
                </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')
            }
        });

        $(".datepicker").flatpickr({
            minDate: "today"
        });


        // $('#gridAutos').dataTable().fnDestroy();
        // $('#gridAutos td').css('white-space', 'initial');

        // $('#gridAutos').DataTable({
        //     dom: 'Bfrtip',
        //     // processing: true,
        //     responsive: true,
        //     // scrollY: '37vh',
        //     // scrollCollapse: true,
        //     // scrollX: true,
        //     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'
        //         }
        //     ]
        // });
        loadGrid();
    });
    $('#Placasss').autocomplete({
        source: function(request, response) {
            if ($('#Placasss').val().length >= 3) {

                $.ajax({
                    url: "{{url('operaciones/recepcion/get_placas')}}",
                    dataType: 'json',
                    data: {
                        term: request.term
                    },
                    success: function(data) {
                        response(data)
                    }
                });
            }
        }
    });
    
    $('#cliente_fil').autocomplete({
        source: function(request, response) {
            if ($('#cliente_fil').val().length >= 3) {

                $.ajax({
                    url: "{{url('operaciones/recepcion/get_clientes')}}",
                    dataType: 'json',
                    data: {
                        term: request.term
                    },
                    success: function(data) {
                        response(data)
                    }
                });
            }
        }
    });

    $('#addA').click(function() {
        $('#idAutoHidden').val('')
        $('#Placas').val('')
        $('#SubMarca_id').val(0)
        $('#Marca').val(0)
        $('#Color_id').val(0)
        $('#Cliente_id').val(0)
        $('#Calcomania_id').val(0)
        $('#Estatus').val(1);
        $('#FolioMembresia').val('')
        $('#VenceMembresia').val('')
        $('#modalAutos').modal('show')
        $('#titleModal').text('Agregar auto')



    })

    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();
        $('#gridAutos').dataTable().fnDestroy();
        $('#gridAutos td').css('white-space', 'initial');
        var table = $('#gridAutos').DataTable({
            lengthMenu: [10, 15, 20, 50, 100],
            dom: 'Bfrtip',
            processing: true,
            responsive: true,
            scrollY: '50vh',
            scrollCollapse: true,
            ajax: {
                url: "{{url('catalogo/autos/get_autos')}}",
                type: "POST",
                data: {
                    Placas: $('#Placasss').val(),
                    cliente:$('#cliente_fil').val()
                }
            },
            columns: [
                // {
                //     "className": 'details-control',
                //     "orderable": false,
                //     "data": null,
                //     "defaultContent": ''
                // }, 
                {
                    data: "Id"
                },
                {
                    data: "Placas"
                },
                {
                    data: "SubMarca"
                },
                {
                    data: "Color"
                },
                {
                    data: "Nombre"
                },
                {
                    data: "Descripcion"
                },

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

            ],
        });

        // $('#gridAutos 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 format(d) {
    //     // `d` is the original data object for the row
    //     return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
    //         '<tr>' +
    //         '<td>Tasa IVA:</td>' +
    //         '<td><small>' + d.Color + '</small></td>' +
    //         '</tr>' +
    //         '<tr>' +
    //         '<td>Almacen Venta:</td>' +
    //         '<td><small>' + d.Descripcion + '</small></td>' +
    //         '</tr>' +
    //         '</table>';
    // }

    function agregarAuto() {
        var Id = $('#idAutoHidden').val();
        var Placas = $('#Placas').val().toUpperCase();
        var SubMarca_id = $('#SubMarca_id option:selected').val();
        var Color_id = $('#Color_id option:selected').val();
        var Cliente_id = $('#Cliente_id option:selected').val();
        var Calcomania_id = $('#Calcomania_id option:selected').val();
        var Estatus = $('#Estatus option:selected').val();
        var FolioMembresia = $('#FolioMembresia').val();
        var VenceMembresia = $('#VenceMembresia').val();


        if (Placas == '' || SubMarca_id == 0 || Color_id == 0 || Cliente_id == 0 || Calcomania_id == 0 || Estatus == 0) {
            Swal.fire({
                type: 'error',
                title: 'Oops...',
                text: 'Debes de ingresar toda la información del auto',

            })
            return false;
        }
        $.ajax({
                url: "{{ url('catalogo/autos/guardar_auto')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    Id: Id,
                    Placas: Placas,
                    SubMarca_id: SubMarca_id,
                    Color_id: Color_id,
                    Cliente_id: Cliente_id,
                    Calcomania_id: Calcomania_id,
                    Estatus: Estatus,
                    FolioMembresia: FolioMembresia,
                    VenceMembresia: VenceMembresia,
                },
            })
            .done(function(resp) {
                console.log("success");
                if (resp.result == 1) {
                    Swal.fire({
                        type: 'success',
                        title: '¡Se ha guardado con éxito!',
                        showConfirmButton: false,
                        timer: 2500
                    });
                    $('#modalAutos').modal('hide')
                    // loadGrid();
                    $('#gridAutos').DataTable().ajax.reload();


                } else {
                    Swal.fire({
                        type: 'error',
                        title: 'Oops...',
                        text: resp.msg
                    })
                }
            })
            .fail(function() {
                Swal.fire({
                    type: 'error',
                    title: 'Oops...',
                    text: '¡Algo salió mal!'
                })
            })
            .always(function() {
                console.log("complete");
            });

    }

    function desactivar(estatus, id) {
        if (estatus == 2) {
            Swal.fire({
                title: '¿Está seguro en desactivar el auto con el ID #' + id + '?',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#43586b',
                cancelButtonColor: '#f54337',
                confirmButtonText: '¡Sí, desactivalo!',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.value) {
                    $.ajax({
                            url: "{{url('catalogo/autos/update_auto')}}",
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                Id: id,
                                estatus: estatus,
                            }
                        })
                        .done(function(resp) {
                            console.log("success");
                            if (resp.result == 1) {
                                // loadGrid();
                                $('#gridAutos').DataTable().ajax.reload();

                            }
                        })
                        .fail(function() {
                            console.log("error");
                        })
                        .always(function() {
                            console.log("complete");
                        });

                }
            })
        } else {
            Swal.fire({
                title: '¿Está seguro en activar el auto con el ID #' + id + '?',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#43586b',
                cancelButtonColor: '#f54337',
                confirmButtonText: '¡Sí, activalo!',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.value) {
                    $.ajax({
                            url: "{{url('catalogo/autos/update_auto')}}",
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                Id: id,
                                estatus: estatus,
                            }
                        })
                        .done(function(resp) {
                            console.log("success");
                            if (resp.result == 1) {
                                // loadGrid();
                                $('#gridAutos').DataTable().ajax.reload();

                            }
                        })
                        .fail(function() {
                            console.log("error");
                        })
                        .always(function() {
                            console.log("complete");
                        });

                }
            })
        }
    }

    function editar(id) {

        $.ajax({
                url: "{{url('catalogo/autos/get_auto')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    Id: id,
                }
            })
            .done(function(resp) {
                console.log("success");
                if (resp.result == 1) {
                    console.log(resp.data)
                    $('#idAutoHidden').val(resp.data['Id']);
                    $('#Placas').val(resp.data['Placas']);
                    $('#Marca').val(resp.data['Marca_id']);
                    $('#Cliente_id').val(resp.data['Cliente_id']);
                    $('#Calcomania_id').val(resp.data['Calcomania_id']);
                    $('#Estatus').val(1);
                    $('#FolioMembresia').val(resp.data['FolioMembresia']);
                    $('#VenceMembresia').val(resp.data['VenceMembresia']);
                    $('#Color_id').val(resp.data['Color_id'])
                    $('#titleModal').text('Editar auto')
                    $('#modalAutos').modal('show')
                    set_submarca(resp.data['SubMarca_id'])
                }
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    $('#SubMarca_id').click(function() {
        if ($('#Marca option:selected').val() == 0) {
            Swal.fire({
                type: 'error',
                title: 'Oops...',
                text: '¡Debes seleccionar una marca antes!'
            })
            return false;
        }
    })

    function set_submarca(a) {

        var Marca = $('#Marca option:selected').val();
        $.ajax({
                url: "{{ url('catalogo/autos/set_submarca')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    Id: Marca,
                },
            })
            .done(function(resp) {
                console.log("success");
                const $select = document.querySelector("#SubMarca_id");
                for (let i = $select.options.length; i >= 0; i--) {
                    $select.remove(i);
                }
                $('#SubMarca_id')
                    .append('<option value="0" selected>-[Seleccione una opción]-</option>');
                if (resp.result == 1) {
                    $.each(resp.data, function(key, value) {
                        $('#SubMarca_id')
                            .append('<option value="' + value['Id'] + '">' + value['SubMarca'] + '</option>');
                    });
                    if (a != '') {
                        $('#SubMarca_id').val(a)
                    }
                } else {
                    Swal.fire({
                        type: 'error',
                        title: 'Oops...',
                        text: resp.msg
                    })
                }
            })
            .fail(function() {
                Swal.fire({
                    type: 'error',
                    title: 'Oops...',
                    text: '¡Algo salió mal!'
                })
            })
            .always(function() {
                console.log("complete");
            });
    }

    function ValidarArchivo() {
        if (document.getElementById("csv_autos").files.length == 0) {
            fileCSV = false;
        } else {
            fileCSV = true;

            csvCajeros = $("#csv_autos").val();

            $.ajax({
                    url: '{{ url("")}}',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        csv: csvCajeros
                    },
                })
                .done(function(resp) {


                })
                .fail(function() {
                    console.log("error");
                })
                .always(function() {
                    console.log("complete");
                });
        }
    }
</script>
@endsection