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

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

    .dataTables_filter {
        font-size: 15px;

    }

    .dataTables_paginate {
        font-size: 14px;

    }

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

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


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

    #gridRecepcion td {
        white-space: inherit;
    }

    .dataTables_scrollHeadInner {
        width: 100% !important;
    }

    .dataTables_scrollHeadInner table {
        width: 100% !important;
    }

    input,
    label {
        font-weight: 600 !important;
        font-size: 1.2rem !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 text-center ">Recepción de vehículos</h4>
                            <hr>
                            <!-- <button class="btn btn-primary" onclick="enviarMensaje()">Enviar mensaje</button> -->
                            <div class="card-body " style="margin-top: -25px">
                                <div class="tab-content tab-space">
                                    <div class="tab-pane active" id="home" aria-expanded="true" style="margin-left: -25px; margin-right: -25px">
                                        <div class="col-12">
                                            <a class="form-control btn btn-lg btn-primary" type="button" href="{{url('/operaciones/recepcion/alta')}}">
                                                Recibir nuevo vehículo
                                            </a>
                                        </div>
                                        <hr>
                                        <!-- <div class="row mb-4">
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label>Sub-marca</label>
                                                    <select class="form-control select2" id="submarca" style="width: 100%">
                                                        <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-4">
                                                <div class="form-group">
                                                    <label>Color</label>
                                                    <select class="form-control select2" id="color" style="width: 100%">
                                                        <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-4">
                                                <button class="btn btn-primary mt-4 btn-sm" type="button" onclick="loadGrid()">
                                                    <i class="fa fa-search" aria-hidden="true"></i>
                                                    Buscar
                                                </button>
                                            </div>
                                        </div> -->
                                        <div class="row " style="margin-left: -30px; margin-right: -25px;">
                                            <table class="table table-bordered table-hover table-striped" id="gridRecepcion" style="width: 100%;">
                                                <thead>
                                                    <th class="text-white font-weight-bold opacity-9 ">Placas</th>
                                                    <th class="text-white font-weight-bold opacity-9 ">Sub-Marca</th>
                                                    <th class="text-white font-weight-bold opacity-9 ">Color</th>
                                                    <th class="text-white font-weight-bold opacity-9 ">Recepción</th>
                                                    <th class="text-white font-weight-bold opacity-9 ">Monto</th>
                                                    <th class="text-white font-weight-bold opacity-9 ">Fecha</th>
                                                    <th class="text-white font-weight-bold opacity-9 ">Acciones</th>
                                                </thead>
                                                <tbody style="font-size: 16px; font-weight: 600;">

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

<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>
<a href="" id="send_whastapp" target="_blank"></a>
<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $('.select2').select2()
        $(".datepicker").flatpickr({});
        $(".dataTables_filter").addClass("text-end");
        loadGrid();
    });

    function loadGrid() {

        //$('#').DataTable();
        $('#gridRecepcion').dataTable().fnDestroy();
        $('#gridRecepcion td').css('white-space', 'initial');
        var t = $('#gridRecepcion').DataTable({
            lengthMenu: [10, 15, 20, 50, 100],
            processing: true,
            responsive: true,
            dom: 'Bfrtip',
            scrollY: '50vh',
            scrollCollapse: true,
            ajax: {
                url: "{{url('operaciones/recepcion/get_recepcion')}}",
                type: "POST",
                data: {
                    color: 0,
                    submarca: 0,
                }
            },
            columns: [{
                    data: "Placas"
                },
                {
                    data: "SubMarca"
                },
                {
                    data: "Color"
                },
                {
                    data: "recepcion"
                },
                {
                    data: "total"
                },
                {
                    data: "fecha_creacion"
                },
                {
                    data: "acciones"
                },

            ],
            order: [
                [4, "desc"]
            ],
            buttons: [{
                text: '<i class="fa fa-print"></i>',
                titleAttr: 'Imprimir último ticket',
                action: function() {
                    imprimir();
                }
            }]
        });

        $(".dataTables_filter").addClass("text-end");

    }

    function enviarMensaje(empresa_numero, phone_number, Id, marca, placas) {


        if (phone_number == '') {
            Swal.fire({
                type: 'error',
                title: 'Error',
                text: 'El cliente no cuenta con un numero de telefono registrado.',
                showConfirmButton: false,
                timer: 3000
            });
            return false;
        }
        const send_whastapp = document.getElementById("send_whastapp");
        $('#send_whastapp').attr('href', "https://wa.me/52" + phone_number + "/?text= Estimado cliente, su coche " + marca + " con placas " + placas + ", se encuentra listo.")
        send_whastapp.click()
        $.ajax({
                url: "{{ url('operaciones/recepcion/notificar')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    Id: Id,
                }
            })
            .done(function(resp) {
                console.log(resp);
                Swal.fire({
                    type: 'success',
                    title: 'Enviado',
                    text: resp.mensaje,
                    showConfirmButton: false,
                    timer: 3000
                });
                setTimeout(() => {
                    $('#gridRecepcion').DataTable().ajax.reload();
                }, 2000);
            })
            .fail(function() {
                console.log("error");
                Swal.fire({
                    type: 'error',
                    title: 'Oops...',
                    text: 'Ha sucedido un error',
                    showConfirmButton: false,
                    timer: 3000
                })
            })
            .always(function() {});
    }

    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.location.href = 'my.bluetoothprint.scheme://https://www.intesystem.live/test/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');


                // $('.contentBtnRes').hide('slow');
                // setTimeout(function() {
                //     $('#contentBtnRegresar').show('slow')
                // }, 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) => {
                    $('#gridRecepcion').DataTable().ajax.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");
            });
    }

    function cancelarRecepcion(Id) {
        $.ajax({
                url: "{{ url('operaciones/recepcion/cancelar-recepcion')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    Id: Id,
                }
            })
            .done(function(resp) {
                console.log(resp);
                if (resp.result == 1) {
                    Swal.fire({
                        type: 'success',
                        title: 'Cancelada',
                        text: resp.mensaje,
                        showConfirmButton: false,
                        timer: 3000
                    });
                } else {
                    Swal.fire({
                        type: 'error',
                        title: 'Error',
                        text: resp.mensaje,
                        showConfirmButton: false,
                        timer: 3000
                    });
                }
                setTimeout(() => {
                    $('#gridRecepcion').DataTable().ajax.reload();
                }, 2000);
            })
            .fail(function() {
                console.log("error");
                Swal.fire({
                    type: 'error',
                    title: 'Oops...',
                    text: 'Ha sucedido un error',
                    showConfirmButton: false,
                    timer: 3000
                })
            })
            .always(function() {});
    }
</script>
@endsection