@extends('layouts.app')

@section('title', __('messages.search_results'))

@section('content')
<div class="row g-4">

    {{-- ===== Left: Filter Sidebar ===== --}}
    <div class="col-lg-3">
        <div class="card border-0 shadow-sm rounded-4 sticky-top" style="top: 80px;">
            <div class="card-body p-4">
                <h5 class="fw-bold mb-4 text-teal"><i class="bi bi-funnel-fill me-2"></i>{{ __('messages.filter_profiles') }}</h5>
                <form action="{{ route('search') }}" method="GET" id="search-filter-form">

                    {{-- Gender --}}
                    <div class="mb-3">
                        <label class="form-label fw-semibold small text-uppercase text-muted">{{ __('messages.looking_for') }}</label>
                        <select name="gender" class="form-select form-select-sm rounded-3">
                            <option value="">{{ __('messages.any') }}</option>
                            <option value="Bride" {{ request('gender') == 'Bride' ? 'selected' : '' }}>{{ __('messages.bride_female') }}</option>
                            <option value="Groom" {{ request('gender') == 'Groom' ? 'selected' : '' }}>{{ __('messages.groom_male') }}</option>
                        </select>
                    </div>

                    {{-- Age Range --}}
                    <div class="mb-3">
                        <label class="form-label fw-semibold small text-uppercase text-muted">{{ __('messages.age_range') }}</label>
                        <div class="d-flex gap-2 align-items-center">
                            <input type="number" name="age_from" class="form-control form-control-sm rounded-3" placeholder="{{ __('messages.from') }}" min="18" max="80" value="{{ request('age_from') }}">
                            <span class="text-muted small">–</span>
                            <input type="number" name="age_to" class="form-control form-control-sm rounded-3" placeholder="{{ __('messages.to_label') }}" min="18" max="80" value="{{ request('age_to') }}">
                        </div>
                    </div>

                    {{-- Religion --}}
                    <div class="mb-3">
                        <label class="form-label fw-semibold small text-uppercase text-muted">{{ __('messages.religion') }}</label>
                        <select name="religion" class="form-select form-select-sm rounded-3">
                            <option value="">{{ __('messages.any') }}</option>
                            @foreach(__('messages.religions') as $key => $value)
                                <option value="{{ $key }}" {{ request('religion') == $key ? 'selected' : '' }}>{{ $value }}</option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Marital Status --}}
                    <div class="mb-3">
                        <label class="form-label fw-semibold small text-uppercase text-muted">{{ __('messages.marital_status_label') }}</label>
                        <select name="marital_status" class="form-select form-select-sm rounded-3">
                            <option value="">{{ __('messages.any') }}</option>
                            @foreach(__('messages.marital_statuses') as $key => $value)
                                <option value="{{ $key }}" {{ request('marital_status') == $key ? 'selected' : '' }}>{{ $value }}</option>
                            @endforeach
                        </select>
                    </div>

                    {{-- District --}}
                    <div class="mb-3">
                        <label class="form-label fw-semibold small text-uppercase text-muted">{{ __('messages.district_city') }}</label>
                        <select name="district" class="form-select form-select-sm rounded-3">
                            <option value="">{{ __('messages.any') }}</option>
                            @foreach(__('messages.districts') as $key => $value)
                                <option value="{{ $key }}" {{ request('district') == $key ? 'selected' : '' }}>{{ $value }}</option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Caste --}}
                    <div class="mb-3">
                        <label class="form-label fw-semibold small text-uppercase text-muted">{{ __('messages.caste') }}</label>
                        <input type="text" name="caste" class="form-control form-control-sm rounded-3" placeholder="e.g. Vellalar" value="{{ request('caste') }}">
                    </div>

                    {{-- Height Range --}}
                    <div class="mb-3">
                        <label class="form-label fw-semibold small text-uppercase text-muted">{{ __('messages.height_cm') }}</label>
                        <div class="d-flex gap-2 align-items-center">
                            <input type="number" name="height_from" class="form-control form-control-sm rounded-3" placeholder="{{ __('messages.min') }}" min="140" max="220" value="{{ request('height_from') }}">
                            <span class="text-muted small">–</span>
                            <input type="number" name="height_to" class="form-control form-control-sm rounded-3" placeholder="{{ __('messages.max') }}" min="140" max="220" value="{{ request('height_to') }}">
                        </div>
                    </div>

                    {{-- Star Sign / Rasi --}}
                    <div class="mb-3">
                        <label class="form-label fw-semibold small text-uppercase text-muted">{{ __('messages.star_sign') }}</label>
                        <select name="star_sign" class="form-select form-select-sm rounded-3">
                            <option value="">{{ __('messages.any') }}</option>
                            @foreach(__('messages.star_signs') as $key => $value)
                                <option value="{{ $key }}" {{ request('star_sign') == $key ? 'selected' : '' }}>{{ $value }}</option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Horoscope Match Preference --}}
                    <div class="mb-4">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="horoscope_match_required" name="horoscope_match_required" value="1" {{ request('horoscope_match_required') ? 'checked' : '' }}>
                            <label class="form-check-label small fw-semibold text-muted" for="horoscope_match_required">
                                {{ __('messages.horoscope_match_required') }}
                            </label>
                        </div>
                    </div>

                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-teal rounded-pill fw-bold">
                            <i class="bi bi-search me-1"></i> {{ __('messages.apply_filters') }}
                        </button>
                        <a href="{{ route('search') }}" class="btn btn-outline-secondary btn-sm rounded-pill">{{ __('messages.clear_all') }}</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ===== Right: Results ===== --}}
    <div class="col-lg-9">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h4 class="fw-bold mb-0">
                {{ __('messages.search_results') }}
                <span class="badge bg-teal ms-2 fs-6">{{ $profiles->total() }}</span>
            </h4>
        </div>

        <div class="row g-4">
            @if($profiles->count() > 0)
                @foreach ($profiles as $profile)
                <div class="col-12">
                    <div class="card profile-card-horizontal overflow-hidden border-0 shadow-sm rounded-4 mb-3">
                        <div class="row g-0">
                            {{-- Left: Image and Action --}}
                            <div class="col-md-4 col-lg-3 bg-white d-flex flex-column align-items-center p-3">
                                <div class="position-relative w-100 mb-3">
                                    @php
                                        $isOwner = auth()->check() && auth()->id() === $profile->user_id;
                                        $isAdmin = auth()->check() && auth()->user()->isAdmin();
                                        $isPaidMember = auth()->check() && auth()->user()->profile && auth()->user()->profile->canUseRequests();
                                        $isApproved = $profile->photoRequests->where('status', 'approved')->isNotEmpty() ||
                                                      $profile->receivedInterests->where('status', 'accepted')->isNotEmpty() ||
                                                      $profile->sentInterests->where('status', 'accepted')->isNotEmpty();
                                        $isPending  = $profile->photoRequests->where('status', 'pending')->isNotEmpty();
                                        $shouldBlur = !$isOwner && !$isAdmin && !$isApproved && !$isPaidMember;
                                    @endphp
                                    <div class="profile-image-wrapper rounded-4 overflow-hidden shadow-sm" style="aspect-ratio: 1/1;">
                                        <img src="{{ $profile->primary_image_path }}" class="w-100 h-100 {{ $shouldBlur ? 'blurred-photo' : '' }}" alt="Profile Image" style="object-fit: cover;">
                                        @if($shouldBlur)
                                            <div class="position-absolute top-50 start-50 translate-middle text-center w-100">
                                                <i class="bi bi-eye-slash-fill text-white fs-2"></i>
                                            </div>
                                        @endif
                                    </div>
                                    @if($profile->is_verified)
                                        <div class="position-absolute top-0 end-0 m-2">
                                            <i class="bi bi-patch-check-fill text-info fs-5 bg-white rounded-circle shadow-sm"></i>
                                        </div>
                                    @endif
                                </div>

                                <div class="w-100 text-center mb-2">
                                    <p class="text-muted mb-0 small fw-bold">ID: N{{ $profile->id + 1000 }}</p>
                                    <h5 class="fw-bold mb-0 text-dark">{{ $profile->user->name }}</h5>
                                </div>

                                <div class="d-grid gap-2 w-100 mt-auto">
                                    <a href="{{ route('profile.show', $profile->id) }}" class="btn btn-teal rounded-pill py-2 shadow-sm fw-bold">
                                        <i class="bi bi-person-fill me-1"></i> {{ __('messages.view_profile') }}
                                    </a>
                                </div>
                            </div>

                            {{-- Right: Details --}}
                            <div class="col-md-8 col-lg-9 p-4">
                                <div class="row g-3">
                                    <div class="col-sm-6">
                                        <div class="d-flex align-items-center gap-3">
                                            <div class="detail-icon bg-teal-light rounded-circle text-teal">
                                                <i class="bi bi-person"></i>
                                            </div>
                                            <div>
                                                <small class="text-muted d-block">{{ __('messages.gender') }}</small>
                                                <span class="fw-bold">{{ ucfirst($profile->gender) }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="d-flex align-items-center gap-3">
                                            <div class="detail-icon bg-teal-light rounded-circle text-teal">
                                                <i class="bi bi-person-hearts"></i>
                                            </div>
                                            <div>
                                                <small class="text-muted d-block">{{ __('messages.religion_caste') }}</small>
                                                <span class="fw-bold">{{ $profile->religion }}{{ $profile->caste ? ' | ' . $profile->caste : '' }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="d-flex align-items-center gap-3">
                                            <div class="detail-icon bg-teal-light rounded-circle text-teal">
                                                <i class="bi bi-calendar-event"></i>
                                            </div>
                                            <div>
                                                <small class="text-muted d-block">{{ __('messages.age') }}</small>
                                                <span class="fw-bold">{{ $profile->age }} {{ __('messages.yrs') }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="d-flex align-items-center gap-3">
                                            <div class="detail-icon bg-teal-light rounded-circle text-teal">
                                                <i class="bi bi-arrows-vertical"></i>
                                            </div>
                                            <div>
                                                <small class="text-muted d-block">{{ __('messages.height') }}</small>
                                                <span class="fw-bold">{{ $profile->height_formatted }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="d-flex align-items-center gap-3">
                                            <div class="detail-icon bg-teal-light rounded-circle text-teal">
                                                <i class="bi bi-briefcase"></i>
                                            </div>
                                            <div>
                                                <small class="text-muted d-block">{{ __('messages.occupation') }}</small>
                                                <span class="fw-bold text-truncate d-inline-block w-100" title="{{ $profile->occupation }}">{{ $profile->occupation }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="d-flex align-items-center gap-3">
                                            <div class="detail-icon bg-teal-light rounded-circle text-teal">
                                                <i class="bi bi-infinity"></i>
                                            </div>
                                            <div>
                                                <small class="text-muted d-block">{{ __('messages.marital_status_label') }}</small>
                                                <span class="fw-bold">{{ ucfirst($profile->marital_status) }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <div class="d-flex align-items-center gap-3">
                                            <div class="detail-icon bg-teal-light rounded-circle text-teal">
                                                <i class="bi bi-geo-alt"></i>
                                            </div>
                                            <div>
                                                <small class="text-muted d-block">{{ __('messages.location') }}</small>
                                                <span class="fw-bold">{{ $profile->town ? $profile->town . ', ' : '' }}{{ $profile->district }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            @else
                <div class="col-12 text-center py-5">
                    <i class="bi bi-search display-1 text-muted opacity-25"></i>
                    <h4 class="text-muted mt-3">{{ __('messages.no_profiles_found') }}</h4>
                    <p class="text-muted">{{ __('messages.try_adjusting_filters') }}</p>
                    <a href="{{ route('search') }}" class="btn btn-teal mt-2 rounded-pill">{{ __('messages.clear_filters') }}</a>
                </div>
            @endif
        </div>

        <div class="mt-5 d-flex justify-content-center">
            {{ $profiles->appends(request()->query())->links() }}
        </div>
    </div>

</div>
@endsection

@push('styles')
<style>
    .profile-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: none;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }
    .profile-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    }
    .btn-teal { background-color: #d63384; color: white; border: none; }
    .btn-teal:hover { background-color: #c2276e; color: white; }
    .btn-outline-pink { color: #d63384; border-color: #d63384; }
    .btn-outline-pink:hover { background-color: #d63384; color: white; }
    .bg-teal { background-color: #d63384 !important; }

    /* Pagination Styles */
    .pagination {
        gap: 4px;
    }
    .pagination .page-item .page-link {
        border-radius: 50% !important;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        color: #d63384;
        border-color: #e8e8e8;
        font-weight: 600;
        font-size: 0.9rem;
    }
    .pagination .page-item.active .page-link {
        background-color: #d63384;
        border-color: #d63384;
        color: #fff;
    }
    .pagination .page-item .page-link:hover {
        background-color: #fff0f6;
        border-color: #d63384;
        color: #d63384;
    }
    .pagination .page-item.disabled .page-link {
        color: #ccc;
        border-color: #eee;
    }
    /* Fix SVG arrows (prev/next icons) */
    .pagination .page-item:first-child .page-link,
    .pagination .page-item:last-child .page-link {
        border-radius: 50% !important;
        font-size: 1.1rem;
    }
    .pagination svg { fill: currentColor; }
</style>
@endpush

@guest
    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('Help modal timer started for 30 seconds.');
            // Show help modal after 30 seconds for guest users:
            setTimeout(function() {
                var helpModalEl = document.getElementById('helpModal');
                console.log('Timeout reached. helpModalEl found:', !!helpModalEl);
                if (helpModalEl) {
                    if (window.bootstrap) {
                        console.log('Using window.bootstrap');
                        var helpModal = bootstrap.Modal.getInstance(helpModalEl) || new bootstrap.Modal(helpModalEl);
                        helpModal.show();
                    } else if (typeof jQuery !== 'undefined') {
                        console.log('Using jQuery');
                        jQuery('#helpModal').modal('show');
                    } else {
                        console.error('No modal handler found (bootstrap/jQuery).');
                    }
                } else {
                    console.error('helpModal element not found in DOM.');
                }
            }, 30000); // 30 second delay
        });
    </script>
    @endpush
@endguest