@extends('firm._layouts.standard')

@section('_content')
    <div class="events-header">
        @if($sale->destination_type == 'table')
            @transUc('generic.table') {{ $sale->destination->name }}
        @elseif($sale->destination_type == 'address')
            {{ $sale->customer->fullname }}
            @if($sale->channel === 'getir')
                - <img src="/assets/firm/images/getiryemek-light.svg">
            @endif
        @endif
    </div>
    <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" data-value="{{ $sale->net_price + $sale->discount }}">{{ formatCurrency($sale->net_price + $sale->discount) }}</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">{{ formatCurrency($sale->net_price + $sale->discount) }}</span>
                        </h3>
                    </a>

                    @if($sale->channel && $sale->nextStatus)
                        @if($sale->isInTerminalStatus)
                            <a id="checkout-btn" class="btn btn-primary btn-lg">
                                <i class="fas fa-coins text-white my-4 mx-3 fa-lg"></i>
                                <span class="text-white status-name">{{ $sale->nextStatusVerbTrans }}</span>
                            </a>
                        @else
                            <a id="set-status-btn" class="btn btn-success has-disabled-state btn-lg" data-new-status="{{ $sale->nextStatus }}">
                                <i class="fas fa-check text-white my-4 mx-2 fa-lg content"></i> <i class="fa fa-sync fa-spin text-white my-4 mx-2 fa-lg disabled-content"></i>
                                <span class="text-white status-name">{{ $sale->nextStatusVerbTrans }}</span>
                            </a>
                        @endif
                    @else
                        <a id="checkout-btn" class="btn btn-primary btn-lg">
                            <i class="fas fa-coins text-white my-4 mx-3 fa-lg"></i>
                        </a>
                    @endif
                </div>

                <div class="btn-group ml-3" role="group">
                    @if($sale->channel)
                        <a class="getirPrintBtn btn btn-primary btn-lg">
                            <i class="fas fa-print text-white my-4 mx-2 fa-lg"></i>
                        </a>
                    @else
                        <a class="tableTotalPrint btn btn-primary btn-lg">
                            <i class="fas fa-print text-white my-4 mx-2 fa-lg"></i>
                        </a>
                    @endif
                    <a id="print-alt-btn" class="btn btn-secondary btn-lg">
                        <i class="fas fa-ellipsis-v text-white my-4"></i>
                    </a>
                </div>

                @if(!$sale->channel)
                    <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-cut text-white my-4 mx-2 fa-lg"></i>
                    </a>
                @endif

                <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->unitPrice }}">
                        <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 {{ formatCurrency($order->gross_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>

        @include('firm._modals.channel-cancel-modal')
        @include('firm.checkout._partials.checkout-modal', ['discount' => $sale->discount])
        @include('firm.checkout._partials.cancel-modal')
        @include('firm._modals.print-modal')
        @if(company()->isSabeeConnected())
            @include('firm._modals.room-modal')
        @endif

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

@endsection

@section('print')

    {!! $bills !!}

@endsection

@section('scripts')

    @if($sale->channel)
        <script>
            $(function () {
                var $setStatusBtn = $('#set-status-btn')

                $setStatusBtn.click(function () {
                    $setStatusBtn.attr('disabled', '')
                    $('#loading-bg').show()
                    $('#loading-image').show()
                    $.ajax({
                        url     : '{{ route('firm.getir.sale-set-status', $sale->channel_id) }}',
                        type    : 'POST',
                        data    : {
                            newStatus: $setStatusBtn.data('new-status'),
                        },
                        success : function (response) {
                            if (response.success) {
                                if (!response.data || response.data.isInTerminalStatus || !response.data.newNextStatus) {
                                    // reload the page
                                    location.replace('')
                                } else {
                                    $setStatusBtn.data('new-status', response.data.newNextStatus)
                                    $setStatusBtn.find('span').text(response.data.newNextStatusTrans)
                                }
                                lazyAlert('success', window.trans('success'))
                            } else {
                                var error = window.trans('an_error_occurred')

                                if (response.errors && response.errors.length)
                                    error = response.errors.pop()

                                lazyAlert('danger', error)
                            }
                        },
                        error   : function (jqXHR) {
                            lazyAlert('danger', window.trans('an_error_occurred'))
                        },
                        complete: function () {
                            $('#loading-bg').hide()
                            $('#loading-image').hide()
                            $setStatusBtn.removeAttr('disabled', '')
                        }
                    })

                })

                $('.getirPrintBtn').click(e => {
                    let winPrint = window.open('/firm/getir/sale-details/{{ $sale->channel_id }}?print=1')
                    winPrint.focus()
                })
            })
        </script>
    @endif

    <script>
        var saleId       = '{{ $sale->id }}'
        var channelOrder = '{{ !!$sale->channel }}'
        var channel_id   = '{{ $sale->channel_id }}'
        var discountPct  = '{{ $sale->discount_pct }}'

        $(function () {

            var $checkoutModal         = $('#checkout-modal')
            var $printModal            = $('#print-modal')
            var $orderContainer        = $('#order-container')
            var $stackedOrderContainer = $('#stacked-order-container')
            var $channelCancelModal    = $('#channel-cancel-modal')

            $channelCancelModal.channelCancelModal()

            $channelCancelModal.on('channelCancelModal:progressBegin', function () {
                $('#loading-bg').show()
                $('#loading-image').show()
            }).on('channelCancelModal:progressEnd', function () {
                $('#loading-bg').hide()
                $('#loading-image').hide()
            }).on('channelCancelModal:cancel', function () {
                location.replace('{{ route('firm.checkout.index') }}')
            })

            $('.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)

            $checkoutModal.checkoutModal()
            $printModal.printModal()

            $('#checkout-btn').click(function () {
                var totalPrice


                if (partialMode()) {
                    totalPrice = Number($('#partialPrice').html())
                } else {
                    totalPrice = Number($('#totalPrice').data('value'))
                }
                $checkoutModal.checkoutModal('show', totalPrice, !partialMode(), discountPct)
            })

            /* ------------------------------------------------------------------------------------------------------------------- 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', function () {
                    if (channelOrder) {
                        $channelCancelModal.channelCancelModal('show', channel_id)
                    } else {
                        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