@extends('layouts.account')

@section('page-title', 'Users')

@section('css')
  <style type="text/css">

  </style>
@endsection
@section('content')
    <div class="content-wrap">
        <div class="container">

            <form action="{{ route('account.users') }}" 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 text-right">
                            <button class="themeBtn pinkBtn">Filter</button>
                        </div>
                    </div>
                </div>
            </form>

            <div class="row mt-5">
                @if(request()->has('filter') && $filteredUsers->isNotEmpty())
                    @forelse($filteredUsers as $filteredUser)
                        <div class="col-md-4">
                            <div class="userCard">
                                <a href="{{ route('account.profile', [$filteredUser->id]) }}" class="imgWrap">
                                    <span></span>
                                    <img class="user-image"
                                         src="{{ !empty($filteredUser->profile->profile_image) ? asset($filteredUser->profile->profile_image) : asset('themes/front/images/placeholder.png') }}"
                                         alt="">
                                </a>
                                <div class="content">
                                    <h3>{{ $filteredUser->name }}</h3>
                                    <p>25, United States</p>
                                    @php
                                        $is_wink = App\Models\User::getIsWink($filteredUser->id);
                                    @endphp
                                    <ul>
                                        <li><a href="{{ route('account.profile', [$filteredUser->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', [$filteredUser->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
                        <p>No User available</p>
                    @endforelse
                @else
                    @forelse($myusers as $myuser)
                        <div class="col-md-4">
                            <div class="userCard">
                                <a href="{{ route('account.profile', [$myuser->id]) }}" class="imgWrap">
                                    <span></span>
                                    <img class="user-image"
                                         src="{{ !empty($myuser->profile->profile_image) ? asset($myuser->profile->profile_image) : asset('themes/front/images/placeholder.png') }}"
                                         alt="">
                                </a>
                                <div class="content">
                                    <h3>{{ $myuser->name }}</h3>
                                    <p>25, United States</p>
                                    @php
                                        $is_wink = App\Models\User::getIsWink($myuser->id);
                                    @endphp
                                    <ul>
                                        <li><a href="{{ route('account.profile', [$myuser->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', [$myuser->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
                        <p>No User available</p>
                    @endforelse
                @endif
            </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