@extends('adminlte::page')

@section('title', 'Freecia')

@section('content_header')
    <h1>{{ $module_name }}</h1>
@stop

@section('content')

    <div class="box">
        <div class="box-body">

            <!--Search Filters Start-->
            <div class="panel-group">
                <div class="panel panel-danger panel-advance-filters">
                    <div class="panel-heading" data-toggle="collapse" data-target="#advance-filters" style="color: #3c8dbc"
                         aria-expanded="false">
                        <h4 class="panel-title">
                            <i class="fa fa-filter"></i> Advance Filters
                        </h4>
                    </div>
                    <form id="gridFilterForm">
                        <div id="advance-filters" class="panel-collapse collapse">
                            <div class="panel-body">
                                <div class="row form-group">

                                    {{-- Order ID--}}
                                    <div class="col-md-2">
                                        <label>Order ID</label>
                                        <input type="text" id="orderId" pattern="[0-9]" class="form-control">
                                    </div>

                                    <div class="col-md-2">
                                        <label>Item Type</label>
                                        <select id="itemtypefilter" data-tags="true" data-placeholder="Select Item Type"
                                                class="itemtypefilter select2Filter filter-field">
                                            <option value=""></option>
                                            <option value="product">Product</option>
                                            <option value="deal">Deal</option>
                                        </select>
                                    </div>

                                    {{-- Brand--}}
                                    <div class="col-md-2">
                                        <label>Brand</label>
                                        <select id="brandfilter" data-tags="true" data-placeholder="Select brand"
                                                class="form-control select2Filter filter-field">
                                            <option value=""></option>
                                            @if(!empty($brands))
                                                @foreach($brands as $brand)
                                                    <option value="{{ $brand->id }}"
                                                            brand-id="{{ $brand->id }}">{{ $brand->name }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>

                                    {{-- Category--}}
                                    <div class="col-md-2">
                                        <label>Category</label>
                                        <select id="categoryfilter" data-placeholder="Select category"
                                                class="form-control select2Filter filter-field">
                                            <option value=""></option>
                                            @if(!empty($categories))
                                                @foreach($categories as $category)
                                                    <option value="{{ $category->id }}"
                                                            category-id="{{$category->id}}">{{ $category->name }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>

                                    {{-- Product--}}

                                    <div class="col-md-2">
                                        <label>Product</label>
                                        <select id="productfilter" data-placeholder="Select product"
                                                class="form-control select2Filter filter-field">
                                            <option value=""></option>
                                            @if(!empty($products))
                                                @foreach($products as $product)
                                                    <option value="{{ $product->id }}">{{ $product->name }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>

                                    {{-- Order Status--}}
                                    <div class="col-md-2">
                                        <label>Status</label>
                                        <select id="activefilter" data-placeholder="Select status"
                                                class="form-control select2Filter filter-field">
                                            <option value=""></option>
                                            @foreach($orderStatuses as $orderStatus)
                                                <option value="{{ $orderStatus->id }}">{{ $orderStatus->status }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    {{-- Payment Mode--}}
                                    {{--                                    <div class="col-md-2">--}}
                                    {{--                                        <label>Payment Mode</label>--}}
                                    {{--                                        <select id="orderPaymentMode" data-placeholder="Select payment mode"--}}
                                    {{--                                                class="form-control select2Filter filter-field">--}}
                                    {{--                                            <option value=""></option>--}}
                                    {{--                                            <option value="cash">Cash</option>--}}
                                    {{--                                            <option value="card">Card</option>--}}
                                    {{--                                        </select>--}}
                                    {{--                                    </div>--}}
                                    {{--Created At--}}
                                    <div class="col-md-2">
                                        <label>From - Create At</label>
                                        <input autocomplete="off" id="created_at_start" class="form-control datePicker">
                                    </div>

                                    <div class="col-md-2">
                                        <label>To - Create At</label>
                                        <input autocomplete="off" id="created_at_end" class="form-control datePicker">
                                    </div>

                                    <div class="col-md-2">
                                        <label>Customer Name</label>
                                        <input type="text" class="form-control" id="customerName">
                                    </div>

                                    <div class="col-md-2">
                                        <label>Customer Email</label>
                                        <input type="email" class="form-control" id="customerEmail">
                                    </div>

                                    <div class="col-md-2">
                                        <label>Customer Phone#</label>
                                        <input type="text" class="form-control" id="customerPhone">
                                    </div>

                                </div>
                            </div>
                            <div class="panel-footer">
                                <button type="button" class="btn btn-default pull-right margin-r-5 clearFilter1"><i
                                        class="fa fa-times-circle"></i> Clear
                                </button>
                                <button type="button" class="btn btn-primary pull-right margin-r-5 submitFilter1"><i
                                        class="fa fa-filter"></i> Filter
                                </button>
                                <div class="clearfix"></div>
                            </div>

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

            <div id="order-list">
                @include('admin.retailerorders.partials.order-list',['rows'=>$rows])
            </div>

        </div>
    </div>


    <div class="modal fade"  role="dialog" id="order-detail-modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content modal-lg">
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span class="fa fa-times-circle close-popup" title="close" aria-hidden="true"></span></button>
                    <span id="order-detail-placeholder"></span>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

@stop

@section('javascript')
    <script>
        var table;

        $(function () {
            table = initDataTable();

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

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

            $(document).off('click', '.order-details').on('click', '.order-details', function (e) {
                e.preventDefault();
                $('.pace-activity').show();
                var url = $(this).attr('href');
                $.ajax({
                    type: 'GET',
                    url: url,
                    data: {'_token': '{{ csrf_token() }}'},
                    success: function (response) {
                        $('#order-detail-placeholder').html(response.order_detail);
                        $('.pace-activity').hide();
                        $('#order-detail-modal').modal('show');
                    }
                });

            });

            $(document).off('change', '#brandfilter').on('change', '#brandfilter', function () {
                var brandFilter = $(this);
                var brandId = $(this).children('option:selected').attr('brand-id');
                $('.pace-activity').show()

                $.ajax({
                    type: 'GET',
                    data: {brand_id: brandId},
                    url: '{{ route('order.get.category') }}',

                    success: function (response) {
                        var html = '<option value="">Select Category</option>';

                        for (var i = 0; i < response.categories.length; i++) {
                            html += '<option value="' + response.categories[i].id + '" >' + response.categories[i].name + '</option>';
                        }

                        $('select#categoryfilter').html(html);
                        $('select#categoryfilter').change();

                        $('.pace-activity').hide();
                    }
                });
            })

            $(document).off('change', '#categoryfilter').on('change', '#categoryfilter', function () {

                var categoryFilter = $(this);
                var categoryId = $(this).val();
                $('.pace-activity').show()

                $.ajax({
                    type: 'GET',
                    data: {category_id: categoryId},
                    url: '{{ route('order.get.product') }}',
                    success: function (response) {
                        var html = '<option value="">Select Product</option>';

                        for (var i = 0; i < response.products.length; i++) {
                            html += '<option value="' + response.products[i].id + '" >' + response.products[i].name + '</option>';
                        }
                        $('select#productfilter').html(html);
                        $('select#productfilter').change();
                        // categoryFilter.parent().parent().find('select#productfilter').html(html).change();

                        $('.pace-activity').hide();
                    }
                });

            })


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

                $('.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,
                    type: 'GET',
                    data: currentStatus,
                    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; // (statuses[i].status).replace(/ed|ing/gi, '');
                                popupHtml += '' +
                                    '<li style="float: left; margin-right: 15px; ">' +
                                    '<label style="word-spacing: 9px;"><input type="radio" '  + checked + ' class="radio-icheck 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 = $('.radio-icheck: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;
                                        }
                                    }
                                },
                                onOpen: function () {
                                    initIcheck();
                                    $('#status-reason-box textarea').css('border', '');
                                    $('#reason-field-error').hide();
                                }
                            }).then((result) => {
                                if (result.value) {
                                    $('.pace-activity').show();
                                    var url = '{{ route('retailer.update.status') }}';
                                    var hasReason = $('.radio-icheck:checked').hasClass('askreason1');
                                    var reasonText = $.trim($('#status-reason-box textarea').val());
                                    var data = {
                                        order_id: orderId,
                                        status_id: $('.radio-icheck:checked').val(),
                                        reason: reasonText,
                                        _token: '{{ csrf_token() }}'
                                    };

                                    $.ajax({
                                        url: url,
                                        type: 'POST',
                                        data: data,
                                        success: function (response) {
                                            if (!response.error) {
                                                meElement.removeClass(response.statusClassRemove);
                                                meElement.addClass(response.statusClass);
                                                meElement.attr('current-status', JSON.stringify(response.status));
                                                meElement.text(response.status.status);
                                                if (response.status.status === 'Dispatched'){
                                                    $('.edit-order-'+orderId).remove();
                                                }

                                                toastr.success(response.message, '', {
                                                    timeOut: 5000,
                                                    'positionClass': 'toast-bottom-right'
                                                });
                                            } else {
                                                toastr.error(response.message, '', {
                                                    timeOut: 5000,
                                                    'positionClass': 'toast-bottom-right'
                                                });
                                            }
                                            $('.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'
                            });
                        }
                    }
                })
            });

            $(document).off('ifChecked', '.askreason1').on('ifChecked', '.askreason1', function () {
                $('#status-reason-box textarea').empty();
                $('#status-reason-box').slideDown('slow');
            });

            $(document).off('ifChecked', '.askreason0').on('ifChecked', '.askreason0', function () {
                $('#status-reason-box textarea').empty();
                $('#status-reason-box').slideUp('slow');
            });

        });

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

            var dateStart = document.getElementById('created_at_start').value,
                dateEnd = document.getElementById('created_at_end').value,
                activeField = ($('#activefilter').val()).toLowerCase(),
                orderId = document.getElementById('orderId').value,
                itemType = document.getElementById('itemtypefilter').value,
                brandfilter = ($(document.getElementById('brandfilter')).length > 0 ? document.getElementById('brandfilter').value : ''),
                categoryfilter = ($(document.getElementById('categoryfilter')).length > 0 ? document.getElementById('categoryfilter').value : ''),
                productfilter = ($(document.getElementById('productfilter')).length > 0 ? document.getElementById('productfilter').value : ''),
                customerName = document.getElementById('customerName').value,
                customerEmail = document.getElementById('customerEmail').value,
                customerPhone = document.getElementById('customerPhone').value;

            var requestData = {
                _token: "{{csrf_token()}}",
                order_id: orderId,
                item_type: itemType,
                brand_id: brandfilter,
                category_id: categoryfilter,
                product_id: productfilter,
                status_id: activeField,
                customerName: customerName,
                customerEmail: customerEmail,
                customerPhone: customerPhone,
                created_at_start: dateStart,
                created_at_end: dateEnd
            };

            var datatable = $('.orderDataTable').DataTable({
                "scrollX": true,
                "processing": true,
                "serverSide": true,
                "pageLength": 10,
                "ajax": {
                    "url": "{{ route('retailer.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>Customer ID:</strong>" + data.customerId + "<br>";
                            $columnData += "<strong>Customer Name: </strong>" + data.customerName + "<br>";
                            if (data.contact1){
                                $columnData += "<strong>Phone: </strong> <a href='mailto:" + data.contact1 + "'>" + data.contact1 + "</a><br>";
                            }
                            $columnData += "<strong>Delivery Address: </strong>" + data.address + "<br>";
                            if (data.email){
                                $columnData += "<strong>Email: </strong> <a href='mailto:" + data.email + "'>" + data.email + "</a><br>";
                            }
                            $columnData += "</p>";
                            return $columnData;
                        }
                    },
                    {
                        "data": "Order Detail", "render": function (data, type, full, meta) {
                            var $columnData = "";
                            $columnData +=  unEntity(data.rawDetail);
                            return $columnData;
                        }
                    },
                    {
                        "data": "Status", "render": function (data, type, full, meta) {
                            var $columnData = "";
                            if (data) {
                                $columnData+= '<label ';
                                $columnData+= 'class="label 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>';
                            } else {
                                $columnData += 'N\\A';
                            }

                            return $columnData;
                        }
                    },
                    {
                        "data": "Total Amount", "render": function (data, type, full, meta) {
                            var $columnData = "";
                            $columnData += "<strong>";
                            $columnData += "{{$currencySign}}";
                            $columnData += "</strong>";
                            $columnData +=  data.totalAmount;
                            return $columnData;
                        }
                    },
                    {"data": "created_at"},
                    {
                        "data": "action", "render": function (data, type, full, meta) {
                            var $columnData = '';
                            $columnData += '<a class=" btn btn-info btn-sm"  url= "' + data.print + '"  onclick="printCustomerInvoice(this)" style="margin-right:5px; margin-bottom:15px" title="Print Invoice For Customer"><i class="fa fa-print"></i></a>';
                            $columnData += '<a href="' + data.show + '"class="btn btn-primary btn-sm order-details" style="margin-right:5px; margin-bottom:15px" title="Detail View"><i class="fa fa-eye"></i></a>';
                            if (data.status !== 'Delivered' && data.status !== 'Dispatched'){
                                $columnData += '<a href="' + data.edit + '"class="btn btn-primary btn-sm edit-order-'+data.id+'" style="margin-right:5px; margin-bottom:15px" title="Edit"><i class="fa fa-edit"></i></a>';
                            }

                            return $columnData;
                        }
                    }
                ]
            });
            return datatable;
        }


        function initIcheck() {
            $('.radio-icheck').iCheck({
                checkboxClass: 'icheckbox_square-blue',
                radioClass: 'iradio_square-blue',
                increaseArea: '20%' // optional
            });
        }
        /**
         *
         * @param object
         */
        function printCustomerInvoice(object) {
            var url = $(object).attr('url');
            window.open(url, '_blank');
        }

        function unEntity(str){
            return str.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">");
        }

    </script>
@stop