@extends('layout.store_layout.master')
@section('custom_css')
@endsection
@section('content')
    <div class="card mb-7">
        <div class="card-header card-header-stretch">
            <h3 class="card-title">@lang('general.customer_profile')</h3>
            <div class="card-toolbar">
                @include('pages.store_admin.customers.sections._tabs',['itemId'=>$userId])
            </div>
        </div>
    </div>


    <!--begin::Products-->
    <div class="card card-flush">
        <!--begin::Card header-->
        <form id="search_form" action="{{request()->fullUrl()}}">
            <div class="card-header align-items-center py-5 gap-2 gap-md-5">
                <!--begin::Card title-->
                <div class="card-title">
                    <!--begin::Search-->
                    <div class="d-flex align-items-center position-relative my-1">
                        <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
                        <span class="svg-icon svg-icon-1 position-absolute ms-4">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1"
                                      transform="rotate(45 17.0365 15.1223)" fill="currentColor"/>
                                <path
                                        d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
                                        fill="currentColor"/>
                            </svg>
                        </span>
                        <!--end::Svg Icon-->

                        <input type="text" name="q" data-kt-ecommerce-product-filter="search"
                               value="{{request()->get('q')}}"
                               class="form-control form-control-solid w-250px ps-14 search-field" placeholder="@lang('general.search')"/>
                        <span>
                           <button type="submit"
                                   class="btn btn-icon btn-xs btn-light-primary me-2 search-btn">
                              <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                   xmlns="http://www.w3.org/2000/svg">
                                    <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1"
                                          transform="rotate(45 17.0365 15.1223)" fill="currentColor"/>
                                    <path
                                            d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
                                            fill="currentColor"/>
                                </svg>
                           </button>
                       </span>
                    </div>
                    <!--end::Search-->
                </div>
                <!--end::Card title-->
                <!--begin::Card toolbar-->
                <div class="card-toolbar flex-row-fluid justify-content-end gap-5">
                    <!--begin::Flatpickr-->
                    <input type="hidden" name="from" id="from_date" value="{{ request()->get('from') }}">
                    <input type="hidden" name="to" id="to_date" value="{{ request()->get('to') }}">
                    <div class="input-group w-250px" >
                        <input class="form-control form-control-solid rounded rounded-end-0" placeholder="اختر النطاق الزمني" id="order_period_flatpickr" />
                        <button class="btn btn-icon btn-light" id="order_period_flatpickr_clear">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr088.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">
                                    <rect opacity="0.5" x="7.05025" y="15.5356" width="12" height="2" rx="1" transform="rotate(-45 7.05025 15.5356)" fill="currentColor" />
                                    <rect x="8.46447" y="7.05029" width="12" height="2" rx="1" transform="rotate(45 8.46447 7.05029)" fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </button>
                    </div>
                    <!--end::Flatpickr-->
                    <div class="w-100 mw-150px">
                        <!--begin::Select2-->
                        <select name="status" id="status_filter"  class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="@lang('general.status')" >
                            <option></option>
                            <option value="all">@lang('general.all')</option>
                            @foreach($statuses as $id => $value)
                                <option value="{{$id}}" {{ request()->get('status') == $id ? 'selected' : '' }}>{{$value}}</option>
                            @endforeach
                        </select>
                        <!--end::Select2-->
                    </div>
                    <!--begin::Add product-->
                {{--<a href="#" class="btn btn-primary">اضف طلب</a>--}}
                <!--end::Add product-->
                </div>
                <!--end::Card toolbar-->
            </div>
        </form>
        <!--end::Card header-->
        <!--begin::Card body-->
        <div class="card-body pt-0">
            <!--begin::Table-->
            <table class="table text-center align-middle table-row-dashed fs-6 gy-5 mt-3" id="cs_datatable">
                <!--begin::Table head-->
                <thead>
                <!--begin::Table row-->
                <tr class=" text-gray-400 fw-bold fs-7 text-uppercase gs-0" style=" background: #f1f9ff;">
                    <th class="text-start min-w-100px">رقم الطلب</th>
                    <th class="min-w-70px">عدد منتجات الطلب</th>
                    <th class="min-w-70px">حالة الطلب</th>
                    <th class="min-w-100px">تكلفة الطلب</th>
                    <th class="min-w-100px">طريقة الدفع</th>
                    <th class="min-w-100px">تاريخ الطلب</th>
                </tr>
                <!--end::Table row-->
                </thead>
                <!--end::Table head-->
                <!--begin::Table body-->
                <tbody class="fw-semibold text-gray-600">
                @forelse($orders as $item)
                    <tr id="TR_{{$item->id}}">
                        <td class="text-start">
                            <span class="text-gray-800 text-hover-primary fw-bold">{{ $item->order_number }}</span>
                        </td>
                        <td>
                            <span class="fw-bold">{{ $item->products_count}}</span>
                        </td>
                        <td class="" >
                            {!! optional($item->storeOrderCase)->status_label !!}
                        </td>
                        <td class="">
                            <span class="fw-bold">{{ $item->total_price.' '.$item->currency }}</span>
                        </td>
                        <td class="">
                            <span class="fw-bold">{{ optional($item->paymentMethod)->name ?? '-' }}</span>
                        </td>
                        <td class="" >
                            <span class="fw-bold">{{getFormattedTime($item->created_at)}}</span>
                        </td>
                    </tr>

                @empty
                    <tr>
                        <td colspan="6" class="text-center">
                            @lang('admin.no_data_found')
                        </td>
                    </tr>
                @endforelse
                </tbody>
                <!--end::Table body-->
            </table>
            <!--end::Table-->
            @include('pages.store_admin.general_partials.custom_pagination',['items'=>$orders])
        </div>
        <!--end::Card body-->
    </div>
    <!--end::Products-->


@endsection

@section('custom_js')
    <script>
        $(document).ready(function() {
            // init flatpickr
            var order_period_flatpickr = $('#order_period_flatpickr').flatpickr({
                altInput: true,
                altFormat: "Y-m-d",
                dateFormat: "Y-m-d",
                mode: "range",
                @if(request('from') && request('to'))
                defaultDate: ['{{request('from')}}', '{{request('to')}}'],
                @endif

                onChange: function (selectedDates, dateStr, instance) {
                    // handleFlatpickr(selectedDates, dateStr, instance);
                    // do some things
                    var _this=this;
                    var dateArr=selectedDates.map(function(date){return _this.formatDate(date,'Y-m-d');});
                    $('#from_date').val(dateArr[0]);
                    if(dateArr.length > 1){
                        $('#to_date').val(dateArr[1]).change();
                    }
                },
            });
            $(document).on('click','#order_period_flatpickr_clear',function (e) {
                e.preventDefault();
                order_period_flatpickr.clear();
                $('#from_date,#to_date').val('').change();
            });
            $('#to_date,#status_filter').on('change', function () {
                $('#search_form').submit();
            });
        });
    </script>
@endsection