@extends('layout.store_layout.master')
@section('content')

    <!--begin::Order details page-->
    <div class="d-flex flex-column gap-7 gap-lg-10">
        <div class="d-flex flex-wrap flex-stack gap-5 gap-lg-10">
            <!--begin:::Tabs-->
            <ul class="nav nav-custom nav-tabs nav-line-tabs nav-line-tabs-2x border-0 fs-4 fw-semibold mb-lg-n2 me-auto">
                <!--begin:::Tab item-->
                <li class="nav-item">
                    <a class="nav-link text-active-primary pb-4 active" data-bs-toggle="tab" href="#kt_ecommerce_sales_order_summary">مخلص الطلب</a>
                </li>
                <!--end:::Tab item-->
                <!--begin:::Tab item-->
                <li class="nav-item">
                    <a class="nav-link text-active-primary pb-4" data-bs-toggle="tab" href="#kt_ecommerce_sales_order_history">حركات الطلب</a>
                </li>
                <!--end:::Tab item-->
            </ul>
            <!--end:::Tabs-->
            <!--begin::Button-->
            <a href="{{ route('admin.tailor_orders.index') }}" class="btn btn-icon btn-light btn-sm ms-auto me-lg-n7">
                <!--begin::Svg Icon | path: icons/duotune/arrows/arr074.svg-->
                <span class="svg-icon svg-icon-2">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.2657 11.4343L15.45 7.25C15.8642 6.83579 15.8642 6.16421 15.45 5.75C15.0358 5.33579 14.3642 5.33579 13.95 5.75L8.40712 11.2929C8.01659 11.6834 8.01659 12.3166 8.40712 12.7071L13.95 18.25C14.3642 18.6642 15.0358 18.6642 15.45 18.25C15.8642 17.8358 15.8642 17.1642 15.45 16.75L11.2657 12.5657C10.9533 12.2533 10.9533 11.7467 11.2657 11.4343Z" fill="currentColor" />
                    </svg>
                </span>
                <!--end::Svg Icon-->
            </a>
            <!--end::Button-->
            <!--begin::Button-->
            <a href="#cs_edit_order_status_modal"  data-bs-toggle="modal" class="btn btn-success btn-sm ">تعديل الحالة</a>
            <!--end::Button-->
            <!--begin::Button-->
            {{--<a href="#" class="btn btn-primary btn-sm">Add New Order</a>--}}
            <!--end::Button-->
        </div>
        <!--begin::Order summary-->
        <div class="d-flex flex-column flex-xl-row gap-7 gap-lg-10">
            <!--begin::Order details-->
            <div class="card card-flush py-4 flex-row-fluid">
                <!--begin::Card header-->
                <div class="card-header">
                    <div class="card-title">
                        <h2>تفاصيل الطلب (#14534)</h2>
                    </div>
                </div>
                <!--end::Card header-->
                <!--begin::Card body-->
                <div class="card-body pt-0">
                    <div class="table-responsive">
                        <!--begin::Table-->
                        <table class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                            <!--begin::Table body-->
                            <tbody class="fw-semibold text-gray-600">

                            <tr>
                                <td class="text-muted">
                                    تاريخ الاضافة
                                </td>
                                <td class="fw-bold text-end">23/11/2022 16:20:15</td>
                            </tr>
                            <!--end::Date-->
                            <!--begin::Payment method-->
                            <tr>
                                <td class="text-muted">
                                    طريقة الدفع
                                </td>
                                <td class="fw-bold text-end">فيزا كارد
                                    <img src="{{asset('')}}assets/media/svg/card-logos/visa.svg" class="w-50px ms-2" /></td>
                            </tr>
                            <!--end::Payment method-->
                            <tr>
                                <td class="text-muted">
                                    حالة الطلب
                                </td>
                                <td class="fw-bold text-center">
                                    <div class="badge badge-light-danger">ملغي</div>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-muted">
                                    سبب الرفض
                                </td>
                                <td class="fw-bold text-end">
                                    صلاحية البطاقة منهية
                                </td>
                            </tr>
                            <!--end::Rewards-->
                            {{--<tr>--}}
                                {{--<td class="text-muted">--}}
                                    {{--ملاحظات--}}
                                {{--</td>--}}
                                {{--<td class="fw-bold text-end">--}}
                                    {{--الرجاء الاتصال قبل التوجه للبيت--}}
                                {{--</td>--}}
                            {{--</tr>--}}

                            </tbody>
                            <!--end::Table body-->
                        </table>
                        <!--end::Table-->
                    </div>
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Order details-->
            <!--begin::Customer details-->
            <div class="card card-flush py-4 flex-row-fluid">
                <!--begin::Card header-->
                <div class="card-header">
                    <div class="card-title">
                        <h2>تفاصيل العميل</h2>
                    </div>
                </div>
                <!--end::Card header-->
                <!--begin::Card body-->
                <div class="card-body pt-0">
                    <div class="table-responsive">
                        <!--begin::Table-->
                        <table class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                            <!--begin::Table body-->
                            <tbody class="fw-semibold text-gray-600">
                            <!--begin::Customer name-->
                            <tr>
                                <td class="text-muted">
                                    العميل
                                </td>
                                <td class="fw-bold text-end">
                                    <div class="d-flex align-items-center justify-content-end">
                                        <!--begin:: Avatar -->
                                        <div class="symbol symbol-circle symbol-25px overflow-hidden me-3">
                                            <a href="">
                                                <div class="symbol-label">
                                                    <img src="{{asset('')}}assets/media/avatars/300-23.jpg" alt="Dan Wilson" class="w-100" />
                                                </div>
                                            </a>
                                        </div>
                                        <!--end::Avatar-->
                                        <!--begin::Name-->
                                        <a href="" class="text-gray-600 text-hover-primary">خالد احمد</a>
                                        <!--end::Name-->
                                    </div>
                                </td>
                            </tr>
                            <!--end::Customer name-->
                            <!--begin::Customer email-->
                            <tr>
                                <td class="text-muted">
                                    البريد الإلكتروني
                                </td>
                                <td class="fw-bold text-end">
                                    <a href="" class="text-gray-600 text-hover-primary">dam@consilting.com</a>
                                </td>
                            </tr>
                            <!--end::Payment method-->
                            <!--begin::Date-->
                            <tr>
                                <td class="text-muted">
                                    رقم الجوال
                                </td>
                                <td class="fw-bold text-end">+6141 234 567</td>
                            </tr>
                            <!--end::Date-->
                            </tbody>
                            <!--end::Table body-->
                        </table>
                        <!--end::Table-->
                    </div>
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Customer details-->
            <!--begin::Documents-->
            <div class="card card-flush py-4 flex-row-fluid">
                <!--begin::Card header-->
                <div class="card-header">
                    <div class="card-title">
                        <h2>تفاصيل المندوب</h2>
                    </div>
                </div>
                <!--end::Card header-->
                <!--begin::Card body-->
                <div class="card-body pt-0">
                    <div class="table-responsive">
                        <!--begin::Table-->
                        <table class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                            <!--begin::Table body-->
                            <tbody class="fw-semibold text-gray-600">
                            <tr>
                                <td class="text-muted">
                                    العميل
                                </td>
                                <td class="fw-bold text-end">
                                    <div class="d-flex align-items-center justify-content-end">
                                        <!--begin:: Avatar -->
                                        <div class="symbol symbol-circle symbol-25px overflow-hidden me-3">
                                            <a href="">
                                                <div class="symbol-label">
                                                    <img src="{{asset('')}}assets/media/avatars/300-23.jpg" alt="Dan Wilson" class="w-100" />
                                                </div>
                                            </a>
                                        </div>
                                        <!--end::Avatar-->
                                        <!--begin::Name-->
                                        <a href="" class="text-gray-600 text-hover-primary">خالد احمد</a>
                                        <!--end::Name-->
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-muted">
                                    رقم الجوال
                                </td>
                                <td class="fw-bold text-end">+6141 234 567</td>
                            </tr>
                            <tr>
                                <td class="text-muted">
                                    تاريخ الزيارة
                                </td>
                                <td class="fw-bold text-end">23/11/2022 16:20:15</td>
                            </tr>
                            <!--begin::Rewards-->
                            <tr>
                                <td class="text-muted">
                                    نوع الزيارة
                                </td>
                                <td class="fw-bold text-end">
                                    <div class="badge badge-light-info">أخذ مقاس</div>
                                </td>
                            </tr>

                            </tbody>
                            <!--end::Table body-->
                        </table>
                        <!--end::Table-->
                    </div>
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Documents-->
        </div>
        <!--end::Order summary-->
        <!--begin::Tab content-->
        <div class="tab-content">
            <!--begin::Tab pane-->
            <div class="tab-pane fade show active" id="kt_ecommerce_sales_order_summary" role="tab-panel">
                <!--begin::Orders-->
                <div class="d-flex flex-column gap-7 gap-lg-10">
                    <div class="d-flex flex-column flex-xl-row gap-7 gap-lg-10">
                        <!--begin::Payment address-->
                        <div class="card card-flush py-4 flex-row-fluid overflow-hidden">
                            <!--begin::Background-->
                            {{--<div class="position-absolute top-0 end-0 opacity-10 pe-none text-end">--}}
                                {{--<img src="{{asset('')}}assets/media/icons/duotune/ecommerce/ecm001.svg" class="w-175px" />--}}
                            {{--</div>--}}
                            <!--end::Background-->
                            <!--begin::Card header-->
                            <div class="card-header">
                                <div class="card-title">
                                    <h2>عنوان الطلب</h2>
                                </div>
                            </div>
                            <!--end::Card header-->
                            <!--begin::Card body-->
                            <div class="card-body pt-0">Unit 1/23 Hastings Road,
                                <br />Melbourne 3000,
                                <br />Victoria,
                                <br />Australia.</div>
                            <!--end::Card body-->
                        </div>
                        <!--end::Payment address-->
                        <!--begin::Shipping address-->
                        <div class="card card-flush py-4 flex-row-fluid overflow-hidden">
                            <!--begin::Background-->
                            {{--<div class="position-absolute top-0 end-0 opacity-10 pe-none text-end">--}}
                                {{--<img src="{{asset('')}}assets/media/icons/duotune/ecommerce/ecm006.svg" class="w-175px" />--}}
                            {{--</div>--}}
                            <!--end::Background-->
                            <!--begin::Card header-->
                            <div class="card-header">
                                <div class="card-title">
                                    <h2>ملاحظات الطلب</h2>
                                </div>
                            </div>
                            <!--end::Card header-->
                            <!--begin::Card body-->
                            <div class="card-body pt-0">الرجاء الاتصال قبل التوجه للبيت</div>
                            <!--end::Card body-->
                        </div>
                        <!--end::Shipping address-->
                    </div>

                    <div class="d-flex flex-column flex-xl-row gap-7 gap-lg-10">

                        <div class="card card-flush py-4 flex-row-fluid">

                            <div class="card-header">
                                <div class="card-title">
                                    <h2>بيانات التفصيل</h2>
                                </div>
                            </div>

                            <div class="card-body pt-0">
                                <div class="table-responsive">
                                    <table class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                        <tbody class="fw-semibold text-gray-600">
                                        <tr>
                                            <td class="text-muted">
                                                قسم التفصيل
                                            </td>
                                            <td class="fw-bold text-end">ثوب رسمي</td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">
                                                موديل التفصيل
                                            </td>
                                            <td class="fw-bold text-end">
                                                <div class="d-flex align-items-center justify-content-end">

                                                    <div class="me-5">
                                                        <div class="fs-7 fw-bold text-gray-600">موديل سعودي</div>
                                                    </div>
                                                    <a href="#" class="symbol symbol-50px">
                                                        <span class="symbol-label" style="background-image:url({{asset('assets/media//stock/ecommerce/1.gif')}});"></span>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">
                                                شكل الجبزور
                                            </td>
                                            <td class="fw-bold text-end">
                                                <div class="d-flex align-items-center justify-content-end">

                                                    <div class="me-5">
                                                        <div class="fs-7 fw-bold text-gray-600">شكل 1</div>
                                                    </div>
                                                    <a href="#" class="symbol symbol-50px">
                                                        <span class="symbol-label" style="background-image:url({{asset('assets/media//stock/ecommerce/1.gif')}});"></span>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">
                                                شكل الجيب
                                            </td>
                                            <td class="fw-bold text-end">
                                                <div class="d-flex align-items-center justify-content-end">

                                                    <div class="me-5">
                                                        <div class="fs-7 fw-bold text-gray-600">شكل 1</div>
                                                    </div>
                                                    <a href="#" class="symbol symbol-50px">
                                                        <span class="symbol-label" style="background-image:url({{asset('assets/media//stock/ecommerce/1.gif')}});"></span>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">
                                                شكل القبة
                                            </td>
                                            <td class="fw-bold text-end">
                                                <div class="d-flex align-items-center justify-content-end">

                                                    <div class="me-5">
                                                        <div class="fs-7 fw-bold text-gray-600">شكل 1</div>
                                                    </div>
                                                    <a href="#" class="symbol symbol-50px">
                                                        <span class="symbol-label" style="background-image:url({{asset('assets/media//stock/ecommerce/1.gif')}});"></span>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">
                                                شكل الكم
                                            </td>
                                            <td class="fw-bold text-end">
                                                <div class="d-flex align-items-center justify-content-end">

                                                    <div class="me-5">
                                                        <div class="fs-7 fw-bold text-gray-600">شكل 1</div>
                                                    </div>
                                                    <a href="#" class="symbol symbol-50px">
                                                        <span class="symbol-label" style="background-image:url({{asset('assets/media//stock/ecommerce/1.gif')}});"></span>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">
                                                شكل الجيب الجانبي
                                            </td>
                                            <td class="fw-bold text-end">
                                                <div class="d-flex align-items-center justify-content-end">

                                                    <div class="me-5">
                                                        <div class="fs-7 fw-bold text-gray-600">شكل 1</div>
                                                    </div>
                                                    <a href="#" class="symbol symbol-50px">
                                                        <span class="symbol-label" style="background-image:url({{asset('assets/media//stock/ecommerce/1.gif')}});"></span>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">
                                                أزرار الثوب
                                            </td>
                                            <td class="fw-bold text-end">
                                                <div class="d-flex align-items-center justify-content-end">

                                                    <div class="me-5">
                                                        <div class="fs-7 fw-bold text-gray-600">شكل 1</div>
                                                    </div>
                                                    <a href="#" class="symbol symbol-50px">
                                                        <span class="symbol-label" style="background-image:url({{asset('assets/media//stock/ecommerce/1.gif')}});"></span>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>

                                        </tbody>
                                        <!--end::Table body-->
                                    </table>
                                    <!--end::Table-->
                                </div>
                            </div>
                            <!--end::Card body-->
                        </div>

                        <div class="card card-flush py-4 flex-row-fluid">
                            <!--begin::Card header-->
                            <div class="card-header">
                                <div class="card-title">
                                    <h2>مقاسات الطلب</h2>
                                </div>
                            </div>
                            <!--end::Card header-->
                            <!--begin::Card body-->
                            <div class="card-body pt-0">
                                <div class="table-responsive">
                                    <!--begin::Table-->
                                    <table class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                        <!--begin::Table body-->
                                        <tbody class="fw-semibold text-gray-600">
                                        <!--begin::Customer name-->
                                        <tr>
                                            <td class="text-muted">
                                                مقاس الطول
                                            </td>
                                            <td class="fw-bold text-end">
                                                170 cm
                                            </td>
                                        </tr>
                                        <!--end::Customer name-->
                                        <!--begin::Customer email-->
                                        <tr>
                                            <td class="text-muted">
                                                مقاس عرض الكتف
                                            </td>
                                            <td class="fw-bold text-end">
                                                55 cm
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">
                                                مقاس الصدر
                                            </td>
                                            <td class="fw-bold text-end">25 cm</td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">
                                                مقاس البطن
                                            </td>
                                            <td class="fw-bold text-end">25 cm</td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">
                                                مقاس الخصر
                                            </td>
                                            <td class="fw-bold text-end">25 cm</td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">
                                                مقاس الأرداف
                                            </td>
                                            <td class="fw-bold text-end">25 cm</td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">
                                                مقاس  محيط الرقية
                                            </td>
                                            <td class="fw-bold text-end">25 cm</td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">
                                                مقاس فتحة الكم
                                            </td>
                                            <td class="fw-bold text-end">25 cm</td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">
                                                طول الكم
                                            </td>
                                            <td class="fw-bold text-end">25 cm</td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">
                                                طول الذراع
                                            </td>
                                            <td class="fw-bold text-end">25 cm</td>
                                        </tr>
                                        </tbody>
                                        <!--end::Table body-->
                                    </table>
                                    <!--end::Table-->
                                </div>
                            </div>
                            <!--end::Card body-->
                        </div>

                        <div class="card card-flush py-4 flex-row-fluid">
                            <!--begin::Card header-->
                            <div class="card-header">
                                <div class="card-title">
                                    <h2>بيانات قماش الطلب</h2>
                                </div>
                            </div>
                            <!--end::Card header-->
                            <!--begin::Card body-->
                            <div class="card-body pt-0">
                                <div class="table-responsive">
                                    <!--begin::Table-->
                                    <table class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                        <!--begin::Table body-->
                                        <tbody class="fw-semibold text-gray-600">
                                        <tr>
                                            <td class="text-muted">
                                                نوع القماش
                                            </td>
                                            <td class="fw-bold text-end">
                                                <div class="d-flex align-items-center justify-content-end">

                                                    <div class="me-5">
                                                        <div class="fs-7 fw-bold text-gray-600">قماش 1</div>
                                                    </div>
                                                    <a href="#" class="symbol symbol-50px">
                                                        <span class="symbol-label" style="background-image:url({{asset('assets/media//stock/ecommerce/1.gif')}});"></span>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">
                                                لون القماش
                                            </td>
                                            <td class="fw-bold text-end">
                                                <div class="badge badge-light-success">لون أخضر</div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">
                                                مصدر القماش
                                            </td>
                                            <td class="fw-bold text-end">المتجر</td>
                                        </tr>


                                        </tbody>
                                        <!--end::Table body-->
                                    </table>
                                    <!--end::Table-->
                                </div>
                            </div>
                            <!--end::Card body-->
                        </div>

                    </div>


                    <!--begin::Product List-->
                    <div class="card card-flush py-4 flex-row-fluid overflow-hidden">
                        <!--begin::Card header-->
                        <div class="card-header">
                            <div class="card-title">
                                <h2>البيانات المالية للطلب #14534</h2>
                            </div>
                        </div>
                        <!--end::Card header-->
                        <!--begin::Card body-->
                        <div class="card-body pt-0">
                            <div class="table-responsive">
                                <!--begin::Table-->
                                <table class="table align-middle table-row-dashed fs-6 gy-5 mb-0">
                                    <!--begin::Table head-->
                                    {{--<thead>--}}
                                    {{--<tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">--}}
                                        {{--<th class="min-w-175px">المنتج</th>--}}
                                        {{--<th class="min-w-100px text-end">خيارات المنتج</th>--}}
                                        {{--<th class="min-w-70px text-end">الكمية</th>--}}
                                        {{--<th class="min-w-100px text-end">سعر الوحدة</th>--}}
                                        {{--<th class="min-w-100px text-end">المجموع</th>--}}
                                    {{--</tr>--}}
                                    {{--</thead>--}}
                                    <!--end::Table head-->
                                    <!--begin::Table body-->
                                    <tbody class="fw-semibold text-gray-600">

                                    <!--begin::Subtotal-->
                                    <tr>
                                        <td colspan="4" class="text-end">تكلفة المنتجات قبل الضريبة</td>
                                        <td class="text-end">SAR 264.00</td>
                                    </tr>
                                    <!--end::Subtotal-->
                                    <!--begin::VAT-->
                                    <tr>
                                        <td colspan="4" class="text-end">نسبة و قيمة كوبون الخصم</td>
                                        <td class="text-end">SAR 0.00</td>
                                    </tr>
                                    <tr>
                                        <td colspan="4" class="text-end">الضريبة (0%)</td>
                                        <td class="text-end">SAR 00.00</td>
                                    </tr>
                                    <!--end::VAT-->
                                    <!--begin::Shipping-->
                                    <tr>
                                        <td colspan="4" class="text-end">تكلفة التوصيل</td>
                                        <td class="text-end">SAR 5.00</td>
                                    </tr>
                                    <!--end::Shipping-->
                                    <!--begin::Grand total-->
                                    <tr>
                                        <td colspan="4" class="fs-3 text-dark text-end">  اجمالي تكلفة الطلب بعد الضريبة</td>
                                        <td class="text-dark fs-3 fw-bolder text-end">SAR 269.00</td>
                                    </tr>
                                    <!--end::Grand total-->
                                    </tbody>
                                    <!--end::Table head-->
                                </table>
                                <!--end::Table-->
                            </div>
                        </div>
                        <!--end::Card body-->
                    </div>
                    <!--end::Product List-->

                </div>
                <!--end::Orders-->
            </div>
            <!--end::Tab pane-->
            <!--begin::Tab pane-->
            <div class="tab-pane fade" id="kt_ecommerce_sales_order_history" role="tab-panel">
                <!--begin::Orders-->
                <div class="d-flex flex-column gap-7 gap-lg-10">
                    <!--begin::Order history-->
                    <div class="card card-flush py-4 flex-row-fluid">
                        <!--begin::Card header-->
                        <div class="card-header">
                            <div class="card-title">
                                <h2>تحديثات حركات الطلب</h2>
                            </div>
                        </div>
                        <!--end::Card header-->
                        <!--begin::Card body-->
                        <div class="card-body pt-0">
                            <div class="table-responsive">
                                <!--begin::Table-->
                                <table class="table align-middle table-row-dashed fs-6 gy-5 mb-0">
                                    <!--begin::Table head-->
                                    <thead>
                                    <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                                        <th class="min-w-100px">التاريخ</th>
                                        <th class="min-w-175px">نوع و طبيعة الحركة</th>
                                        <th class="min-w-70px">حالة الطلب</th>
                                        <th class="min-w-100px">مستخدم الادارة الذي قام بالحركة</th>
                                    </tr>
                                    </thead>
                                    <!--end::Table head-->
                                    <!--begin::Table body-->
                                    <tbody class="fw-semibold text-gray-600">
                                    <tr>
                                        <!--begin::Date-->
                                        <td>23/11/2022 15:25:00</td>
                                        <!--end::Date-->
                                        <!--begin::Comment-->
                                        <td>تم اتمام الطلب</td>
                                        <!--end::Comment-->
                                        <!--begin::Status-->
                                        <td>
                                            <!--begin::Badges-->
                                            <div class="badge badge-light-success">تم التسليم</div>
                                            <!--end::Badges-->
                                        </td>
                                        <!--end::Status-->

                                        <td>محمد أحمد</td>
                                    </tr>

                                    <tr>
                                        <!--begin::Date-->
                                        <td>21/11/2022 15:25:00</td>
                                        <!--end::Date-->
                                        <!--begin::Comment-->
                                        <td>الطلب خرج من المستودع</td>
                                        <!--end::Comment-->
                                        <!--begin::Status-->
                                        <td>
                                            <!--begin::Badges-->
                                            <div class="badge badge-light-primary">قيد التوصيل</div>
                                            <!--end::Badges-->
                                        </td>
                                        <!--end::Status-->

                                        <td>محمود سعيد</td>
                                    </tr>

                                    <tr>
                                        <!--begin::Date-->
                                        <td>19/11/2022 15:25:00</td>
                                        <!--end::Date-->
                                        <!--begin::Comment-->
                                        <td>بانتظار الدفع</td>
                                        <!--end::Comment-->
                                        <!--begin::Status-->
                                        <td>
                                            <!--begin::Badges-->
                                            <div class="badge badge-light-warning">قيد الانتظار</div>
                                            <!--end::Badges-->
                                        </td>
                                        <!--end::Status-->
                                        <!--begin::Customer Notified-->
                                        <td>-</td>
                                        <!--end::Customer Notified-->
                                    </tr>

                                    <tr>
                                        <!--begin::Date-->
                                        <td>17/11/2022 15:25:00</td>
                                        <!--end::Date-->
                                        <!--begin::Comment-->
                                        <td>صلاحية البطاقة منتهية</td>
                                        <!--end::Comment-->
                                        <!--begin::Status-->
                                        <td>
                                            <!--begin::Badges-->
                                            <div class="badge badge-light-danger">ملغي</div>
                                            <!--end::Badges-->
                                        </td>
                                        <!--end::Status-->
                                        <!--begin::Customer Notified-->
                                        <td>-</td>
                                        <!--end::Customer Notified-->
                                    </tr>

                                    </tbody>
                                    <!--end::Table head-->
                                </table>
                                <!--end::Table-->
                            </div>
                        </div>
                        <!--end::Card body-->
                    </div>
                    <!--end::Order history-->

                </div>
                <!--end::Orders-->
            </div>
            <!--end::Tab pane-->
        </div>
        <!--end::Tab content-->
    </div>
    <!--end::Order details page-->

    <!--begin::Modal - edit order status-->
    <div class="modal fade" id="cs_edit_order_status_modal" tabindex="-1" aria-hidden="true">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <!--begin::Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <!--begin::Modal title-->
                    <h2>تعديل الحالة</h2>
                    <!--end::Modal title-->
                    <!--begin::Close-->
                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="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>
                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor"></rect>
                        </svg>
                    </span>
                        <!--end::Svg Icon-->
                    </div>
                    <!--end::Close-->
                </div>

                <div class="modal-body">
                    <form action="">
                        <div class="mb-10 fv-row">
                            <label class="required form-label">الحالة</label>
                            {{-- multiple="multiple" --}}
                            <select class="form-select mb-2 order_status"  data-control="select2" data-hide-search="true" data-placeholder="اختر">
                                <option></option>
                                <option value="pending">قيد الانتظار</option>
                                <option value="confirm">تم التأكيد</option>
                                <option value="working">قيد التجهيز</option>
                                <option value="delivery">قيد التوصيل</option>
                                <option value="received">تم التسليم</option>
                                <option value="canceled">ملغي</option>
                            </select>
                        </div>

                        <div class="form-group mb-10 fv-row canceled_reason" style="display: none">
                            <label class="required form-label">سبب الالغاء</label>
                            <input type="text" name="canceled_reason" class="form-control mb-2" placeholder="ادخل سبب الالغاء" value="" />
                        </div>

                        <div class="delegates" style="display: none">
                            <div class="form-group fv-row mb-10">
                                <label class="required form-label">المندوب:</label>
                                <select class="form-select" data-control="select2" data-hide-search="false" data-placeholder="الرجاء الاختيار.." data-allow-clear="false" >
                                    <option></option>
                                    <option value="1">مندوب 1</option>
                                    <option value="2">مندوب 2</option>
                                    <option value="3">مندوب 3</option>
                                </select>
                            </div>
                            <div class="form-group fv-row mb-10">
                                <label class="required form-label">ملاحظة للمندوب</label>
                                <input type="text" name="delegate_note" class="form-control mb-2" placeholder="ادخل ملاحظة" value="" />
                            </div>
                        </div>


                        <div class="justify-content-end d-flex align-items-center">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">الغاء</button>
                            <button type="button" class="btn btn-primary ms-2">حفظ</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--end::Modal - edit order status-->


@endsection

@push('custom_js')
    <script>
        $(document).ready(function () {

        });
        $(document).on('change','.order_status',function (e) {
            let _val = $(this).val();
            // console.log(_val);
            $('.modal .canceled_reason, .modal .delegates').slideUp();
            if(_val == 'canceled'){
                $('.modal .canceled_reason').slideDown();            }
            else if(_val == 'received'){
                $('.modal .delegates').slideDown();
            }else{
                $('.modal .canceled_reason').slideUp();
            }
        });
    </script>
@endpush