@extends('layout.store_layout.master')
@section('content')
<!--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-->
        <form action="{{route('admin.support.index')}}" id="search_form" method="get">
        <div class="card-title">
            <!--begin::Search-->
            <div class="d-flex align-items-center position-relative my-1 ms-3">
                <!--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="search_name" class="search-btn form-control form-control-solid w-250px ps-14" placeholder="بحث حسب اسم العميل" />


            </div>
            <div class="d-flex align-items-center position-relative my-1 ms-3">
                <!--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="search_mobile" class="search-btn form-control form-control-solid w-250px ps-14" placeholder="بحث حسب رقم الجوال" />


            </div>
            <div class="d-flex align-items-center position-relative my-1 ms-3">
                <!--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="search_title" class="search-btn form-control form-control-solid w-250px ps-14" placeholder="بحث حسب عنوان الرسالة" />

            </div>
            <!--end::Search-->
        </div>
        </form>

        <!--end::Card title-->
        <!--begin::Card toolbar-->
        <div class="card-toolbar ">
            {{--flex-row-fluid justify-content-end gap-5--}}
            <div class="d-flex justify-content-end base" data-kt-ratings-table-toolbar="base">

                <div class="w-100 mw-200px">
                    <button type="button" class="btn btn-light me-3 mw-mc" data-bs-toggle="collapse" data-bs-target="#extra_filter" aria-expanded="false" aria-controls="extra_filter">
                        <!--begin::Svg Icon | path: icons/duotune/general/gen031.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="M19.0759 3H4.72777C3.95892 3 3.47768 3.83148 3.86067 4.49814L8.56967 12.6949C9.17923 13.7559 9.5 14.9582 9.5 16.1819V19.5072C9.5 20.2189 10.2223 20.7028 10.8805 20.432L13.8805 19.1977C14.2553 19.0435 14.5 18.6783 14.5 18.273V13.8372C14.5 12.8089 14.8171 11.8056 15.408 10.964L19.8943 4.57465C20.3596 3.912 19.8856 3 19.0759 3Z" fill="currentColor" />
                                    </svg>
                                </span>
                        <!--end::Svg Icon-->
                        @lang('general.filter')
                    </button>
                </div>


            </div>
            <!--begin::Group actions-->
            <div class="d-flex justify-content-end align-items-center d-none" data-kt-ratings-table-toolbar="selected">
                <div class="fw-bold me-5 text-nowrap">
                    <span class="me-2" data-kt-ratings-table-select="selected_count"></span> @lang('general.selected')
                </div>
                <button type="button" class="btn btn-danger text-nowrap" data-kt-ratings-table-select="delete_selected">@lang('general.delete_selected')</button>

            </div>
            <!--end::Group actions-->

        </div>
        <div class=" py-4 base accordion-collapse collapse w-100" id="extra_filter"  >
            <div class="border p-3">
                <form action="{{route('admin.support.index')}}" method="get">
                    <div class="row d-flex justify-content-end">
                        <div class="col-md-3">
                            <div class="mb-10 fv-row">
                                <label class="form-label fs-5 fw-semibold m-3">الفترة الزمنية :</label>
                                <div class="input-group min-w-250px">
                                    <input class="form-control form-control-solid rounded rounded-end-0" name="from_date" placeholder="اختر الفترة الزمنية" id="from_date_flatpickr" />
                                    <button class="btn btn-icon btn-light" id="from_date_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>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="mw-150px me-3">
                                <label class="form-label fs-5 fw-semibold m-3">حالة الرؤية</label>
                                <!--begin::Select2-->
                                <select class="form-select form-select-solid" name="status_filter" data-control="select2" data-hide-search="true" data-placeholder="الحالة">
                                    <option></option>
                                    <option value="all">الكل</option>
                                    <option value="seen">مقروء</option>
                                    <option value="not_seen">غير مقروء</option>
                                </select>
                                <!--end::Select2-->
                            </div>
                        </div>

                    </div>
                    <div class="d-flex justify-content-end border-top-1 border p-3">
                        <button class="btn btn-light-primary" type="submit">@lang('general.apply')</button>
                    </div>
                </form>

            </div>

        </div>
        <!--end::Card toolbar-->
    </div>
    <!--end::Card header-->
    <!--begin::Card body-->
    <div class="card-body pt-0">
        <!--begin::Table-->
        <table class="table align-middle table-row-dashed fs-6 gy-5" id="cs_datatable">
            <!--begin::Table head-->
            <thead>
            <!--begin::Table row-->
            <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                <th class="w-10px pe-2">
                    <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                        <input class="form-check-input" type="checkbox" data-kt-check="true" data-kt-check-target="#cs_datatable .form-check-input.selector" value="1" />
                    </div>
                </th>
                <th class="min-w-150px">العميل</th>
                <th class="min-w-100px">الجوال</th>
                <th class="min-w-100px">عنوان الرسالة</th>
                <th class="min-w-100px">نص الرسالة</th>
                <th class=" min-w-125px">تاريخ الارسال</th>
                <th class=" min-w-70px">حالة الرؤية</th>
                <th class=" min-w-70px">حالة الرد</th>
                <th class=" min-w-70px">العمليات</th>
            </tr>
            <!--end::Table row-->
            </thead>
            <!--end::Table head-->
            <!--begin::Table body-->
            <tbody class="fw-semibold text-gray-600">

                @foreach($contacts_mssgs as $mssg)