@extends('layouts.app')

@section('title', 'المفضل لدي - تذاكر')

@section('content')
<div class="main-content">
    <div class="container2 padded">
        
        <!-- Two Column Layout -->
        <div class="favorites-layout">
            
            <!-- Main Content (Left Side) -->
            <div class="favorites-main">
                <!-- Page Header -->
                <div class="favorites-page-header">
                    <h1>المفضل لدي</h1>
                    <div class="favorites-tabs">
                        <a href="#" class="favorites-tab active">الفعاليات</a>
                        <a href="#" class="favorites-tab">نجوم الحدث</a>
                    </div>
                </div>
                
                <!-- Empty State -->
                <div class="favorites-empty" id="favoritesEmpty" style="display: none;">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="64" height="64">
                        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                    </svg>
                    <h3>لا توجد فعاليات في المفضلة</h3>
                    <p>ابدأ بإضافة الفعاليات التي تعجبك للمفضلة لتجدها هنا</p>
                    <a href="{{ route('home') }}" class="btn-browse">تصفح الفعاليات</a>
                </div>
                
                <!-- Favorites List (Horizontal Cards) -->
                <div class="favorites-list" id="favoritesList">
                    @foreach($allTickets as $ticket)
                    <div class="favorite-item" data-ticket-id="{{ $ticket->id }}" style="display: none;">
                        <!-- Card Content -->
                        <div class="favorite-item__content">
                            <div class="favorite-item__price">USD {{ number_format($ticket->price ?? 0, 2) }}</div>
                            <h3 class="favorite-item__title">
                                <a href="{{ localizedRoute('ticket.show', $ticket->id) }}">{{ $ticket->title }}</a>
                            </h3>
                            <div class="favorite-item__meta">
                                <span class="meta-item">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
                                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                        <circle cx="9" cy="7" r="4"></circle>
                                    </svg>
                                    {{ rand(10, 200) }}
                                </span>
                                <span class="meta-item">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
                                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                                        <circle cx="12" cy="10" r="3"></circle>
                                    </svg>
                                    {{ $ticket->city->name ?? 'غير محدد' }}
                                </span>
                            </div>
                        </div>
                        
                        <!-- Card Image -->
                        <div class="favorite-item__image">
                            <a href="{{ localizedRoute('ticket.show', $ticket->id) }}">
                                @if($ticket->display_image)
                                    <img src="{{ $ticket->display_image }}" alt="{{ $ticket->title }}">
                                @else
                                    <img src="https://via.placeholder.com/300x200?text={{ urlencode($ticket->title) }}" alt="{{ $ticket->title }}">
                                @endif
                            </a>
                            <button class="favorite-heart active" onclick="removeFavorite({{ $ticket->id }})" title="إزالة من المفضلة">
                                <svg viewBox="0 0 24 24" fill="#e91e63" stroke="#e91e63" stroke-width="2" width="20" height="20">
                                    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            
            <!-- Sidebar (Right Side) -->
            <aside class="favorites-sidebar">
                <!-- User Profile Card -->
                <div class="sidebar-profile">
                    <div class="sidebar-profile__avatar">
                        @auth
                            @if(auth()->user()->avatar)
                                <img src="{{ auth()->user()->avatar }}" alt="{{ auth()->user()->name }}">
                            @else
                                <div class="avatar-initials">{{ strtoupper(substr(auth()->user()->name, 0, 1)) }}</div>
                            @endif
                        @else
                            <div class="avatar-initials">?</div>
                        @endauth
                        <button class="avatar-edit-btn" title="تعديل الصورة">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                                <circle cx="8.5" cy="8.5" r="1.5"></circle>
                                <polyline points="21 15 16 10 5 21"></polyline>
                            </svg>
                        </button>
                    </div>
                    <h3 class="sidebar-profile__name">
                        @auth
                            {{ auth()->user()->name }}
                        @else
                            زائر
                        @endauth
                    </h3>
                </div>
                
                <!-- User Stats -->
                <div class="sidebar-stats">
                    <div class="sidebar-stat">
                        <span class="stat-icon">💳</span>
                        <span class="stat-label">محفظتي:</span>
                        <span class="stat-value">0.00</span>
                    </div>
                    <a href="{{ route('favorites.index') }}" class="sidebar-stat sidebar-stat--link active">
                        <span class="stat-label">المفضلة</span>
                        <span class="stat-count" id="sidebarFavCount">(0)</span>
                    </a>
                    <a href="#" class="sidebar-stat sidebar-stat--link">
                        <span class="stat-label">التذاكر</span>
                    </a>
                </div>
                
                <!-- Sidebar Links -->
                <div class="sidebar-links">
                    <a href="#" class="sidebar-link">تعديل الملف الشخصي</a>
                    <form action="{{ route('logout') }}" method="POST" style="margin: 0;">
                        @csrf
                        <button type="submit" class="sidebar-link sidebar-link--logout">تسجيل الخروج</button>
                    </form>
                </div>
            </aside>
            
        </div>
        
    </div>
</div>
@endsection

@push('styles')
<style>
    /* Two Column Layout */
    .favorites-layout {
        display: flex;
        gap: 40px;
        flex-direction: row-reverse;
    }
    
    .favorites-main {
        flex: 1;
    }
    
    .favorites-sidebar {
        width: 280px;
        min-width: 280px;
    }
    
    /* Page Header */
    .favorites-page-header {
        padding: 30px 0;
        text-align: right;
        border-bottom: 1px solid #eee;
        margin-bottom: 30px;
    }
    
    .favorites-page-header h1 {
        margin: 0 0 20px 0;
        color: #333;
        font-size: 1.8rem;
        font-weight: 700;
    }
    
    .favorites-tabs {
        display: flex;
        gap: 30px;
        justify-content: flex-end;
    }
    
    .favorites-tab {
        text-decoration: none;
        color: #888;
        font-size: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid transparent;
        transition: all 0.2s;
    }
    
    .favorites-tab:hover {
        color: #333;
    }
    
    .favorites-tab.active {
        color: #37a7f8;
        border-bottom-color: #37a7f8;
    }
    
    /* Empty State */
    .favorites-empty {
        text-align: center;
        padding: 80px 20px;
        color: #888;
    }
    
    .favorites-empty svg { color: #ddd; margin-bottom: 20px; }
    .favorites-empty h3 { margin: 0 0 10px 0; color: #333; }
    .favorites-empty p { margin: 0 0 25px 0; }
    
    .btn-browse {
        display: inline-block;
        padding: 12px 35px;
        background: #37a7f8;
        color: #fff;
        text-decoration: none;
        border-radius: 25px;
        font-weight: 600;
    }
    
    /* Favorites List */
    .favorites-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    .favorite-item {
        display: flex;
        flex-direction: row-reverse;
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    }
    
    .favorite-item__image {
        position: relative;
        width: 280px;
        min-width: 280px;
        height: 180px;
    }
    
    .favorite-item__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .favorite-heart {
        position: absolute;
        top: 12px;
        left: 12px;
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.95);
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }
    
    .favorite-item__content {
        flex: 1;
        padding: 20px 25px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: right;
    }
    
    .favorite-item__price {
        font-size: 16px;
        font-weight: 700;
        color: #333;
        margin-bottom: 8px;
    }
    
    .favorite-item__title {
        margin: 0 0 12px 0;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.5;
    }
    
    .favorite-item__title a {
        color: #333;
        text-decoration: none;
    }
    
    .favorite-item__meta {
        display: flex;
        gap: 20px;
        justify-content: flex-end;
        color: #888;
        font-size: 13px;
    }
    
    .meta-item {
        display: flex;
        align-items: center;
        gap: 5px;
    }
    
    /* Sidebar Styles */
    .sidebar-profile {
        text-align: center;
        padding: 30px 20px;
        border-bottom: 1px solid #eee;
    }
    
    .sidebar-profile__avatar {
        position: relative;
        width: 80px;
        height: 80px;
        margin: 0 auto 15px;
    }
    
    .sidebar-profile__avatar img,
    .avatar-initials {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
        background: #37a7f8;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        font-weight: 700;
    }
    
    .avatar-edit-btn {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 28px;
        height: 28px;
        background: #fff;
        border: 2px solid #eee;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    
    .sidebar-profile__name {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #333;
    }
    
    .sidebar-stats {
        padding: 20px;
        border-bottom: 1px solid #eee;
    }
    
    .sidebar-stat {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 0;
        color: #555;
        font-size: 14px;
        text-decoration: none;
    }
    
    .sidebar-stat--link {
        cursor: pointer;
        transition: color 0.2s;
    }
    
    .sidebar-stat--link:hover,
    .sidebar-stat--link.active {
        color: #37a7f8;
    }
    
    .stat-count {
        color: #37a7f8;
    }
    
    .sidebar-links {
        padding: 20px;
    }
    
    .sidebar-link {
        display: block;
        padding: 12px 0;
        color: #555;
        text-decoration: none;
        font-size: 14px;
        background: none;
        border: none;
        width: 100%;
        text-align: right;
        cursor: pointer;
    }
    
    .sidebar-link:hover {
        color: #37a7f8;
    }
    
    /* Responsive */
    @media (max-width: 992px) {
        .favorites-layout {
            flex-direction: column;
        }
        
        .favorites-sidebar {
            width: 100%;
            order: -1;
        }
        
        .favorite-item {
            flex-direction: column;
        }
        
        .favorite-item__image {
            width: 100%;
            height: 200px;
        }
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const favoritesList = document.getElementById('favoritesList');
    const favoritesEmpty = document.getElementById('favoritesEmpty');
    const allCards = document.querySelectorAll('.favorite-item');
    
    let visibleCount = 0;
    
    allCards.forEach(card => {
        const ticketId = card.getAttribute('data-ticket-id');
        if (localStorage.getItem('favorite_' + ticketId) === 'true') {
            card.style.display = 'flex';
            visibleCount++;
        }
    });
    
    // Update sidebar count
    const sidebarCount = document.getElementById('sidebarFavCount');
    if (sidebarCount) {
        sidebarCount.textContent = '(' + visibleCount + ')';
    }
    
    if (visibleCount === 0) {
        favoritesEmpty.style.display = 'block';
        favoritesList.style.display = 'none';
    } else {
        favoritesEmpty.style.display = 'none';
        favoritesList.style.display = 'flex';
    }
});

function removeFavorite(ticketId) {
    localStorage.removeItem('favorite_' + ticketId);
    
    const card = document.querySelector(`.favorite-item[data-ticket-id="${ticketId}"]`);
    if (card) {
        card.style.opacity = '0';
        card.style.transform = 'translateX(-20px)';
        card.style.transition = 'all 0.3s ease';
        
        setTimeout(() => {
            card.style.display = 'none';
            
            // Update count
            const visibleCards = document.querySelectorAll('.favorite-item[style*="display: flex"]');
            const sidebarCount = document.getElementById('sidebarFavCount');
            if (sidebarCount) {
                sidebarCount.textContent = '(' + visibleCards.length + ')';
            }
            
            if (visibleCards.length === 0) {
                document.getElementById('favoritesEmpty').style.display = 'block';
                document.getElementById('favoritesList').style.display = 'none';
            }
        }, 300);
    }
    
    if (typeof updateFavoritesCount === 'function') {
        updateFavoritesCount();
    }
}
</script>
@endpush