@extends('layouts.app')

@push('css_or_js')
    <link href="{{ asset('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />
@endpush

@section('css_or_js')
    <link href="{{ asset('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('title')
@endsection

@section('content')
    <!--begin::Content wrapper-->
    <div class="d-flex flex-column flex-column-fluid">

        <!--begin::Toolbar-->
        @include('layouts._toolbar-list')


        <!--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::Products-->
                <div class="card card-flush">
                    <!--begin::Card header-->
                    <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">
                                <i class="ki-duotone ki-magnifier fs-3 position-absolute ms-4"><span
                                        class="path1"></span><span class="path2"></span></i> <input type="text"
                                    data-kt-ecommerce-order-filter="search"
                                    class="form-control form-control-solid w-250px ps-12" placeholder="Search Order">
                            </div>
                            <!--end::Search-->
                        </div>
                        <!--end::Card title-->

                        <!--begin::Card toolbar-->
                        <div class="card-toolbar flex-row-fluid justify-content-end gap-5">
                            <!--begin::Flatpickr-->

                            <!--end::Flatpickr-->

                            <div class="w-100 mw-150px">
                                <!--begin::Select2-->
                                <select class="form-select form-select-solid select2-hidden-accessible"
                                    data-control="select2" data-hide-search="true" data-placeholder="Status"
                                    data-kt-ecommerce-order-filter="status" data-select2-id="select2-data-9-8ysr"
                                    tabindex="-1" aria-hidden="true" data-kt-initialized="1">
                                    <option data-select2-id="select2-data-11-7i8a"></option>
                                    <option value="all">All</option>
                                    <option value="Cancelled">Cancelled</option>
                                    <option value="Completed">Completed</option>
                                    <option value="Denied">Denied</option>
                                    <option value="Expired">Expired</option>
                                    <option value="Failed">Failed</option>
                                    <option value="Pending">Pending</option>
                                    <option value="Processing">Processing</option>
                                    <option value="Refunded">Refunded</option>
                                    <option value="Delivered">Delivered</option>
                                    <option value="Delivering">Delivering</option>
                                </select><span
                                    class="select2 select2-container select2-container--bootstrap5 select2-container--focus"
                                    dir="ltr" data-select2-id="select2-data-10-vmiw" style="width: 100%;"><span
                                        class="selection"><span
                                            class="select2-selection select2-selection--single form-select form-select-solid"
                                            role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0"
                                            aria-disabled="false" aria-labelledby="select2-itng-container"
                                            aria-controls="select2-itng-container"><span class="select2-selection__rendered"
                                                id="select2-itng-container" role="textbox" aria-readonly="true"
                                                title="Status"><span
                                                    class="select2-selection__placeholder">Status</span></span><span
                                                class="select2-selection__arrow" role="presentation"><b
                                                    role="presentation"></b></span></span></span><span
                                        class="dropdown-wrapper" aria-hidden="true"></span></span>
                                <!--end::Select2-->
                            </div>

                            <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base"
                                data-select2-id="select2-data-129-z3mr">
                                <!--begin::Filter-->


                                <button type="button" class="btn btn-light-primary me-3" data-kt-menu-trigger="click"
                                    data-kt-menu-placement="bottom-end">
                                    <i class="ki-duotone ki-filter fs-2"><span class="path1"></span><span
                                            class="path2"></span></i> Filter
                                </button>
                                <!--begin::Menu 1-->
                                <div class="menu menu-sub menu-sub-dropdown w-300px w-md-325px" data-kt-menu="true"
                                    id="kt-toolbar-filter" style="" data-select2-id="select2-data-kt-toolbar-filter">
                                    <!--begin::Header-->
                                    <div class="px-7 py-5">
                                        <div class="fs-4 text-gray-900 fw-bold">Filter Options</div>
                                    </div>
                                    <!--end::Header-->

                                    <!--begin::Separator-->
                                    <div class="separator border-gray-200"></div>
                                    <!--end::Separator-->

                                    <!--begin::Content-->
                                    <div class="px-7 py-5">
                                        <!--begin::Input group-->
                                        <div class="mb-10">
                                            <!--begin::Label-->
                                            <label class="form-label fw-semibold">Company</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <div>
                                                <select class="form-select form-select-solid select2-hidden-accessible"
                                                    multiple="" data-kt-select2="true" data-close-on-select="false"
                                                    data-placeholder="Select option"
                                                    data-dropdown-parent="#kt_menu_64b776123225e" data-allow-clear="true"
                                                    data-select2-id="select2-data-7-ih2k" tabindex="-1" aria-hidden="true"
                                                    data-kt-initialized="1">
                                                    <option></option>
                                                    <option value="1">Approved</option>
                                                    <option value="2">Pending</option>
                                                    <option value="2">In Process</option>
                                                    <option value="2">Rejected</option>
                                                </select><span
                                                    class="select2 select2-container select2-container--bootstrap5"
                                                    dir="ltr" data-select2-id="select2-data-8-jqoq"
                                                    style="width: 100%;"><span class="selection"><span
                                                            class="select2-selection select2-selection--multiple form-select form-select-solid"
                                                            role="combobox" aria-haspopup="true" aria-expanded="false"
                                                            tabindex="-1" aria-disabled="false">
                                                            <ul class="select2-selection__rendered"
                                                                id="select2-s7hq-container"></ul><span
                                                                class="select2-search select2-search--inline">
                                                                <textarea class="select2-search__field" type="search" tabindex="0" autocorrect="off" autocapitalize="none"
                                                                    spellcheck="false" role="searchbox" aria-autocomplete="list" autocomplete="off" aria-label="Search"
                                                                    aria-describedby="select2-s7hq-container" placeholder="Select option" style="width: 100%;"></textarea>
                                                            </span>
                                                        </span></span><span class="dropdown-wrapper"
                                                        aria-hidden="true"></span></span>
                                            </div>
                                            <!--end::Input-->
                                        </div>
                                        <div class="mb-10">
                                            <!--begin::Label-->
                                            <label class="form-label fw-semibold">Brand</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <div>
                                                <select class="form-select form-select-solid select2-hidden-accessible"
                                                    multiple="" data-kt-select2="true" data-close-on-select="false"
                                                    data-placeholder="Select option"
                                                    data-dropdown-parent="#kt_menu_64b776123225e" data-allow-clear="true"
                                                    data-select2-id="select2-data-7-ih2k" tabindex="-1"
                                                    aria-hidden="true" data-kt-initialized="1">
                                                    <option></option>
                                                    <option value="1">Approved</option>
                                                    <option value="2">Pending</option>
                                                    <option value="2">In Process</option>
                                                    <option value="2">Rejected</option>
                                                </select><span
                                                    class="select2 select2-container select2-container--bootstrap5"
                                                    dir="ltr" data-select2-id="select2-data-8-jqoq"
                                                    style="width: 100%;"><span class="selection"><span
                                                            class="select2-selection select2-selection--multiple form-select form-select-solid"
                                                            role="combobox" aria-haspopup="true" aria-expanded="false"
                                                            tabindex="-1" aria-disabled="false">
                                                            <ul class="select2-selection__rendered"
                                                                id="select2-s7hq-container"></ul><span
                                                                class="select2-search select2-search--inline">
                                                                <textarea class="select2-search__field" type="search" tabindex="0" autocorrect="off" autocapitalize="none"
                                                                    spellcheck="false" role="searchbox" aria-autocomplete="list" autocomplete="off" aria-label="Search"
                                                                    aria-describedby="select2-s7hq-container" placeholder="Select option" style="width: 100%;"></textarea>
                                                            </span>
                                                        </span></span><span class="dropdown-wrapper"
                                                        aria-hidden="true"></span></span>
                                            </div>
                                            <!--end::Input-->
                                        </div>
                                        <div class="mb-10">
                                            <!--begin::Label-->
                                            <label class="form-label fw-semibold">Branch</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <div>
                                                <select class="form-select form-select-solid select2-hidden-accessible"
                                                    multiple="" data-kt-select2="true" data-close-on-select="false"
                                                    data-placeholder="Select option"
                                                    data-dropdown-parent="#kt_menu_64b776123225e" data-allow-clear="true"
                                                    data-select2-id="select2-data-7-ih2k" tabindex="-1"
                                                    aria-hidden="true" data-kt-initialized="1">
                                                    <option></option>
                                                    <option value="1">Approved</option>
                                                    <option value="2">Pending</option>
                                                    <option value="2">In Process</option>
                                                    <option value="2">Rejected</option>
                                                </select><span
                                                    class="select2 select2-container select2-container--bootstrap5"
                                                    dir="ltr" data-select2-id="select2-data-8-jqoq"
                                                    style="width: 100%;"><span class="selection"><span
                                                            class="select2-selection select2-selection--multiple form-select form-select-solid"
                                                            role="combobox" aria-haspopup="true" aria-expanded="false"
                                                            tabindex="-1" aria-disabled="false">
                                                            <ul class="select2-selection__rendered"
                                                                id="select2-s7hq-container"></ul><span
                                                                class="select2-search select2-search--inline">
                                                                <textarea class="select2-search__field" type="search" tabindex="0" autocorrect="off" autocapitalize="none"
                                                                    spellcheck="false" role="searchbox" aria-autocomplete="list" autocomplete="off" aria-label="Search"
                                                                    aria-describedby="select2-s7hq-container" placeholder="Select option" style="width: 100%;"></textarea>
                                                            </span>
                                                        </span></span><span class="dropdown-wrapper"
                                                        aria-hidden="true"></span></span>
                                            </div>
                                            <!--end::Input-->
                                        </div>

                                        <!--end::Input group-->
                                        <!--begin::Input group-->
                                        <div class="mb-10">
                                            <!--begin::Label-->
                                            <label class="form-label fw-semibold">Member Type:</label>
                                            <!--end::Label-->
                                            <!--begin::Options-->
                                            <div class="d-flex">
                                                <!--begin::Options-->
                                                <label
                                                    class="form-check form-check-sm form-check-custom form-check-solid me-5">
                                                    <input class="form-check-input" type="checkbox" value="1">
                                                    <span class="form-check-label">Admin</span>
                                                </label>
                                                <!--end::Options-->
                                                <!--begin::Options-->
                                                <label class="form-check form-check-sm form-check-custom form-check-solid">
                                                    <input class="form-check-input" type="checkbox" value="2"
                                                        checked="checked">
                                                    <span class="form-check-label">Customer</span>
                                                </label>
                                                <!--end::Options-->
                                            </div>
                                            <!--end::Options-->
                                        </div>
                                        <!--end::Input group-->
                                        <!--begin::Input group-->

                                        <!--end::Input group-->
                                        <!--begin::Actions-->
                                        <div class="d-flex justify-content-end">
                                            <button type="reset"
                                                class="btn btn-sm btn-light btn-active-light-primary me-2"
                                                data-kt-menu-dismiss="true">Reset</button>
                                            <button type="submit" class="btn btn-sm btn-primary"
                                                data-kt-menu-dismiss="true">Apply</button>
                                        </div>
                                        <!--end::Actions-->
                                    </div>
                                    <!--end::Content-->
                                </div>
                                <!--end::Menu 1--> <!--end::Filter-->



                                <!--begin::Add customer-->

                                <!--end::Add customer-->
                            </div>

                            <!--begin::Add product-->
                            <a href="/metronic8/demo1/apps/ecommerce/catalog/add-product.html" class="btn btn-primary">
                                Add Order
                            </a>
                            <!--end::Add product-->
                        </div>
                        <!--end::Card toolbar-->
                    </div>
                    <!--end::Card header-->

                    <!--begin::Card body-->
                    <div class="card-body pt-0">

                        <!--begin::Table-->
                        <div id="kt_ecommerce_sales_table_wrapper" class="dt-container dt-bootstrap5 dt-empty-footer">
                            <div id="" class="table-responsive">
                                <table class="table align-middle table-row-dashed fs-6 gy-5 dataTable"
                                    id="kt_ecommerce_sales_table" style="width: 1153.5px;">
                                    <colgroup>
                                        <col style="width: 36.4px;">
                                        <col style="width: 137.667px;">
                                        <col style="width: 295.85px;">
                                        <col style="width: 118.983px;">
                                        <col style="width: 137.667px;">
                                        <col style="width: 137.667px;">
                                        <col style="width: 144.517px;">
                                        <col style="width: 144.75px;">
                                    </colgroup>
                                    <thead>
                                        <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0"
                                            role="row">
                                            <th class="min-w-100px dt-type-numeric dt-orderable-asc dt-orderable-desc"
                                                data-dt-column="1" rowspan="1" colspan="1"
                                                aria-label="Order ID: Activate to sort" tabindex="0"><span
                                                    class="dt-column-title" role="button">Order ID</span><span
                                                    class="dt-column-order"></span></th>
                                            <th data-dt-column="6" rowspan="1" colspan="1" tabindex="0"
                                                aria-label="Date Modified: Activate to sort"
                                                class="text-start min-w-250px dt-type-date dt-orderable-asc dt-orderable-desc">
                                                <span class="dt-column-title" role="button">Auction</span><span
                                                    class="dt-column-order"></span>
                                            </th>
                                            <th data-dt-column="2" rowspan="1" colspan="1"
                                                aria-label="Customer: Activate to sort" tabindex="0"
                                                class="min-w-175px dt-orderable-asc dt-orderable-desc"><span
                                                    class="dt-column-title" role="button">Customer (Winner)</span><span
                                                    class="dt-column-order"></span></th>
                                            <th data-dt-column="4" rowspan="1" colspan="1"
                                                aria-label="Total: Activate to sort" tabindex="0"
                                                class="text-center min-w-100px dt-type-numeric dt-orderable-asc dt-orderable-desc">
                                                <span class="dt-column-title" role="button">Total</span><span
                                                    class="dt-column-order"></span>
                                            </th>
                                            <th data-dt-column="5" rowspan="1" colspan="1"
                                                aria-label="Date Added: Activate to sort" tabindex="0"
                                                class="text-center min-w-100px dt-type-date dt-orderable-asc dt-orderable-desc">
                                                <span class="dt-column-title" role="button">Date Added</span><span
                                                    class="dt-column-order"></span>
                                            </th>
                                            <th data-dt-column="3" rowspan="1" colspan="1"
                                                aria-label="Status: Activate to sort" tabindex="0"
                                                class="text-center min-w-70px dt-orderable-asc dt-orderable-desc"><span
                                                    class="dt-column-title" role="button">Status</span><span
                                                    class="dt-column-order"></span></th>
                                            <th data-dt-column="7" rowspan="1" colspan="1" aria-label="Actions"
                                                class="text-center min-w-100px dt-orderable-none"><span
                                                    class="dt-column-title">Actions</span><span
                                                    class="dt-column-order"></span></th>
                                        </tr>
                                    </thead>
                                    <tbody class="fw-semibold text-gray-600">




                                        <tr>

                                            <td class="text-start dt-type-numeric"
                                                data-kt-ecommerce-order-filter="order_id">
                                                <a href="/metronic8/demo1/apps/ecommerce/sales/details.html"
                                                    class="text-gray-800 text-hover-primary fw-bold">
                                                    14773 </a>
                                            </td>
                                            <td>
                                                <!--begin::User-->
                                                <div class="d-flex align-items-center">
                                                    <!--begin::Wrapper-->
                                                    <div class="me-5 position-relative">
                                                        <!--begin::Avatar-->
                                                        <a href="#" class="symbol symbol-50px">
                                                            <span class="symbol-label"
                                                                style="background-image:url(assets/media//stock/ecommerce/1.png);"></span>
                                                        </a>
                                                        <!--end::Avatar-->

                                                        <!--begin::Online-->

                                                        <!--end::Online-->
                                                    </div>
                                                    <!--end::Wrapper-->

                                                    <!--begin::Info-->
                                                    <div class="d-flex flex-column justify-content-center">
                                                        <a href="" class="fs-6 text-gray-800 text-hover-primary">
                                                            Auction Title
                                                        </a>

                                                        <div class="fw-semibold text-gray-500">Brand / Zone</div>
                                                    </div>
                                                    <!--end::Info-->
                                                </div>
                                                <!--end::User-->
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <!--begin:: Avatar -->
                                                    <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
                                                        <a href="#">
                                                            <div class="symbol-label">
                                                                <img alt="Ethan Wilder" class="w-100"
                                                                    src="assets/media/avatars/300-21.jpg">
                                                            </div>
                                                        </a>
                                                    </div>
                                                    <!--end::Avatar-->

                                                    <div class="ms-5">
                                                        <!--begin::Title-->
                                                        <a href="/metronic8/demo1/apps/user-management/users/view.html"
                                                            class="text-gray-800 text-hover-primary fs-5 fw-bold">ibrahim
                                                            Ali</a>
                                                        <!--end::Title-->
                                                    </div>
                                                </div>
                                            </td>

                                            <td class="text-center pe-0 dt-type-numeric">
                                                <span class="fw-bold">390.00 SR</span>
                                            </td>
                                            <td data-order="2024-04-17" class="text-center dt-type-date">
                                                <span class="fw-bold">17/04/2024</span>
                                            </td>

                                            <td data-order="Refunded" class="text-center pe-0">
                                                <!--begin::Badges-->
                                                <div class="badge badge-light-info">Refunded</div>
                                                <!--end::Badges-->
                                            </td>
                                            <td class="text-center ">
                                                <a href="#"
                                                    class="btn btn-sm btn-light btn-flex btn-center btn-active-light-primary"
                                                    data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                                    Actions
                                                    <i class="ki-duotone ki-down fs-5 ms-1"></i> </a>
                                                <!--begin::Menu-->
                                                <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4"
                                                    data-kt-menu="true" style="">
                                                    <!--begin::Menu item-->
                                                    <div class="menu-item px-3">
                                                        <a class="menu-link px-3" href="/order-view">
                                                            View </a>
                                                    </div>
                                                    <!--end::Menu item-->

                                                    <!--begin::Menu item-->
                                                    <div class="menu-item px-3">
                                                        <a class="menu-link px-3" href="/order-details">
                                                            Edit
                                                        </a>
                                                    </div>
                                                    <!--end::Menu item-->

                                                    <!--begin::Menu item-->
                                                    <div class="menu-item px-3">
                                                        <a href="#" class="menu-link px-3"
                                                            data-kt-ecommerce-order-filter="delete_row">
                                                            Delete
                                                        </a>
                                                    </div>
                                                    <!--end::Menu item-->
                                                </div>
                                                <!--end::Menu-->
                                            </td>
                                        </tr>
                                        <tr>

                                            <td class="text-start dt-type-numeric"
                                                data-kt-ecommerce-order-filter="order_id">
                                                <a href="/metronic8/demo1/apps/ecommerce/sales/details.html"
                                                    class="text-gray-800 text-hover-primary fw-bold">
                                                    14773 </a>
                                            </td>
                                            <td>
                                                <!--begin::User-->
                                                <div class="d-flex align-items-center">
                                                    <!--begin::Wrapper-->
                                                    <div class="me-5 position-relative">
                                                        <!--begin::Avatar-->
                                                        <a href="#" class="symbol symbol-50px">
                                                            <span class="symbol-label"
                                                                style="background-image:url(assets/media//stock/ecommerce/1.png);"></span>
                                                        </a>
                                                        <!--end::Avatar-->

                                                        <!--begin::Online-->

                                                        <!--end::Online-->
                                                    </div>
                                                    <!--end::Wrapper-->

                                                    <!--begin::Info-->
                                                    <div class="d-flex flex-column justify-content-center">
                                                        <a href="" class="fs-6 text-gray-800 text-hover-primary">
                                                            Auction Title
                                                        </a>

                                                        <div class="fw-semibold text-gray-500">Brand / Zone</div>
                                                    </div>
                                                    <!--end::Info-->
                                                </div>
                                                <!--end::User-->
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <!--begin:: Avatar -->
                                                    <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
                                                        <a href="#">
                                                            <div class="symbol-label">
                                                                <img alt="Ethan Wilder" class="w-100"
                                                                    src="assets/media/avatars/300-1.jpg">
                                                            </div>
                                                        </a>
                                                    </div>
                                                    <!--end::Avatar-->

                                                    <div class="ms-5">
                                                        <!--begin::Title-->
                                                        <a href="/metronic8/demo1/apps/user-management/users/view.html"
                                                            class="text-gray-800 text-hover-primary fs-5 fw-bold">ibrahim
                                                            Ali</a>
                                                        <!--end::Title-->
                                                    </div>
                                                </div>
                                            </td>

                                            <td class="text-center pe-0 dt-type-numeric">
                                                <span class="fw-bold">390.00 SR</span>
                                            </td>
                                            <td data-order="2024-04-17" class="text-center dt-type-date">
                                                <span class="fw-bold">17/04/2024</span>
                                            </td>

                                            <td data-order="Refunded" class="text-center pe-0">
                                                <!--begin::Badges-->
                                                <div class="badge badge-light-info">Refunded</div>
                                                <!--end::Badges-->
                                            </td>
                                            <td class="text-center ">
                                                <a href="#"
                                                    class="btn btn-sm btn-light btn-flex btn-center btn-active-light-primary"
                                                    data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                                    Actions
                                                    <i class="ki-duotone ki-down fs-5 ms-1"></i> </a>
                                                <!--begin::Menu-->
                                                <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4"
                                                    data-kt-menu="true" style="">
                                                    <!--begin::Menu item-->
                                                    <div class="menu-item px-3">
                                                        <a class="menu-link px-3" href="/order-view">
                                                            View </a>
                                                    </div>
                                                    <!--end::Menu item-->

                                                    <!--begin::Menu item-->
                                                    <div class="menu-item px-3">
                                                        <a class="menu-link px-3" href="/order-details">
                                                            Edit
                                                        </a>
                                                    </div>
                                                    <!--end::Menu item-->

                                                    <!--begin::Menu item-->
                                                    <div class="menu-item px-3">
                                                        <a href="#" class="menu-link px-3"
                                                            data-kt-ecommerce-order-filter="delete_row">
                                                            Delete
                                                        </a>
                                                    </div>
                                                    <!--end::Menu item-->
                                                </div>
                                                <!--end::Menu-->
                                            </td>
                                        </tr>
                                        <tr>

                                            <td class="text-start dt-type-numeric"
                                                data-kt-ecommerce-order-filter="order_id">
                                                <a href="/metronic8/demo1/apps/ecommerce/sales/details.html"
                                                    class="text-gray-800 text-hover-primary fw-bold">
                                                    14773 </a>
                                            </td>
                                            <td>
                                                <!--begin::User-->
                                                <div class="d-flex align-items-center">
                                                    <!--begin::Wrapper-->
                                                    <div class="me-5 position-relative">
                                                        <!--begin::Avatar-->
                                                        <a href="#" class="symbol symbol-50px">
                                                            <span class="symbol-label"
                                                                style="background-image:url(assets/media//stock/ecommerce/1.png);"></span>
                                                        </a>
                                                        <!--end::Avatar-->

                                                        <!--begin::Online-->

                                                        <!--end::Online-->
                                                    </div>
                                                    <!--end::Wrapper-->

                                                    <!--begin::Info-->
                                                    <div class="d-flex flex-column justify-content-center">
                                                        <a href="" class="fs-6 text-gray-800 text-hover-primary">
                                                            Auction Title
                                                        </a>

                                                        <div class="fw-semibold text-gray-500">Brand / Zone</div>
                                                    </div>
                                                    <!--end::Info-->
                                                </div>
                                                <!--end::User-->
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <!--begin:: Avatar -->
                                                    <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
                                                        <a href="#">
                                                            <div class="symbol-label">
                                                                <img alt="Ethan Wilder" class="w-100"
                                                                    src="assets/media/avatars/300-23.jpg">
                                                            </div>
                                                        </a>
                                                    </div>
                                                    <!--end::Avatar-->

                                                    <div class="ms-5">
                                                        <!--begin::Title-->
                                                        <a href="/metronic8/demo1/apps/user-management/users/view.html"
                                                            class="text-gray-800 text-hover-primary fs-5 fw-bold">ibrahim
                                                            Ali</a>
                                                        <!--end::Title-->
                                                    </div>
                                                </div>
                                            </td>

                                            <td class="text-center pe-0 dt-type-numeric">
                                                <span class="fw-bold">390.00 SR</span>
                                            </td>
                                            <td data-order="2024-04-17" class="text-center dt-type-date">
                                                <span class="fw-bold">17/04/2024</span>
                                            </td>

                                            <td data-order="Refunded" class="text-center pe-0">
                                                <!--begin::Badges-->
                                                <div class="badge badge-light-info">Refunded</div>
                                                <!--end::Badges-->
                                            </td>
                                            <td class="text-center ">
                                                <a href="#"
                                                    class="btn btn-sm btn-light btn-flex btn-center btn-active-light-primary"
                                                    data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                                    Actions
                                                    <i class="ki-duotone ki-down fs-5 ms-1"></i> </a>
                                                <!--begin::Menu-->
                                                <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4"
                                                    data-kt-menu="true" style="">
                                                    <!--begin::Menu item-->
                                                    <div class="menu-item px-3">
                                                        <a class="menu-link px-3" href="/order-view">
                                                            View </a>
                                                    </div>
                                                    <!--end::Menu item-->

                                                    <!--begin::Menu item-->
                                                    <div class="menu-item px-3">
                                                        <a class="menu-link px-3" href="/order-details">
                                                            Edit
                                                        </a>
                                                    </div>
                                                    <!--end::Menu item-->

                                                    <!--begin::Menu item-->
                                                    <div class="menu-item px-3">
                                                        <a href="#" class="menu-link px-3"
                                                            data-kt-ecommerce-order-filter="delete_row">
                                                            Delete
                                                        </a>
                                                    </div>
                                                    <!--end::Menu item-->
                                                </div>
                                                <!--end::Menu-->
                                            </td>
                                        </tr>
                                        <tr>

                                            <td class="text-start dt-type-numeric"
                                                data-kt-ecommerce-order-filter="order_id">
                                                <a href="/metronic8/demo1/apps/ecommerce/sales/details.html"
                                                    class="text-gray-800 text-hover-primary fw-bold">
                                                    14773 </a>
                                            </td>
                                            <td>
                                                <!--begin::User-->
                                                <div class="d-flex align-items-center">
                                                    <!--begin::Wrapper-->
                                                    <div class="me-5 position-relative">
                                                        <!--begin::Avatar-->
                                                        <a href="#" class="symbol symbol-50px">
                                                            <span class="symbol-label"
                                                                style="background-image:url(assets/media//stock/ecommerce/1.png);"></span>
                                                        </a>
                                                        <!--end::Avatar-->

                                                        <!--begin::Online-->

                                                        <!--end::Online-->
                                                    </div>
                                                    <!--end::Wrapper-->

                                                    <!--begin::Info-->
                                                    <div class="d-flex flex-column justify-content-center">
                                                        <a href="" class="fs-6 text-gray-800 text-hover-primary">
                                                            Auction Title
                                                        </a>

                                                        <div class="fw-semibold text-gray-500">Brand / Zone</div>
                                                    </div>
                                                    <!--end::Info-->
                                                </div>
                                                <!--end::User-->
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <!--begin:: Avatar -->
                                                    <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
                                                        <a href="#">
                                                            <div class="symbol-label">
                                                                <img alt="Ethan Wilder" class="w-100"
                                                                    src="assets/media/avatars/300-1.jpg">
                                                            </div>
                                                        </a>
                                                    </div>
                                                    <!--end::Avatar-->

                                                    <div class="ms-5">
                                                        <!--begin::Title-->
                                                        <a href="/metronic8/demo1/apps/user-management/users/view.html"
                                                            class="text-gray-800 text-hover-primary fs-5 fw-bold">ibrahim
                                                            Ali</a>
                                                        <!--end::Title-->
                                                    </div>
                                                </div>
                                            </td>

                                            <td class="text-center pe-0 dt-type-numeric">
                                                <span class="fw-bold">390.00 SR</span>
                                            </td>
                                            <td data-order="2024-04-17" class="text-center dt-type-date">
                                                <span class="fw-bold">17/04/2024</span>
                                            </td>

                                            <td data-order="Refunded" class="text-center pe-0">
                                                <!--begin::Badges-->
                                                <div class="badge badge-light-info">Refunded</div>
                                                <!--end::Badges-->
                                            </td>
                                            <td class="text-center ">
                                                <a href="#"
                                                    class="btn btn-sm btn-light btn-flex btn-center btn-active-light-primary"
                                                    data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                                    Actions
                                                    <i class="ki-duotone ki-down fs-5 ms-1"></i> </a>
                                                <!--begin::Menu-->
                                                <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4"
                                                    data-kt-menu="true" style="">
                                                    <!--begin::Menu item-->
                                                    <div class="menu-item px-3">
                                                        <a class="menu-link px-3" href="/order-view">
                                                            View </a>
                                                    </div>
                                                    <!--end::Menu item-->

                                                    <!--begin::Menu item-->
                                                    <div class="menu-item px-3">
                                                        <a class="menu-link px-3" href="/order-details">
                                                            Edit
                                                        </a>
                                                    </div>
                                                    <!--end::Menu item-->

                                                    <!--begin::Menu item-->
                                                    <div class="menu-item px-3">
                                                        <a href="#" class="menu-link px-3"
                                                            data-kt-ecommerce-order-filter="delete_row">
                                                            Delete
                                                        </a>
                                                    </div>
                                                    <!--end::Menu item-->
                                                </div>
                                                <!--end::Menu-->
                                            </td>
                                        </tr>
                                    </tbody>
                                    <tfoot></tfoot>
                                </table>
                            </div>
                            <div id="" class="row">
                                <div id=""
                                    class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start dt-toolbar">
                                    <div><select name="kt_ecommerce_sales_table_length"
                                            aria-controls="kt_ecommerce_sales_table"
                                            class="form-select form-select-solid form-select-sm" id="dt-length-1">
                                            <option value="10">10</option>
                                            <option value="25">25</option>
                                            <option value="50">50</option>
                                            <option value="100">100</option>
                                        </select><label for="dt-length-1"></label></div>
                                </div>
                                <div id=""
                                    class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end">
                                    <div class="dt-paging paging_simple_numbers">
                                        <ul class="pagination">
                                            <li class="dt-paging-button page-item disabled"><a class="page-link previous"
                                                    aria-controls="kt_ecommerce_sales_table" aria-disabled="true"
                                                    aria-label="Previous" data-dt-idx="previous" tabindex="-1"><i
                                                        class="previous"></i></a></li>
                                            <li class="dt-paging-button page-item active"><a href="#"
                                                    class="page-link" aria-controls="kt_ecommerce_sales_table"
                                                    aria-current="page" data-dt-idx="0" tabindex="0">1</a></li>
                                            <li class="dt-paging-button page-item"><a href="#" class="page-link"
                                                    aria-controls="kt_ecommerce_sales_table" data-dt-idx="1"
                                                    tabindex="0">2</a></li>
                                            <li class="dt-paging-button page-item"><a href="#" class="page-link"
                                                    aria-controls="kt_ecommerce_sales_table" data-dt-idx="2"
                                                    tabindex="0">3</a></li>
                                            <li class="dt-paging-button page-item"><a href="#" class="page-link"
                                                    aria-controls="kt_ecommerce_sales_table" data-dt-idx="3"
                                                    tabindex="0">4</a></li>
                                            <li class="dt-paging-button page-item"><a href="#" class="page-link"
                                                    aria-controls="kt_ecommerce_sales_table" data-dt-idx="4"
                                                    tabindex="0">5</a></li>
                                            <li class="dt-paging-button page-item"><a href="#"
                                                    class="page-link next" aria-controls="kt_ecommerce_sales_table"
                                                    aria-label="Next" data-dt-idx="next" tabindex="0"><i
                                                        class="next"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--end::Table-->
                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Products-->
            </div>
            <!--end::Content container-->
        </div>


        <!--end::Content-->
    </div>
    <!--end::Content wrapper-->
@endsection

@section('custom')
    <!--begin::Vendors Javascript(used for this page only)-->
    <script src="{{ asset('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
    <!--end::Vendors Javascript-->


    <!--begin::Custom Javascript(used for this page only)-->
    <script src="{{ asset('assets/js/custom/apps/ecommerce/catalog/products.js') }}"></script>
    <script src="{{ asset('assets/js/widgets.bundle.js') }}"></script>
    <script src="{{ asset('assets/js/custom/widgets.js') }}"></script>
    <script src="{{ asset('assets/js/custom/apps/chat/chat.js') }}"></script>
    <script src="{{ asset('assets/js/custom/utilities/modals/upgrade-plan.js') }}"></script>
    <script src="{{ asset('assets/js/custom/utilities/modals/create-app.js') }}"></script>
    <script src="{{ asset('assets/js/custom/utilities/modals/users-search.js') }}"></script>

    <!--end::Custom Javascript-->
@endsection