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

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

    label {
        font-size: .9em;
    }

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

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

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

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



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

    #gridServicios td {
        white-space: inherit;
    }
</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 vehiculos</h4>
                            <!-- colors: "header-primary", "header-info", "header-success", "header-warning", "header-danger" -->
                            <hr>

                            <div class="card-body" style="margin-left: -40px;margin-right: -40px; margin-top: -20px">
                                <div class="row">
                                    <div class="col-4">
                                        <input type="hidden" id="idHiddenRecepcion" value="{{$data['Id']}}">
                                        <label>Ticket: {{$data['Id']}} </label>

                                    </div>
                                    <div class="col-8" align="right">
                                        <label>Registro: {{$data['fecha']}} </label>
                                    </div>
                                </div>
                                <div class="row">
                                    <label class=" font-weight-bolder">DATOS DEL VEHICULO</label>
                                    <div class="col-12">
                                        <label>{{$data['auto']->Placas}} - </label>
                                        <label>{{$data['marca']->Marca}}</label>
                                        <label>{{$data['submarca']->SubMarca}} </label>
                                    </div>
                                </div>
                                <div class="row">
                                    <label class=" font-weight-bolder">DATOS DEL CLIENTE</label>
                                    <div class="col-12">
                                        <label>Nombre: {{$data['cliente']->Nombre}} </label>
                                    </div>
                                    <div class="col-12">
                                        <label>RFC: {{$data['cliente']->RFC}} </label>
                                    </div>
                                    <div class="col-12">
                                        <label> Domicilio: {{$data['cliente']->Calle}} </label>

                                    </div>
                                </div>
                                <div class="row tablesss">
                                    <div class="col-12 mb-2 mt-2">
                                        <table class="table table-bordered table-hover" id="gridServicios" style="width: 100%;">
                                            <thead>
                                                <th class="text-white text-xxs font-weight-bolder opacity-9">Servicio</th>
                                                <th class="text-white text-xxs font-weight-bolder opacity-9">Subtotal</th>
                                                <th class="text-white text-xxs font-weight-bolder opacity-9">IVA</th>
                                                <th class="text-white text-xxs font-weight-bolder opacity-9">Importe</th>
                                            </thead>
                                            <tbody style="font-size: 10px;">

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

                                <div class="row" style="margin-right: 5px; margin-bottom: 10px;">
                                    <label align="right">IVA: $ 0.00 </label>
                                    <label align="right">Importe total: $ 0.00 </label>
                                </div>
                                <div class="row" style="margin-bottom:-40px">
                                    <div class="form-group col-6">
                                        <a type="button" class="btn btn-danger form-control" onclick="regresar();">
                                            Regresar
                                        </a>

                                    </div>
                                    <div class="form-group col-6">
                                        <button type="button" class="btn btn-primary form-control " id="addA" onclick="imprimir()">
                                            <i class="fa fa-file" aria-hidden="true"></i>
                                            Imprimir
                                        </button>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        loadGrid();

    });

    function imprimir() {
        var idRecepcion = $('#idHiddenRecepcion').val();
        //AQUI FUNCION DE IMPRIMIR
        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.href = "{{url('operaciones/recepcion')}}";
        })
    }



    function regresar() {

        Swal.fire({
            title: '¿Está seguro de regresar?',
            text: 'Se perdera toda la informacion',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#43586b',
            cancelButtonColor: '#f54337',
            confirmButtonText: '¡Sí!',
            cancelButtonText: 'No'
        }).then((result) => {
            if (result.value) {
                window.location.href = "{{url('operaciones/recepcion')}}";
            }
        })


    }

    function loadGrid() {

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

        $('#gridServicios').DataTable({
            ajax: {
                url: "{{url('operaciones/recepcion/ticket/get_info')}}",
                type: "POST",
                data: {
                    Id: $('#idHiddenRecepcion').val()
                }
            },
            columns: [{
                    data: "servicio"
                },

                {
                    data: "subtotal"
                },
                {
                    data: "IVA"
                },
                {
                    data: "precio"
                },

            ],
            order: [
                [0, "asc"]
            ]
        });

    }
</script>
@endsection