@extends('firm._layouts.standard')

@section('_content')

    <input type="hidden" name="partialMode" value="0">
    <input type="hidden" name="checkoutAmount" value="">

    <div class="events-header">
        @if($sale->destination_type == 'table')
            @transUc('generic.table') {{ $sale->destination->name }}
        @elseif($sale->destination_type == 'address')
            {{ $sale->destination->customer->fullname }}
        @endif
    </div>
    @if($sale->note)
        {{ $sale->note }}
    @endif
    <div id="contentContainer">
        {!! Form::open(['novalidate']) !!}
        <input type="hidden" name="partialMode" value="0">
        <div class="tableTotal">
            <div class="tableTotalDetailsOuther back">
                <a href="{{ route('firm.checkout.index') }}">
                    <div class="btn btn-primary btn-lg back">
                        <i class="fas fa-arrow-left fa-lg text-white my-4 mx-2 fa-lg"></i>
                    </div>
                </a>
            </div>
            <div class="row mt-3">
                <div class="btn-group ml-3" role="group">
                    <a id="total-price-wrapper" class="btn btn-secondary text-white disabled btn-lg">
                        <h3 class="mt-3">
                            @currencySymbol <span id="totalPrice">{{ $sale->net_price }}</span></h3>
                    </a>

                    <a id="partial-price-wrapper" class="bg-secondary rounded-0 text-white btn-lg tableTotalPrice"
                       style="display: none;">
                        <h3 class="mt-3 text-bold">
                            @currencySymbol <span id="partialPrice">{{ $sale->net_price }}</span></h3>
                    </a>

                    <a class="btn btn-primary btn-lg">
                        <i class="fas fa-coins text-white my-4 mx-3 fa-lg"></i>
                    </a>
                </div>

                <div class="btn-group ml-3" role="group">
                    <a class="tableTotalPrint btn btn-primary btn-lg">
                        <i class="fas fa-print text-white my-4 mx-2 fa-lg"></i>
                    </a>
                    <a id="print-alt-btn" class="btn btn-secondary btn-lg">
                        <i class="fas fa-ellipsis-v text-white my-4"></i>
                    </a>
                </div>

                <a class="btn btn-primary btn-lg ml-3 mt-3 mt-lg-0"
                   href="{{ route('firm.orders.create.choose', [ 'destination_type' => $sale->destination_type, 'destination_id' => $sale->destination_id]) }}">
                    <i class="fas fa-plus text-white my-4 mx-2 fa-lg"></i>
                </a>

                @if($sale->destination_type == 'table')
                    <button class="btn btn-primary btn-lg move-table ml-3 mt-3 mt-lg-0" name="move" value="1">
                        <i class="fas fa-share text-white my-4 mx-2 fa-lg"></i>
                    </button>
                @endif

                <a id="partial-mode-btn" class="btn btn-primary btn-lg ml-3 mt-3 mt-lg-0">
                    <i class="fas fa-tasks text-white my-4 mx-2 fa-lg"></i>
                </a>

                <a id="stacked-view-btn"
                   class="btn btn-primary btn-lg ml-3 mt-3 mt-lg-0 {{ userSetting('initially_show_orders_stacked') ? 'active' : '' }}">
                    <i class="fas fa-expand-arrows-alt text-white my-4 mx-2 fa-lg"></i>
                </a>

                <a class="btn btn-danger btn-lg cancel-all ml-3 mt-3 mt-lg-0">
                    <i class="fas fa-trash-alt text-white my-4 mx-2 fa-lg"></i>
                </a>
            </div>
        </div>

        <div id="order-container" style="display: none">
            @foreach($orders as $order)
                <a href="{{ route('firm.orders.edit', $order->id) }}">
                    <div class="order checkout order-{{ $order->getStatus() }} {{ $order->isTreat() ? 'treat' : '' }}{{ $order->isCancelled() ? 'cancelled' : '' }}"
                         data-price="{{ $order->price }}">
                        <div>
                            <input type="checkbox" name="orders[{{ $order->id }}]" value="1" class="checkboxes partial-check" style="display: none;">
                            @if($order->quantity != 1)
                                <div class="quantity-input" style="display: none;" data-max="{{ $order->visibleQuantity }}">
                                    <span class="btn dec-btn">-</span>
                                    <input type="number" value="1">
                                    <span class="btn inc-btn">+</span>
                                </div>
                            @endif
                            <div class="order-status-color">
                                <img class="w100 status-img-orange" src="{{ assetLink('/assets/firm/images/orange-bar.svg') }}">
                                <img class="w100 status-img-green" src="{{ assetLink('/assets/firm/images/green-bar.svg') }}">
                                <img class="w100 status-img-new" src="{{ assetLink('/assets/firm/images/new-bar.svg') }}">
                                <img class="w100 status-img-cancel" src="{{ assetLink('/assets/firm/images/status-cancel.svg') }}">
                            </div>
                            @if($order->quantity != 1)
                                <div class="productFeatureQnt" title="{{ $order->quantity }} @transUc('generic.uom-short.' . $order->product->uom)">
                                    <b>{{ $order->visibleQuantity }} &nbsp;@transUc('generic.uom-short.' . $order->product->uom)</b>
                                </div>
                            @endif
                            <div class="productName">{{ $order->product->name }}</div>
                            <div class="productName">@currencySymbol {{ $order->total_price }}</div>
                            <div class="status-canceled-comment">{{ $order->cancel_reason }}</div>
                            <div class="order-labels">
                                @if($order->isTreat())
                                    <div class="productFeatureEx"><b>@transUc('generic.financial.treat')</b></div>
                                @endif
                                @foreach($order->product->specs as $spec)
                                    @foreach($spec->options as $option)
                                        @if($spec->multiselect)
                                            @if(!$option->default && $order->isOptionSelected($option))
                                                <div class="productFeature">{{ $option->name }}</div>
                                            @elseif($option->default && !$order->isOptionSelected($option))
                                                <div class="productFeatureDel">{{ $option->name }}</div>
                                            @elseif($order->isOptionSelected($option))
                                                <div class="productFeature">{{ $option->name }}</div>
                                            @endif
                                        @else
                                            @if($order->isOptionSelected($option))
                                                <div class="productFeature">{{ $option->name }}</div>
                                            @endif
                                        @endif
                                    @endforeach
                                @endforeach
                            </div>
                            @if($order->user && companySetting('show_waiter_names_in_checkout_screen'))
                                <div class="productFeature user"><i class="fa fa-street-view"></i> {{ $order->user->fullname }}</div>
                            @endif
                            <div class="productTime">{{ $order->printTime() }}</div>
                        </div>
                        @if($order->note)
                            <div class="note"><b>@transUc('models.order.note') :</b> {{ $order->note }}</div>
                        @endif
                    </div>
                </a>
            @endforeach
        </div>

        <div id="stacked-order-container" style="display: none">
            @foreach($stackedOrders as $order)
                <a>
                    <div class="order checkout {{ $order->isTreat() ? 'treat' : '' }}{{ $order->isCancelled() ? 'cancelled' : '' }}">
                        <div>
                            <div class="productFeatureQnt" title="{{ $order->quantity }} @transUc('generic.uom-short.' . $order->product->uom)">
                                <b>{{ $order->visibleQuantity }} &nbsp;@transUc('generic.uom-short.' . $order->product->uom)</b>
                            </div>

                            <div class="productName">{{ $order->product->name }}</div>
                            <div class="productName">
                                @currencySymbol {{ formatCurrency($order->total_price) }}</div>
                            <div class="status-canceled-comment">{{ $order->cancel_reason }}</div>
                            <div class="order-labels">
                                @if($order->isTreat())
                                    <div class="productFeatureEx"><b>@transUc('generic.financial.treat')</b></div>
                                @endif
                            </div>
                        </div>
                    </div>
                </a>
            @endforeach
        </div>

        {!! Form::close() !!}
    </div>

    @include('firm.checkout._partials.cancel-modal')
    @include('firm._modals.print-modal')

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

@endsection

@section('print')

    {!! $bills !!}

@endsection

@section('scripts')

    <script>
        var saleId = '{{ $sale->id }}'

        $(function () {

            var $printModal            = $('#print-modal')
            var $orderContainer        = $('#order-container')
            var $stackedOrderContainer = $('#stacked-order-container')

            $('.quantity-input').each(function () {
                $(this).quantityInput({
                    $input: $(this).find('input').add($(this).siblings('input')),
                })
            }).click(function (e) {
                // prevent event bubbling up the DOM for quantity-input plugin IF 'order' is currently checked/active
                if (!$(this).siblings('input:not(:checked)').length) {
                    e.stopPropagation()
                    e.preventDefault()
                }
            })
            $('.quantity-input').change(updatePartialPrice)

            $printModal.printModal()


            /* ------------------------------------------------------------------------------------------------------------------- partial Mode -+- */
            var $partialModeBtn   = $('#partial-mode-btn')
            var $partialModeInput = $('input[name=partialMode]')

            var partialMode = function (newState) {
                // GET
                if (typeof (newState) === 'undefined') {
                    // return the value as boolean
                    return $partialModeInput.val() == true
                }

                $partialModeBtn.toggleClass('active', !!newState)

                // SET
                if (!newState) {
                    // turn partial mode OFF

                    // store state in the input
                    $partialModeInput.val(0)

                    $orderContainer.find('.order .quantity-input, .order .partial-check').hide(300)
                    $('#partial-price-wrapper').hide(300)

                    // restore unselected items' and totalPrice's fade effect
                    $orderContainer.find('.order').css('opacity', 1)
                    $('#total-price-wrapper').css('opacity', 1)

                    // remove click handler for checkbox
                    $orderContainer.find('.order').off('click')
                } else {
                    // turn partial mode ON

                    // store state in the input
                    $partialModeInput.val(1)

                    // disable stacked view
                    stackedView(0)

                    // show order partial controls
                    $('#order-container .order .quantity-input, #order-container .order input[type=checkbox], #partial-price-wrapper').show(300)

                    // show unselected items faded
                    $orderContainer.find('.order input[type=checkbox]:not(:checked)').each(function () {
                        $(this).parents('.order').css('opacity', 0.5)
                    })

                    // show totalPrice faded
                    $('#total-price-wrapper').css('opacity', 0.5)

                    // update partial price
                    updatePartialPrice()

                    // switch order status
                    $orderContainer.find('.order').click(function (e) {
                        e.preventDefault()

                        var $checkbox = $(this).find('input[type=checkbox]')

                        if ($checkbox.prop('checked')) {
                            //console.log('turning off');
                            $checkbox.prop('checked', false)
                            // also switch order faded state
                            $(this).css('opacity', 0.5)
                        } else {
                            //console.log('turning on');
                            $checkbox.prop('checked', true)
                            // also switch order faded state
                            $(this).css('opacity', 1)
                        }
                        // update partial price
                        updatePartialPrice()
                    })
                }
            }

            function updatePartialPrice() {
                var totalPrice = 0
                // get selected orders
                $orderContainer.find('.order:not(".treat, .cancelled") .partial-check:checked').each(function () {
                    // find selected price for each and add them together
                    totalPrice += $(this).val() * $(this).parents('.order').data('price')
                })

                // format currency with 2 decimals only
                totalPrice = Number(totalPrice).toFixed(2)
                // update #partialPrice counter
                $('#partialPrice').html(totalPrice)

                return totalPrice
            }

            /* ------------------------------------------------------------------------------------------------------------------- partial Mode -^- */

            /* ------------------------------------------------------------------------------------------------------------------- stacked View -+- */
            var $stackedViewBtn  = $('#stacked-view-btn')
            var stackedViewState = $stackedViewBtn.hasClass('active')

            var stackedView = function (newState) {
                // GET
                if (typeof (newState) === 'undefined') {
                    // return the value as boolean
                    return stackedViewState
                }

                // convert state value to boolean
                newState = !!newState

                $stackedViewBtn.toggleClass('active', newState)
                stackedViewState = newState

                // SET
                if (!newState) {
                    // turn stacked view OFF

                    $stackedOrderContainer.hide()
                    $orderContainer.show()
                } else {
                    // turn stacked view ON

                    partialMode(0)
                    $stackedOrderContainer.show()
                    $orderContainer.hide()
                }
            }

            // set initial status
            stackedView(stackedViewState)
            /* ------------------------------------------------------------------------------------------------------------------- stacked View -^- */


            /* ------------------------------------------------------------------------------------------------------------------- cancel Modal -+- */
            var cancelModal = function () {
                var $modal     = $('#cancel-modal')
                // update total price and checkout price input
                var totalPrice = 0
                if (partialMode()) {
                    totalPrice = updatePartialPrice()
                } else {
                    totalPrice = $('#totalPrice').html()
                }

                $modal.find('#total-price').html(totalPrice)
                // this will actually find checkout amount in checkout modal and form will submit that instead.
                $('[name="checkoutAmount"]').val(totalPrice)

                $modal.find('.alert').hide()
                $modal.modal()
            }

            /* ---------------------------------------------------------------------------------------------------------- init Button Listeners -+- */
            var initListeners = function () {
                $('.tableTotalPrint').click(function () {
                    if (partialMode()) {
                        return false
                    }
                    window.print()
                    return false
                })

                $('.cancel-all').on('click', cancelModal)

                $partialModeBtn.on('click', function () {
                    // toggle partialMode
                    partialMode(!partialMode())
                })

                $stackedViewBtn.on('click', function () {
                    // toggle stacked view
                    stackedView(!stackedView())
                })

                $('#print-alt-btn').click(function () {
                    $printModal.printModal('show', saleId)
                })
            }

            initListeners()

        })
    </script>

@endsection