@extends('layouts.account')

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

@section('css')
    <style type="text/css">
        #tick-mark {
            position: relative;
            display: inline-block;
            width: 30px;
            height: 30px;
        }

        #tick-mark::before {
            position: absolute;
            left: 0;
            top: 50%;
            height: 50%;
            width: 3px;
            background-color: #fff;
            content: "";
            transform: translateX(10px) rotate(-45deg);
            transform-origin: left bottom;
        }

        #tick-mark::after {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 3px;
            width: 100%;
            background-color: #fff;
            content: "";
            transform: translateX(10px) rotate(-45deg);
            transform-origin: left bottom;
        }

        .cancelBtn {
            font-size: 20px;
            padding: 5px 18px;
        }

        .swiper-slide.disliked {
            display: none;
        }

        .likeUser:focus {
            outline: none;
        }

        .dislikeUser:focus {
            outline: none;
        }
    </style>
@endsection

@section('content')
    <div class="container">
        <div class="row justify-content-between">
        </div>
    </div>
    <main>
        <div class="content-wrap">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="searchForm">
                            <h2>MeetMe</h2>
                            <form action="">
                                <div class="inputBox">
                                    <label for="">Gender:</label>
                                    <select name="" id="">
                                        <option value="" selected disabled>
                                            Male/Female
                                        </option>
                                        <option value="">
                                            Male
                                        </option>
                                        <option value="">
                                            Female
                                        </option>
                                    </select>
                                </div>
                                <div class="inputBox">
                                    <label for="">Age:</label>
                                    <input type="text" name="" id="">
                                </div>
                                <div class="inputBox">
                                    <label for="">To:</label>
                                    <input type="text">
                                </div>
                                <div class="inputBox">
                                    <label for="love_language">Love Language:</label>
                                    <select class="form-control" id="love_language" name="love_language">
                                        <option selected disabled>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>
                                <button class="themeBtn">
                                    Filter
                                </button>
                            </form>
                        </div>
                        <div class="profileSlider">
                            <div class="swiper-wrapper">
                                @forelse($myusers as $myuser)

                                    @if(!$myuser->disliked_status)
                                <div class="swiper-slide">
                                    <div class="dashboard-review dashboard-review--bg">
                                        <div class="dashboard-review__details">
                                            <div class="row align-items-center">
                                                <div class="col-12 col-lg-6">
                                                    <div class="dashboard-review__detailsImg">
                                                        <img src="{{ !empty($myuser->profile->profile_image) ? asset($myuser->profile->profile_image) : asset('themes/front/images/placeholder.png') }}" alt="image" class="img-fluid">
                                                    </div>
                                                </div>
                                                <div class="col-12 col-lg-6">
                                                    <div class="dashboard-review__detailsContent">
                                                        <h2>{{ $myuser->name }}</h2>
                                                        <address><i class="fa-solid fa-location-dot"></i> {{ $myuser->profile->country }}</address>
                                                        <p>
                                                            {{ $myuser->profile_qst->about_me }}
                                                        </p>
                                                        @if($myuser->profile_qst->interest)
                                                        <h3>Passions</h3>
                                                        <div class="dashboardBtn-wrapper d-flex align-items-center flex-wrap">


                                                            <button class="dashboardBtn"></button>                                                        </div>
                                                        @endif
{{--                                                        <button class="closeBtnDashboard"><i class="fas fa-times"></i></button>--}}
                                                        <form id="dislikeForm"
                                                              action="{{ route('dislike', ['dislikedUser' => $myuser->id]) }}"
                                                              method="POST">
                                                            @csrf
                                                            <button class="closeBtnDashboard" type="submit" class="dislikeUser"><i class="fas fa-times"></i></button>
                                                        </form>
{{--                                                        <button class="heartBtnDashboard"><i class="fas fa-heart"></i></button>--}}
                                                        <form id="likeForm"
                                                              action="{{ route('like', ['likedUser' => $myuser->id]) }}"
                                                              method="POST">
                                                            @csrf
                                                            <button  class="heartBtnDashboard" type="submit" class="likeUser"><i class="fas fa-heart"></i></button>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                    @endif
                                @empty
                                    <p>No users found.</p>
                                @endforelse

                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
        </div>
        </div>
    </main>

@endsection

@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>


    </script>
@endsection