@extends('admin.template.master')

@section('stylesheets')
    {!! Html::style('assets/admin/bower_components/select2/dist/css/select2.min.css') !!}

    <style>
        /*Select2 style*/
        .select2-container--default .select2-selection--single, .select2-selection .select2-selection--single {
            border: 1px solid #d2d6de;
            border-radius: 0;
            padding: 6px 12px;
            height: 34px;
        }

        .select2-container .select2-selection--single .select2-selection__rendered {
            padding-right: 10px;
        }

        .select2-container .select2-selection--single .select2-selection__rendered {
            padding-left: 0;
            padding-right: 0;
            height: auto;
            margin-top: -4px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 28px;
            right: 3px;
        }

        /*Select2 style*/

        .checkbox {
            margin-right: 17px;
            margin-top: 6px;
            margin-bottom: 16px;
        }

        .checkbox label {
            font-weight: 700;
        }

        .checkbox input[type=checkbox] {
            margin-left: 5px;
        }

        .order-closed {
            background-color: #bfffbf !important;
        }

        .btn-xs {
            width: 73px !important;
        }
    </style>
@endsection

@section('title')
    <section class="content-header">
        <h1>
            Orders
        </h1>
        <ol class="breadcrumb">
            <li><a href="{!! url('/dashboard/') !!}"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">Orders</li>
        </ol>
    </section>
@endsection

@section('main-content')
    <section class="content">

        @if(Session::has('message'))
            <div class="row">
                <div class="col-xs-12">
                    <div class="alert alert-success alert-dismissible">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                        <h4><i class="icon fa fa-ban"></i> Alert!</h4>
                        {{Session('message')}}
                    </div>
                </div>
            </div>
        @endif
        <div class="row">
            <div class="col-xs-12">
                <div class="box box-warning order-filter-wrapper">
                    <div class="box-header with-border">
                        <h3 class="box-title">Order Filter</h3>

                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                        class="fa fa-minus"></i>
                            </button>
                        </div>
                    </div>

                    <div class="box-body">
                        <div class="row">
                            <div class="form-group col-md-2">
                                {!! Form::label('payment_method_id', 'Payment Method') !!}
                                {!! Form::select('payment_method_id', $paymentMethod, null, ['class' => 'form-control', 'placeholder' => 'All Payment Methods', 'id' => 'payment_method_id']) !!}
                            </div>

                            <div class="form-group col-md-2">
                                {!! Form::label('order_status', 'Order Status') !!}
                                {!! Form::select('order_status', $orderStatus, null, ['class' => 'form-control', 'placeholder' => 'All Order Status', 'id' => 'order_status']) !!}
                            </div>

                            <div class="form-group col-md-2">
                                {!! Form::label('shipping_type', 'Payment Type') !!}
                                {!! Form::select('shipping_type', $shippingType, null, ['class' => 'form-control', 'placeholder' => 'All Payment Type', 'id' => 'shipping_type']) !!}
                            </div>

                            <div class="form-group col-md-2">
                                {!! Form::label('transaction_type', 'Transaction Type') !!}
                                {!! Form::select('transaction_type',[null => 'All', '0' => 'Regular','1' => 'EMI'], null,['class' =>'form-control', 'id'=>'transaction_type']) !!}
                            </div>

                            <div class="form-group col-md-2">
                                {!! Form::label('order_is_exist', 'Status') !!}
                                {!! Form::select('order_is_exist',[null => 'All', '1' => 'Active','0' => 'Inactive'], null,['class' =>'form-control', 'id'=>'order_is_exist']) !!}
                            </div>

                            <div class="form-group col-md-2">
                                {!! Form::label('order_processing', 'Processing') !!}
                                {!! Form::select('order_processing', $processing, null, ['class' => 'form-control', 'placeholder' => 'All process', 'id' => 'order_processing']) !!}
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group col-md-2">
                                {!! Form::label('customer_contact', 'Contact') !!}
                                {{-- {!! Form::select('customer_contact', ['class' => 'form-control', 'placeholder' => 'All contact', 'id' => 'customer_contact']) !!} --}}
                                <select name="customer_contact" id="customer_contact" class="form-control customer-contact">
                                    <option value="">All Contacts</option>
                                </select>
                            </div>

                            <div class="col-md-5">
                                <div class="row">
                                    <div class="form-group col-md-5">
                                        {!! Form::label('from_date', 'From Date') !!}
                                        {!! Form::date('from_date', \Carbon\Carbon::now(), ['class' => 'form-control', 'id' => 'from_date']) !!}
                                    </div>

                                    <div class="form-group col-md-5">
                                        {!! Form::label('to_date', 'To Date') !!}
                                        {!! Form::date('to_date', \Carbon\Carbon::now(), ['class' => 'form-control', 'id' => 'to_date']) !!}
                                    </div>

                                    <div class="form-group col-md-2">
                                        {!! Form::label('&nbsp;') !!}
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" id="search_by_date" style="margin-left: -17px" checked>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-5">
                                <div class="row">
                                    <div class="form-group col-md-5">
                                        {!! Form::label('from_order', 'From Order') !!}
                                        {!! Form::number('from_order', null, ['class' => 'form-control', 'id' => 'from_order']) !!}
                                    </div>

                                    <div class="form-group col-md-5">
                                        {!! Form::label('to_order', 'To Order') !!}
                                        {!! Form::number('to_order', null, ['class' => 'form-control', 'id' => 'to_order']) !!}
                                    </div>

                                    <div class="form-group col-md-2">
                                        {!! Form::label('&nbsp;') !!}
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" id="search_by_order" style="margin-left: -17px">
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group col-md-6">
                                {!! Form::button('Search',['class' => 'btn btn-primary btn-order-search']) !!}
                                {!! Form::button('Clear',['class' => 'btn btn-danger btn-order-reset']) !!}
                            </div>

                            <div class="form-group col-md-6 text-right">
                                {!! Form::button('Excel',['class' => 'btn btn-info btn-order-excel']) !!}
                            </div>
                        </div>
                    </div>
                </div>

                <div id="order-report"></div>
            </div>
        </div>
    </section>
@endsection

@section('javascripts')
    {!! Html::script('assets/admin/bower_components/select2/dist/js/select2.full.min.js') !!}

    <script type="text/javascript">

        $('.customer-contact').select2({
            minimumInputLength: 5,
            ajax: {
                url: "{{ route('contact-search') }}",
                dataType: 'json',
                delay: 250,
                processResults: function (data) {
                    // console.log(data);
                    return {
                        results: $.map(data, function (item) {
                            return {
                                text: item,
                                id: item
                            }
                        })
                    };
                },
                cache: true
            }
        });


        var from_date_initial = '';
        var to_date_initial = '';

        $(document).ready(function () {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $('#payment_method_id').select2();
            $('#order_status').select2();
            $('#shipping_type').select2();
            $('#order_is_exist').select2();
            // $('#customer_contact').select2();
            $('#order_processing').select2();
            $('#transaction_type').select2();

            from_date_initial = $.trim($("#from_date").val());
            to_date_initial = $.trim($("#to_date").val());

            // get order on search click
            $(".btn-order-search").click(function () {
                $('#order-report').html(''); // clear search data

                // prepare data to post
                var payment_method_id = $('#payment_method_id').val();
                var order_status = $('#order_status').val();
                var shipping_type = $('#shipping_type').val();
                var transaction_type = $('#transaction_type').val();
                var order_is_exist = $('#order_is_exist').val();
                var order_processing = $('#order_processing').val();
                var customer_contact = $('#customer_contact').val();

                var search_by_date = '';
                if (($("#search_by_date").is(":checked"))) {
                    search_by_date = 'on';
                } else {
                    search_by_date = 'off';
                }

                var from_date = $('#from_date').val();
                var to_date = $('#to_date').val();

                var search_by_order = '';
                if (($("#search_by_order").is(":checked"))) {
                    search_by_order = 'on';
                } else {
                    search_by_order = 'off';
                }

                var from_order = $('#from_order').val();
                var to_order = $('#to_order').val();

                var data = "payment_method_id=" + payment_method_id
                    + "&order_status=" + order_status
                    + "&shipping_type=" + shipping_type
                    + "&transaction_type=" + transaction_type
                    + "&order_is_exist=" + order_is_exist
                    + "&order_processing=" + order_processing
                    + "&customer_contact=" + customer_contact
                    + "&search_by_date=" + search_by_date
                    + "&from_date=" + from_date
                    + "&to_date=" + to_date
                    + "&search_by_order=" + search_by_order
                    + "&from_order=" + from_order
                    + "&to_order=" + to_order;

                // call get getOrderData to fetch order list
                getOrderData(data)
            });

            // reset order filter
            $(".btn-order-reset").click(function () {
                // reset the select option
                $('#payment_method_id').val('').trigger("change");
                $('#order_status').val('').trigger("change");
                $('#shipping_type').val('').trigger("change");
                $('#transaction_type').val('').trigger("change");
                $('#order_is_exist').val('').trigger("change");
                $('#order_processing').val('').trigger("change");
                $('#customer_contact').val('').trigger("change");

                $('#search_by_date').prop('checked', false);
                $("#from_date").val(from_date_initial);
                $("#to_date").val(from_date_initial);

                $('#search_by_order').prop('checked', false);
                $('#from_order').val('');
                $('#to_order').val('');
            });

            // export order data to excel
            $(".btn-order-excel").click(function () {
                var payment_method_id = $('#payment_method_id').val();
                var order_status = $('#order_status').val();
                var shipping_type = $('#shipping_type').val();
                var order_is_exist = $('#order_is_exist').val();

                var search_by_date = '';
                if (($("#search_by_date").is(":checked"))) {
                    search_by_date = 'on';
                } else {
                    search_by_date = 'off';
                }

                var from_date = $('#from_date').val();
                var to_date = $('#to_date').val();

                var search_by_order = '';
                if (($("#search_by_order").is(":checked"))) {
                    search_by_order = 'on';
                } else {
                    search_by_order = 'off';
                }

                var from_order = $('#from_order').val();
                var to_order = $('#to_order').val();

                var data = "payment_method_id=" + payment_method_id
                    + "&order_status=" + order_status
                    + "&shipping_type=" + shipping_type
                    + "&order_is_exist=" + order_is_exist
                    + "&search_by_date=" + search_by_date
                    + "&from_date=" + from_date
                    + "&to_date=" + to_date
                    + "&search_by_order=" + search_by_order
                    + "&from_order=" + from_order
                    + "&to_order=" + to_order;

                var url = '{{ route("orderExcel", ":data") }}';
                url = url.replace(':data', data);

                window.open(url);
            });

            // to close order delivery, get the order delivery id
            $('#order-report').on("click", ".order-delivery-close", function () {
                // add loader
                $('#order-report').prepend('<div class="overlay order-list-overlay"><i class="fa fa-refresh fa-spin"></i></div>');
                var orderDeliveryId = $(this).data("order-delivery-id");
                var orderDeliveryClose = $(this).data("order-delivery-close");
                var data = "orderDeliveryId=" + orderDeliveryId;

                var url = '';

                if (orderDeliveryClose === 1) {
                    url = "{{ route('orderDeliveryUnclose') }}";
                } else if (orderDeliveryClose === 0) {
                    url = "{{ route('orderDeliveryClose') }}";
                }

                $.ajax({
                    type: "POST",
                    url: url,
                    data: data,
                    cache: false,
                    success: function (result, textStatus, xhr) {
                        if (result === 'order_delivery_closed') {
                            $("[data-order-delivery-id='" + orderDeliveryId + "']").removeClass('btn-info');
                            $("[data-order-delivery-id='" + orderDeliveryId + "']").addClass('btn-default');
                            $("[data-order-delivery-id='" + orderDeliveryId + "']").html('<i class="fa fa-eye"></i> Unclosed');
                        } else if (result === 'order_delivery_unclosed') {
                            $("[data-order-delivery-id='" + orderDeliveryId + "']").removeClass('btn-default');
                            $("[data-order-delivery-id='" + orderDeliveryId + "']").addClass('btn-info');
                            $("[data-order-delivery-id='" + orderDeliveryId + "']").html('<i class="fa fa-close"></i> Close');
                        }
                        else {
                            alert("You need permission to close order delivery")
                            // alert(xhr.status)
                        }
                    },
                    error: function (jqXHR, status, err) {
                        // alert(err);
                    },
                    complete: function () {
                        // remove loader on complete
                        $(".order-list-overlay").remove();
                    }
                });
            });
        });

        function getOrderData(data) {
            // add loader
            $('.order-filter-wrapper').append('<div class="overlay order-filter-overlay"><i class="fa fa-refresh fa-spin"></i></div>');

            $.ajax({
                type: "POST",
                url: "{{ route('getOrderData') }}",
                data: data,
                cache: false,
                success: function (result) {
                    $('#order-report').html(result);
                },
                error: function (jqXHR, status, err) {
                    // alert(err);
                },
                complete: function () {
                    // remove loader on complete
                    $(".order-filter-overlay").remove();

                    // create data table
                    $('#order-report table').DataTable({
                        // "scrollX": true,
                        "order": [[1, 'desc']],
                        "pageLength": 50,
                        "createdRow": function (row, data) {
                            if (data[2] == '1') {
                                $(row).addClass('order-closed');
                            }
                        },
                        "autoWidth": false,
                        "columnDefs": [
                            {
                                "targets": [2],
                                "visible": false
                            }
                        ]
                    });
                }
            });
        }
    </script>
@endsection