@extends('layout.store_layout.master')
@section('content')
<!--begin::Products-->
<div class="card card-flush">
    <!--begin::Card header-->
    <form id="search_form" action="{{request()->fullUrl()}}">
        <div class="card-header pt-6">
            <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>
            <!--begin::Card title-->

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

                <div class="w-100 mw-100px" style="max-width: 109px!important;">
                    <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 class="w-100 mw-150px">
                    <a href="#" class="form-select form-select-solid text-nowrap" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                        @lang('admin.procedures')
                    </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-175px  py-4" data-kt-menu="true">
                        <div class="menu-item px-3">
                            <a href="javascript:;" class="menu-link px-3 DoAction"
                               data-url="{{route('admin.support.status')}}"
                               data-status="1"
                               data-token="{{  csrf_token() }}">
                                <i class="fas fa-unlock fs-8"></i>
                                <span class="px-3">@lang('admin.seen')</span>
                            </a>
                        </div>
                        <div class="menu-item px-3">
                            <a href="javascript:;" class="menu-link px-3 DoAction"
                               data-url="{{route('admin.support.status')}}"
                               data-status="0"
                               data-token="{{  csrf_token() }}">
                                <i class="fas fa-lock  fs-8"></i>
                                <span class="px-3">@lang('admin.not_seen')</span>
                            </a>
                        </div>
                        <div class="menu-item px-3">
                            <a href="javascript:;" class="menu-link px-3 DoAction"
                               data-url="{{route('admin.support.delete')}}"
                               data-token="{{  csrf_token() }}">
                                <i class="fas fa-trash  fs-8"></i>
                                <span class="px-3">@lang('admin.delete')</span>
                            </a>
                        </div>
                    </div>
                    <!--end::Menu-->
                </div>


                <!--begin::Toolbar-->
            </div>
            <!--end::Card toolbar-->
            <!--extra filter-->
            <div class="w-100 py-4 base accordion-collapse collapse" id="extra_filter"  >
                <div class="border p-3">
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="mb-10 fv-row">
                                <label class="form-label fs-5 fw-semibold m-3">@lang('admin.seen_status')</label>
                                <!--begin::Select2-->
                                @php $status = request()->get('seen_status','all') @endphp
                                <select class="form-select form-select-solid s-2" name="seen_status" data-control="select2" data-hide-search="true" data-placeholder="@lang('general.select_status')">
                                    <option value="all" selected >@lang('general.all')</option>
                                    <option value="seen" {{ $status == 'seen' ? 'selected':''}}>@lang('admin.seen')</option>
                                    <option value="not_seen" {{ $status == 'not_seen' ? 'selected':''}}>@lang('admin.not_seen')</option>
                                </select>
                                <!--end::Select2-->
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="mb-10 fv-row">
                                <input type="hidden" name="from_date" value="{{request()->get('from_date')}}" id="from_date">
                                <input type="hidden" name="end_date" value="{{request()->get('end_date')}}" id="end_date">
                                <label class="form-label fs-5 fw-semibold m-3">@lang('admin.period') :</label>
                                <div class="input-group min-w-250px">
                                    <input class="form-control form-control-solid rounded rounded-end-0" placeholder="@lang('admin.select_period')" id="period_range_flatpickr" />
                                    <button class="btn btn-icon btn-light" id="period_range_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>
                    <div class="d-flex justify-content-end border-top pt-3">
                        <a href="{{ route('admin.support.index') }}" class="btn btn-light me-2">@lang('general.reset')</a>
                        <button class="btn btn-light-primary" type="submit">@lang('general.apply')</button>
                    </div>
                </div>

            </div>
        </div>
    </form>
    <!--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">@lang('admin.the_customer')</th>
                <th class="min-w-100px">@lang('admin.phone')</th>
                <th class="min-w-100px">@lang('admin.message_title')</th>
                <th class="min-w-100px">@lang('admin.message_text')</th>
                <th class=" min-w-125px">@lang('admin.sending_date')</th>
                <th class=" min-w-70px">@lang('admin.seen_status')</th>
                <th class=" min-w-70px">@lang('admin.replay_status')</th>
                <th class=" min-w-70px">@lang('admin.actions')</th>
            </tr>
            <!--end::Table row-->
            </thead>
            <!--end::Table head-->
            <!--begin::Table body-->
            <tbody class="fw-semibold text-gray-600">

                @foreach($contacts_mssgs as $mssg)