@extends('layouts.app')

@section('title', $subcategory->name . ' - تذاكر')

@section('content')
<div class="main-content">
    <div class="container2 padded">
        
        <!-- Breadcrumb -->
        <nav class="breadcrumb">
            <a href="{{ route('home') }}">الرئيسية</a>
            <span>/</span>
            @if($subcategory->parent)
                <a href="{{ route('category.show', $subcategory->parent->id) }}">{{ $subcategory->parent->name }}</a>
                <span>/</span>
            @endif
            <span>{{ $subcategory->name }}</span>
        </nav>
        
        <!-- Subcategory Header -->
        <div class="category-header">
            <h1>{{ $subcategory->name }}</h1>
        </div>
        
        <!-- Tickets Grid -->
        <div class="tickets-section">
            <div class="tickets-grid">
                @forelse($tickets as $ticket)
                    <div class="ticket-card">
                        <div class="ticket-card__image">
                            <a href="{{ localizedRoute('ticket.show', $ticket->id) }}">
                                @if($ticket->image)
                                    <img src="{{ asset('storage/' . $ticket->image) }}" alt="{{ $ticket->title }}"
                                         onerror="this.onerror=null;this.src='{{ asset('img/logo.svg') }}';">
                                @else
                                    <img src="{{ asset('img/logo.svg') }}" alt="{{ $ticket->title }}">
                                @endif
                            </a>
                            <button class="ticket-card-favorite" onclick="toggleFavorite(this, {{ $ticket->id }})">
                                <svg class="icon-heart" viewBox="0 0 24 24"><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>
                                <svg class="icon-check" viewBox="0 0 24 24" style="display: none;">
                                    <polyline points="20 6 9 17 4 12"></polyline>
                                </svg>
                            </button>
                        </div>
                        <div class="ticket-card__content">
                            <a href="{{ localizedRoute('ticket.show', $ticket->id) }}" class="ticket-card__title">
                                {{ $ticket->title }}
                            </a>
                            @if($ticket->price)
                                <span class="ticket-card__price">{{ number_format($ticket->price, 2) }} AED</span>
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="no-results">
                        <p>لا توجد تذاكر في هذه الفئة الفرعية حالياً</p>
                    </div>
                @endforelse
            </div>
            
            <!-- Pagination -->
            <div class="pagination-wrapper">
                {{ $tickets->links() }}
            </div>
        </div>
        
    </div>
</div>
@endsection

@push('styles')
<style>
    .breadcrumb {
        padding: 15px 0;
        color: #888;
    }
    
    .breadcrumb a {
        color: #37a7f8;
        text-decoration: none;
    }
    
    .category-header h1 {
        margin: 0 0 30px 0;
        color: #333;
    }
    
    .tickets-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }
    
    .ticket-card {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        overflow: hidden;
    }
    
    .ticket-card__image {
        position: relative;
    }

    .ticket-card__image img {
        width: 100%;
        height: 180px;
        object-fit: cover;
    }
    
    .ticket-card__content {
        padding: 15px;
    }
    
    .ticket-card__title {
        display: block;
        font-weight: bold;
        color: #333;
        text-decoration: none;
        margin-bottom: 10px;
    }
    
    .ticket-card__price {
        display: inline-block;
        background: #37a7f8;
        color: #fff;
        padding: 5px 10px;
        border-radius: 4px;
    }
    
    .no-results {
        grid-column: 1 / -1;
        text-align: center;
        padding: 50px;
    }
    
    .pagination-wrapper {
        margin-top: 30px;
        display: flex;
        justify-content: center;
    }
</style>
@endpush