@extends('layouts/detachedLayoutMaster')

@section('title', 'Wonder - punto de venta')

@section('vendor-style')
<!-- Vendor css files -->
<link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/nouislider.min.css'), true) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/toastr.min.css'), true) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/sweetalert2.min.css'), true) }}">
<!--<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'), true) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/editors/quill/quill.snow.css'), true) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css'), true) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css'), true) }}">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<!--modal-->
<!-- Vendor css files -->
<link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/wizard/bs-stepper.min.css'), true) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/spinner/jquery.bootstrap-touchspin.css'), true) }}">
@endsection

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

<!-- List + Checkout detail style-->
<style>
    .flex-container {
        display: flex;
        margin-left: calc(-100px + 2rem);
    }

    .flex-container-categorias {
        display: flex;
        margin-left: calc(-28px + 2rem);
        min-height: 100% !important;
    }

    .flex-container-sub-categorias {
        display: flex;
        margin-left: calc(-28px + 2rem);
        min-height: 100% !important;
    }

    .flex-child {
        flex: 1;
        width: 100px;
    }

    .flex-child-categorias {
        flex: 1;
        width: 50%;
    }

    .flex-child-sub-categorias {
        flex: 1;
        width: 50%;
    }

    .flex-child:first-child {
        margin-right: 10px;
    }

    .flex-child-categorias:first-child {
        width: 50%;
    }

    .flex-child-sub-categorias:first-child {
        width: 50%;
    }

    .custom-card {
        margin-bottom: 5px !important;
        height: 140px;
        width: 120px;
    }

    .detail-title-custom {
        font-size: 11px;
        padding-bottom: 2px;
        color: white;
        line-height: normal
    }

    .sub-detail-title-custom {
        font-size: 10px;
        margin-top: -7px;
        margin-bottom: 4px;
    }

    .price-detail-custom {
        margin-bottom: 0px !important;
    }

    .remove-item {
        padding-left: 5px;
        color: #a84832;
        font-weight: bolder;
        cursor: pointer;
    }

    .fixed {
        position: fixed;
        top: 68px;
        right: 10px;
        bottom: 10px;
        width: 300px;
    }

    .fixed-header {
        position: fixed;
        top: 69px;
        left: 103px;
        bottom: 10px;
        width: 70%;
        height: 55px;
        z-index: 1;
        /*background-color: #171f30;*/
    }

    .fixed-pre-header {
        position: fixed;
        top: 50px;
        left: 323px;
        bottom: 10px;
        width: 657px;
        height: 60px;
        z-index: 1;
        /*background-color: #171f30;*/
    }

    .fixed-categories {
        position: fixed;
        top: 129px;
        left: 100px;
        bottom: 10px;
        min-height: 85%;
    }

    .noscrollbar::-webkit-scrollbar {
        width: 0;
        background: transparent;
    }

    .form-check label {
        font-size: 10px;
    }

    .categories-list {
        height: 200px !important
    }

    .card-categoria {
        text-align: center;
        padding: 14px 0;
        cursor: hand;
        padding-top: 2px;
        padding-bottom: 2px;
        font-size: 10px;
        opacity: 1;
        background-color: var(--bs-primary);
        margin: 2px;
        border-radius: 5px;
        height: 50px;
    }

    .card-categoria:hover {
        font-weight: bold !important;
        opacity: 0.9;
    }

    .text-categoria {
        font-weight: normal !important;
        text-transform: capitalize !important;
        color: white !important;
    }

    /*modal*/
    .flex-container-modal {
        display: flex;
        margin-left: calc(-30px + 2rem);
        width: 100%;
    }

    .flex-child-modal {
        flex: 1;
        width: 100px;
    }

    .flex-child-modal:first-child {
        margin-right: 0px;
    }

    .fixed-modal {
        position: fixed;
        top: 85px;
        right: 10px;
        bottom: 10px;
        width: 23%;
    }
</style>

<!-- Estilos Modal Checkout-->
<style>
    .flex-container-checkout {
        display: flex;
        /*margin-left: calc(-30px + 2rem);*/
    }

    .flex-child-checkout {
        flex: 1;
        /*width: 100px;*/
    }

    .flex-child-checkout:first-child {
        /*margin-right: 10px;*/
    }

    .fixed-checkout {
        position: fixed;
        top: 10px;
        right: 10px;
        bottom: 10px;
        width: 23%;
    }

    .card-categoria2 {
        margin: 2px !important;
        height: 50px;
        /* width: 100px;*/
    }

    .checkout-options {
        margin-top: 10px;
    }
</style>

<!--@section('content-sidebar')
@include('content/apps/ecommerce/app-ecommerce-sidebar')
@endsection-->

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="row">
    <div class="col-2">
        <!--<label for="ecommerce-lista-precios">Lista de precios</label>-->
        <select class="select2 select2-label form-select form-control" id="ecommerce-lista-precios">
        </select>
        <section id="pdvCategoriasList" class="grid-view" style="margin-top:5px!important;grid-template-columns: repeat(1, 100%);max-width: 200px!important;column-gap:5px!important;">
        </section>
    </div>
    <div class="col-6">
        <!--<label for="shop-search">Productos</label>-->
        <div class="input-group input-group-merge">
            <input type="text" class="form-control" id="shop-search" placeholder="Buscar productos" style="color: white;" />
            <!-- <span class="input-group-text"><i data-feather="search" class="text-muted"></i></span>-->
        </div>
        <section id="ecommerce-products" class="grid-view" style="grid-template-columns: repeat(auto-fill, 124px); grid-column-gap: 0px;
                                grid-row-gap: 0px; margin-top: 10px !important;">
        </section>
    </div>
    <div class="col-4">
        <!--<label for="shop-search">Pedidos</label>-->
        <!--<input type="button" value="aaaaaaaaaaa" onclick=" showModal('modalInvoiceDemo');">-->
        <form action="/app/email">
            <button type="submit" class="btn btn-info form-control waves-effect waves-float waves-light">Ir a Pedidos</button>
        </form>

        <div class="" style="z-index: 2">
            <!-- flex-child fixed -->
            <div class="checkout-options">
                <div class="card">
                    <div class="card-body">
                        <div class="price-details">
                            <h6 class="price-title">Detalle</h6>
                            <ul class="list-unstyled noscrollbar" id="productsListDetail" style="overflow:hidden; overflow-y:scroll;">
                            </ul>

                            <ul class="list-unstyled">
                                <li class="price-detail">
                                    <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">
                                    <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">
                                    <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">
                                    <div class="detail-amt ">Cantidad de producto/s <span id="cantidadProductos">0</span></div>
                                </li>
                                <li class="price-detail">
                                    <span class="detail-title checkoutListPrdTotal ">Total</span>
                                    <div class="detail-title checkoutListPrdTotal ">$<span id="totalGeneral">0</span></div>
                                </li>
                            </ul>

                            <div class="row">
                                <div class="col-md-3">
                                    <button type="button" id="btnAppEcommerceShopCheckout" class="btn btn-success btn-next place-order" style="width: 180px; margin-right: 10px;" onclick="showCheckout()">check</button>
                                </div>
                                <div class="col-md-3">
                                    <button type="button" id="btnAppEcommerceShopCheckout" class="btn btn-success btn-next place-order" style="width: 180px; margin-right: 10px;" onclick="showCheckout()">check</button>
                                </div>
                                <div class="col-md-3">
                                    <button type="button" id="btnAppEcommerceShopCheckout" class="btn btn-success btn-next place-order" style="width: 180px; margin-right: 10px;" onclick="showCheckout()">check</button>
                                </div>
                                <div class="col-md-3">
                                    <button type="button" id="appEcommerceShopCancelar" class="btn btn-danger btn-next place-order form-control" onclick="cancelarCompra()">Cancelar</button>
                                </div>
                            </div>

                            <!-- <button type="button" id="btnAppEcommerceShopCheckout" class="btn btn-success btn-next place-order" style="width: 180px; margin-right: 10px;" onclick="showProxModalProceso('puntoVenta','nuevoPedido')">Continuar</button> -->


                            checkout

                        </div>
                    </div>
                </div>
                <!-- Checkout Place Order Right ends -->
            </div>
        </div>
    </div>
</div>



@endsection

</div>
@section('vendor-script')

@include('content/apps/ecommerce/modals/modal-add-product')
@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-pUno7')
@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/ecommerce/modals/checkout-wizard')

<!---- invoices-------->
@include('content/apps/invoice/modal-invoice-demo')
@include('content/apps/invoice/app-pedidos-print')
@include('content/apps/invoice/app-invoice-print-comandas')

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



<!-- Vendor js files -->
<script src="{{ asset(mix('vendors/js/tables/datatable/jquery.dataTables.min.js'), true) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.bootstrap5.min.js'), true) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.responsive.min.js'), true) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/responsive.bootstrap5.js'), true) }}"></script>
<script src="{{ asset(mix('vendors/js/extensions/sweetalert2.all.min.js'), true) }}"></script>
<script src="{{ asset(mix('vendors/js/extensions/wNumb.min.js'), true) }}"></script>
<script src="{{ asset(mix('vendors/js/extensions/nouislider.min.js'), true) }}"></script>
<script src="{{ asset(mix('vendors/js/extensions/toastr.min.js'), true) }}"></script>
<script src="{{ asset(mix('/vendors/js/extensions/jquery-ui.min.js'), true) }}"></script>
<script src="{{ asset(mix('vendors/js/editors/quill/highlight.min.js'), true) }}"></script>
<script src="{{ asset(mix('vendors/js/editors/quill/quill.min.js'), true) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js'), true) }}"></script>
<!-- Modal checkout -->
<script src="{{ asset(mix('vendors/js/forms/wizard/bs-stepper.min.js'), true) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/spinner/jquery.bootstrap-touchspin.js'), true) }}"></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>
@endsection

@section('page-script')
<!-- Page js files -->
<script src="{{ asset(mix('js/scripts/empresas/empresasList.js'), true) }}"></script>
<script src="{{ asset(mix('js/scripts/pages/app-ecommerce.js'), true) }}"></script>
<script src="{{ asset(mix('js/scripts/ecommerce/ecommerceShop.js'), true) }}"></script>
<script src="{{ asset(mix('js/scripts/forms/form-wizard.js'), true) }}"></script>

<!--Funcionalidad ecommerce -->
<!--<script src="{{ asset(mix('js/scripts/pages/app-ecommerce-checkout.js'), true) }}"></script>-->
<!-- Checkout modal-->
<!--<script src="{{ asset(mix('js/scripts/pages/app-email.js'), true) }}"></script>-->
@endsection