@extends('modules.head')
@section('contenido')

<div class="content-box-form">
    <div class="box">
        <div class="box-header with-border">
            <h4 class="pull-left"><a href="/orders">Orders | POS</a></h4>
        </div>
        <!-- /.box-header -->
        <div class="content-form" id="content-form">

            <div style="display: flex;">

                <div class="col-sm-7 box-container">

                    @include('orders.pos.product_search')

                </div>

                <div class="col-sm-5 box-container customer-search-container">

                    @include('orders.pos.customer_search')

                </div>

            </div>

            <input type="hidden" id="hdn_cart_abandonment_id">

        </div>

    </div>
</div>

@include('modal_direction')

@include('orders.pos.modal_checkout')

@include('orders.pos.modal_manual_credit_card')

@include('orders.pos.modal_shipping_cost')

@include('orders.pos.modal_discard_reasons')

@include('orders.pos.modal_desired_quantities')

@include('orders.modal_global_inventory')

@include('modal_create_new_address')

@include('orders.pos.modal_popup')

@include('orders.pos.modal_preview_order')

@include('orders.pos.modal_cross_selling')

@include('orders.pos.modal_overpayment')

@include('orders.pos.modal_add_credit_card')

<link rel="stylesheet" href="{{asset('js/plugins/iCheck/all.css')}}">
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/ajax.js')}}"></script>
<script src="{{ asset('js/direction.js') }}"></script>
<script src="https://maps.googleapis.com/maps/api/js?key={{env('GOOGLE_AUTOCOMPLETE_KEY')}}&libraries=places" async defer></script>
<script src="{{ asset('js/client_google_autocomplete.js') }}"></script>
<script src="{{ asset("js/pos.js?v=$appVersion") }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/plugins/input-mask/jquery.inputmask.js')}}"></script>
<script src="{{ asset('js/plugins/input-mask/jquery.inputmask.date.extensions.js')}}"></script>
<script src="{{ asset('js/plugins/input-mask/jquery.inputmask.extensions.js')}}"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<style type="text/css">
    .asterisk_color {
        color: red;
    }

    .form-group {
        margin-bottom: 10px;
    }

    .product-search-container {
        display: flex;
        flex-wrap: wrap;
        max-height: 920px;
        overflow: auto;
    }

    .input-block {
        margin-bottom: 10px;
        display: block;
    }

    #modal-checkout>div {
        max-width: 1500px;
    }

    .modal-content {
        border-radius: 15px;
    }

    .customer-search-container {
        margin-left: 15px
    }

    .order-line {
        position: relative;
    }

    .order-line-table-container {
        max-height: 700px;
        overflow: auto;
        margin-bottom: 10px;
        border-bottom: 1px solid #dbdbdb;
    }

    .modern-scroll::-webkit-scrollbar {
        width: 10px;
    }

    .modern-scroll::-webkit-scrollbar-track {
        background-color: #d9d9d9;
        border-radius: 10px;
    }

    .modern-scroll::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #a8a8a8;
    }

    #user_id[attribute="disabled"] {
        cursor: pointer;
    }

    .small-input {
        max-width: 100px
    }

    .w-25 {
        width: 25%;
    }

    .mr-10 {
        margin-right: 10px;
    }

    .trash-line {
        position: absolute;
        right: 0;
        margin-right: 10px;
    }

    .product-search-item:hover {
        cursor: pointer;
        background-color: #F1F4F9;
        transition: 0.2s;
    }

    .product-search-item {
        padding-top: 15px;
        border-radius: 10px;
    }

    .bubble {
        position: absolute;
        top: 0;
        right: 0;
        background-color: #576379;
        padding: 4px 8px;
        border-radius: 8px;
        color: white;
    }

    .rounded {
        border-radius: 15px;
    }

    .rounded-left {
        border-radius: 15px 0 0 15px !important;
    }

    .rounded-right {
        border-radius: 0 15px 15px 0 !important;
    }

    .category-image {
        max-height: 150px;
    }

    .category-item {
        position: relative;

    }

    .category-description {
        position: absolute;
        top: 0;
        background-color: rgb(0 0 0 / 40%);
        color: #fff;
        border-radius: 10px;
        text-shadow: 1px 1px 2px black;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 90%;
        padding: 4px;
    }

    .product-name {
        font-size: 12px;
    }

    /* Delivery dates available */

    .available-deliveries {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .available-date-container {
        border: 1px solid #d2d6de;
        padding: 10px 15px;
        border-radius: 8px 8px 0px 0px;
    }

    .first-date {
        padding: 8px 5px;
        border-radius: 5px;
    }

    .checked-date{
        border: 2px solid #de980d !important;
        background-color: #f9f9ed;
    }

    .dates-label {
        margin-left: 5px;
        color: green;
    }

    .dates-input {
        transform: scale(1.5);
        margin-right: 5px !important;
    }

    .available-dates {
        padding: 8px 5px;
        border: 1px solid #d2d6de;
        border-radius: 5px;
    }
    .lastDatesInput{
        transform: scale(1.5); margin-right: 5px !important;
    }
    .small-modal{
        max-width: 500px;
    }


</style>

<script>

    // Whether is a customer or a pending account
    function getTypeOfCustomer(quote){
        if (quote.customer) return "users";
        return "pending_accounts";
    }

    @if($quote and ($quote->customer || $quote->pending_account))
        let quote = {!! json_encode( $quote ) !!};
        let user_type = getTypeOfCustomer(quote); // Whether is a customer or a pending account
        let customer_id = user_type == "users" ? quote.customer.id : quote.pending_account.id;
        let ship_to = quote.ship_to;
        let shipping_type_id = quote.bo_shipping_type_id;
        let shipping_cost = quote.shipping_cost;
        let subtotal = quote.subtotal;
        let quoteId = quote.id;

        setCustomerDataById(user_type, customer_id);
        selectDirections(ship_to, shipping_type_id);
        selectShippingType(shipping_type_id);
        setShippingCost(shipping_cost);
        setSubtotal(subtotal);
        setQuoteId(quoteId);

        setTimeout(()=>{
            $('#shippingType').trigger('change');
            $(quote.quote_products).each((index, quote_product) => {
                const data = {
                    product_id: quote_product.product_id,
                    document: user_type == "users" ? quote.customer.document : `L${quote.pending_account.id}`,
                    user_id: customer_id,
                    branch_id: quote.branch_id,
                    qty: quote_product.quantity,
                    force_add: 1,
                    discount_percentage: quote_product.discount_percentage,
                    volume_discount_qty: quote_product.volume_discount_qty
                }
                requestAddOrderLine(data, () => {
                    $('.discount').trigger('change');
                });
            }, 1000);
        })
    @endif

    @if($cart_abandonment)
        let cart_abandonment = {!! json_encode($cart_abandonment) !!};

        setBranchId(cart_abandonment.branch_id);
        setCustomerDataByDocument(cart_abandonment.eko_document);
        setCartAbandonmentId(cart_abandonment.id);

        setTimeout(()=>{
            $('#shippingType').trigger('change');
            $(cart_abandonment.cart_contents.products).each((index, cart_abandonment_product) => {
                const data = {
                    sku: cart_abandonment_product.sku,
                    document: cart_abandonment.eko_document,
                    branch_id: $('#sucursal').val(),
                    qty: cart_abandonment_product.quantity,
                    force_add: 1,
                }
                requestAddOrderLine(data, () => {
                    $('.qty').trigger('change');
                });
            }, 1000);
        })

    @endif


</script>

@endsection