@extends('front.layouts.master-auth')
@section('content')
<!-- Start Page Content -->
<section class="page-content">
    <div class="container">
        <div class="addOffer-page-title">
            <h2 class="addOffer-name">
                @lang('Notifications')
            </h2>
        </div>
        <div class="msgs-page">
            <div class="search-filters-cont">
                <div class="search-filters">

                    <h4 class="filter-title">
                        @lang('Keywords')
                        <span id="filterLoadingSpinner" style="display:none; margin-inline-start:6px; vertical-align:middle; line-height:1;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 50 50" aria-hidden="true">
                                <circle cx="25" cy="25" r="20" fill="none" stroke="#000" stroke-width="4"
                                    stroke-linecap="round" stroke-dasharray="31.4 31.4">
                                    <animateTransform attributeName="transform" type="rotate"
                                        from="0 25 25" to="360 25 25" dur="0.8s" repeatCount="indefinite"/>
                                </circle>
                            </svg>
                        </span>
                    </h4>
                    <div class="filter-cont">
                        <input type="search" class="search-page-input" name="keywords" value="{{ request('keywords') }}" placeholder="@lang('Search notifications...')">
                    </div>

                    <h4 class="filter-title">
                        الحالة
                    </h4>
                    <div class="filter-cont">
                        <select name="status" class="form-control">
                            <option value="">الكل</option>
                            <option value="read"   @if(request('status') === 'read')   selected @endif>مقروء</option>
                            <option value="unread" @if(request('status') === 'unread') selected @endif>غير مقروء</option>
                        </select>
                    </div>

                    <h4 class="filter-title">
                        الترتيب
                    </h4>
                    <div class="filter-cont">
                        <select name="sort" class="form-control">
                            <option value="desc" @if(request('sort','desc') === 'desc') selected @endif>الأحدث أولاً</option>
                            <option value="asc"  @if(request('sort') === 'asc')         selected @endif>الأقدم أولاً</option>
                        </select>
                    </div>

                    <!-- Reset Filters Button -->
                    <div class="filter-actions" style="margin-top: 20px;">
                        <button type="button" id="resetFilters" class="reset-filters-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <polyline points="1 4 1 10 7 10"></polyline>
                                <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
                            </svg>
                            إعادة تعيين الفلاتر
                        </button>
                    </div>

                </div>
            </div>
            <div class="msgs-page-items">
                <div id="results-container" class="notifications-page">
                    @include('front.user.notification.list')
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End Page Content -->

@endsection
@section('js-body')
<script>
/* Blade config — PHP values only. All logic lives in user-notifications-filter.js */
window.UserNotificationsFilterConfig = {
    baseUrl: '{{ route("notification.index") }}'
};
</script>
<script src="{{ asset('front/js/user-notifications-filter.js') }}?v={{ filemtime(public_path('front/js/user-notifications-filter.js')) }}"></script>
@endsection