@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <a href="{{route('product.index')}}" class="btn btn-info">volver</a>
                    Recepción remisión
                </div>
                <div class="modal-body">
                    <div style="padding:20px">
                        <input type="text" name="_token" id="_token" value="{{ csrf_token() }}" hidden>
                        <div class="row">

                            <div class="col">
                                <label for="" class="col-md-6 col-form-label text-md-left">Referencia:</label>
                                <input type="text" name="reference" class="form-control"
                                    value="{{$product->No}}" readonly>
                            </div>
                            <div class="col">
                                <label for="" class="col-form-label text-md-left">Código barras - upc
                                    (opcional):</label>
                                <input type="text" name="identidad" class="form-control" value="{{$product->No}}"
                                    hidden>
                                <input type="text" name="upc" class="form-control" value="{{$product->DefaultBarcode}}"
                                    readonly>
                                <input type="text" name="brand" class="form-control"
                                    value="{{$product->Description}}" hidden>
                            </div>
                            <div v-if="type_ != 'edit' " class="col">
                                <label for="" class="col-md-6 col-form-label text-md-left">Marca:</label>
                                <input type="text" name="brand" id="brand" class="form-control"
                                    value="{{$product->Item_Family_Code}}" readonly>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col">
                                <label for="" class="col-md-6 col-form-label text-md-left">Descripción larga:</label>
                                <input type="text" name="description" class="form-control"
                                    value="{{$product->Division_Code}}" readonly>
                            </div>
                            <div class="col">
                                <label for="" class="col-md-6 col-form-label text-md-left">Descripción corta:</label>
                                <input type="text" name="name" class="form-control"
                                    value="{{$product->Description}}" readonly>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <label for="" class="col-md-6 col-form-label text-md-left">Color:</label>
                                <input type="text" name="model" class="form-control"
                                    value="{{$product->Attrib_4_Code ?? ''}}" readonly>
                            </div>
                            <div class="col">
                                <label for="" class="col-md-6 col-form-label text-md-left">Género:</label>
                                <input type="text" name="gender" class="form-control"
                                    value="{{$product->Attrib_1_Code ?? ''}}" readonly>
                            </div>
                            <div class="col">
                                <label for="" class="col-md-10 col-form-label text-md-left">Precio venta
                                    público:</label>
                                <input type="text" name="price" class="form-control"
                                    value="{{$product->Unit_Price_Including_VAT}}" readonly>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <label for="" class="col-md-6 col-form-label text-md-left">Talla:</label>
                                <input type="text" name="material" class="form-control"
                                    value="{{$product->No_2}}" readonly>
                            </div>
                            <div class="col">
                                <label for="" class="col-md-6 col-form-label text-md-left">Categoría:</label>
                                <input type="text" name="category" class="form-control"
                                    value="{{$product->Division_Code}}" readonly>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <label for="" class="col-md-6 col-form-label text-md-left">Creado:</label>
                                <input type="text" name="create" class="form-control"
                                    value="{{$product->Date_Created}}" readonly>
                            </div>
                            <div class="col">
                                <label for="" class="col-md-6 col-form-label text-md-left">Ultima modificación:</label>
                                <input type="text" name="modify" class="form-control"
                                    value="{{$product->Last_Date_Modified}}" readonly>
                            </div>
                            <div class="col">
                                <label for="" class="col-md-6 col-form-label text-md-left">Ultima modificación:</label>
                                <input type="text" name="modify" class="form-control"
                                    value="{{$product->Last_Modified_by_User}}" readonly>
                            </div>
                        </div>
                        <hr>

                        <br>
                        <div class="row">
                            <div class="col">
                                <label for="" class="col-form-label text-md-center">Impresora:</label>
                                <select class="form-control" id="selected_device"
                                    onchange=onDeviceSelected(this);></select>
                            </div>
                            <div class="col">
                                <label for="" class="col-form-label text-md-center">Columnas:</label>
                                <select class="form-control" id="columns">
                                    <option value="1">1</option>
                                    <option value="2" selected>2</option>
                                </select>
                            </div>
                            <div class="col">
                                    <label for="" class="col-form-label text-md-center">Formato:</label>
                                    <select class="form-control" id="format">
                                        <option value="A" selected>Accesorios</option>
                                        <option value="J">Joyeria</option>
                                        <option value="W">Relojeria</option>
                                    </select>
                            </div>
                            <div class="col">
                                <label for="" class="col-form-label text-md-center">Cantidad:</label>
                                <input type="number" name="cantidad" id="cantidad" class="form-control" min="1" value="1">
                            </div>
                            <div class="col">
                                <input hidden type="text" id="text_zpl" value="">
                                <button class="btn btn-success" onclick="fnImprimir()">Imprimir</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection
<script src="{{ asset('js/BrowserPrint-2.0.0.75.min.js') }}" defer></script>
    <script src="{{ asset('js/BrowserPrintFunctions.js') }}" defer></script>
    <script>
        
        function fnImprimir() {
            let cantidad = $('#cantidad').val()
            let columns = $('#columns').val()
            let format = $('#format').val()
            
            let url = "{{ route('product.zpl',['product' => $product->No , 'columns' => 'columns_varable','type' => 'type_variable' ,'quantity' => 'cantidad_variable'])}}".replace("columns_varable", columns).replace("type_variable", format).replace("cantidad_variable", cantidad);

            console.log(columns)
            console.log(format)
            console.log(url)
            fetch(url, {
                method: 'GET', // or 'PUT'
            })
          
           
                .then((response) => {
                    if (response.status >= 200 && response.status <= 300) {
                        return response.json()
                    }
                })
                .then((r) => {
                    $('#text_zpl').val(r.zpl)
                    console.log(r.zpl)
                    writeToSelectedPrinter_(null)
                    //fcChangePrice()
                })
        }

    </script>