@extends('index')
@section('title', Helper::getSiteTitle($title))

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box">
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">{{ __('Dashboard') }}</a></li>
                    <li class="breadcrumb-item"><a href="javascript:void(0)">{{ __('Sales') }}</a></li>
                    <li class="breadcrumb-item active">{{ __($title) }}</li>
                </ol>
            </div>
            <h4 class="page-title">{{ __($title) }}</h4>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-12">
        <div class="card-box">
            <button class="btn btn-danger waves-effect waves-light float-right ml-5 d-none remove-all-button">
                <span class="btn-label"><i class="mdi mdi-delete"></i></span>
                {{ __('Remove') }}
            </button>
            <a href="javascript:void(0)" class="btn btn-info waves-effect waves-light float-right" data-toggle="modal" data-target="#filter-modal">
                <span class="btn-label"><i class="fas fa-filter"></i></span>
                {{ __('Filter Orders') }}
            </a>
            <h4 class="header-title mb-4">{{ __($title) }}</h4>
            {!! Helper::getDatatables([__('#'), __('Customer Details'), __('Grand Total'), __('Status'), __('Shipping Method'), __('Notes'), __('Created At')]) !!}
        </div>
    </div>
</div>
<div id="filter-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Filter Orders</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body p-4">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="field-3" class="control-label">Keyword</label>
                            <input type="text" class="form-control keyword" id="field-3" placeholder="Keyword" name="keyword">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="field-3" class="control-label">Customer</label>
                            <select class="form-control user_id" name="user_id[]"  data-toggle="select2" multiple="" data-placeholder="Select Customer">
                                <option value="">All</option>
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}">{{ $user->first_name }} {{ $user->last_name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="field-3" class="control-label">Order Status</label>
                            <select class="form-control status_id" name="status_id[]"  data-toggle="select2" multiple="" data-placeholder="Select Order Status">
                                <option value="">All</option>
                                @foreach($statuses as $status)
                                    <option value="{{ $status->id }}">{{ $status->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-md-12">
                        <div class="form-group" data-target="open">
                            <label for="field-3" class="control-label">Shipping Method</label>
                            <select class="form-control shipping_method_id" name="shipping_method_id[]" data-toggle="select2" multiple="" data-placeholder="Select Shipping Method">
                                <option value="">Select Shipping Method</option>
                                @foreach($methods as $method)
                                    <option value="{{ $method->id }}">{{ $method->title }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-md-12 paid">
                        <div class="radio form-check-inline">
                            <input type="radio" id="inlineCheckbox1" value="" name="paid" checked="">
                            <label for="inlineCheckbox1"> All</label>
                        </div>
                        <div class="radio form-check-inline">
                            <input type="radio" id="inlineCheckbox2" value="1" name="paid">
                            <label for="inlineCheckbox2"> Paid </label>
                        </div>
                        <div class="radio form-check-inline">
                            <input type="radio" id="inlineCheckbox3" value="0" name="paid">
                            <label for="inlineCheckbox3"> Unpaid </label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="field-3" class="control-label">Order By</label>
                            <select class="form-control order_by" data-toggle="select2">
                                <option value="id-desc">Created At (New To Old)</option>
                                <option value="id-asc">Created At (Old To New)</option>
                                <option value="grand_total-desc">Grand Total (High To Low)</option>
                                <option value="grand_total-asc">Grand Total (Low To High)</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info waves-effect waves-light filter-button">Filter</button>
                <button class="btn btn-info waves-effect waves-light m-1 processing-button" type="button" disabled="">
                    <span class="spinner-border spinner-border-sm mr-1" role="status" aria-hidden="true"></span> {{ __('Processing') }}...
                </button>
                <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js-lib')
<script src="{{ asset('libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-buttons/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-buttons/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-buttons/js/buttons.flash.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-buttons/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-keytable/js/dataTables.keyTable.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-select/js/dataTables.select.min.js') }}"></script>
<script src="{{ asset('libs/pdfmake/build/pdfmake.min.js') }}"></script>
<script src="{{ asset('libs/pdfmake/build/vfs_fonts.js') }}"></script>
<script src="{{ asset('libs/sweetalert2/sweetalert2.min.js') }}"></script>
<script src="{{ asset('libs/select2/js/select2.min.js') }}"></script>
@endsection

@section('css-lib')
<meta name="class-to-open" content='orders'>
<link href="{{ asset('libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('libs/datatables.net-select-bs4/css/select.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('libs/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('js')
<script type="text/javascript">
    function createTable()
    {
        table = $('.datatable').DataTable({
            language:{paginate:{previous:"<i class='mdi mdi-chevron-left'>",next:"<i class='mdi mdi-chevron-right'>"}},
            drawCallback:function(){$(".dataTables_paginate > .pagination").addClass("pagination-rounded")},
            "processing": true,
            "serverSide": true,
            "paging": true,
            "scrollX": false,
            "pageLength": 25,
            "language": {
                "emptyTable": "{{ __('No order available') }}"
            },
            "order": [[0, "desc"]],
            "ajax":
            {
                url: "{{ route('sales-orders', $id) }}",
                data: function ( d ) {
                    d.keyword = $("#filter-modal .keyword").val();
                    d.user_id = $("#filter-modal .user_id").val();
                    d.status_id = $("#filter-modal .status_id").val();
                    d.shipping_method_id = $("#filter-modal .shipping_method_id").val();
                    d.paid = $("#filter-modal .paid input:checked").val();
                    d.branded = $("#filter-modal .branded input:checked").val();
                    d.payment_account = $("#filter-modal .payment_account input:checked").val();
                    d.order_by = $("#filter-modal .order_by").val();
                },
                beforeSend: function(jqXHR) {},
                error: function(jqXHR, textStatus, errorThrown){},
                complete: function(jqXHR) {}
            },
            createdRow: function( row, full, dataIndex ) {

                if (full.deleted_at) 
                {
                    $( row ).addClass('alert alert-dark');
                }
                else if(full.cancelled || full.status_id == 3)
                {
                    $( row ).addClass('alert alert-danger');
                }
            },
            "columnDefs": [
                { className: "text-center", "targets": [ 2 ] },
                { className: "text-center", "targets": [ 3 ] },
                { className: "text-center", "targets": [ 4 ] },
                { className: "text-center", "targets": [ 5 ] },
                { className: "text-right", "targets": [ 6 ] },
                { "width": "15%", "targets": 5 },
            ],
            "columns":[
                { "data": "order_reference", "name":"orders.id" },
                { "data": "customer_details", "name":"orders.id", "sortable": false },
                { "data": "grand_total", "name":"orders.id", "sortable": false },
                { "data": "status", "name":"orders.id", "sortable": false },
                { "data": "shipping", "name":"orders.id", "sortable": false },
                { "data": "admin_note", "name":"orders.id", "sortable": false },
                { "data": "created_at", "name":"orders.id", "sortable": false },
            ] 
        });
    }
</script>
@endsection