@extends('layouts.app')

@section('title', 'لیست تورها')

@section('content')

    {{-- استایل دکمه علاقهمندی (مناسب برای کارتها) --}}
    <style>
        .travel-favorite-form {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 3;
            margin: 0;
        }

        .travel-favorite-btn {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 1px solid #e0245e;
            background: rgba(255, 255, 255, .95);
            color: #e0245e;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: all .2s ease;
        }

        .travel-favorite-btn:hover,
        .travel-favorite-btn.active {
            background: #e0245e;
            color: #fff;
        }
    </style>

    <h1>تورهای ما</h1>

    <div class="row">
        @forelse($tours as $tour)
            @php
                $isFavTour = in_array($tour->id, $favoriteTourIds ?? []);
            @endphp

            <div class="col-md-4 position-relative">
                <x-tour :tour="$tour"/>

                {{-- دکمه علاقهمندی --}}
                @auth
                    <form action="{{ route('favorites.toggle') }}" method="POST" class="travel-favorite-form">
                        @csrf
                        <input type="hidden" name="favoritable_type" value="{{ \App\Models\Tour::class }}">
                        <input type="hidden" name="favoritable_id" value="{{ $tour->id }}">

                        <button type="submit" class="travel-favorite-btn {{ $isFavTour ? 'active' : '' }}">
                            <i class="fa {{ $isFavTour ? 'fa-heart' : 'far fa-heart' }}"></i>
                        </button>
                    </form>
                @else
                    <a href="{{ route('login') }}" class="travel-favorite-btn">
                        <i class="far fa-heart"></i>
                    </a>
                @endauth
            </div>
        @empty
            <p>تور فعالی یافت نشد.</p>
        @endforelse
    </div>

    {{ $tours->links() }}

@endsection


{{--@extends('layouts.app')--}}

{{--@section('title', 'لیست تورها')--}}

{{--@section('content')--}}
{{--    <h1>تورهای ما</h1>--}}
{{--    <div class="row">--}}
{{--        @forelse($tours as $tour)--}}
{{--            <div class="col-md-4">--}}
{{--                <x-tour :tour="$tour"/>--}}
{{--            </div>--}}

{{--        @empty--}}
{{--            <p>تور فعالی یافت نشد.</p>--}}
{{--        @endforelse--}}
{{--    </div>--}}

{{--    {{ $tours->links() }}--}}
{{--@endsection--}}