@extends('layouts.app')

@section('content')
    {{-- UNIFIED REUSABLE PAGE HEADER --}}
    @include('partials.page-header', [
        'title' => $title,
        'subtitle' => $applyPreferences 
            ? 'Explore compatible profiles based on your preferences.' 
            : 'Search across verified members, location, profession and interests.',
    ])

    {{-- UNIFIED FILTER BAR CARD --}}
    <section class="matri-filter-card">
        <form method="GET" action="{{ $applyPreferences ? route('discover') : route('search') }}" class="matri-filter-form">
            <div class="matri-filter-grid">
                @if (!empty($filters['q']))
                    <input type="hidden" name="q" value="{{ $filters['q'] }}">
                @endif

                <div class="matri-filter-group">
                    <label for="filter-gender" class="matri-filter-label">{{ __('ui.gender') }}</label>
                    <select id="filter-gender" name="gender" class="matri-form-select">
                        <option value="">{{ __('ui.any') }}</option>
                        @foreach (['male', 'female'] as $gender)
                            <option value="{{ $gender }}" @selected(($filters['gender'] ?? '') === $gender)>{{ __('ui.'.$gender) }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="matri-filter-group">
                    <label for="filter-country" class="matri-filter-label">{{ __('ui.country') }}</label>
                    <select id="filter-country" name="country_id" class="matri-form-select">
                        <option value="">{{ __('ui.any') }}</option>
                        @foreach ($countries as $country)
                            <option value="{{ $country->id }}" @selected((string) ($filters['country_id'] ?? '') === (string) $country->id)>{{ $country->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="matri-filter-group">
                    <label for="filter-min-age" class="matri-filter-label">{{ __('ui.min_age') }}</label>
                    <input type="number" id="filter-min-age" name="min_age" min="18" max="80" value="{{ $filters['min_age'] ?? '' }}" placeholder="18" class="matri-form-input">
                </div>

                <div class="matri-filter-group">
                    <label for="filter-max-age" class="matri-filter-label">{{ __('ui.max_age') }}</label>
                    <input type="number" id="filter-max-age" name="max_age" min="18" max="80" value="{{ $filters['max_age'] ?? '' }}" placeholder="70" class="matri-form-input">
                </div>

                <div class="matri-filter-group">
                    <label for="filter-religion" class="matri-filter-label">{{ __('ui.religion') }}</label>
                    <input type="text" id="filter-religion" name="religion" value="{{ $filters['religion'] ?? '' }}" placeholder="e.g. Islam, Hindu..." class="matri-form-input">
                </div>

                <div class="matri-filter-group">
                    <label for="filter-profession" class="matri-filter-label">{{ __('ui.profession') }}</label>
                    <input type="text" id="filter-profession" name="profession" value="{{ $filters['profession'] ?? '' }}" placeholder="e.g. Engineer, Doctor..." class="matri-form-input">
                </div>

                <div class="matri-filter-group">
                    <label for="filter-language" class="matri-filter-label">{{ __('ui.spoken_languages') }}</label>
                    <select id="filter-language" name="language_id" class="matri-form-select">
                        <option value="">{{ __('ui.any') }}</option>
                        @foreach ($languages as $language)
                            <option value="{{ $language->id }}" @selected((string) ($filters['language_id'] ?? '') === (string) $language->id)>{{ $language->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            @error('max_age')
                <p class="matri-alert-error" style="margin-top: 10px;">{{ $message }}</p>
            @enderror

            <div class="matri-filter-actions">
                <button type="submit" class="matri-btn-primary">
                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                        <circle cx="11" cy="11" r="8"></circle>
                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                    </svg>
                    <span>{{ __('ui.apply_filters') }}</span>
                </button>
                @if ($applyPreferences)
                    <a href="{{ route('profile.edit') }}" class="matri-btn-secondary" style="font-size:12.5px;">
                        Edit partner preferences &rarr;
                    </a>
                @endif
            </div>
        </form>
    </section>

    {{-- UNIFIED PROFILE GRID --}}
    <section class="matri-profile-grid" style="margin-top: 24px;">
        @forelse ($results as $person)
            @include('partials.profile-card', [
                'person' => $person,
                'connectionStates' => $connectionStates ?? [],
                'favoriteIds' => $favoriteIds ?? [],
            ])
        @empty
            <div style="grid-column: 1 / -1;">
                @include('partials.empty-state', [
                    'iconSvg' => '<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
                    'title' => __('nav.empty_profiles'),
                    'description' => 'Try adjusting your filters or expanding age and location to find more matching profiles.',
                    'actionUrl' => route('discover'),
                    'actionText' => 'Reset all filters',
                ])
            </div>
        @endforelse
    </section>

    @if ($results->hasPages())
        <div class="matri-pagination-wrap" style="margin-top: 28px;">
            {{ $results->links('partials.pagination') }}
        </div>
    @endif
@endsection