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

{{-- Page title --}}
@section('title', 'Order Detail')
@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/page-users.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/pages/form-select2.css') }}">
@endsection


@section('content')
    <div class="section users-view">
        <div class="pb-1">
            <a class="waves-effect waves-light btn red" href="{{ route('admin.orders.index') }}"><i
                    class="material-icons left">arrow_back</i>Back</a>

        </div>
        <!-- noti view card details start -->
        <div id="modal1" class="modal">
            <form action="{{ route('admin.delivery-information.store') }}" method="POST">
                @csrf
                <div class="modal-content">
                    <div class="row" id="city">
                        <div class="col s12">
                            <label for="merchant">City</label>
                            <select class="validate" id="city_id" name="city_id" required>
                                <option value="" disabled selected>Choose your city</option>
                                @foreach ($cities as $city)
                                    <option value="{{ $city->id }}">{{ $city->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row" id="township">
                        <div class="col s12">
                            <label for="merchant">Township</label>
                            <select class="validate" id="township_id" name="township_id" required>
                                <option value="" disabled selected>Choose your city first</option>
                            </select>
                        </div>
                    </div>
                    <div class="row" id="changeMerchant">
                        <div class="col s12">
                            <label for="merchant">Merchant</label>
                            <select class="validate" id="merchant_id" name="merchant_id" required>
                                <option value="" disabled selected>Choose your twonship first</option>
                            </select>
                        </div>
                    </div>
                    <input type="hidden" name="order_id" value="{{ $order->id }}">
                    <input type="hidden" name="customer_id" value="{{ $order->user->id ?? '-' }}">
                    <div class="row">
                        <div class="col s12">
                            <button type="submit"
                                class="waves-effect waves-light btn modal-trigger noti-button">Submit</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <div class="card-panel">
            <div class="row">
                <div class="col s12 m7">
                    <div class="display-flex media">
                        <a href="#" class="avatar custom-avatar">
                            @if ($order->user->image)
                                <img src="{{ url($order->user->image ?? '') }}" alt="users view avatar"
                                    class="z-depth-4 circle" height="64" width="64">
                            @else
                                <img src="{{ asset('images/profile.png') }}" alt="users view avatar"
                                    class="z-depth-4 circle" height="64" width="64">
                            @endif
                        </a>
                        <div class="media-body">
                            <h6 class="media-heading">
                                <span class="users-view-name">{{ $order->user->name ?? '-' }}</span>
                            </h6>
                            <span>Customer ID:</span>
                            <span class="users-view-id">{{ $order->user->id ?? '-' }}</span>
                        </div>
                    </div>
                </div>
                {{-- <div class="col s12 m5 quick-action-btns display-flex justify-content-end align-items-center pt-2">
				<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Change Merchants</a>
			</div> --}}
            </div>
        </div>

        <div class="card">
            <div class="card-content">
                <div class="row">
                    <div class="col s12">
                        <div style="display: flex;align-items: center">
                            <h6 class="mb-2 mt-2"><i class="material-icons">error_outline</i> Order Info</h6>

                            <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>
                        <table class="striped">
                            <tbody>
                                <tr>
                                    <td>Order ID:</td>
                                    <td>{{ $order->display_order_number }}</td>
                                </tr>
                                <tr>
                                    <td>Created Time:</td>
                                    <td>{{ $order->created_time }}</td>
                                </tr>
                                <tr>
                                    <td>Customer Name:</td>
                                    <td>{{ $order->user && $order->user->name ? $order->user->name : '-' }}</td>
                                </tr>
                                <tr>
                                    <td>Sub Total Price:</td>
                                    <td>{{ $order->sub_total ?? null }}</td>
                                </tr>
                                <tr>
                                    <td>Coupon Price:</td>
                                    <td>{{ $order->coupon_price ?? null }}</td>
                                </tr>
                                <tr>
                                    <td>Total Price:</td>
                                    <td>{{ $order->total_price }}</td>
                                </tr>
                                <tr>
                                    <td>Payment Method:</td>
                                    <td>{{ $order->payment_method }}
                                        {{ $order->payment_info_2c2p ? $order->payment_info_2c2p : '' }}</td>
                                </tr>
                                <tr>
                                    <td>Payment Type:</td>
                                    <td>{{ $order->paymentMeium->name ?? $order->paymentMeium->name }}</td>
                                </tr>
                                <tr>
                                    <td>City:</td>
                                    <td>{{ $order->address && $order->address->city ? $order->address->city->name : '-' }}
                                    </td>
                                </tr>
                                <tr>
                                    <td>Township:</td>
                                    <td>{{ $order->address && $order->address->township ? $order->address->township->name : '-' }}
                                    </td>
                                </tr>
                                <tr>
                                    <td>Status:</td>
                                    <td>
                                        <span class="chip {{ $status }} lighten-4">
                                            <span
                                                class="{{ $status == 'blue-grey darken-1' ? 'white-text' : $status . '-text' }}">{{ $order->status }}</span>
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Delivery Agent:</td>
                                    <td>{{ $order->delivery->agent->name ?? '-' }}</td>
                                </tr>
                                <tr>
                                    <td>Delivery Address</td>
                                    <td>
                                        {{ $order->address->address ?? '-' }}
                                        {{-- @if ($order->delivery_address)
										<iframe width="100%" height="170" frameborder="0" src="{{ $order->delivery_address }}"></iframe>
									@else
										-
									@endif --}}
                                    </td>
                                </tr>
                                <tr>
                                    <td>Customer Phone No</td>
                                    <td>
                                        @if ($order->user)
                                            <a
                                                href="tel:{{ $order->user->phone_number }}">{{ $order->user->phone_number ?? $order->user->phone_number }}</a>
                                        @else
                                            -
                                        @endif
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-content">
                <span class="card-title">Order Detail</span>
                <div class="responsive-table">
                    {{-- {{$orders->withQueryString()->links()}} --}}
                    <table id="users-list-datatable" class="table responsive-table">
                        <thead>
                            <tr>
                                <th></th>
                                <th>#</th>
                                <th>Proudct Type </th>
                                <th>Proudct Model </th>
                                <th>Price</th>
                                <th>Quantity</th>
                                <th>Discount Price</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($order->orderDetails as $key => $orderDetail)
                                <tr>
                                    <td></td>
                                    <td>{{ $key + 1 }}</td>
                                    <td>{{ $orderDetail->product->category->name ?? null }}</td>
                                    <td>{{ $orderDetail->product->model ?? null }}</td>
                                    <td>{{ $orderDetail->price ?? null }}</td>
                                    <td>{{ $orderDetail->quantity ?? null }}</td>
                                    <td>{{ $orderDetail->discount_price && $orderDetail->discount_price != 0? $orderDetail->discount_price: $orderDetail->price }}
                                    </td>
                                    {{-- <td><a href="{{ route('admin.orders.index') }}"><i class="material-icons">remove_red_eye</i></a></td> --}}
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7">No Order Detail Found!</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                    {{-- {{$orders->withQueryString()->links()}} --}}
                </div>
            </div>
        </div>

        <div class="row right pr-1 mb-1">
            @if (isset($assigned))
                {{-- <div class="row">
                <h5>This order is assigned for delivery</h5>
            </div> --}}
                @if ($order->status == 'order_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
            @elseif($order->status == 'order_pending')
                <div class="row">
                    <div class="col">
                        <form action="{{ route('admin.delivery-information.store') }}" method="POST">
                            @csrf
                            <input type="hidden" name="admin_id" value="{{ auth()->user()->id }}">
                            <input type="hidden" name="order_id" value="{{ $order->id }}">
                            <input type="hidden" name="customer_id" value="{{ $user_id }}">
                            <button type="submit"
                                class="green waves-effect waves-light btn modal-trigger noti-button">Accept</button>
                            {{-- <a type="button" class="green waves-effect waves-light btn modal-trigger noti-button accept-merchant" href="#modal-approve">Accept</a> --}}
                        </form>
                    </div>
                    <div class="col">
                        <a type="button" class="waves-effect waves-light btn modal-trigger noti-button change-merchant"
                            href="#modal1">Assign Merchant</a>
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection

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

@section('page-script')
    <script src="{{ asset('js/scripts/advance-ui-modals.js') }}"></script>
    <script src="{{ asset('js/scripts/form-select2.js') }}"></script>
    <script>
        $('#city_id').on('change', function() {
            var countryID = $(this).val();
            if (countryID) {
                $.ajax({
                    type: "GET",
                    url: "{{ route('admin.town-lists') }}?city_id=" + countryID,
                    success: function(res) {
                        if (res) {
                            $("#township_id").empty();
                            $("#township_id").append('<option>Select Township</option>');
                            $.each(res, function(key, value) {
                                console.log(value);
                                $("#township_id").append('<option value="' + key + '">' +
                                    value + '</option>');
                            });
                            $("#township_id").formSelect();

                        } else {
                            // $("#township").empty();
                        }
                    }
                });
            }
        });

        $('#township_id').on('change', function() {
            const townshipID = $(this).val();
            const cityID = $("#city_id").val();

            if (townshipID && cityID) {
                $.ajax({
                    type: "GET",
                    url: "{{ route('admin.area.merchants') }}?city_id=" + cityID + "&township_id=" +
                        townshipID,
                    success: function(res) {
                        if (res) {
                            $("#merchant_id").empty();
                            $("#merchant_id").append('<option>Select Merchant</option>');
                            $.each(res, function(key, value) {
                                console.log(value);
                                $("#merchant_id").append('<option value="' + key + '">' +
                                    value + '</option>');
                            });
                            $("#merchant_id").formSelect();

                        } else {
                            // $("#township").empty();
                        }
                    }
                })
            }
        })
    </script>
@endsection