@extends('layouts.app')
@section('content')
    <!--begin::Content wrapper-->
    <div class="d-flex flex-column flex-column-fluid">
        <!--begin::Toolbar-->
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <!--begin::Toolbar container-->
            <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                <!--begin::Page title-->
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <!--begin::Title-->
                    <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                        {{ $title }}</h1>
                    <!--end::Title-->
                    <!--begin::Breadcrumb-->
                    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('dashboard') }}" class="text-muted text-hover-primary">Home</a>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-hover-primary text-muted">Order Management</li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-hover-primary text-muted">Customers</li>
                        <!--end::Item-->
                    </ul>
                    <!--end::Breadcrumb-->
                </div>
                <!--end::Page title-->
            </div>
            <!--end::Toolbar container-->
        </div>
        <!--end::Toolbar-->
        <!--begin::Content-->
        <div id="kt_app_content" class="app-content flex-column-fluid">
            <!--begin::Content container-->
            <div id="kt_app_content_container" class="app-container container-xxl">
                <!--begin::Card-->
                <div class="card">
                    <!--begin::Card header-->
                    <form action="{{ route('order.order-list') }}" method="get">
                        <div class="card-header align-items-center py-5 gap-2 gap-md-5">
                            <!--begin::Card title-->
                            <div class="card-title">
                                <!--begin::Search-->
                                <div class="d-flex align-items-center position-relative my-1">
                                    <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
                                    <span class="svg-icon svg-icon-1 position-absolute ms-4">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2"
                                                rx="1" transform="rotate(45 17.0365 15.1223)" fill="currentColor" />
                                            <path
                                                d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
                                                fill="currentColor" />
                                        </svg>
                                    </span>
                                    <!--end::Svg Icon-->
                                    <input type="text" data-kt-user-table-filter="search"
                                        class="form-control form-control-solid w-250px ps-14"
                                        placeholder="Search By Retailer" name="searchterm"
                                        value="@if (isset($request->searchterm) && $request->searchterm != null) {{ $request->searchterm }} @endif" />
                                </div>
                            </div>

                            <div class="card-toolbar flex-row-fluid justify-content-end gap-5">
                                <input type="hidden" id="date_arr"
                                    value="@if (isset($request->dateSearch)) {{ $request->dateSearch }} @endif">
                                {{-- <input type="text" id="end_date" value="@if (isset($end_date))
                                {{ $end_date }}
                            @endif"> --}}
                                <!--begin::Daterangepicker-->
                                <input class="form-control form-control-solid w-100 mw-250px" placeholder="Pick date range"
                                    name="dateSearch" id="kt_ecommerce_report_views_daterangepicker"
                                    value="@if (isset($request->dateSearch) && $request->dateSearch != null) {{ $request->dateSearch }} @endif" />
                                <!--end::Daterangepicker-->
                                <!--begin::Filter-->
                                <div class="w-150px">
                                    <!--begin::Select2-->
                                    <select class="form-select form-select-solid" data-control="select2"
                                        data-hide-search="true" name="orderStatusSearch">
                                        <option value="">Order Status</option>
                                        <option value="all" @if (isset($request->orderStatusSearch) && $request->orderStatusSearch == 'all') {{ 'selected' }} @endif>
                                            All</option>
                                        <option value="1" @if (isset($request->orderStatusSearch) && $request->orderStatusSearch == '1') {{ 'selected' }} @endif>
                                            Ongoing</option>
                                        <option value="2" @if (isset($request->orderStatusSearch) && $request->orderStatusSearch == '2') {{ 'selected' }} @endif>
                                            Completed</option>
                                        <option value="3" @if (isset($request->orderStatusSearch) && $request->orderStatusSearch == '3') {{ 'selected' }} @endif>
                                            Cancelled</option>
                                    </select>
                                    <!--end::Select2-->
                                </div>
                                <!--end::Filter-->
                                <button class="btn btn-success search_retailer" type="submit" title="Search">
                                    <span class="fas fa-search"></span>
                                </button>
                                <a class="btn btn-warning refresh-page" href="{{ route('order.order-list') }}">
                                    <span class="fa fa-arrow-right-rotate"></span>
                                </a>
                            </div>
                        </div>
                    </form>
                    <!--end::Card header-->

                    <!--begin::Card body-->
                    <div class="card-body py-4">
                        <!--begin::Table-->
                        {{-- <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_users"> --}}
                        <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_users">
                            <!--begin::Table head-->
                            <thead>
                                <!--begin::Table row-->
                                <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                    <th>Id</th>
                                    <th>Retailer</th>
                                    <th>Company</th>
                                    <th>Phone</th>
                                    <th>Total Price</th>
                                    <th>Payment Type</th>
                                    <th>Order Status</th>
                                    <th class="text-end min-w-100px">Action</th>
                                </tr>
                                <!--end::Table row-->
                            </thead>
                            <!--end::Table head-->
                            <!--begin::Table body-->
                            <tbody class="text-gray-600 fw-semibold">
                                @if (!empty($orders) && $orders->count())
                                    @foreach ($orders as $key => $orderItem)
                                        <tr>
                                            <td>{{ $orderItem->order?->retailer?->application_no }}</td>
                                            <!--begin::User=-->
                                            <td class="d-flex align-items-center">
                                                @if ($orderItem->order->retailer?->image == null)
                                                    <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
                                                        <img class="symbol-label fs-3 bg-light-danger text-danger"
                                                            src="{{ asset('assets/media/avatars/blank.png') }}">
                                                    </div>
                                                @else
                                                    <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
                                                        <img class="symbol-label fs-3 bg-light-danger text-danger"
                                                            src="{{ asset('storage/user_image/' . $orderItem->order->retailer?->image) }}">
                                                    </div>
                                                @endif
                                                <!--end::Avatar-->
                                                <!--begin::User details-->
                                                <div class="d-flex flex-column">
                                                    <span
                                                        class="text-gray-800 text-hover-primary mb-1">{{ $orderItem->order->retailer?->first_name . ' ' . $orderItem->order->retailer?->last_name }}</span>
                                                    <span>{{ $orderItem->order->retailer?->email ?? '-' }}</span>
                                                </div>
                                            </td>
                                            <!--end::User=-->
                                            <td>
                                                {{ $orderItem->order->retailer?->company_name ?? '-' }}
                                            </td>
                                            <td>
                                                <div class="badge badge-light fw-bold">
                                                    {{ $orderItem->order->retailer?->phone ?? '-' }}
                                            </td>
                                            <td>{{ $orderItem->order->total_price }}</td>
                                            <td>{{ !empty($orderItem->order->payment_type) ? $orderItem->order->payment_type : 'NA' }}
                                            </td>
                                            <td>{{ !empty($orderItem->order->status) ? ($orderItem->order->status == 1 ? 'Onging' : ($orderItem->order->status == 2 ? 'Completed' : ($orderItem->order->status == 3 ? 'Cancelled' : 'NA'))) : 'NA' }}
                                            </td>
                                            <td class="text-end">
                                                @if ($orderItem->order->status != 3)
                                                    <button
                                                        class="btn btn-icon btn-active-light-primary w-30px h-30px me-3 change-order-status"
                                                        data-order-id="{{ $orderItem->order->id }}"
                                                        data-order-delivery-status="{{ $orderItem->order->delivery_status ?? '' }}"
                                                        data-status="{{ $orderItem->order->status ?? '0' }}">
                                                        <!--begin::Svg Icon | path: icons/duotune/finance/fin002.svg-->
                                                        <span class="svg-icon svg-icon-2">
                                                            <svg width="24" height="24" stroke-width="1.5"
                                                                viewBox="0 0 24 24" fill="none"
                                                                xmlns="http://www.w3.org/2000/svg">
                                                                <path
                                                                    d="M8 19C9.10457 19 10 18.1046 10 17C10 15.8954 9.10457 15 8 15C6.89543 15 6 15.8954 6 17C6 18.1046 6.89543 19 8 19Z"
                                                                    stroke="currentColor" stroke-miterlimit="1.5"
                                                                    stroke-linecap="round" stroke-linejoin="round" />
                                                                <path
                                                                    d="M18 19C19.1046 19 20 18.1046 20 17C20 15.8954 19.1046 15 18 15C16.8954 15 16 15.8954 16 17C16 18.1046 16.8954 19 18 19Z"
                                                                    stroke="currentColor" stroke-miterlimit="1.5"
                                                                    stroke-linecap="round" stroke-linejoin="round" />
                                                                <path d="M10.05 17H15V6.6C15 6.26863 14.7314 6 14.4 6H1"
                                                                    stroke="currentColor" stroke-linecap="round" />
                                                                <path d="M5.65 17H3.6C3.26863 17 3 16.7314 3 16.4V11.5"
                                                                    stroke="currentColor" stroke-linecap="round" />
                                                                <path d="M2 9L6 9" stroke="currentColor"
                                                                    stroke-linecap="round" stroke-linejoin="round" />
                                                                <path
                                                                    d="M15 9H20.6101C20.8472 9 21.0621 9.13964 21.1584 9.35632L22.9483 13.3836C22.9824 13.4604 23 13.5434 23 13.6273V16.4C23 16.7314 22.7314 17 22.4 17H20.5"
                                                                    stroke="currentColor" stroke-linecap="round" />
                                                                <path d="M15 17H16" stroke="currentColor"
                                                                    stroke-linecap="round" />
                                                            </svg>
                                                        </span>
                                                        <!--end::Svg Icon-->
                                                    </button>
                                                @endif


                                                <a href="{{ route('order.order-details', $orderItem->order->id) }}"
                                                    class="btn btn-icon btn-active-light-primary w-30px h-30px me-3 order_details"
                                                    data-order="{{ $orderItem->id }}"
                                                    data-retailer="{{ $orderItem->user_id }}">
                                                    <svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg"
                                                        x="0px" y="0px" width="100" height="100"
                                                        viewBox="0 0 48 48">
                                                        <linearGradient id="SCEoPNa7D6sFN4lrreTiea_7v84YIsL6b6N_gr1"
                                                            x1="-4.159" x2="67.384" y1="7.742" y2="49.048"
                                                            gradientUnits="userSpaceOnUse">
                                                            <stop offset="0" stop-color="#262626" stop-opacity="0">
                                                            </stop>
                                                            <stop offset="1" stop-color="#262626" stop-opacity=".8">
                                                            </stop>
                                                        </linearGradient>
                                                        <path fill="url(#SCEoPNa7D6sFN4lrreTiea_7v84YIsL6b6N_gr1)"
                                                            d="M36,42H6V12c0-3.314,2.686-6,6-6h30v30C42,39.314,39.314,42,36,42z">
                                                        </path>
                                                        <linearGradient id="SCEoPNa7D6sFN4lrreTieb_7v84YIsL6b6N_gr2"
                                                            x1="18.998" x2="37.341" y1="3.498" y2="21.841"
                                                            gradientUnits="userSpaceOnUse">
                                                            <stop offset="0" stop-color="#262626" stop-opacity="0">
                                                            </stop>
                                                            <stop offset="1" stop-color="#262626" stop-opacity=".8">
                                                            </stop>
                                                        </linearGradient>
                                                        <path fill="url(#SCEoPNa7D6sFN4lrreTieb_7v84YIsL6b6N_gr2)"
                                                            d="M21,16h14c1.657,0,3-1.343,3-3v-1H24c-1.657,0-3,1.343-3,3V16z">
                                                        </path>
                                                        <linearGradient id="SCEoPNa7D6sFN4lrreTiec_7v84YIsL6b6N_gr3"
                                                            x1="18.998" x2="37.341" y1="13.498" y2="31.841"
                                                            gradientUnits="userSpaceOnUse">
                                                            <stop offset="0" stop-color="#262626" stop-opacity="0">
                                                            </stop>
                                                            <stop offset="1" stop-color="#262626" stop-opacity=".8">
                                                            </stop>
                                                        </linearGradient>
                                                        <path fill="url(#SCEoPNa7D6sFN4lrreTiec_7v84YIsL6b6N_gr3)"
                                                            d="M21,26h14c1.657,0,3-1.343,3-3v-1H24c-1.657,0-3,1.343-3,3V26z">
                                                        </path>
                                                        <linearGradient id="SCEoPNa7D6sFN4lrreTied_7v84YIsL6b6N_gr4"
                                                            x1="18.998" x2="37.341" y1="23.498" y2="41.841"
                                                            gradientUnits="userSpaceOnUse">
                                                            <stop offset="0" stop-color="#262626" stop-opacity="0">
                                                            </stop>
                                                            <stop offset="1" stop-color="#262626" stop-opacity=".8">
                                                            </stop>
                                                        </linearGradient>
                                                        <path fill="url(#SCEoPNa7D6sFN4lrreTied_7v84YIsL6b6N_gr4)"
                                                            d="M21,36h14c1.657,0,3-1.343,3-3v-1H24c-1.657,0-3,1.343-3,3V36z">
                                                        </path>
                                                        <linearGradient id="SCEoPNa7D6sFN4lrreTiee_7v84YIsL6b6N_gr5"
                                                            x1="7.205" x2="19.073" y1="17.205" y2="29.073"
                                                            gradientUnits="userSpaceOnUse">
                                                            <stop offset="0" stop-color="#262626" stop-opacity="0">
                                                            </stop>
                                                            <stop offset="1" stop-color="#262626" stop-opacity=".8">
                                                            </stop>
                                                        </linearGradient>
                                                        <circle cx="14" cy="24" r="4"
                                                            fill="url(#SCEoPNa7D6sFN4lrreTiee_7v84YIsL6b6N_gr5)"></circle>
                                                        <linearGradient id="SCEoPNa7D6sFN4lrreTief_7v84YIsL6b6N_gr6"
                                                            x1="7.205" x2="19.073" y1="7.205" y2="19.073"
                                                            gradientUnits="userSpaceOnUse">
                                                            <stop offset="0" stop-color="#262626" stop-opacity="0">
                                                            </stop>
                                                            <stop offset="1" stop-color="#262626" stop-opacity=".8">
                                                            </stop>
                                                        </linearGradient>
                                                        <circle cx="14" cy="14" r="4"
                                                            fill="url(#SCEoPNa7D6sFN4lrreTief_7v84YIsL6b6N_gr6)"></circle>
                                                        <linearGradient id="SCEoPNa7D6sFN4lrreTieg_7v84YIsL6b6N_gr7"
                                                            x1="7.205" x2="19.073" y1="27.205" y2="39.074"
                                                            gradientUnits="userSpaceOnUse">
                                                            <stop offset="0" stop-color="#262626" stop-opacity="0">
                                                            </stop>
                                                            <stop offset="1" stop-color="#262626" stop-opacity=".8">
                                                            </stop>
                                                        </linearGradient>
                                                        <circle cx="14" cy="34" r="4"
                                                            fill="url(#SCEoPNa7D6sFN4lrreTieg_7v84YIsL6b6N_gr7)"></circle>
                                                    </svg>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="8" class="text-center">No matching records found</td>
                                    </tr>
                                @endif
                                <!--end::Table row-->
                            </tbody>
                            <!--end::Table body-->
                        </table>
                        {{ $orders->links() }}
                        <!--end::Table-->
                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Card-->

            </div>

            <!--begin::Modal - Add permissions-->
            <div class="modal fade" id="kt_modal_order_change_status" tabindex="-1" aria-hidden="true">
                <!--begin::Modal dialog-->
                <div class="modal-dialog modal-dialog-centered mw-600px">
                    <!--begin::Modal content-->
                    <div class="modal-content">
                        <!--begin::Modal header-->
                        <div class="modal-header">
                            <!--begin::Modal title-->
                            <h2 class="fw-bold">Delivery Status : <span id="delivery_status_disp"></span></h2>
                            <!--end::Modal title-->
                            <!--begin::Close-->
                            <div class="btn btn-icon btn-sm btn-active-icon-primary close-modal">
                                <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                                <span class="svg-icon svg-icon-1">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <rect opacity="0.5" x="6" y="17.3137" width="16" height="2"
                                            rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                        <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                            transform="rotate(45 7.41422 6)" fill="currentColor" />
                                    </svg>
                                </span>
                                <!--end::Svg Icon-->
                            </div>
                            <!--end::Close-->
                        </div>
                        <!--end::Modal header-->
                        <!--begin::Modal body-->
                        <div class="modal-body scroll-y mx-3 my-3">
                            <!--begin::Form-->
                            <form class="form" id="kt_modal_update_order_status"
                                data-action="{{ route('order.change-order-status') }}" method="POST">
                                @csrf
                                <div class="d-flex flex-column scroll-y me-n7 pe-7" id="kt_modal_add_quiz_topic_scroll"
                                    data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}"
                                    data-kt-scroll-max-height="auto"
                                    data-kt-scroll-dependencies="#kt_modal_add_item_header"
                                    data-kt-scroll-wrappers="#kt_modal_add_item_scroll" data-kt-scroll-offset="200px">
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <input type="hidden" name="order_id" id="order_id">
                                        <input type="hidden" name="order_status" id="order_status">

                                        <label class="required fw-semibold fs-6 mb-2">Delivery Status</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <select data-control="select2" class="form-select form-select-solid"
                                            data-hide-search="true" name="delivery_status" id="delivery_status">
                                            <option value="">Select Delivery Status</option>
                                            <option value="order_placed" id="order_placed">Order Placed</option>
                                            {{-- <option value="on_process" id="on_process">On Process</option>
                                            <option value="out_for_delivery" id="out_for_delivery">Out For Delivery
                                            </option> --}}
                                            <option value="invoiced" id="invoiced">Invoiced</option>
                                            {{-- <option value="">Cancel</option> --}}
                                        </select>
                                        <!--end::Input-->
                                    </div>
                                    <!--begin::Input group-->
                                    <div class="text-center pt-15">
                                        <button type="reset" class="btn btn-light me-3 close-modal">Discard</button>
                                        <button type="submit" id="order-status-submit" class="btn btn-primary"
                                            data-kt-pilldrop-modal-action="submit">
                                            <span class="indicator-label">Submit</span>
                                            <span class="indicator-progress">Please wait...
                                                <span
                                                    class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                        </button>
                                    </div>
                                </div>
                            </form>
                            <!--end::Form-->
                        </div>
                        <!--end::Modal body-->
                    </div>
                    <!--end::Modal content-->
                </div>
                <!--end::Modal dialog-->
            </div>
        </div>
        <!--end::Content-->
    </div>
    <!--end::Content wrapper-->
@endsection
@push('script')
    <script src="{{ asset('assets/js/order/order.js') }}"></script>
    <script src="{{ asset('assets/js/order-list-search.js') }}"></script>
@endpush