{{-- mainLayouts extends --}}
@extends('layouts.contentLayoutMaster')

{{-- Page title --}}
@section('title', 'Order List')

@section('vendor-style')
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/select2/select2.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/select2/select2-materialize.css') }}">
@endsection

{{-- page style --}}
@section('page-style')
    <link rel="stylesheet" type="text/css" href="{{ asset('css/pages/form-select2.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/pages/page-users.css') }}">
@endsection

@section('content')
    <section class="users-list-wrapper section">
        <div class="users-list-table">
            {{-- <div class="users-list-filter">
			<div class="card-panel">
				<div class="row">
					<form action="{{ route('admin.orders.index') }}" method="GET">
						<div class="col s12 m3 l3">
							<label for="users-list-verified">Start Date</label>
							<div class="input-field">
								<input type="date" id="start_date_filter" name="start_date" class="form-control" value="{{ request()->start_date }}">
							</div>
						</div>
						<div class="col s12 m3 l3">
							<label for="users-list-verified">End Date</label>
							<div class="input-field">
								<input type="date" id="end_date_filter" name="end_date" class="form-control" value="{{ request()->end_date }}">
							</div>
						</div>
						<div class="col s12 m3 l3">
							<label for="users-list-status">Payment Type</label>
							<div class="input-field">
								<select id="payment_type_filter" name="payment_type" class="form-control" id="users-list-status">
									<option value="">Choose Payment Type</option>
									<option value="2C2P" @if (request()->payment_type && request()->payment_type == '2C2P') selected @endif>2C2P</option>
									<option value="COD" @if (request()->payment_type && request()->payment_type == 'COD') selected @endif>COD</option>
								</select>
							</div>
						</div>
						<div class="col s12 m3 l3 display-flex align-items-center show-btn">
							<button type="submit" class="btn btn-block indigo waves-effect waves-light" style="margin-right: 20px;">Filter</button>
							<button type="button" onclick="document.getElementById('orderExportForm').submit()" class="btn btn-block indigo waves-effect waves-light">Export</button>
						</div>
					</form>
				</div>
			</div>
		</div> --}}
            <form action="{{ route('admin.export.orders') }}" method="GET" id="orderExportForm">
                <input type="hidden" name="start_date" value="{{ request()->start_date }}" id="start_date">
                <input type="hidden" name="end_date" value="{{ request()->end_date }}" id="end_date">
                @foreach (collect(request()->status) as $status)
                    <input type="hidden" name="status[]" value="{{ $status }}">
                @endforeach

                @foreach (collect(request()->city_ids) as $city_id)
                    <input type="hidden" name="city_ids[]" value="{{ $city_id }}">
                @endforeach
                {{-- <input type="hidden" name="payment_type" value="{{ request()->payment_type }}"> --}}
                <input type="hidden" name="type" value="App\Merchant">
            </form>
            <div class="card">
                <div class="row pl-1 pr-1">
                    <h5 class="col s6"><b>Merchant Orders</b></h5>
                    <div class="col s2 pt-1">
                        <button type="button" onclick="document.getElementById('orderExportForm').submit()"
                            class="btn btn-block waves-effect waves-light">Export</button>
                    </div>
                    <div class="input-field col s4">
                        <form action="{{ route('admin.merchant.orders') }}" method="get" id="report-search-form">
                            <input class="search-keyword" type="text" name="keyword" id="keyword"
                                value="{{ request('keyword') ?? '' }}" placeholder="Search...">
                            <i class="material-icons prefix custom-search-icon">search</i>
                        </form>
                        <a class="modal-trigger" href="#modal1">
                            <i class="material-icons prefix custom-filter-icon">filter_list</i>
                        </a>
                    </div>
                </div>
                <div class="card-content p-0 pb-2">
                    <!-- datatable start -->
                    <div class="responsive-table">
                        <div class="center">
                            {{ $orders->withQueryString()->links() }}
                        </div>
                        <table id="users-list-datatable" class="table responsive-table striped">
                            <thead class="grey lighten-2">
                                <tr>
                                    <th></th>
                                    <th>#</th>
                                    <th>Merchant Name</th>
                                    <th>City</th>
                                    <th>Township</th>
                                    <th>Address</th>
                                    <th>Total Price</th>
                                    <th>Payment Method</th>
                                    <th>Created</th>
                                    <th>Status</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody id="append-data">
                                @forelse ($orders as $key => $order)
                                    <tr>
                                        <td></td>
                                        <td class="order-no">{{ $order->display_order_number }}</td>
                                        <td>
                                            @if ($order->user && $order->user->name)
                                                <a
                                                    href="{{ route('admin.merchant.show.tab', [$order->user->id, 'merchant-order']) }}">{{ $order->user->name }}</a>
                                            @else
                                                -
                                            @endif
                                        </td>
                                        <td>{{ $order->address->city->name ?? null }}</td>
                                        <td>{{ $order->address->township->name ?? null }}</td>
                                        <td>{{ $order->address->address }}</td>
                                        <td>{{ $order->total_price }}</td>
                                        <td>{{ $order->payment_method }}</td>
                                        <td>{{ $order->created_time }}</td>
                                        <td class="pt-0">
                                            <span
                                                class="chip {{ $order->status == 'pending'? 'orange': ($order->status == 'reject'? 'red': ($order->status == 'delivering'? 'purple': ($order->status == 'delivered'? 'blue': 'green'))) }} lighten-4">
                                                <span
                                                    class="{{ $order->status == 'pending'? 'orange-text': ($order->status == 'reject'? 'red-text': ($order->status == 'delivering'? 'purple-text': ($order->status == 'delivered'? 'blue-text': 'green-text'))) }}">{{ $order->status }}</span>
                                            </span>
                                        </td>
                                        <td class="pt-0"
                                            style="{{ $order->qr_code_link ? 'width: 210px' : '' }}">
                                            <div class="display-flex align-items-center mb-5">
                                                <i class="material-icons mt-2">
                                                    <a class="blue lighten-4 border-radius-button"
                                                        href="{{ route('admin.merchant.order.show', $order->id) }}"
                                                        style="padding: 6px 10px;">remove_red_eye</a>
                                                </i>
                                                @if ($order->qr_code_link != null)
                                                    <form
                                                        action="{{ route('admin.order.download-qr-code', $order->id) }}"
                                                        method="GET" class="ml-5">
                                                        <input type="hidden" name="file"
                                                            value="{{ $order->qr_code_link }}">
                                                        <button type="submit"
                                                            class="btn btn-small red white-text btn-rounded-border"
                                                            style="padding:0 0.5em;font-size: 12px"><i
                                                                class="material-icons">arrow_downward</i>Qr Code</button>
                                                    </form>
                                                @endif

                                                <form action="{{ route('admin.orders.destroy', $order->id) }}"
                                                    method="post"
                                                    onsubmit="return confirm('Are you sure to delete this order?')"
                                                    style="margin-left: auto">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button style="border: none; outline: none;background: transparent"
                                                        type="submit">
                                                        <i class="material-icons mt-2">
                                                            <a class="red lighten-4 border-radius-button red-text"
                                                                style="padding: 6px 10px;">
                                                                delete_forever
                                                            </a>
                                                        </i>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="9">No Order Found!</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                        <div class="center">
                            {{ $orders->withQueryString()->links() }}
                        </div>
                        <input type="hidden" name="latest_date" id="latest_date" value="{{ $latest_date }}">
                    </div>
                    <!-- datatable ends -->
                </div>
            </div>
            <div id="modal1" class="modal big-size-modal modal-fixed-header">
                <form action="{{ route('admin.merchant.orders') }}" method="get">
                    <div class="modal-filter-header modal-header pt-1">
                        <div class="col s8 custom-d-flex">
                            <h6 class="m-0 pr-2 custom-border-right"><b>Merchant Order Filter</b></h6>
                            <a href="#" class="pl-2 clear-filter" id="clearFilter">Clear Filter</a>
                        </div>
                        <div class="col s4">
                            <a href="javascript:void(0)" class="right modal-close">
                                <i class="material-icons prefix custom-close-icon">close</i>
                            </a>
                            <button class="right btn waves-effect waves-light red border-radius-10 mr-4"
                                type="submit">Filter</button>
                        </div>
                    </div>
                    <div class="modal-content modal-content-bg">
                        <div class="modal-filter-body row ml-0 mr-0 pl-2 pr-2 pt-2 pb-2">
                            <div class="col s3 mb-3 custom-border-right pr-2">
                                <h6 class="mb-5 mt-0"><b>City</b></h6>
                                @forelse ($cities as $city)
                                    <div onclick="checkFilter({{ $city->id }}, 'city')"
                                        id="filter-box-city-{{ $city->id }}"
                                        class="filter-box mb-3 @if (request('city_ids') && in_array($city->id, request('city_ids'))) box-checked @endif">
                                        {{ $city->name }}</div>
                                    <input type="checkbox" value="{{ $city->id }}" name="city_ids[]"
                                        id="filter-check-city-{{ $city->id }}" class="filter-check"
                                        @if (request('city_ids') && in_array($city->id, request('city_ids'))) checked="checked" @endif>
                                @empty
                                @endforelse
                            </div>
                            <div class="col s3 mb-3 custom-border-right">
                                <h6 class="mb-5 mt-0"><b>Status</b></h6>

                                <div onclick="checkFilter(1, 'status')" id="filter-box-status-1"
                                    class="filter-box mb-3 @if (request('status') && in_array('pending', request('status'))) box-checked @endif">Pending
                                </div>
                                <input type="checkbox" value="pending" name="status[]" id="filter-check-status-1"
                                    class="filter-check" @if (request('status') && in_array('pending', request('status'))) checked="checked" @endif>

                                <div onclick="checkFilter(2, 'status')" id="filter-box-status-2"
                                    class="filter-box mb-3 @if (request('status') && in_array('delivering', request('status'))) box-checked @endif">Delivering
                                </div>
                                <input type="checkbox" value="delivering" name="status[]" id="filter-check-status-2"
                                    class="filter-check" @if (request('status') && in_array('delivering', request('status'))) checked="checked" @endif>

                                <div onclick="checkFilter(3, 'status')" id="filter-box-status-3"
                                    class="filter-box mb-3 @if (request('status') && in_array('delivered', request('status'))) box-checked @endif">Delivered
                                </div>
                                <input type="checkbox" value="delivered" name="status[]" id="filter-check-status-3"
                                    class="filter-check" @if (request('status') && in_array('delivered', request('status'))) checked="checked" @endif>

                                <div onclick="checkFilter(4, 'status')" id="filter-box-status-4"
                                    class="filter-box mb-3 @if (request('status') && in_array('complete', request('status'))) box-checked @endif">Complete
                                </div>
                                <input type="checkbox" value="complete" name="status[]" id="filter-check-status-4"
                                    class="filter-check" @if (request('status') && in_array('complete', request('status'))) checked="checked" @endif>
                            </div>
                            <div class="col s2 custom-border-right" style="border-right: 1px solid #333;height: 220px;">
                                <div>
                                    <h6><b>Start Date</b></h6>
                                    <div class="filter-box custom-d-flex p-0 pl-2 pr-2">
                                        <input type="date" style="date" name="start_date" placeholder="Choose Date"
                                            class="date-filter mb-0"
                                            value="{{ request('start_date') ? request('start_date') : '' }}">
                                    </div>
                                </div>

                                <div>
                                    <h6><b>End Date</b></h6>
                                    <div class="filter-box custom-d-flex p-0 pl-2 pr-2">
                                        <input type="date" style="date" name="end_date" placeholder="Choose Date"
                                            class="date-filter mb-0"
                                            value="{{ request('end_date') ? request('end_date') : '' }}">
                                    </div>
                                </div>


                            </div>
                            <div class="col s3 ">
                                <div>
                                    <h6><b>Order Complain</b></h6>

                                    <input type="hidden" id="is_already_check"
                                        value="{{ request('order_complain_status') ? true : false }}">

                                    <div onclick="checkOrderCompalinFilter(1, 'status')" id="order-complain-status-1"
                                        class="order-complain-filter-box mb-3 @if (request('order_complain_status') && request('order_complain_status') == 'pending') box-checked @endif">
                                        Pending</div>
                                    <input type="checkbox" value="pending" name="order_complain_status"
                                        id="order-complain-check-status-1" class="order-complain-filter-check"
                                        @if (request('order_complain_status') && request('order_complain_status') == 'pending') checked="checked" @endif>

                                    <div onclick="checkOrderCompalinFilter(2, 'status')" id="order-complain-status-2"
                                        class="order-complain-filter-box mb-3 @if (request('order_complain_status') && request('order_complain_status') == 'accepted') box-checked @endif">
                                        Accepted</div>
                                    <input type="checkbox" value="accepted" name="order_complain_status"
                                        id="order-complain-check-status-2" class="order-complain-filter-check"
                                        @if (request('order_complain_status') && request('order_complain_status') == 'accepted') checked="checked" @endif>

                                    <div onclick="checkOrderCompalinFilter(3, 'status')" id="order-complain-status-3"
                                        class="order-complain-filter-box mb-3 @if (request('order_complain_status') && request('order_complain_status') == 'rejected') box-checked @endif">
                                        Rejected</div>
                                    <input type="checkbox" value="rejected" name="order_complain_status"
                                        id="order-complain-check-status-3" class="order-complain-filter-check"
                                        @if (request('order_complain_status') && request('order_complain_status') == 'rejected') checked="checked" @endif>

                                    <div onclick="checkOrderCompalinFilter(4, 'status')" id="order-complain-status-4"
                                        class="order-complain-filter-box mb-3 @if (request('order_complain_status') && request('order_complain_status') == 'resolved') box-checked @endif">
                                        Resolved</div>
                                    <input type="checkbox" value="resolved" name="order_complain_status"
                                        id="order-complain-check-status-4" class="order-complain-filter-check"
                                        @if (request('order_complain_status') && request('order_complain_status') == 'resolved') checked="checked" @endif>

                                </div>
                            </div>
                            {{-- <div class="col s3 custom-border-right">
                            <h6 class="mb-5 mt-0"><b>Payment Method</b></h6>
							<div onclick="checkFilter(1, 'method')" id="filter-box-method-1" class="filter-box mb-3 @if (request('payment_method') && in_array('COD', request('payment_method'))) box-checked @endif">COD</div>
							<input type="checkbox" value="COD" name="payment_method[]" id="filter-check-method-1" class="filter-check" @if (request('payment_method') && in_array('COD', request('payment_method'))) checked="checked" @endif>

							<div onclick="checkFilter(2, 'method')" id="filter-box-method-2" class="filter-box mb-3 @if (request('payment_method') && in_array('2C2P', request('payment_method'))) box-checked @endif">2C2P</div>
							<input type="checkbox" value="2C2P" name="payment_method[]" id="filter-check-method-2" class="filter-check" @if (request('payment_method') && in_array('2C2P', request('payment_method'))) checked="checked" @endif>
                        </div> --}}
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </section>
@endsection

@section('vendor-script')
    <script src="{{ asset('vendors/select2/select2.full.min.js') }}"></script>
@endsection

@section('page-script')
    <script src="{{ asset('js/scripts/form-select2.js') }}"></script>
    <script>
        var is_already_check = $('#is_already_check').val();
        var count = 0;

        function changeStatus(id) {
            var formID = 'order-status-form-' + id;
            const radio = document.getElementById(formID);
            radio.submit();
        }
        $(document).ready(function() {
            $('.modal').modal();
        });

        function checkFilter(id, type) {

            var filter_box = "#filter-box-" + type + '-' + id;
            var filter_check = "#filter-check-" + type + '-' + id;

            if ($(filter_box).hasClass("box-checked")) {
                $(filter_box).removeClass("box-checked");
                $(filter_check).removeAttr('checked');
            } else {
                $(filter_box).addClass("box-checked");
                $(filter_check).attr('checked', 'checked');
            }
        }

        function checkOrderCompalinFilter(id, type) {
            var filter_box = "#order-complain-" + type + '-' + id;
            var filter_check = "#order-complain-check-" + type + '-' + id;
            console.log('First' + this.is_already_check);
            console.log(this.count);
            if ($(filter_box).hasClass("box-checked")) {
                //this.is_already_check = 0;
                $('#is_already_check').removeClass('checked');
                $(filter_box).removeClass("box-checked");
                $(filter_check).removeAttr('checked');
            } else if (!$(filter_box).hasClass("box-checked") && !$('#is_already_check').hasClass('checked')) {
                //this.is_already_check = 1;
                $('#is_already_check').addClass('checked');
                $(filter_box).addClass("box-checked");
                $(filter_check).attr('checked', 'checked');
            }
        }

        $('#clearFilter').on('click', function() {
            $('.filter-box').removeClass('box-checked');
            $('.filter-check').removeAttr('checked');
            $('.date-filter').val('');
            $('.order-complain-filter-box').removeClass('box-checked');
            $('.order-complain-filter-check').removeAttr('checked');
            if ($('#is_already_check').hasClass('checked')) {
                $('#is_already_check').removeClass('checked');
            }
        });

        $(document).ready(function() {
            setInterval(getLatestdata, 10000);

            function getLatestdata() {
                var latest_date = $('#latest_date').val();

                $.ajax({
                    type: 'GET',
                    url: `{{ route('admin.latest.merchant.order.data') }}?date=${latest_date}`,
                    success: function(res) {
                        if (res) {
                            console.log(res.data);

                            $.each(res.data, function(key, value) {
                                $('#latest_date').val(value.created_at);

                                row = $(`<tr class="red lighten-5"></tr>`)
                                col0 = $(`<td></td>`);
                                col1 = $(
                                    `<td class="order-no">${value.display_order_number}</td>`
                                );
                                col2 = $(
                                    `<td>${ value.user && value.user.name ? value.user.name : '-'}</td>`
                                );
                                col3 = $(
                                    `<td>${ value.address && value.address.city.name ? value.address.city.name : '-'}</td>`
                                );
                                col4 = $(
                                    `<td>${ value.address && value.address.township.name ? value.address.township.name : '-'}</td>`
                                );
                                col5 = $(
                                    `<td>${ value.address  ? value.address.address : '-'}</td>`
                                );
                                col6 = $(
                                    `<td>${ value.total_price ? value.total_price : '-'}</td>`
                                );
                                col7 = $(
                                    `<td>${ value.payment_method ? value.payment_method : '-'}</td>`
                                );
                                col8 = $(
                                    `<td>${ value.created_time ? value.created_time : '-'}</td>`
                                );
                                col9 = $(`
                                    <td>
                                        <span class="chip
                                                ${value.status == 'pending' ? 'orange' : ( value.status == 'delivering'  ? 'purple' : ( value.status == 'delivered' ? 'blue' : 'green'))}
                                            lighten-4">
                                            <span class="
                                            ${value.status == 'pending' ? 'orange-text' : ( value.status == 'delivering'  ? 'purple-text' : ( value.status == 'delivered' ? 'blue-text' : 'green-text'))}
                                            ">${ value.status }</span>
                                        </span>
                                    </td>`);
                                col10 = $(`<td>
                                <div class="right">
                                    <i class="material-icons left pt-4">
                                        <a class="blue lighten-4 border-radius-button z-depth-1" href=/admin/merchant-orders/${value.id}" style="padding: 6px 10px;">remove_red_eye</a>
                                    </i>
                                </div>
                            </td>`);
                                row.append(col0, col1, col2, col3, col4, col5, col6, col7, col8,
                                    col9, col10).prependTo("#append-data");
                            });
                            if (res.data.length > 0) {
                                // $('.order-no').each(function(key, item){
                                //     $(item).html(key+1);
                                // });

                                $('table > tbody > tr').each(function(row, tr) {
                                    if (row >= 10) {
                                        $(tr).remove();

                                    }
                                });
                            }

                        }
                    }

                });
            }
        });
    </script>
@endsection