{{-- 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 m2 l2">
							<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 m2 l2">
							<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 l2">
							<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="">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 m2 l2">
							<label for="users-list-status">Delivered By</label>
							<div class="input-field">
								<select id="delivered_filter" name="delivered" class="form-control" id="users-list-status">
									<option value="">Choose Agent</option>
									<option value="App\User" @if (request()->delivered && request()->delivered == 'App\User') selected @endif>TOYO</option>
									<option value="App\Merchant" @if (request()->delivered && request()->delivered == 'App\Merchant') selected @endif>Merchant</option>
								</select>
							</div>
						</div>
						<div class="col s12 m3 l4 display-flex align-items-center show-btn">
							<button type="submit" class="btn btn-block waves-effect waves-light" style="margin-right: 20px;">Filter</button>
							<button type="button" onclick="document.getElementById('orderExportForm').submit()" class="btn btn-block waves-effect waves-light">Export</button>
						</div>
					</form>
				</div>
			</div>
        </div> --}}
            {{-- {{ dd(request()->status )}} --}}
            <form action="{{ route('admin.export.orders') }}" method="GET" id="orderExportForm">
                <input type="hidden" name="type" value="App\Customer">
                <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()->payment_method) as $payment_method)
                    <input type="hidden" name="payment_method[]" value="{{ $payment_method }}" id="payment_type">
                @endforeach
                @foreach (collect(request()->status) as $status)
                    <input type="hidden" name="status[]" value="{{ $status }}" id="status">
                @endforeach
                @foreach (collect(request()->delivered) as $delivered)
                    <input type="hidden" name="delivered[]" value="{{ $delivered }}" id="delivered">
                @endforeach
                @foreach (collect(request()->delivered) as $user_type)
                    <input type="hidden" name="user_type[]" value="{{ $user_type }}" id="user_type">
                @endforeach
                @foreach (collect(request()->city_ids) as $city_ids)
                    <input type="hidden" name="city_ids[]" value="{{ $city_ids }}" id="status">
                @endforeach
            </form>

            <div class="card">
                <div class="row pr-1">
                    <h5 class="col s6"><b>Customer Orders</b></h5>
                    <div class="col s2 pt-2">
                        <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.orders.index') }}" 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>Customer 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.customer.show.tab', [$order->user->id, 'active-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 }} <br>
                                            <span
                                                style="font-size: 0.65rem">{{ $order->payment_info_2c2p ? $order->payment_info_2c2p : '' }}</span>
                                        </td>
                                        <td>{{ $order->created_time }}</td>
                                        <td>
                                            <span
                                                class="chip {{ $order->status == 'order_pending'? 'orange': ($order->status == 'delivering'? 'purple': ($order->status == 'delivered'? 'blue': ($order->status == 'payment_pending'? 'blue-grey darken-1': 'green'))) }} lighten-4">
                                                <span
                                                    class="{{ $order->status == 'order_pending'? 'orange-text': ($order->status == 'delivering'? 'purple-text': ($order->status == 'delivered'? 'blue-text': ($order->status == 'payment_pending'? 'white-text': 'green-text'))) }}">{{ $order->status }}</span>
                                            </span>
                                            {{-- @if ($order->status == 'pending')
									<form action="{{route('admin.order.status.change', $order->id)}}" method="post">
										<input type="hidden" name="status" value="delivering">
										<button class="btn waves-effect waves-light blue darken-2">Delivering</button>
									</form>
								@elseif ($order->status == 'delivering')
                                    <form action="{{route('admin.order.status.change', $order->id)}}" method="post">
                                        <input type="hidden" name="status" value="delivered">
                                        <button class="btn waves-effect waves-light green darken-2">Delivered</button>
                                    </form>
                                @elseif ($order->status == 'delivered')
									<span class="badge green badge-custom">{{ $order->status }}</span>
								@elseif ($order->status == 'completed')
                                    <span class="badge cyan badge-custom">{{ $order->status }}</span>
                                @endif --}}
                                        </td>
                                        <td>
                                            <div class="right" style="display:flex;align-items:center">
                                                <i class="material-icons left pt-4">
                                                    <a class="blue lighten-4 border-radius-button z-depth-1"
                                                        href="{{ route('admin.orders.show', $order->id) }}"
                                                        style="padding: 6px 10px;">remove_red_eye</a>
                                                </i>
                                                <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.orders.index') }}" method="get">
                    <div class="modal-filter-header modal-header pt-1">
                        <div class="col s8 custom-d-flex">
                            <h5 class="m-0 pr-2 custom-border-right"><b>Orders Filter</b></h5>
                            <a href="#" class="mt-1 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">
                                <h5 class="mb-5 mt-0"><b>City</b></h5>
                                @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">
                                <h5 class="mb-5 mt-0"><b>Status</b></h5>

                                <div onclick="checkFilter(1, 'status')" id="filter-box-status-1"
                                    class="filter-box mb-3 @if (request('status') && in_array('order_pending', request('status'))) box-checked @endif">
                                    Order Pending
                                </div>
                                <input type="checkbox" value="order_pending" name="status[]" id="filter-check-status-1"
                                    class="filter-check" @if (request('status') && in_array('order_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('payment_pending', request('status'))) box-checked @endif">
                                    Payment Pending
                                </div>
                                <input type="checkbox" value="payment_pending" name="status[]" id="filter-check-status-2"
                                    class="filter-check" @if (request('status') && in_array('payment_pending', 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('delivering', request('status'))) box-checked @endif">Delivering
                                </div>
                                <input type="checkbox" value="delivering" name="status[]" id="filter-check-status-3"
                                    class="filter-check" @if (request('status') && in_array('delivering', 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('delivered', request('status'))) box-checked @endif">Delivered
                                </div>
                                <input type="checkbox" value="delivered" name="status[]" id="filter-check-status-4"
                                    class="filter-check" @if (request('status') && in_array('delivered', request('status'))) checked="checked" @endif>

                                <div onclick="checkFilter(5, 'status')" id="filter-box-status-5"
                                    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-5"
                                    class="filter-check" @if (request('status') && in_array('complete', request('status'))) checked="checked" @endif>
                            </div>
                            <div class="col s2 custom-border-right">
                                <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 s2 custom-border-right">
                                <h6><b>Payment Type</b></h6>
                                <div onclick="checkFilter(1, 'payment')" id="filter-box-payment-1"
                                    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-payment-1"
                                    class="filter-check" @if (request('payment_method') && in_array('2C2P', request('payment_method'))) checked="checked" @endif>

                                <div onclick="checkFilter(2, 'payment')" id="filter-box-payment-2"
                                    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-payment-2"
                                    class="filter-check" @if (request('payment_method') && in_array('COD', request('payment_method'))) checked="checked" @endif>
                            </div>
                            <div class="col s2">
                                <h6><b>Delivered By</b></h6>
                                <div onclick="checkFilter(1, 'delivered')" id="filter-box-delivered-1"
                                    class="filter-box mb-3 @if (request('delivered') && in_array('App\User', request('delivered'))) box-checked @endif">TOYO
                                </div>
                                <input type="checkbox" value="App\User" name="delivered[]" id="filter-check-delivered-1"
                                    class="filter-check" @if (request('delivered') && in_array('App\User', request('delivered'))) checked="checked" @endif>

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

                                {{-- <label for="users-list-status">Delivered By</label> --}}
                                {{-- <div class="input-field filter-box">
								<select id="delivered_filter" name="delivered" class="form-control" id="users-list-status">
									<option value="">Choose Agent</option>
									<option value="App\User" @if (request()->delivered && request()->delivered == 'App\User') selected @endif>TOYO</option>
									<option value="App\Merchant" @if (request()->delivered && request()->delivered == 'App\Merchant') selected @endif>Merchant</option>
								</select>
							</div> --}}
                            </div>
                            {{-- <div class="col s3 mb-3 custom-border-right pr-2">
							<h5 class="mb-5 mt-0"><b>Delivered By</b></h5>

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

							<div onclick="checkFilter(2, 'delivered')" id="filter-box-delivered-2" class="filter-box mb-3 @if (request('delivered') && in_array('App\Merchant', request('delivered'))) box-checked @endif">Delivered By Merchant</div>
							<input type="checkbox" value="App\Merchant" name="delivered[]" id="filter-check-delivered-2" class="filter-check" @if (request('delivered') && in_array('App\Merchant', request('delivered'))) 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>
        $(document).ready(function() {
            $('.modal').modal();

            $(".select2").select2({
                dropdownAutoWidth: true,
                width: '100%'
            });

            $('#city-select').on('change', function() {
                $('#city-form').submit();
            });

            $('#start_date_filter').on('change', function() {
                $('#start_date').val($(this).val());
            });

            $('#end_date_filter').on('change', function() {
                $('#end_date').val($(this).val());
            });

            $('#payment_type_filter').on('change', function() {
                $('#payment_type').val($(this).val());
            });
        });

        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');
            }
        }

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

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

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

                $.ajax({
                    type: 'GET',
                    url: `{{ route('admin.latest.customer.order.data') }}?date=${latest_date}`,
                    success: function(res) {
                        if (res) {
                            $.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 ? 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 == 'order_pending'? 'orange': (value.status == 'delivering'? 'purple': (value.status == 'delivered'? 'blue': (value.status == 'payment_pending'? 'blue-grey darken-1': 'green')))}
                                            lighten-4">
                                            <span class="
                                            ${value.status == 'order_pending'? 'orange-text': (value.status == 'delivering'? 'purple-text': (value.status == 'delivered'? 'blue-text': (value.status == 'payment_pending'? 'white-text': 'green-text'))) }
                                            ">${ value.status }</span>
                                        </span>
                                    </td>`);
                                col10 = $(`<td>
                                <div class="right" style="display:flex;align-items:center">
                                    <i class="material-icons left pt-4">
                                        <a class="blue lighten-4 border-radius-button z-depth-1" href=/admin/orders/${value.id}" style="padding: 6px 10px;">remove_red_eye</a>
                                    </i>
                                    <form action="/admin/orders/${value.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>`);
                                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