@extends('firm._layouts.standard')

@section('_content')

    {!! Form::open(['id' => 'order-form', 'url' => route('firm.orders.store'), 'class' => 'order-creation']) !!}
    <div class="slick">

        {{------------------------------------------------------------------------------------------------------------------ slide 1: destination --}}
        <div class="destination">
            <div class="events-header">
                @transUc('firm.orders.table_selection')
            </div>
            <div id="contentContainer" class="scroll">

                <div class="pt-2 pr-2 pl-2">
                    <div class="btn-group btn-group-lg float-right ml-2 tab-headers" role="group">
                        <a data-target="table" class="btn btn-outline-dark tab-header active">@transUc('generic.table')</a>
                        <a data-target="address" class="btn btn-outline-dark tab-header">@transUc('.delivery')</a>
                        <a data-target="quick_order" class="btn btn-outline-dark tab-header">@transUc('.quick_sale')</a>
                    </div>

                    <div class="bfc">
                        <div class="input-group input-group-lg">
                            <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
                            <div class="input-group-append">
                                <button class="btn btn-default" type="button" id="button-addon2"><i class="fa fa-search"></i></button>
                            </div>
                        </div>
                    </div>

                    <div class="no-overflow">
                        <hr>
                    </div>
                </div>
                {{--------------------------------------------------------------------------------------------------------- destination 1: tables --}}
                <main id="table" class="orders-tabcontent w100">
                    @foreach($tables as $table)
                        <div class="tableButton table {{ $table->sale ? 'occupied' : '' }}" data-id="{{ $table->id }}">
                            <div class="numberDiv">
                                <label class="priceLabel">{{ $table->name }}</label>
                            </div>
                            <div class="priceDiv">
                                <label class="priceLabel">
                                    @if($table->total_price != '0.00')
                                        @currencySymbol {{ $table->total_price }}
                                    @endif
                                </label>
                            </div>
                        </div>
                    @endforeach
                </main>

                {{-------------------------------------------------------------------------------------------------------- destination 2: address --}}
                <main id="address" class="orders-tabcontent">
                    <div class="row no-gutters">

                        <div id="create-customer" class="col-lg-6 p-2">
                            <div class="card h100 c-pointer">
                                <div class="card-body d-flex justify-content-center align-items-center">
                                    <i class="fa fa-plus-circle fa-5x"></i>
                                </div>
                            </div>
                        </div>

                        @include('firm.orders._partials.customer')
                        @foreach($deliveryCustomers as $customer)
                            @include('firm.orders._partials.customer')
                        @endforeach

                    </div>
                </main>

                {{----------------------------------------------------------------------------------------------------- destination 3: quick Sale --}}
                <main id="quick_order" class="orders-tabcontent">
                </main>

            </div>
        </div>
        {{------------------------------------------------------------------------------------------------------------------------------------------}}

        {{----------------------------------------------------------------------------------------------------------------- slide 2: product List --}}
        <div class="">
            <input type="hidden" name="destination_type" value="{{ Input::get('destination_type') }}">
            <input type="hidden" name="destination_id" value="{{ Input::get('destination_id') }}">
            <div class="order-waiter">
                <div class="category-list">
                    {{------------------------------------------------------------------------------------------------------------- filter section--}}
                    <div class="bfc pt-3 pb-3">
                        <div class="input-group input-group-lg">
                            <input id="filter" type="text" class="form-control" placeholder="@trans("Search a Product...")"
                                   aria-describedby="button-addon2">
                            <div class="input-group-append">
                                <button class="btn btn-default" type="button" id="button-search"><i class="fa fa-search"></i></button>
                                <button class="btn btn-default" style="display: none" type="button" id="button-clear"><i class="fa fa-times"></i></button>
                            </div>
                        </div>
                    </div>
                    {{--------------------------------------------------------------------------------------------------------- end filter section--}}
                    <span id="destination-title" class="category-name"></span>
                    @foreach($categories as $category)
                        @if(count($category->products))
                            <p class="category" data-id="{{ $category->id }}">{{ $category->name }}</p>
                        @endif
                    @endforeach
                </div>
                <div class="product-list">
                    @foreach($categories as $category)
                        @if(count($category->products))
                            <div id="{{ $category->id }}" class="category">
                                <span class="category-name">{{ $category->name }}</span>
                                @foreach($category->products as $product)
                                    <p data-id="{{ $product->id }}" data-barcode="{{ $product->barcode }}">
                                        <span class="order-quantity" style="display: none;">0</span>
                                        <span class="name product-name">{{ $product->name }}</span>
                                    </p>
                                @endforeach
                            </div>
                        @endif
                    @endforeach
                </div>

                {{----------------------------------------------------------------------------------------------------------- slide extra: orders --}}
                <div class="options">
                    <span class="category-name">@transTitleCase('firm.orders.orders')</span>
                    <span class="category-name"> -
                        <span class="total-price-wrapper">
                            <span class="gross-price text-muted text-line-through" style="display: none;">0</span>
                            <span class="total-price">0</span> @currencySymbol
                        </span>
                    </span>
                    <span class="category-name mobile"> - <span class="destination-name"></span></span>
                    <div id="order-container">
                        <div class="order-group hidden" data-id="">
                            <div class="accordion">
                                <span class="orders-num">1</span>
                                <span class="orders-uom">--</span>
                                <span class="name"></span>
                                <span class="delete-order accordion-bttn"></span>
                            </div>
                            <div class="orders accordion-content">
                                {{-- orders go here --}}
                                <span class="add-order"></span>
                            </div>
                        </div>
                    </div>

                    <div class="mt-5 mx-2 order-settings">
                        <h3>@transTitleCase('firm.orders.choose.order_settings')</h3>
                        <div class="mt-4">
                            <label for="sale_note" class="form-label">@transUc('models.order.note')</label>
                            <br>
                            <textarea placeholder="@transUc('models.order.note')" name="sale_note" class="order-note w100"></textarea>
                        </div>
                        <div class="mt-3">
                            <label for="tracking_section_id" class="form-label">@transUc('generic.user_settings.target_tracking_section')</label>
                            {!! html()->select('tracking_section_id', $trackingSections, userSetting('target_tracking_section'))->class('form-control') !!}
                        </div>
                        <div class="mt-4">
                            <label for="num_customers" class="form-label">@transUc('models.sale.num_customers')</label>
                            {!! html()->number('num_customers', 1)->class('form-control select-on-focus') !!}
                        </div>
                        <div class="mt-4">

                            <div class="form-group">

                                <label for="discount_pct" class="form-label">@transUc('models.stock_item.discount_pct')</label>

                                <div class="input-group">
                                    <span class="input-group-addon bullseye">
                                        <i class="fa fa-percent px-3"></i>
                                    </span>
                                    <input id="discount_pct" type="number" min="0" max="100" step="1" pattern="[0-9]+"
                                           class="form-control select-on-focus" name="discount_pct">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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

    {{----------------------------------------------------------------------------------------------------------------------------------- buttons --}}
    <div id="button-container" class="w100 mfab-outer" style="display: none;">

        <div class="btn-group btn-group-lg d-flex ws-normal" role="group">
            <button type="button" id="show-orders-btn" class="btn btn-outline-dark w-100" style="display: none;">
                <a href="#" id="order-counter" class="badge badge-warning">0</a>
                @transUc('.see_orders')
            </button>
            <button type="button" id="show-products-btn" class="btn btn-outline-dark w-100" style="display: none;">@transUc('firm.checkout.add_order')</button>
            <button type="button" id="submit-btn" class="btn btn-danger w-100">@transUc('.submit_the_order')</button>
            <button type="button" id="print-btn" class="btn btn-dark w-100" style="display: none;"><i class="fa fa-print"></i>&nbsp; @transUc('generic.print')</button>
            <button type="button" id="checkout-btn" class="btn btn-danger w-100" style="display: none;">@transUc('firm.checkout.checkout')</button>
        </div>
    </div>

    {{------------------------------------------------------------------------------------------------------------------------------------ modals --}}

    {{-- this modal has to be inside the <form> --}}
    @include('firm.checkout._partials.checkout-modal')
    @if(company()->isSabeeConnected())
        @include('firm._modals.room-modal')
    @endif

    {!! Form::close() !!}

@endsection


@push('modals')

    @include('firm.checkout._partials.address-modal')
    @include('firm._modals.ajax-create')

@endpush


@section('print')

    @include('firm._partials.quick-order-bill')

@endsection


@section('scripts')

    {!! HTML::script('/assets/common/slick/slick.min.js') !!}

    <script>
        $(function () {
            const $orderForm = $('#order-form')

            $orderForm.orderCreation()

            const inputTimeout = 100
            let inputTimer
            let textInput      = ''

            $(document).on('keydown', function (e) {
                clearTimeout(inputTimer)

                // Do not process if keys are being sent to a textarea or an input.
                if (e.target.matches('textarea,input')) return true

                const keyCode = e.keyCode

                if (e.key === 'Enter' || keyCode === 18) {
                    // add product
                    const $product = $orderForm.find('.product-list').find(`p[data-barcode="${textInput}"],p[data-barcode="${textInput}18"]`).first()

                    if ($product && $product.data('barcode')) $product.trigger('click')
                    textInput = ''
                } else if (String(e.key).length === 1) {
                    textInput += e.key

                    inputTimer = setTimeout(function () {
                        textInput = ''
                    }, inputTimeout)
                }
            })
        })

    </script>

    <script>
        $(function () {
            var $printBtn = $('#print-btn')

            /* -------------------------------------------------------------------------------------------------------------------------- PRINT -+- */
            $printBtn.click(printReceipt)

            function printReceipt() {

                var orders     = []
                var totalPrice = 0

                /* ------------------------------------------------------------------------------------------------------------ gather The Data -<- */
                /*
                 * - gather order list
                 * - key the array by product id
                 * - gather treats separately
                 */
                $('.order-group').not('.hidden').each(function () {
                    var $group    = $(this)
                    var productId = $group.data('id')


                    // does the group include non-treat orders?
                    if (!$group.find('.orders-treat-note input').prop('checked')) {
                        orders[productId] = {
                            price      : 0,
                            quantity   : 0,
                            productName: $group.find('.name').text(),
                        }
                    }

                    // does the group include treat orders?
                    if ($group.find('.orders-treat-note input').prop('checked')) {
                        orders[productId + '-treat'] = {
                            price      : 0,
                            quantity   : 0,
                            productName: $group.find('.name').text(),
                        }
                    }

                    $group.find('.order').each(function () {
                        var $order         = $(this)
                        var $quantityInput = $order.find('.quantity-input input')
                        var unitPrice      = Number($quantityInput.data('price'))
                        var quantity       = Number($quantityInput.val())

                        $order.find('input:checked').each(function () {
                            var $option = $(this)
                            unitPrice += Number($option.data('price-diff'))
                        })

                        // check if order is treat
                        if ($order.find('.orders-treat-note input').prop('checked')) {
                            orders[productId + '-treat'].quantity += quantity
                        } else {
                            orders[productId].price += unitPrice * quantity
                            orders[productId].quantity += quantity
                            totalPrice += unitPrice * quantity
                        }
                    })
                })

                /* ------------------------------------------------------------------------------------------------------------------ visualize -<- */
                var $bill       = $('#bill')
                var $orderList  = $bill.find('.order-list')
                var $template   = $orderList.find('tbody tr:first-child')
                var $totalPrice = $bill.find('.total-price')

                // clean the old input first
                $orderList.find('tbody tr:not(:first-child)').remove()

                for (var id in orders) {
                    if (orders.hasOwnProperty(id)) {
                        var order = orders[id]

                        var $newOrder = $template.clone()
                        $newOrder.find('.name').text(order.productName)
                        $newOrder.find('.quantity').text(order.quantity.mtFixed(2))
                        if (order.price !== 0) {
                            $newOrder.find('.price').text(order.price.toFixed(2))
                        } else {
                            $newOrder.find('.price').text('@transUc('generic.financial.treat')')
                            $newOrder.find('.price').siblings('i.fa').remove()
                        }

                        $orderList.append($newOrder)
                    }

                    $totalPrice.text(totalPrice.toFixed(2))
                }

                window.print()
            }

            /* -------------------------------------------------------------------------------------------------------------------------- PRINT -^- */


            var $filter     = $('#filter')
            var $items      = $('.product-name')
            var $categories = $('.category-list')
            var $products   = $('.product-list .category')
            var $btnSearch  = $('#button-search')
            var $btnClear   = $('#button-clear')

            $filter.on('input change', function () {
                applyFilter($filter.val())
                showAllCategories()
                hideNoVisibleCategory()
                hideSearchBtnShowClearbtn()
            })

            // filter items
            function applyFilter(q) {
                console.log(q)
                q = $.trim(q)
                // add OR for regex query
                q = q.replace(/,/g, '|')
                // include all possible counterparts of turkish characters
                q = q.replace(/[cCçÇ]/g, '[cCçÇ]')
                q = q.replace(/[oOöÖ]/g, '[oOöÖ]')
                q = q.replace(/[uUüÜ]/g, '[uUüÜ]')
                q = q.replace(/[gGğĞ]/g, '[gGğĞ]')
                q = q.replace(/[sSşŞ]/g, '[sSşŞ]')
                q = q.replace(/[iIıİ]/g, '[iIıİ]')

                console.log(q)

                // loop through items
                // filter by text of the ".product-name" children
                // hide/show ".product-name" text
                $items.each(function () {
                    var $item   = $(this)
                    var text    = $item.text()
                    var $parent = $item.parents('p').first()

                    if (text.search(new RegExp(q, 'i')) < 0) {
                        $parent.addClass('hidden')
                    } else {
                        $parent.removeClass('hidden')
                    }
                })

            }

            // show all categories
            function showAllCategories() {

                $products.each(function () {
                    var $product = $(this)

                    if ($product.not('hidden').length) {
                        $product.show()
                    }

                })

            }

            // hide categories that has no visible products in them after the filtering.
            function hideNoVisibleCategory() {
                $products.each(function () {
                    var $product = $(this)

                    if ($product.find('p').not('.hidden').length) {
                        // console.log($product.find('p').not('.hidden'))
                        $product.show()
                    } else {
                        $product.hide()
                    }
                })
            }

            // if input has input - hide search button | show clear button
            function hideSearchBtnShowClearbtn() {
                $btnSearch.hide()
                $btnClear.show()
            }

            // if click clear button -> clear input && search clear
            $btnClear.click(function () {
                $filter.val('').trigger('input').focus()
            })

        })
    </script>

@endsection