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

@section('content')
<style>
    .content {
        height: 100vh;
    }

    table td {
        word-wrap: break-word;
        max-width: 20%;
    }

    #tablaServicios td {
        white-space: inherit;
    }

    .dataTables_filter {
        display: none;
        visibility: hidden;
    }

    .dataTables_paginate {
        display: none;
        visibility: hidden;
    }

    .dataTables_length {
        display: none;
        visibility: hidden;
    }

    .dataTables_info,
    .dataTables_empty {
        display: none;
        visibility: hidden;
    }

    .dataTables_scrollHeadInner {
        width: 100% !important;
    }

    .dataTables_scrollHeadInner table {
        width: 100% !important;
    }
</style>

<div class="content">
    <div class="container">
        <div class="row justify-content-md-center">
            <div class="col-md-12">
                <div class="card">
                    <div class="card card-nav-tabs card-plain">
                        <div class="card-header card-header-primary ">
                            <h4 class="card-title "><a class="text-info" href="{{url('operaciones/recepcion')}}"><i class="material-icons">arrow_back</i>Regresar</a> / Recepción de vehículos</h4>
                            <!-- colors: "header-primary", "header-info", "header-success", "header-warning", "header-danger" -->
                            <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="#home" role="tablist" aria-expanded="true">
                                                Vehículos
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="tab" href="#profile" role="tablist" aria-expanded="false">
                                                Servicios
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <hr>
                            <!-- <button id="btn_imprimir" onclick="imprimir()">Imprimir</button> -->
                            <!-- <a href="my.bluetoothprint.scheme://http://192.168.100.77/GitHub/intesystemautolavado/resources/views/ticket/response.php">IMPRIMIR</a> -->
                            <div class="card-body ">
                                <div class="tab-content tab-space">
                                    <div class="tab-pane active" id="home" aria-expanded="true" style="margin-left: -25px; margin-right: -25px; margin-top: -20px;">
                                        <div class="col-12 row">
                                            <div class="col-md-8">
                                                <div class="input-group input-group-static">
                                                    <label>Placas</label>
                                                    <input type="text" style="text-transform: uppercase;" class="form-control" id="Placas" onkeypress="return blockSpecialChar(event)">
                                                </div>
                                            </div>
                                            <div class="col-md-3 form-group mt-4">
                                                <button class="btn btn-primary btn-lg form-control" onclick="getinfoAuto()">BUSCAR</button>
                                            </div>
                                            <div class="col-md-1 form-group mt-4" style="display:none" id="contentBtnEditar">
                                                <button class="btn btn-primary btn-lg form-control" id="btnEditarAuto"><i class="fa fa-pencil" aria-hidden="true"></i></button>
                                            </div>
                                        </div>
                                        <div class="col-12" id="contentInfo" style="display: none;">
                                            <div class="input-group input-group-static ">
                                                <label>Sub-marca:</label>
                                                <input type="text" class="form-control" id="SubMarca" readonly>
                                            </div>
                                            <div class="input-group input-group-static">
                                                <label>Marca:</label>
                                                <input type="text" class="form-control" id="Marca" readonly>
                                            </div>
                                            <div class="input-group input-group-static ">
                                                <label>Color:</label>
                                                <input type="text" class="form-control" id="Color" readonly>
                                            </div>
                                            <div class="input-group input-group-static ">
                                                <label>Cliente:</label>
                                                <input type="text" class="form-control" id="Cliente" readonly>
                                            </div>
                                        </div>
                                        <div class="col-12" id="contentInfo9999" style="display: none;">
                                            <div class="input-group input-group-static">
                                                <label>Sub-marca:</label>
                                                <select class="select22" id="SubMarca_9999" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true" onchange="selectMarca9999(this.value)">
                                                    <option value="0" selected>-[Seleccione una opción]-</option>
                                                    @foreach ($data['submarcas'] as $sm)
                                                    <option value="{{$sm->Id}}" Marca_id="{{$sm->Marca_id}}">{{$sm->SubMarca}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="input-group input-group-static">
                                                <label for="">Marca: </label>
                                                <select id="Marca_id_9999" class="select22" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true" disabled="true">
                                                    <!-- <select id="Marca_id" class="select2" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true" onchange="getSubMarca(this.value)"> -->
                                                    <option value="0" selected>-[Seleccione una opción]-</option>
                                                    @foreach ($data['marcas'] as $sm)
                                                    <option value="{{$sm->Id}}">{{$sm->Marca}}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="input-group input-group-static">
                                                <label>Color:</label>
                                                <select class="select22" id="Color_id_9999" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                                                    <option value="0" selected>-[Seleccione una opción]-</option>
                                                    @foreach ($data['colores'] as $c)
                                                    <option value="{{$c->Id}}">{{$c->Color}}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="input-group input-group-static">
                                                <label>Cliente:</label>
                                                <select class="select22" id="Cliente_id_9999" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                                                    @foreach ($data['clientes'] as $cl)
                                                    <option value="{{$cl->Id}}">{{$cl->Nombre}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-12 col-sm-12 mt-3" id="contentBtn" style="display: none;">
                                            <button type="button" class="btn btn-primary btn-lg form-control" id="addA">
                                                <i class="fa fa-user-plus" aria-hidden="true"></i>
                                                Registrar nuevo
                                            </button>
                                        </div>

                                    </div>
                                    <!-- <button type="button" class="btn btn-warning form-control" onclick="imprimir()">
                                        <i class="fa fa-file" aria-hidden="true"></i>
                                        Imprimir
                                    </button> -->
                                    <div class="tab-pane" id="profile" aria-expanded="false">
                                        <div class="row">
                                            <div class="input-group input-group-static form-group">
                                                <input type="text" class="form-control pull-right" style="width:20%" id="search" placeholder="Escribe para filtrar...">
                                            </div>

                                        </div>
                                        <div class="row ">
                                            <table class="table table-bordered table-hover" id="gridServicios" style="width: 100%;">
                                                <thead>
                                                    <th class="text-white font-weight-bold opacity-9">Agregar</th>
                                                    <th class="text-white font-weight-bold opacity-9">Servicio</th>
                                                    <th class="text-white font-weight-bold opacity-9">Precio</th>
                                                </thead>
                                                <tbody id="tablaServicios">

                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="col-md-12 col-sm-12 mt-3 contentBtnRes" style="display: none;">
                                            <button type="button" class="btn btn-primary btn-lg form-control" id="addC" onclick="agregarVehiculo()">
                                                Recibir
                                            </button>
                                        </div>
                                        <!-- <div class="col-md-12 col-sm-12 mt-3" id="contentBtnTicket" style="display: none;">
                                                <button type="button" class="btn btn-warning form-control" onclick="imprimir()">
                                                    <i class="fa fa-file" aria-hidden="true"></i>
                                                    Imprimir
                                                </button>
                                            </div> -->
                                        <div class="col-md-12 mt-3" id="contentBtnRegresar" style="display: none;">
                                            <a class="btn btn-primary form-control" href="{{url('operaciones/recepcion/alta')}}">
                                                Regresar
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modalAddAutos" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-normal" id="exampleModalLabel">Agregar nuevo vehículo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <input type="hidden" id="idTicketHidden">
            <div class="modal-body">
                <div class="col-md-12">
                    <div class="input-group input-group-static mb-4">
                        <label>Placas:</label>
                        <input type="text" style="text-transform: uppercase;" class="form-control" id="Placas_">
                    </div>
                </div>

                <div class="col-md-12">
                    <div class="input-group input-group-static">
                        <label>Sub-marca:</label>
                        <select class="select2" id="SubMarca_" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true" onchange="selectMarca(this.value)">
                            <option value="0" selected>-[Seleccione una opción]-</option>
                            @foreach ($data['submarcas'] as $sm)
                            <option value="{{$sm->Id}}" Marca_id="{{$sm->Marca_id}}">{{$sm->SubMarca}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-md-12">
                    <div class="input-group input-group-static">
                        <label for="">Marca: </label>
                        <select id="Marca_id" class="select2" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                            <!-- <select id="Marca_id" class="select2" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true" onchange="getSubMarca(this.value)"> -->
                            <option value="0" selected>-[Seleccione una opción]-</option>
                            @foreach ($data['marcas'] as $sm)
                            <option value="{{$sm->Id}}">{{$sm->Marca}}</option>
                            @endforeach
                        </select>
                    </div>

                </div>
                <!-- <div class="col-md-12">
                    <div class="input-group input-group-static">
                        <label>Marca</label>
                        <input type="text" class="form-control" id="Marca_">
                        <input type="hidden" class="form-control" id="marca_hidden">
                    </div>
                </div> -->


                <!-- <div class="col-md-12">
                    <div class="input-group input-group-static">
                        <label>Sub-marca</label>
                        <input type="text" class="form-control" id="SubMarca_">
                        <input type="hidden" class="form-control" id="sub_marca_hidden">
                    </div>
                </div> -->
                <div class="col-md-12">
                    <div class="input-group input-group-static">
                        <label>Color:</label>
                        <select class="select2" id="Color_id" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                            <option value="0" selected>-[Seleccione una opción]-</option>
                            @foreach ($data['colores'] as $c)
                            <option value="{{$c->Id}}">{{$c->Color}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <!-- <div class="col-md-12">
                    <div class="form-group">
                        <label>Calcomania</label>
                        <select class="form-control" id="Calcomania_id">
                            <option value="0" selected>-[Seleccione una opción]-</option>
                            @if(isset($data['calcomanias']))
                            @foreach ($data['calcomanias'] as $ca)
                            <option value="{{$ca->Id}}">{{$ca->Descripcion}}</option>
                            @endforeach
                            @endif
                        </select>
                    </div>
                </div> -->
                <div class="col-md-12">
                    <div class="input-group input-group-static">
                        <label>Cliente:</label>
                        <select class="select2" id="Cliente_id" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                            @foreach ($data['clientes'] as $cl)
                            <option value="{{$cl->Id}}">{{$cl->Nombre}}</option>
                            @endforeach
                        </select>
                    </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="agregarNuevoAuto();">Guardar</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalEditarAutos" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-normal">Editar vehículo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">

                <div class="col-md-12">
                    <div class="input-group input-group-static">
                        <label>Sub-marca:</label>
                        <select class="select2edi" id="SubMarca_edi" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true" onchange="selectMarcaEdi(this.value)">
                            <option value="0" selected>-[Seleccione una opción]-</option>
                            @foreach ($data['submarcas'] as $sm)
                            <option value="{{$sm->Id}}" Marca_id="{{$sm->Marca_id}}">{{$sm->SubMarca}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-md-12">
                    <div class="input-group input-group-static">
                        <label for="">Marca: </label>
                        <select id="Marca_id_edi" class="select2edi" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true" disabled>
                            <!-- <select id="Marca_id" class="select2" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true" onchange="getSubMarca(this.value)"> -->
                            <option value="0" selected>-[Seleccione una opción]-</option>
                            @foreach ($data['marcas'] as $sm)
                            <option value="{{$sm->Id}}">{{$sm->Marca}}</option>
                            @endforeach
                        </select>
                    </div>

                </div>
                <div class="col-md-12">
                    <div class="input-group input-group-static">
                        <label>Color:</label>
                        <select class="select2edi" id="Color_id_edi" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                            <option value="0" selected>-[Seleccione una opción]-</option>
                            @foreach ($data['colores'] as $c)
                            <option value="{{$c->Id}}">{{$c->Color}}</option>
                            @endforeach
                        </select>
                    </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="editarAuto();">Guardar</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="modalImprimir" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-normal" id="exampleModalLabel">Imprimir ticket</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <input type="hidden">
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <a type="button" class="btn btn-secondary" data-bs-dismiss="modal" href="{{url('operaciones/recepcion')}}">Cerrar</a>
                <button type="button" class="btn btn-primary" onclick="imprimir();">Imprimir</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="modalServicioLibre" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-normal" id="exampleModalLabel">Servicio libre</h5>

            </div>
            <div class="modal-body">
                <div class="input-group input-group-static mb-4">
                    <label>Descripción:</label>
                    <input type="text" class="form-control" id="descripcion">
                </div>
                <div class="input-group input-group-static mb-4">
                    <label>Precio:</label>
                    <input type="number" class="form-control" id="precio">
                </div>
            </div>
            <div class="modal-footer">
                <a type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</a>
                <button type="button" class="btn btn-primary" onclick="addServicio();">Guardar</button>
            </div>
        </div>
    </div>
</div>


<input type="hidden" id="servicio_hidden">

<style>
    .ui-autocomplete-input {
        border: none;
        font-size: 14px;
        /* width: 300px; */
        /* height: 24px; */
        /*margin-bottom: 5px;
  /*padding-top: 2px;
  border: 1px solid #DDD !important;*/
        padding-top: 0px !important;
        z-index: 1511;
        position: relative;
    }

    .ui-menu .ui-menu-item a {
        font-size: 12px;
    }

    .ui-autocomplete {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1510 !important;
        float: left;
        display: none;
        min-width: 160px;
        width: 160px;
        padding: 4px 0;
        margin: 2px 0 0 0;
        list-style: none;
        background-color: #ffffff;
        border-color: #ccc;
        border-color: rgba(0, 0, 0, 0.2);
        border-style: solid;
        border-width: 1px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
        *border-right-width: 2px;
        *border-bottom-width: 2px;
    }

    .ui-menu-item>a.ui-corner-all {
        display: block;
        padding: 3px 15px;
        clear: both;
        font-weight: normal;
        line-height: 18px;
        color: #555555;
        white-space: nowrap;
        text-decoration: none;
    }

    .ui-state-hover,
    .ui-state-active {
        color: #ffffff;
        text-decoration: none;
        background-color: #0088cc;
        border-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        background-image: none;
    }

    input,
    label {
        font-weight: 600 !important;
        font-size: 1.2rem !important;
    }
</style>
<link rel="stylesheet" href="{{asset('vendor/jquery-ui/jquery-ui.min.css')}}">
<script src="{{asset('vendor/jquery-ui/jquery-ui.min.js')}}"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $("#addC").on('click', function() {
            $("#addC").prop("disabled", false);
        });


        // new Choices($('#Marca_id')[0]);
        // new Choices($('#Color_id')[0]);
        // new Choices($('#Cliente_id')[0]);

        // const Cliente_id = document.querySelector('#Cliente_id');
        // new Choices(Cliente_id, {
        //     itemSelectText: '',
        //     shouldSort: false,
        // });
        // new Choices($('#Calcomania_id')[0]);
        getProductos();
        // $('.select2').select2()

        $('.select2').select2({
            dropdownParent: $('#modalAddAutos')
        });

        $('.select2edi').select2({
            dropdownParent: $('#modalEditarAutos')
        });
        $('.select22').select2();
        $("#Cliente_id").prop("selectedIndex", 0);


        $("#search").keyup(function() {
            _this = this;
            // Show only matching TR, hide rest of them
            $.each($("#gridServicios tbody tr"), function() {
                if ($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
                    $(this).hide();
                else
                    $(this).show();
            });
        });
    });

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

                });
            }
        },
        select: function(event, ui) {
            // creaExpediente(ui.item.id);
            $('#Placas').val(ui.item.placas);
            getinfoAuto()
            return false;
        },
    });

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

    //             });
    //         }
    //     },
    //     select: function(event, ui) {
    //         // creaExpediente(ui.item.id);
    //         $('#marca_hidden').val(ui.item.Id);
    //         // getinfoAuto()
    //         return false;
    //     },
    // });

    // $('#SubMarca_').autocomplete({
    //     source: function(request, response) {
    //         if ($('#SubMarca_').val().length >= 1) {
    //             $.ajax({
    //                 url: "{{url('operaciones/recepcion/get_marca')}}",
    //                 dataType: 'json',
    //                 data: {
    //                     term: request.term,
    //                     tipo: 2,
    //                     Marca_id: $('#Marca_id option:selected').val()
    //                 },
    //                 success: function(data) {
    //                     response(data)
    //                 },

    //             });
    //         }
    //     },
    //     select: function(event, ui) {
    //         // creaExpediente(ui.item.id);
    //         $('#SubMarca_').val(ui.item.label)
    //         $('#sub_marca_hidden').val(ui.item.id);
    //         // getinfoAuto()
    //         return false;
    //     },
    // });


    function selectMarca(id) {
        var marca_id = $('#SubMarca_ option:selected').attr('Marca_id');
        $('#Marca_id').val(marca_id).trigger('change');

    }

    function selectMarcaEdi(id) {
        var marca_id = $('#SubMarca_edi option:selected').attr('Marca_id');
        $('#Marca_id_edi').val(marca_id).trigger('change');

    }

    function selectMarca9999(id) {
        var marca_id = $('#SubMarca_9999 option:selected').attr('Marca_id');
        $('#Marca_id_9999').val(marca_id).trigger('change');

    }

    $("#addC").on('click', function() {
        $("#addC").prop("disabled", true);
    });

    function getSubMarca(valor) {
        $.ajax({
                url: "{{ url('operaciones/recepcion/get_marca')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    Marca_id: valor,
                }

            })
            .done(function(resp) {
                $('#SubMarca_ option:not(:first)').remove()
                // $('#idfactura' + select_factura).attr('disabled', false);
                $.each(resp.data, function(index, value) {
                    $('#SubMarca_').append(
                        '<option value="' + value['Id'] + '" >' + value['SubMarca'] + '</option>'
                    )
                })

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


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

    $('#addA').click(function() {
        $('#modalAddAutos').modal('show')
        $('#Placas_').val($('#Placas').val())
        $('#Color_id').val(0)
        $('#Marca_id').val(0)
        // $('#Calcomania_id').val(0)
        // $('#Cliente_id').val(0)
        $("#Cliente_id").prop("selectedIndex", 0);

    })


    $('#btnEditarAuto').click(function() {
        var Placas = $('#Placas').val();
        $.ajax({
                url: "{{ url('operaciones/recepcion/get_auto')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    Placas: Placas,
                },
            })
            .done(function(resp) {
                console.log(resp);
                $('#Color_id_edi').val(resp.data.Color_id).trigger('change');
                $('#SubMarca_edi').val(resp.data.SubMarca_id).trigger('change');
                $('#Marca_id_edi').val(resp.data.Marca_id).trigger('change');
                $('#modalEditarAutos').modal('show')

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

    })

    function getinfoAuto() {

        // console.log("")
        // return false;
        var Placas = $('#Placas').val();

        if (Placas == '9999') {
            $('#contentInfo').hide();
            $('#contentInfo9999').show();
            $('#contentBtn').hide();
            $('.contentBtnRes').show();
            $('#contentBtnEditar').hide();
            return false;
        }

        $.ajax({
                url: "{{ url('operaciones/recepcion/get_auto')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    Placas: Placas,
                },
            })
            .done(function(resp) {
                console.log(resp);
                if (resp.result == 1) {
                    $('#contentBtn').hide();
                    $('.contentBtnRes').show();
                    $('#contentInfo').show()
                    $('#SubMarca').val(resp.data.SubMarca)
                    $('#Marca').val(resp.data.Marca)
                    $('#Color').val(resp.data.Color)
                    $('#Cliente').val(resp.data.Nombre)
                    if (Placas != '9999')
                        $('#contentBtnEditar').show();

                    return false;

                } else {
                    $('#contentBtn').show();
                    $('#contentInfo').hide()
                    $('.contentBtnRes').hide();
                    $('#SubMarca').val('')
                    $('#Marca').val('')
                    $('#Color').val('')
                    $('#Cliente').val('')
                }

                $('#contentBtnEditar').hide();

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

    function getProductos() {
        $('#gridServicios').DataTable({
            scrollY: '37vh',
            "ordering": false,
        });
        $.ajax({
                url: "{{ url('operaciones/recepcion/get_productos')}}",
                type: 'POST',
                dataType: 'json',

            })
            .done(function(resp) {
                $.each(resp.data, function(index, value) {
                    var p = parseFloat(value['Precio']);
                    var tasa = value['TasaImpuesto'] / 100
                    var precio = p / (tasa + 1)
                    var iva = precio * (tasa);
                    var precio_check = 1;

                    if (p == 0)
                        precio_check = 0;
                    // console.log(tasa);
                    // console.log(precio);
                    // console.log(iva);
                    // console.log(p);
                    /* $("#listProductos").append('<li class="list-group-item">' +
                         ' <div class="form-check">' +
                         ' <input class="form-check-input ads_Checkbox" type="checkbox" value="' + value['Id'] + '" id="a" >' +
                         ' <label class="custom-control-label" for="customCheck1"  style="font-size: 12px">' + value['Descripcion'] + '</label>' +
                         ' <label class="custom-control-label" for="customCheck1"  style="font-size: 12px">$' + preciof.toFixed(2) + '</label>' +
                         ' </div>' +
                         '</li>'
                     );*/
                    $("#tablaServicios").append(
                        '<tr >' +
                        '<td >' +
                        '<div class="form-check"> <input class="form-check-input ads_Checkbox" onclick="validateServicio(' + index + ', ' + value['Codigo'] + ', ' + precio_check + ')"  precio_check="' + precio_check + '" type="checkbox"  codigo="' + value['Codigo'] + '"  descripcion="' + value['DescripcionCorta'] + '" impuesto="' + iva + '" importe="' + p + '" precio="' + precio + '" value="' + value['Id'] + '" id="check_' + index + '" ></div>' +
                        '</td>' +
                        '<td><label class="custom-control-label" style="font-size: 14px" id="descripcion_attr' + index + '">' + value['DescripcionCorta'] + '</label> </td>' +
                        '<td><label class="custom-control-label" for="customCheck1"  style="font-size: 14px"  id="precio_attr' + index + '">' + formatter.format(p) + '</label> </td>' +
                        '</tr>'

                    );
                });

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

    function validateServicio(id, codigo, precio_check) {

        if (codigo == 9999 || codigo == 171) {
            if (!$('#check_' + id).is(':checked')) {
                $('#modalServicioLibre').modal('show')
            }
            $('#servicio_hidden').val(id)
        }

       /* var check_1 = $(".ads_Checkbox[precio_check='1']");
        var check_0 = $(".ads_Checkbox[precio_check='0']");

        var bandera_c_0 = false;
        var bandera_c_1 = false;

        if (precio_check == 0) {
            $(".ads_Checkbox[precio_check='0']").each(function(index, value) {
                if ($(this).is(':checked')) {
                    bandera_c_0 = true;
                }
            })
            if (bandera_c_0) {
                check_1.attr('disabled', true);
                check_0.removeAttr('disabled');
            } else {
                check_1.removeAttr('disabled');
            }
            return;
        }

        $(".ads_Checkbox[precio_check='1']").each(function(index, value) {
            if ($(this).is(':checked')) {
                bandera_c_1 = true;
            }
        })

        if (bandera_c_1) {
            check_0.attr('disabled', true);
            check_1.removeAttr('disabled');
        } else {
            check_0.removeAttr('disabled');
        }*/

    }

    // $('#tablaServicios').on('click', 'tr', function(e) {
    //     var $checkbox = $(this).find('.ads_Checkbox');
    //     e.target.type == "checkbox" ?
    //         $checkbox.prop('checked', $checkbox.is(':checked')) :
    //         $checkbox.prop('checked', !$checkbox.is(':checked'));

    // });

    function addServicio() {
        var id_row = $('#servicio_hidden').val();
        var descripcion = $('#descripcion').val();
        var precio = $('#precio').val();

        $('#check_' + id_row).attr('importe', precio);
        $('#check_' + id_row).attr('importe', precio);
        $('#check_' + id_row).attr('precio', precio);
        $('#check_' + id_row).attr('descripcion', descripcion);
        $('#descripcion_attr' + id_row).text(descripcion);
        $('#precio_attr' + id_row).text(formatter.format(precio));
        $('#precio').val('');
        $('#descripcion').val('');
        $('#servicio_hidden').val('');
        $('#modalServicioLibre').modal('hide')

    }

    function agregarNuevoAuto() {
        var Placas = $('#Placas_').val().toUpperCase();
        //var SubMarca_id = $('#SubMarca_id').attr('marca_id')
        var SubMarca_id = $('#SubMarca_ option:selected').val()
        var Color_id = $('#Color_id option:selected').val()
        var Cliente_id = $('#Cliente_id option:selected').val()
        // var Calcomania_id = $('#Calcomania_id').val();


        if (Placas == '' || SubMarca_id == 0 || Color_id == 0 || Cliente_id == 0) {
            Swal.fire({
                type: 'error',
                title: 'Oops...',
                text: 'Debes ingresar toda la información',
                showConfirmButton: false,
                timer: 1500
            })
            return false;
        }

        $.ajax({
                url: "{{ url('operaciones/recepcion/save_newauto')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    Placas: Placas,
                    SubMarca_id: SubMarca_id,
                    Color_id: Color_id,
                    Cliente_id: Cliente_id,
                    Calcomania_id: 1,
                    Estatus: 'Activo',

                },
            })
            .done(function(resp) {
                console.log(resp);
                if (resp.result == 1) {
                    Swal.fire({
                        type: 'success',
                        title: '¡Se ha guardado con éxito!',
                        showConfirmButton: false,
                        timer: 1500
                    });
                    $('#modalAddAutos').modal('hide');
                    getinfoAuto();
                }
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });

    }


    function editarAuto() {
        var Placas = $('#Placas').val().toUpperCase();
        var Marca = $('#Marca_id_edi').val();
        var SubMarca = $('#SubMarca_edi').val();
        var Color = $('#Color_id_edi').val();
        $.ajax({
                url: "{{ url('operaciones/recepcion/editar_auto')}}",
                type: 'POST',
                dataType: 'json',
                async: false,
                data: {
                    Placas: Placas,
                    Marca: Marca,
                    SubMarca: SubMarca,
                    Color: Color,

                },
            })
            .done(function(resp) {
                console.log(resp.recepcion)
                if (resp.result == 1) {
                    Swal.fire({
                        type: 'success',
                        title: '¡Se ha editado el vehículo con éxito!',
                        showConfirmButton: false,
                        timer: 1500
                    });
                    $('#modalEditarAutos').modal('hide');
                    $('#Marca_id_edi').val(0);
                    $('#SubMarca_edi').val(0);
                    $('#Color_edi').val(0)
                    getinfoAuto();
                }


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

    }

    function agregarVehiculo() {
        var Placas = $('#Placas').val().toUpperCase();

        if (Placas == 9999) {
            var Marca = $('#Marca_id_9999 option:selected').val()
            var SubMarca = $('#SubMarca_9999 option:selected').val()
            var Color = $('#Color_id_9999 option:selected').val()
            var Cliente = $('#Cliente_id_9999 option:selected').val()
        } else {
            var Marca = $('#Marca').val()
            var SubMarca = $('#SubMarca').val()
            var Color = $('#Color').val()
            var Cliente = $('#Cliente').val()
        }

        var productos = new Array;
        $('.ads_Checkbox:checked').each(function() {
            dat = {
                //id_correo: $(this).attr('id_c'),
                Id: $(this).val(),
                importe: $(this).attr('importe'),
                impuesto: $(this).attr('impuesto'),
                precio: $(this).attr('precio'),
                descripcion: $(this).attr('descripcion'),
                precio: $(this).attr('precio'),
                codigo: $(this).attr('codigo'),
            }
            productos.push(dat)
        });



        if (Placas == '') {
            Swal.fire({
                type: 'error',
                title: 'Oops...',
                text: 'Debes ingresar un vehículo',
                showConfirmButton: false,
                timer: 1500
            })
            return false;

        }
        if (productos.length == 0) {
            Swal.fire({
                type: 'error',
                title: 'Oops...',
                text: 'Debes agregar por lo menos un servicio',
                showConfirmButton: false,
                timer: 1500
            })
            return false;

        }

        var bandera = false;
        $.each(productos, function(index, value) {
            if (value['importe'] == "NaN") {
                bandera = true;

            }
        })

        if (bandera) {
            Swal.fire({
                type: 'error',
                title: 'Oops...',
                text: 'Servicio sin precio, selecciona otro.',
                showConfirmButton: false,
                timer: 1500
            })
            return false;
        }
        $.ajax({
                url: "{{ url('operaciones/recepcion/save_auto')}}",
                type: 'POST',
                dataType: 'json',
                async: false,
                data: {
                    Placas: Placas,
                    Marca: Marca,
                    SubMarca: SubMarca,
                    Color: Color,
                    Cliente: Cliente,
                    productos: productos

                },
            })
            .done(function(resp) {
                console.log(resp.recepcion)
                if (resp.result == 1) {
                    Swal.fire({
                        type: 'success',
                        title: '¡Se ha recibido con éxito!',
                        showConfirmButton: false,
                        timer: 1500
                    });
                    $('#modalAddAutos').modal('hide');
                    $('#idTicketHidden').val(resp.recepcion);
                    imprimir(resp.recepcion);
                    // $('#modalImprimir').modal('show');
                }

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

    }

    function imprimir(id = 0) {


        $.ajax({
                url: "{{ url('operaciones/recepcion/imprimir')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                }
            })
            .done(function(resp) {

                var documento = encodeURIComponent(JSON.stringify(resp.data));
                var productos = encodeURIComponent(JSON.stringify(resp.productos));
                var infovehiculo = encodeURIComponent(JSON.stringify(resp.infovehiculo));
                // window.open('my.bluetoothprint.scheme://{{url("")}}/resources/views/ticket/response.php?documento=' + documento + '&productos=' + productos + '&infovehiculo=' + infovehiculo + '&fecha=' + resp.fecha + ' &fechadocumento=' + resp.fechadocumento + '&serfol=' + resp.seriefolio + '&empresa=' + resp.empresa, '_blank');
                // window.location.href = 'my.bluetoothprint.scheme://http://192.168.100.77/GitHub/intesystemautolavado/resources/views/ticket/response.php?documento=' + documento + '&productos=' + productos + '&infovehiculo=' + infovehiculo + '&fecha=' + resp.fecha + ' &fechadocumento=' + resp.fechadocumento + '&serfol=' + resp.seriefolio + '&empresa=' + resp.empresa;
                window.location.href = 'my.bluetoothprint.scheme://{{url("")}}/ticket/response.php?documento=' + documento + '&productos=' + productos + '&infovehiculo=' + infovehiculo + '&fecha=' + resp.fecha + ' &fechadocumento=' + resp.fechadocumento + '&serfol=' + resp.seriefolio + '&empresa=' + resp.empresa;
                // window.open('my.bluetoothprint.scheme://{{url("")}}/ticket/response.php?documento=' + documento + '&productos=' + productos + '&infovehiculo=' + infovehiculo + '&fecha=' + resp.fecha + ' &fechadocumento=' + resp.fechadocumento + '&serfol=' + resp.seriefolio + '&empresa=' + resp.empresa, '_blank');
                // return false;
                // $('.contentBtnRes').hide();
                // setTimeout(function() {
                //     $('#contentBtnRegresar').show()
                // }, 1000);
                Swal.fire({
                    title: 'Imprimiendo...',
                    html: '<div class="spinner-border text-info" role="status">' +
                        '<span class="sr-only">Loading...</span>' +
                        '</div>',
                    timer: 3000,
                    showConfirmButton: false,
                }).then((result) => {
                    window.location.reload();
                })
                //window.location.href = 'http://192.168.100.111/GitHub/intesystemautolavado/response.php?documento=' +documento+ '&productos='+productos+ '&infovehiculo=' +infovehiculo+ '&fecha=' +resp.fecha;

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