@extends("layouts.app")
@section("content")
    <div class="page">
        <div class="page-wrapper">
            <div class="page-header">
                <div class="container-xl">
                    <div class="row g-2 align-items-center">
                        <div class="col">
                            <h2 class="page-title">
                                Orders
                            </h2>
                        </div>

                        <!---Advance Search Filter--->
                        <div>
                            <a href="#" data-bs-toggle="collapse" data-bs-target="#advance-filters" class="btn btn-primary advance_filter">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                     viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                     stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                    <path
                                        d="M5.5 5h13a1 1 0 0 1 .5 1.5l-5 5.5l0 7l-4 -3l0 -4l-5 -5.5a1 1 0 0 1 .5 -1.5"/>
                                </svg>
                                Advance Filter
                            </a>
                            <form id="gridFilterForm">
                                <div id="advance-filters" class="collapse">
                                    <div class="page-body">
                                        <div class="card">
                                            <div class="card-header">
                                                <h3 class="card-title">Search Filters</h3>
                                            </div>
                                            <div class="card-body">
                                                <div class="datagrid">
                                                    <div class="datagrid-item">
                                                        <div class="datagrid-title">Order ID</div>
                                                        <div class="datagrid-content">
                                                            <input type="text" id="orderId-filter" pattern="[0-9]" class="form-control" placeholder="Search ID">
                                                        </div>
                                                    </div>
                                                    <div class="datagrid-item">
                                                        <div class="datagrid-title">Status</div>
                                                        <div class="datagrid-content">
                                                            <select id="status-filter" data-placeholder="Select Status" class="form-control select2Filter filter-field">
                                                                <option value=""></option>
                                                                <option value="5">Placed</option>
                                                                <option value="1">Accepted</option>
                                                                <option value="4">Processing</option>
                                                                <option value="6">Canceled</option>
                                                                <option value="2">Dispatched</option>
                                                                <option value="3">Delivered</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="datagrid-item">
                                                        <div class="datagrid-title">Customer Name</div>
                                                        <div class="datagrid-content">
                                                            <input type="text" id="customerName-filter" class="form-control" placeholder="Search Customer Name">
                                                        </div>
                                                    </div>
                                                    <div class="datagrid-item">
                                                        <div class="datagrid-title">Customer Email</div>
                                                        <div class="datagrid-content">
                                                            <input type="text" id="customerEmail-filter" class="form-control" placeholder="Search Customer Email">
                                                        </div>
                                                    </div>
                                                    <div class="datagrid-item">
                                                        <div class="datagrid-title">Customer Phone</div>
                                                        <div class="datagrid-content">
                                                            <input type="text" id="customerPhone-filter" class="form-control" placeholder="Search Customer Phone">
                                                        </div>
                                                    </div>
                                                    <div class="datagrid-item">
                                                        <div class="datagrid-title">To - Create At</div>
                                                        <div class="datagrid-content">
                                                            <div class="d-flex align-items-center">
                                                                <input autocomplete="off" class="form-control datePicker" id="created_at_start" placeholder="Select a date">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="datagrid-item">
                                                        <div class="datagrid-title">To - Update At</div>
                                                        <div class="datagrid-content">
                                                            <input autocomplete="off" class="form-control datePicker" id="created_at_end" placeholder="Select a date">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card-footer text-end">
                                                <button type="button"
                                                        class="btn btn-default pull margin-r-5  clearFilterDataTable"><i
                                                        class="fa fa-times-circle"></i>&nbsp;&nbsp;Clear
                                                </button>
                                                <button type="button"
                                                        class="btn btn-primary pull-right margin-r-5  submitFilterDataTable">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                                         viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                                         stroke-linecap="round" stroke-linejoin="round">
                                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                        <path
                                                            d="M5.5 5h13a1 1 0 0 1 .5 1.5l-5 5.5l0 7l-4 -3l0 -4l-5 -5.5a1 1 0 0 1 .5 -1.5"/>
                                                    </svg> Filter
                                                </button>
                                                <div class="clearfix"></div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!---End Search Filter---->
                    </div>
                </div>
            </div>

            @include('admin.orders.partials.order-list', ['rows' => $rows])

        </div>
    </div>
@stop

@push("javascript")
    <script>
        var table;
        $(function () {
            $('.order-Status-ToolTip').tooltip({
                classes: {
                    "ui-tooltip": "highlight"
                }
            });

            $('.clearFilterDataTable').click(function () {
                var gridFilterForm = document.getElementById('gridFilterForm');
                gridFilterForm.reset();

                if ($(gridFilterForm).find('select').length > 0) {
                    $(gridFilterForm).find('select').val('');
                    $(gridFilterForm).find('select').change();
                }
                table = initDataTable();
            });

            $('.submitFilterDataTable').click(function () {
                table = initDataTable();
            });

            table = initDataTable();

            $(document).off('change', '.askreason1').on('change', '.askreason1', function () {
                if ($(this).is(':checked')) {
                    $('#status-reason-box textarea').empty();
                    $('#status-reason-box').slideDown('slow');
                }
            });

            $(document).off('change', '.askreason0').on('change', '.askreason0', function () {
                if (!$(this).is(':checked')) {
                    $('#status-reason-box textarea').empty();
                    $('#status-reason-box').slideDown('slow');
                } else {
                    $('#status-reason-box textarea').val('');
                    $('#status-reason-box').slideUp('slow');
                }
            });


            $(document).off('click', '.order-status').on('click', '.order-status', function () {
                var currentStatus = $.parseJSON($(this).attr('current-status'));
                var me = $(this);

                $('.pace-activity').show();
                var meElement = $(this);
                var orderId = $(this).attr('order-id');

                currentStatus['_token'] = '{{ csrf_token() }}';
                var url = "{{ route('order.update.status.view') }}";
                $.ajax({
                    url: url,
                    data: currentStatus,
                    type: 'GET',
                    success: function (response) {
                        var statuses = $.parseJSON(response);
                        $('.pace-activity').hide();
                        if (statuses.length > 0) {
                            var popupHtml = '<div class="form-group" style="font-size:15px; text-align: center">';
                            popupHtml += '<ul style="list-style: none;">';
                            for (var i = 0; i < statuses.length; i++) {
                                var checked = i == 0 ? 'checked' : '';
                                var askReason = statuses[i].ask_reason;
                                var status = statuses[i].status;
                                popupHtml += '' +
                                    '<li style="float: left; margin-right: 15px; ">' +
                                    '<label style="word-spacing: 9px;"><input type="radio" ' + checked + ' class="form-check-input askreason' + askReason + ' " name="status_id"  value="' + statuses[i].id + ' "> ' + status +
                                    ' </label>' +
                                    '</li>';
                            }
                            popupHtml += '</ul><div style="clear: both;"></div></div>';
                            popupHtml += '<div style="font-size: 15px; text-align: left!important; display: none;" id="status-reason-box" class="form-group"><label>Reason:</label><textarea rows="5" class="form-control no-resize" maxlength="150" placeholder="Please enter a reason"></textarea><span id="reason-field-error" style="color:red; display: none;">Reason field is required</span></div>';
                            Swal.fire({
                                backdrop: true,
                                allowOutsideClick: false,
                                closeOnClickOutside: false,
                                hideOnOverlayClick: false,
                                hideOnContentClick: false,
                                closeClick: false,
                                customClass: 'swal-wide',
                                title: 'Update Status',
                                html: popupHtml,
                                confirmButtonText: 'Update',
                                showCancelButton: true,
                                preConfirm: function () {
                                    var hasReason = $('.form-check-input:checked').hasClass('askreason1');
                                    var reasonText = $.trim($('#status-reason-box textarea').val());
                                    if (hasReason) {
                                        if (reasonText.length == 0) {
                                            $('#reason-field-error').show();
                                            $('#status-reason-box textarea').css('border', '1px solid red');
                                            return false;
                                        }
                                    }
                                },
                                didOpen: function () {
                                    $('#status-reason-box textarea').css('border', '');
                                    $('#reason-field-error').hide();
                                }
                            }).then((result) => {
                                if (result.value) {
                                    $('.pace-activity').show();
                                    var url = "{{ route('order.update.status') }}";
                                    var hasReason = $('.form-check-input:checked').hasClass('askreason1');
                                    var reasonText = $.trim($('#status-reason-box textarea').val());

                                    var data = {
                                        order_id: orderId,
                                        status_id: $('.form-check-input:checked').val(),
                                        reason: reasonText,
                                        _token: '{{ csrf_token() }}'
                                    };

                                    $.ajax({
                                        url: url,
                                        type: 'POST',
                                        data: data,
                                        success: function (response) {
                                            if (!response.error) {
                                                table = initDataTable();
                                                var isNewOrder = $(me.attr('is-new'));
                                                if (isNewOrder.length > 0) {
                                                    isNewOrder.hide();
                                                }
                                                meElement.removeClass(response.statusClassRemove);
                                                meElement.addClass(response.statusClass);
                                                meElement.attr('current-status', JSON.stringify(response.status));
                                                meElement.text(response.status.status);

                                                console.log(response);
                                                toastr.success(response.message, '', {
                                                    timeOut: 5000,
                                                    'positionClass': 'toast-bottom-right',
                                                    toastClass: 'toast-success',
                                                });
                                            } else {
                                                toastr.error(response.message, '', {
                                                    timeOut: 5000,
                                                    'positionClass': 'toast-bottom-right',
                                                    toastClass: 'toast-danger',
                                                });
                                            }
                                            $('.pace-activity').hide();
                                        }
                                    });
                                }
                            });
                        } else {
                            toastr.warning('You can not update order status if it has been delivered, canceled or rejected.', '', {
                                timeOut: 3000,
                                'positionClass': 'toast-bottom-right'
                            });
                        }
                    }
                })
            });

        });

        function initDataTable(){
            if (table){
                table.destroy();
            }

            var orderIdFilter = document.getElementById("orderId-filter").value,
                statusFilter = document.getElementById('status-filter').value,
                customerNameFilter = document.getElementById('customerName-filter').value,
                customerEmailFilter = document.getElementById('customerEmail-filter').value,
                customerPhoneFilter = document.getElementById('customerPhone-filter').value,
                createdAtStart = document.getElementById('created_at_start').value,
                createdAtEnd = document.getElementById('created_at_end').value


            var requestData = {
                _token: "{{csrf_token()}}",
                order_id: orderIdFilter,
                status_id: statusFilter,
                customer_name: customerNameFilter,
                customer_email: customerEmailFilter,
                customer_phone_number: customerPhoneFilter,
                created_at_start: createdAtStart,
                created_at_end: createdAtEnd
            };

            var dataTable = $('.orderDataTable').DataTable({
                "scrollX": true,
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "{{ route('order.data') }}",
                    "dataType": "json",
                    "type": "POST",
                    "data": requestData
                },
                "columns": [
                    {"data": "id"},
                    {
                        "data": "Customer Detail","render": function (data, type, full, meta) {
                            var $columnData = "";
                            $columnData += "<p>";
                            $columnData += "<strong>Name: </strong>" + data.customerName + "<br>";
                            if (data.customerPhone){
                                $columnData += "<strong>Phone#: </strong> <a href='mailto:" + data.customerPhone + "'>" + data.customerPhone + "</a><br>";
                            }
                            if (data.address){
                                $columnData += "<strong>Delivery Address: </strong>" + data.address + "<br>";
                            }
                            if (data.customerEmail){
                                $columnData += "<strong>Email: </strong> <a href='mailto:" + data.customerEmail + "'>" + data.customerEmail + "</a><br>";
                            }
                            $columnData += "</p>";
                            return $columnData;
                        }
                    },
                    {
                        "data": "Order Detail",
                        "render": function (data, type, full, meta) {
                            var paymentColor = (data.paymentType === 'cash' || data.paymentType === 'Cash' ? "bg-teal text-teal-fg" : 'bg-lime text-lime-fg');
                            var orderTypeColor = data.orderType === 'Delivery' ? 'bg-yellow text-yellow-fg' : (data.orderType === 'Dine-in' ? 'bg-azure text-azure-fg' : 'bg-green text-green-fg');

                            var $columnData = '';
                            $columnData += '<div class="text-center">';
                            $columnData += '<div class="mb-2">';
                            $columnData += '<label class="badge ' + orderTypeColor + '" style="width: 150px;">' + data.orderType + '</label>';
                            $columnData += '</div>';
                            $columnData += '<div>';
                            $columnData += '<label class="badge ' + paymentColor + '" style="width: 150px;">' + (data.paymentType === 'cash' || data.paymentType === 'Cash' ? data.paymentType : 'Online Payment') + ' </label>';
                            $columnData += '</div>';
                            $columnData += '</div>';
                            return $columnData;
                        }
                    },
                    {
                        "data": "Status", "render": function (data, type, full, meta) {
                            var $columnData = '';
                            if (data) {
                                $columnData+= '<label ';
                                $columnData+= 'class="badge order-status-label order-status order-Status-ToolTip '+(data.status).toLowerCase() +'"';
                                $columnData+= 'order-id="'+data.order_id +'" current-status="'+(data.currentStatus)+'"';
                                $columnData+= 'all-next-status="">'+(data.currentStatusText)+'</label>';
                            }

                            return $columnData;
                        }
                    },
                    {
                        'data':'payment_status','render':function (data) {
                            var $columnData = '';

                            if(data){
                                $columnData+= '<label class="badge bg-teal text-teal-fg">'+(data).toUpperCase()+'</label>';
                            }else{
                                $columnData+= '<label class="badge bg-yellow text-yellow-fg">'+('cash on delivery').toUpperCase()+'</label>';
                            }
                            return $columnData;
                        }
                    },
                    {"data": "OrderPlaceAt"},
                    {
                        "data": "action", "render": function (data, type, full, meta) {
                            var $columnData = '';
                            $columnData += '<a class=" btn btn-primary btn-sm" style="margin-right: 5px; border-radius: 5px;"  url= "' + data.print + '"  onclick="printCustomerInvoice(this)" style="margin-right:5px; margin-bottom:15px" title="Print Invoice"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-printer" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" style="width: 18px; height: 18px"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M17 17h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2" /><path d="M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4" /><path d="M7 13m0 2a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2z" /></svg></a>';
                            $columnData += '<button style="margin-right: 5px; border-radius: 5px;" title="Show" class="btn btn-info btn-sm"  data-title="Order Detail" data-bs-toggle="modal" data-bs-target="#showModal" data-request-url=" '+ data.show +'" ><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" style="width: 18px; height: 18px"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="2" /><path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7" /></svg></button>';
                            return $columnData;
                        }
                    }
                ],
                "order": [[ 0, 'desc' ]]
            });
            return dataTable;
        }

        function createOrder($orderId){
            var url = "{{ route('order.list.ajax.add.order','ORDER_ID_STRING') }}";

            url = url.replace('ORDER_ID_STRING',$orderId);

            $.ajax({
                url:url,
                type:'GET',
                success:function(response){
                    var html = response.html;
                    if ( $('.orderDataTable tbody tr .dataTables_empty').length > 0)
                    {

                        $('.orderDataTable tbody tr .dataTables_empty').remove()
                    }
                    $('.orderDataTable tbody').prepend($(html)[0]);
                }
            });
        }

        function printCustomerInvoice(object) {
            var url = $(object).attr('url');
            window.open(url, '_blank');
        }

    </script>
@endpush