@extends('layouts.account')

@section('page-title', 'My Matches')
@section('content')

    <div class="content-wrap">
        <div class="container">
            <div class="row">
                <div class="col-md-12 mb-5">
                    <a href="{{ route('account.my_matches') }}" class="themeBtn">MY MATCHES</a>
                </div>


                <form action="{{ route('account.my_matches') }}" method="Get">
                    <input type="hidden" name="filter" value="filter">
                    <div class="filterBox">
                        <div class="row align-items-end justify-content-between">
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="">Gender:</label>
                                    <select name="gender" id="gender" class="form-control">
                                        <option value="">Any</option>
                                        <option value="Male" {{ request()->get('gender') === 'Male' ? 'selected' : '' }}>Male</option>
                                        <option value="Female" {{ request()->get('gender') === 'Female' ? 'selected' : '' }}>Female</option>
                                        <option value="Other" {{ request()->get('gender') === 'Other' ? 'selected' : '' }}>Other</option>
                                    </select>
{{--                                    <input type="text" value="All" class="form-control">--}}
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="min_age">Age:</label>
                                    <input type="number" min="0" name="min_age" value="{{ request()->get('min_age') ?? 0 }}" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="max_age">To:</label>
                                    <input type="number" min="0" name="max_age" value="{{ request()->get('max_age') ?? 0 }}" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="love_language">Love Language:</label>
                                    <select class="form-control" id="love_language" name="love_language">
                                        <option value="">All</option>
                                        <option value="receiving_gifts" {{ request()->get('love_language') === 'receiving_gifts' ? 'selected' : '' }}>Receiving Gifts</option>
                                        <option value="quality_time" {{ request()->get('love_language') === 'quality_time' ? 'selected' : '' }}>Quality Time</option>
                                        <option value="words_of_affirmation" {{ request()->get('love_language') === 'words_of_affirmation' ? 'selected' : '' }}>Words of Affirmation</option>
                                        <option value="acts_of_service" {{ request()->get('love_language') === 'acts_of_service' ? 'selected' : '' }}>Acts of Service</option>
                                        <option value="physical_touch" {{ request()->get('love_language') === 'physical_touch' ? 'selected' : '' }}>Physical Touch</option>
                                        <option value="acts_of_affirmation" {{ request()->get('love_language') === 'acts_of_affirmation' ? 'selected' : '' }}>Acts of Affirmation</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2 text-right">
                                <button class="themeBtn pinkBtn">Filter</button>
                            </div>
                        </div>
                    </div>
                </form>

{{--                @foreach($winks as $wink)--}}
{{--                    @php $obj = ($wink->by_user_id != Auth::id()) ? $wink->by_user : $wink->to_user; @endphp--}}
{{--                    <div class="col-md-4">--}}
{{--                        <div class="userCard alertCard">--}}
{{--                            <a href="#" class="imgWrap">--}}
{{--                                <img--}}
{{--                                    src="{{ !empty($obj->profile->profile_image) ? asset($obj->profile->profile_image) : asset('themes/front/images/team1.jpg') }}"--}}
{{--                                    alt="">--}}
{{--                            </a>--}}
{{--                            <div class="content">--}}
{{--                                <h3>{{ $obj->name }}</h3>--}}
{{--                                <ul>--}}
{{--                                    <li>--}}
{{--                                        <p><span>Gender: </span> {{ @$obj->profile->gender }}</p>--}}
{{--                                    </li>--}}
{{--                                    <li>--}}
{{--                                        <p><span>Age:</span>38</p>--}}
{{--                                    </li>--}}
{{--                                    <li>--}}
{{--                                        <p><span>About me:</span> Test</p>--}}
{{--                                    </li>--}}
{{--                                </ul>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                @endforeach--}}

                @forelse($myMatches as $myMatch)
                    <div class="col-md-4">
                        <div class="userCard">
                            <a href="#" class="imgWrap">
                                <span></span>
                                <img class="user-image" src="{{ !empty($myMatch->profile->profile_image) ? asset($myMatch->profile->profile_image) : asset('themes/front/images/placeholder.png') }}" alt="">
                            </a>
                            <div class="content">
                                <h3>{{ $myMatch->name }}</h3>
                                {{-- <p>25, United States</p> --}}
                                @php
                                    $is_wink = App\Models\User::getIsWink($myMatch->id);
                                @endphp
                                <ul>
                                    <li>
                                        <p><span>Gender: </span> {{ $myMatch->profile->gender }}</p>
                                    </li>
                                    <li>
                                        <p><span>Age:</span>{{ $myMatch->profile->age }}</p>
                                    </li>
                                    <li>
                                        <p><span>About me:</span>{{ $myMatch->profile_qst->aboutme }}</p>
                                    </li>

                                </ul>

{{--                                <ul>--}}
{{--                                    <li><a href="{{ route('account.profile', [$myMatch->id]) }}"><i class="fas fa-user"></i></a></li>--}}
{{--                                    @if($is_wink)--}}
{{--                                        <li><i style="color: #ec839a;" class="fas fa-grin-tongue-wink"></i></li>--}}
{{--                                    @else--}}
{{--                                        <li><a href="{{ route('account.requestWink', [$myMatch->id]) }}"><i class="fas fa-grin-tongue-wink"></i></a></li>--}}
{{--                                    @endif--}}
{{--                                    --}}{{-- <li><a href="#"><i class="fal fa-heart"></i></a></li>--}}
{{--                                    <li><a href="#"><i class="fal fa-view"></i></a></li>--}}
{{--                                    <li><a href="#"><i class="fal fa-smile"></i></a></li> --}}
{{--                                </ul>--}}
                            </div>
                        </div>
                    </div>
                @empty
                @endforelse

                @forelse($matchedUsers as $matchedUser)
                    <div class="col-md-4 mt-5">
                        <div class="userCard">
                            <a href="#" class="imgWrap">
                                <span></span>
                                <img class="user-image" src="{{ !empty($matchedUser->profile->profile_image) ? asset($matchedUser->profile->profile_image) : asset('themes/front/images/placeholder.png') }}" alt="">
                            </a>
                            <div class="content">
                                <h3>{{ $matchedUser->name }}</h3>

                                {{-- <p>25, United States</p> --}}
                                @php
                                    $is_wink = App\Models\User::getIsWink($matchedUser->id);
                                @endphp
                                <p><span>Gender: </span> {{ $matchedUser->profile->gender }}</p>
                                <p><span>Age: </span> {{ $matchedUser->profile->age }}</p>
{{--                                <ul>--}}
{{--                                    <li><a href="{{ route('account.profile', [$matchedUser->id]) }}"><i class="fas fa-user"></i></a></li>--}}
{{--                                    @if($is_wink)--}}
{{--                                        <li><i style="color: #ec839a;" class="fas fa-grin-tongue-wink"></i></li>--}}
{{--                                    @else--}}
{{--                                        <li><a href="{{ route('account.requestWink', [$matchedUser->id]) }}"><i class="fas fa-grin-tongue-wink"></i></a></li>--}}
{{--                                    @endif--}}
{{--                                    --}}{{-- <li><a href="#"><i class="fal fa-heart"></i></a></li>--}}
{{--                                    <li><a href="#"><i class="fal fa-view"></i></a></li>--}}
{{--                                    <li><a href="#"><i class="fal fa-smile"></i></a></li> --}}
{{--                                </ul>--}}
                            </div>
                        </div>
                    </div>
                @empty
                @endforelse
            </div>
        </div>
    </div>




@endsection
@section('script')
    <script>
        function applyFilter() {
            var gender = document.getElementById('gender').value;
            var minAge = document.getElementById('min_age').value;
            var maxAge = document.getElementById('max_age').value;
            var loveLanguage = document.getElementById('love_language').value;

            // Make an AJAX request or redirect to a route passing the filter values
            // Handle the filter logic on the server-side using Laravel controller and model
        }
    </script>
@endsection