@extends('layouts/detachedLayoutMaster')

@section('title', 'Shop')

@section('vendor-style')
<!-- Vendor css files -->
<link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/spinner/jquery.bootstrap-touchspin.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/swiper.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/nouislider.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/toastr.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/sweetalert2.min.css')) }}">
<!--<link rel="stylesheet" type="text/css" href="css/base/plugins/extensions/ext-component-sweet-alerts.css">-->
<!--<link rel="stylesheet" href="{{ asset(mix('vendors/css/editors/quill/katex.min.css'), true) }}">-->
<link rel="stylesheet" href="{{ asset(mix('vendors/css/editors/quill/monokai-sublime.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/editors/quill/quill.snow.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/wizard/bs-stepper.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-validation.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-wizard.css')) }}">


<link rel="stylesheet" href="{{ asset(mix('vendors/css/file-uploaders/dropzone.min.css')) }}">



@endsection
@section('page-style')
<!-- Page css files -->
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-sliders.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('css/base/pages/app-pos.css'),true) }}">
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-toastr.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('css/base/pages/app-ecommerce-details.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-number-input.css')) }}">

<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/pickers/form-pickadate.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-validation.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-wizard.css')) }}">

<link rel="stylesheet" href="{{ asset(mix('css/base/pages/app-ecommerce.css')) }}">
@endsection

@section('content')

<div class="row">
    <!-- left lista de precios y categorias-->
    <div class="col-md-2" >
        <span id="pos_listaPrecios_select">
        <select class="select2 select2-label form-select form-control" id="ecommerce-lista-precios">
        </select>
        </span>
        <section id="pdvCategoriasList" class="grid-view" style="margin-top:5px!important;grid-template-columns: repeat(1, 100%);column-gap:5px!important;">
        </section>
        <input type="hidden" id="posControlLoad" name="posControlLoad" value='pos'>
        <input type="hidden" id="pos_id_pedido" name="pos_id_pedido" value="{{$pageConfigs['id_pedido']}}">
    </div>
    <!--Center productos-->
    <div class="col-md-6">
        <!-- E-commerce Search Bar Starts -->
        <section id="pos-searchbar" class="pos-searchbar" aurocomple="off">
            <div class="row">
                <div class="col-sm-12">
                    <div class="input-group input-group-merge" aurocomple="off">
                        <form autocomplete="off" style="width: 100%;" id="posformBuscador">
                        <input type="text" class="form-control" id="shop-search" name="shop-search" placeholder="apreta * y podes ingresar el código del producto" style="color: white;" autocomplete="nope" /><!-- id="shop-search" name="shop-search"-->
                        </form>
                    </div>
                </div>
            </div>
        </section>

        <!-- E-commerce Products Starts -->
        <section id="ecommerce-products" class="grid-view">
        </section>
    </div>
    <!-- right checkout-->
    <div class="col-md-4">
        <div class="pos-bottom-fix-mobile" style="display:none">
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
        </div>
        {{-- <div class="row not-display-in-phone">
            <div class="col-md-6">
                <form action="/app/email">
                    <button type="submit" class="btn btn-info form-control waves-effect waves-float waves-light" id="posShopGoPedidos" data-bs-toggle="tooltip" title="tecla rápida: Ctrl">Ir a Pedidos [Ctrl]</button>
                </form>
            </div>
            <div class="col-md-6">
                <button type="button" id="appEcommerceShopCancelar" class="btn btn-success btn-next place-order form-control" onclick="showMesas()">Mesas</button>
            </div>
        </div> --}}


        <div class="checkout-options btn-primary div-fixed-bottom">
            <div class="card">
                <div class="card-body">
                    <div class="price-details">
                        <span id="totalesGeneralesCarrito" class="">
                    <div class="row">
                        <div class="col-3">
                            <h5 class="price-title pos_price_title" id="pos-title-detail">Sub-Total</h4>
                        </div>
                        <div class="col-2">
                            <h5 class="price-title pos_price_title" id="pos-title-detail">Desc</h4>
                        </div>
                        <div class="col-3">
                            <h5 class="price-title pos_price_title" id="pos-title-detail">Desc.</h4>
                        </div>
                        <div class="col-4">
                            <h1 class="price-title pos_price_title" id="pos-title-detail">Total</h1>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-3">
                            <h5 class="price-title pos_price_title" id="pos-title-detail">$<span id="subtotalGeneral">0</span></h4>
                        </div>
                        <div class="col-2">
                            <h5 class="price-title pos_price_title" id="pos-title-detail">%<span id="DescuentoGeneralPorc">0</span></h4>
                        </div>
                        <div class="col-3">
                            <h5 class="price-title pos_price_title" id="pos-title-detail">$<span id="DescuentoGeneralValor">0</span></h4>
                        </div>
                        <div class="col-4">
                            <h1 class="price-title pos_price_title" id="pos-title-detail">$<span id="totalGeneral">0</span></h1>
                        </div>
                    </div>





                        </span>

                        <ul class="list-unstyled noscrollbar" id="productsListDetail" style="overflow:hidden; overflow-y:auto;">
                        </ul>

                        <ul class="list-unstyled posShopTotales" id="posShopTotales">
                            <li class="price-detail display-none">
                                <div class="detail-amt fw-bolder">Venta Actual</div>
                                <div class="detail-amt fw-bolder">$<span id="totalDetalle">0</span></div>
                            </li>
                            <li class="price-detail display-none">
                                <div class="detail-amt fw-bolder">Descuento</div>
                                <div class="detail-amt fw-bolder">$<span id="totalDetalle">0</span></div>
                            </li>
                            <li class="price-detail display-none">
                                <div class="detail-amt fw-bolder" style="color:orange;">Saldo Pendiente</div>
                                <!-- El pendiente se carga una sola vez desde los datos del cliente-->
                                <div class="detail-amt fw-bolder" style="color:orange;">$<span id="totalPendiente">0</span></div>
                            </li>
                            <li class="price-detail display-none">
                                <div class="detail-amt ">Cantidad de producto/s <span id="cantidadProductos">0</span></div>
                            </li>
                            <li class="price-detail display-none" id="posShopMesaSeleccionadaLi">
                                <span class="detail-title checkoutListPrdTotal ">Mesa seleccionada:</span>
                                <div class="detail-title checkoutListPrdTotal "><span id="posShopMesaSeleccionada"></span></div>
                            </li>
                            <li class="price-detail display-only-phone">
                                <span class="detail-title checkoutListPrdTotal ">Total</span>
                                <div class="detail-title checkoutListPrdTotal ">$<span id="totalGeneralMobile">0</span></div>
                            </li>
                            <li class="not-display-in-phone ">
                                <div class="row margin-bottom-4">
                                    <div class="col-lg-4 col-md-6">
                                        <button type="button" id="btnAppEcommerceShopCheckout" class="btn_ventas_ctrl btnDedo btnAppEcommerceShopCheckoutEfectivo btn btn-success btn-next place-order form-control text-center no-padding-left no-padding-right" onclick="disableBoton('','btn_ventas_ctrl');setTipoVta('completa');showCheckout()" data-bs-toggle="tooltip" title="tecla rápida: enter" {{isset($pageConfigs['config']['empresaConfig']['cargarPedido_btn_pos'])?$pageConfigs['config']['empresaConfig']['cargarPedido_btn_pos']:''}}>Nuevo Pedido </button>
                                        <button type="button" id="btnAppEcommerceShopCheckout" class="btn_ventas_ctrl btnDedo btnAppEcommerceShopCheckoutEfectivo btn btn-success btn-next place-order form-control text-center no-padding-left no-padding-right" onclick="disableBoton('','btn_ventas_ctrl');setTipoVta('venta');showCheckout()" data-bs-toggle="tooltip" title="tecla rápida: enter" {{isset($pageConfigs['config']['empresaConfig']['cargarVenta_btn_pos'])?$pageConfigs['config']['empresaConfig']['cargarVenta_btn_pos']:''}}>Nueva Venta </button>
                                    </div>
                                    <div class="col-lg-4 col-md-6">
                                        <button type="button" id="btnAppEcommerceShopCheckout" class="btn_ventas_ctrl btnDedo btnAppEcommerceShopCheckoutEfectivo btn btn-warning btn-next place-order form-control text-center no-padding-left no-padding-right" onclick="disableBoton('','btn_ventas_ctrl');setTipoVta('rapida');showCheckout()" data-bs-toggle="tooltip" title="tecla rápida: enter" {{isset($pageConfigs['config']['empresaConfig']['PedidosVentaRapida_btn_pos'])?$pageConfigs['config']['empresaConfig']['PedidosVentaRapida_btn_pos']:''}}>Venta rápida </button>
                                        <button type="button" id="btnAppEcommerceShopCheckout" class="btn_ventas_ctrl btnDedo btnAppEcommerceShopCheckoutEfectivo btn btn-warning btn-next place-order form-control text-center no-padding-left no-padding-right" onclick="disableBoton('','btn_ventas_ctrl');setTipoVta('ventarapida');showCheckout()" data-bs-toggle="tooltip" title="tecla rápida: enter" {{isset($pageConfigs['config']['empresaConfig']['ventaRapida_btn_pos'])?$pageConfigs['config']['empresaConfig']['ventaRapida_btn_pos']:''}}>Venta rápida </button>
                                    </div>
                                    <div class="col-lg-4 col-md-6">
                                        <button type="button" id="appEcommerceShopCancelar" class="btn_ventas_ctrl btn btnDedo btn-danger btn-next place-order form-control" onclick="cancelarCompra()">Cancelar </button>
                                    </div>

                                {{-- </div>
                                <div class="row margin-bottom-4"> --}}
                                    {{-- <div class="col-md-6 not-display-in-phone">
                                        <button type="button" id="appEcommerceShopCancelar" class="btnAppEcommerceShopCheckoutDelivery btn btn-outline-success btn-next place-order form-control" onclick="setTipoVta('delivery');showCheckout()" title="tecla rápida: / ">Delivery [/]</button>
                                    </div> --}}
                                    <div class="col-lg-4 col-md-6 not-display-in-phone">
                                        <form action="/app/email">
                                            <button type="submit" class="btn_ventas_ctrl btn btnDedo btn-info form-control waves-effect waves-float waves-light" id="posShopGoPedidos" data-bs-toggle="tooltip" title="tecla rápida: Ctrl" {{isset($pageConfigs['config']['empresaConfig']['verPedidos_btn_pos'])?$pageConfigs['config']['empresaConfig']['verPedidos_btn_pos']:''}}>Ver Pedidos </button>
                                            <button type="submit" class="btn_ventas_ctrl btn btnDedo btn-info form-control waves-effect waves-float waves-light" id="posShopGoPedidos" data-bs-toggle="tooltip" title="tecla rápida: Ctrl" {{isset($pageConfigs['config']['empresaConfig']['verVenta_btn_pos'])?$pageConfigs['config']['empresaConfig']['verVenta_btn_pos']:''}}>Ver Ventas </button>

                                        </form>
                                    </div>
                                    <div class="col-lg-4 col-md-6 not-display-in-phone">
                                        <button type="button" id="appEcommerceShopCancelar" class="btn_ventas_ctrl btnDedo btnAppEcommerceShopCheckoutMesas btn btn-outline-warning btn-next place-order form-control" onclick="showMesas()" title="Tecka rápida: -" {{isset($pageConfigs['config']['empresaConfig']['mesas_btn_pos'])?$pageConfigs['config']['empresaConfig']['mesas_btn_pos']:''}}>Mesas </button>
                                    </div>
                                    <div class="col-lg-4 col-md-6">
                                        <button type="button" id="btnAppEcommerceShopCajaCerrar" class="btn_ventas_ctrl btnDedo btnAppEcommerceShopCajaCerrar btn btn-outline-danger btn-next place-order form-control text-center no-padding-left no-padding-right waves-effect" onclick="cajas_check_pedidos_pendientes_pago()"  data-bs-toggle="tooltip" title="" data-bs-original-title="tecla rápida: +">Cerrar Caja</button>
                                    </div>
                                </div>

                            {{-- <div class="row ">
                                <div class="col-md-6 not-display-in-phone">
                                    <form action="/app/email">
                                        <button type="submit" class="btn btn-info form-control waves-effect waves-float waves-light" id="posShopGoPedidos" data-bs-toggle="tooltip" title="tecla rápida: Ctrl">Pedidos[Ctrl]</button>
                                    </form>
                                </div>
                                <div class="col-6">
                                    <button type="button" id="appEcommerceShopCancelar" class="btn btn-danger btn-next place-order form-control" onclick="cancelarCompra()">Cancelar [esc]</button>
                                </div>
                            </div> --}}
                            </li>
                        </ul>




                        <div class="row display-only-phone">
                            <div class="col-4">
                                <button type="button" id="appEcommerceShopCancelar" class="btnDedo btn btn-danger btn-next place-order form-control" onclick="cancelarCompra()">X</button>
                            </div>
                            <div class="col-8">
                                <button type="button" id="appEcommerceShopCancelar" class="btnDedo btn btn-success btn-next place-order form-control" onclick="showMesas()">Mesas</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Checkout Place Order Right ends -->
        </div>
    </div>
</div>
</div>


@endsection

@section('vendor-script')

@include('content/apps/ecommerce/modals/modal-mensaje')
@include('content/apps/ecommerce/modals/modal-eliminar-producto')
@include('content/apps/ecommerce/modals/modal-eliminar-producto-checkout')
@include('content/apps/ecommerce/modals/modal-cancelar-compra')
@include('content/apps/ecommerce/modals/modal-checkout-pUno')
@include('content/apps/ecommerce/modals/modal-checkout-pUno0')
@include('content/apps/ecommerce/modals/modal-checkout-pUno1')
@include('content/apps/ecommerce/modals/modal-checkout-pUno2')
@include('content/apps/ecommerce/modals/modal-checkout-pUno3')
@include('content/apps/ecommerce/modals/modal-checkout-pUno4')
@include('content/apps/ecommerce/modals/modal-checkout-pUno5')
@include('content/apps/ecommerce/modals/modal-checkout-pUno6')

@include('content/apps/ecommerce/modals/modal-checkout-pUno8')
@include('content/apps/ecommerce/modals/modal-checkout-pUno9')
@include('clientes/modals/modal-add-new-clientes')

@include('content/apps/pos/modals/checkout-wizard')

@include('content/apps/pos/modals/modal-mesas')
@include('content/apps/ecommerce/modals/modal-checkout')

@include('content/apps/pos/modals/modal-pos-descuento')
@include('content/apps/pos/modals/modal-pos-password')
@include('content/apps/pos/modals/modal-test')
@include('content/apps/cajas/app-cajas-abrirCajas')
@include('productos/modals/modal-edit-productos')




<!-- Vendor js files -->
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.bootstrap5.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/responsive.bootstrap5.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/extensions/sweetalert2.all.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/extensions/wNumb.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/extensions/nouislider.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/extensions/toastr.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/extensions/swiper.min.js')) }}"></script>
<script src="{{ asset(mix('/vendors/js/extensions/jquery-ui.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/editors/quill/highlight.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/editors/quill/quill.min.js')) }}"></script>
<script src="{{ asset(mix('/vendors/js/interactjs/dist/interact.min.js')) }}"></script>
<script src="https://sdk.mercadopago.com/js/v2"></script>

<!-- Modal
    wonder\node_modules\interactjs\dist/interact.min
    checkout -->
<script src="{{ asset(mix('vendors/js/forms/wizard/bs-stepper.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/spinner/jquery.bootstrap-touchspin.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/validation/jquery.validate.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/keyboardjs/dist/keyboard.min.js')) }}"></script>
<script src="{{ asset(mix('js/scripts/forms/form-wizard.js'), true) }}"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="{{ asset(mix('vendors/js/file-uploaders/dropzone.min.js')) }}"></script>


@endsection
@section('page-script')
<!-- Page js files -->
<script src="{{ asset(mix('js/scripts/fundamentales.js')) }}"></script>
<script src="{{ asset(mix('js/scripts/empresas/empresasList.js'), true) }}"></script>
<script src="{{ asset(mix('js/scripts/pages/app-pos.js'),true) }}"></script>
<script src="{{ asset(mix('js/scripts/forms/form-number-input.js')) }}"></script>
<script src="{{ asset(mix('js/scripts/pages/modal-mesas.js'),true ) }}"></script>
<script src="{{ asset(mix('js/scripts/pages/app-cajas-function.js'),true ) }}"></script>
<script src="{{ asset(mix('js/scripts/pages/app_afip.js'),true ) }}"></script>
<script src="{{ asset(mix('js/scripts/forms/form-file-uploader.js')) }}"></script>
<script src="{{ asset(mix('js/scripts/productos/productos.js'), true) }}"></script>

@endsection