@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('Messages')
            </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 messages...')">
                    </div>

                    <h4 class="filter-title">
                        الشخص
                    </h4>
                    <div class="filter-cont">
                        <select name="contact_id" class="form-control">
                            <option value="">الكل</option>
                            @foreach($contacts as $contact)
                                <option value="{{ $contact['id'] }}"
                                    @if(request('contact_id') == $contact['id']) selected @endif>
                                    {{ $contact['name'] }}
                                </option>
                            @endforeach
                        </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>

                    <h4 class="filter-title">
                        حالة القراءة
                    </h4>
                    <div class="filter-cont">
                        <select name="has_unread" class="form-control">
                            <option value=""  @if(request('has_unread','') === '')  selected @endif>الكل</option>
                            <option value="1" @if(request('has_unread') === '1') 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">
                    @include('front.user.chat.list')
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End Page Content -->

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