@extends('layouts.app')

@section('title', $event->title . ' - OakTix')
@section('meta_description', Str::limit(strip_tags($event->description), 160))

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
    #map { height: 300px; border-radius: 8px; }
    .gallery-img { height: 80px; object-fit: cover; cursor: pointer; border-radius: 4px; }
    .ticket-option { border: 2px solid #ddd; border-radius: 8px; padding: 15px; margin-bottom: 10px; }
    .ticket-option:hover { border-color: var(--primary-color); }
    .ticket-option.selected { border-color: var(--primary-color); background: #f1f8e9; }
</style>
@endpush

@section('content')
<div class="container py-4">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('events.index') }}">Events</a></li>
            <li class="breadcrumb-item active">{{ Str::limit($event->title, 30) }}</li>
        </ol>
    </nav>
    
    <div class="row">
        <!-- Main Content -->
        <div class="col-lg-8">
            <!-- Event Image -->
            <img src="{{ asset('storage/' . $event->flyer_image) }}" class="img-fluid rounded mb-4" alt="{{ $event->title }}">
            
            <!-- Gallery -->
            @if($event->gallery_images)
                <div class="row g-2 mb-4">
                    @foreach($event->gallery_images as $image)
                        <div class="col-3">
                            <img src="{{ asset('storage/' . $image) }}" class="img-fluid gallery-img" data-bs-toggle="modal" data-bs-target="#galleryModal">
                        </div>
                    @endforeach
                </div>
            @endif
            
            <!-- Event Info -->
            <h1 class="mb-3">{{ $event->title }}</h1>
            
            <div class="d-flex align-items-center mb-4">
                <span class="badge badge-category me-2" style="background: {{ $event->category->color }}">
                    {{ $event->category->name }}
                </span>
                <span class="text-muted">
                    <i class="fas fa-eye me-1"></i>{{ $event->view_count }} views
                </span>
            </div>
            
            <!-- Date & Time -->
            <div class="card mb-4">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6><i class="far fa-calendar-alt me-2 text-primary-oaktix"></i>Date & Time</h6>
                            <p class="mb-0">{{ $event->start_date->format('l, F d, Y') }}</p>
                            <p class="text-muted">{{ $event->start_date->format('h:i A') }}</p>
                            @if($event->end_date)
                                <p class="text-muted small">Ends: {{ $event->end_date->format('l, F d, Y h:i A') }}</p>
                            @endif
                        </div>
                        <div class="col-md-6">
                            <h6><i class="fas fa-map-marker-alt me-2 text-primary-oaktix"></i>Location</h6>
                            <p class="mb-0">{{ $event->venue_name }}</p>
                            <p class="text-muted">{{ $event->venue_address }}</p>
                            <p class="text-muted">{{ $event->city }}, {{ $event->state }}</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Description -->
            <h4>About This Event</h4>
            <div class="mb-4">
                {!! nl2br(e($event->description)) !!}
            </div>
            
            <!-- Map -->
            @if($event->latitude && $event->longitude)
                <h4>Location Map</h4>
                <div id="map" class="mb-4"></div>
            @endif
            
            <!-- Organizer -->
            <h4>Organizer</h4>
            <div class="card mb-4">
                <div class="card-body d-flex align-items-center">
                    @if($event->vendor->logo)
                        <img src="{{ asset('storage/' . $event->vendor->logo) }}" class="rounded-circle me-3" width="60" height="60" alt="{{ $event->vendor->business_name }}">
                    @else
                        <div class="rounded-circle bg-primary-oaktix d-flex align-items-center justify-content-center me-3" style="width: 60px; height: 60px;">
                            <i class="fas fa-store text-white fa-2x"></i>
                        </div>
                    @endif
                    <div>
                        <h5 class="mb-1">{{ $event->vendor->business_name }}</h5>
                        <p class="text-muted mb-0">{{ Str::limit($event->vendor->description, 100) }}</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Tickets -->
            <div class="card shadow-sm sticky-top" style="top: 80px;">
                <div class="card-body">
                    <h5 class="card-title mb-4">Get Tickets</h5>
                    
                    @if($event->tickets->count() > 0)
                        <form action="{{ route('checkout.add-to-cart') }}" method="POST">
                            @csrf
                            <input type="hidden" name="event_id" value="{{ $event->id }}">
                            
                            <div class="mb-3">
                                <label class="form-label">Select Ticket Type</label>
                                @foreach($event->tickets as $ticket)
                                    <div class="ticket-option" onclick="selectTicket({{ $ticket->id }})">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="ticket_id" 
                                                   id="ticket_{{ $ticket->id }}" value="{{ $ticket->id }}" required>
                                            <label class="form-check-label w-100" for="ticket_{{ $ticket->id }}">
                                                <div class="d-flex justify-content-between">
                                                    <div>
                                                        <strong>{{ $ticket->title }}</strong>
                                                        @if($ticket->description)
                                                            <p class="text-muted small mb-0">{{ $ticket->description }}</p>
                                                        @endif
                                                        <p class="text-muted small mb-0">
                                                            {{ $ticket->getAvailableQuantity() }} available
                                                            @if($ticket->max_per_person < 10)
                                                                (max {{ $ticket->max_per_person }} per person)
                                                            @endif
                                                        </p>
                                                    </div>
                                                    <div class="text-end">
                                                        @if($ticket->price == 0)
                                                            <span class="free-badge">FREE</span>
                                                        @else
                                                            <span class="price-badge">{{ format_currency($ticket->price) }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">Quantity</label>
                                <select name="quantity" class="form-select">
                                    @for($i = 1; $i <= 10; $i++)
                                        <option value="{{ $i }}">{{ $i }}</option>
                                    @endfor
                                </select>
                            </div>
                            
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="fas fa-cart-plus me-2"></i>Add to Cart
                            </button>
                        </form>
                    @else
                        <div class="alert alert-warning">
                            No tickets available for this event.
                        </div>
                    @endif
                </div>
            </div>
            
            <!-- Share -->
            <div class="card mt-3">
                <div class="card-body">
                    <h6>Share This Event</h6>
                    <div class="d-flex gap-2">
                        <a href="https://facebook.com/sharer/sharer.php?u={{ urlencode(request()->url()) }}" target="_blank" class="btn btn-outline-primary btn-sm">
                            <i class="fab fa-facebook"></i>
                        </a>
                        <a href="https://twitter.com/intent/tweet?url={{ urlencode(request()->url()) }}&text={{ urlencode($event->title) }}" target="_blank" class="btn btn-outline-info btn-sm">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="https://wa.me/?text={{ urlencode($event->title . ' - ' . request()->url()) }}" target="_blank" class="btn btn-outline-success btn-sm">
                            <i class="fab fa-whatsapp"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Related Events -->
    @if($relatedEvents->count() > 0)
        <div class="mt-5">
            <h4>You May Also Like</h4>
            <div class="row g-4">
                @foreach($relatedEvents as $related)
                    <div class="col-md-3">
                        <div class="card event-card h-100">
                            <img src="{{ asset('storage/' . $related->flyer_image) }}" class="card-img-top" alt="{{ $related->title }}">
                            <div class="card-body">
                                <h6 class="card-title">{{ Str::limit($related->title, 40) }}</h6>
                                <p class="text-muted small">
                                    <i class="far fa-calendar me-1"></i>{{ $related->start_date->format('M d') }}
                                </p>
                                <a href="{{ route('events.show', $related->slug) }}" class="btn btn-primary btn-sm w-100">View</a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif
</div>

@push('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
    @if($event->latitude && $event->longitude)
        var map = L.map('map').setView([{{ $event->latitude }}, {{ $event->longitude }}], 15);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);
        L.marker([{{ $event->latitude }}, {{ $event->longitude }}]).addTo(map)
            .bindPopup('{{ $event->venue_name }}')
            .openPopup();
    @endif
    
    function selectTicket(ticketId) {
        document.querySelectorAll('.ticket-option').forEach(el => el.classList.remove('selected'));
        document.getElementById('ticket_' + ticketId).closest('.ticket-option').classList.add('selected');
        document.getElementById('ticket_' + ticketId).checked = true;
    }
</script>
@endpush
@endsection