@extends('layouts.admin')

@section('title', 'Event Details')

@section('content_header')
    <h1>Event Details</h1>
@stop

@section('content')
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">{{ $event->title }}</h3>
            <div class="card-tools">
                <a href="{{ route('admin.events.edit', $event->id) }}" class="btn btn-info btn-sm">Edit</a>
                <a href="{{ route('admin.events.index') }}" class="btn btn-default btn-sm">Back to List</a>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    @if($event->image)
                        <img src="{{ Storage::url($event->image) }}" alt="{{ $event->title }}" class="img-fluid">
                    @endif
                </div>
                <div class="col-md-8">
                    <p><strong>Mode:</strong> {{ $event->mode }}</p>
                    <p><strong>Date:</strong> {{ $event->date }}</p>
                    <p><strong>Time:</strong> {{ $event->time }}</p>
                    <p><strong>Location:</strong> {{ $event->location }}</p>
                    <p><strong>Duration:</strong> {{ $event->duration }}</p>
                    <p><strong>Description:</strong> {{ $event->description }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">SEO Settings</h3>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="font-weight-bold">Meta Title:</label>
                        <p class="form-control-plaintext">{{ $event->meta_title ?: 'Not set' }}</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="font-weight-bold">Meta Description:</label>
                        <p class="form-control-plaintext">{{ $event->meta_description ?: 'Not set' }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Associated Speakers</h3>
        </div>
        <div class="card-body p-0">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Speaker Name</th>
                        <th>Designation</th>
                        <th>Description</th>
                        <th>LinkedIn</th>
                    </tr>
                </thead>
                <tbody>
                    @if($event->speakers->count() > 0)
                        @foreach($event->speakers as $speaker)
                            <tr>
                                <td>
                                    @if($speaker->image)
                                        <img src="{{ Storage::url($speaker->image) }}" alt="{{ $speaker->name }}" class="img-circle" style="width: 40px; height: 40px; object-fit: cover; margin-right: 10px;">
                                    @endif
                                    {{ $speaker->prefix }} {{ $speaker->name }}
                                </td>
                                <td>{{ $speaker->designation }}</td>
                                <td>{{ Str::limit($speaker->description, 100) }}</td>
                                <td>
                                    @if($speaker->linkedin)
                                        <a href="{{ $speaker->linkedin }}" target="_blank" class="btn btn-sm btn-primary">LinkedIn</a>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="4" class="text-center">No speakers are associated with this event.</td>
                        </tr>
                    @endif
                </tbody>
            </table>
        </div>
    </div>

    @if($event->moments->count() > 0)
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Event Moments</h3>
        </div>
        <div class="card-body">
            <div class="row">
                @foreach($event->moments as $moment)
                    <div class="col-md-4 mb-3">
                        <div class="card">
                            <img src="{{ Storage::url($moment->image) }}" class="card-img-top" alt="Event Moment" style="height: 200px; object-fit: cover;">
                            <div class="card-body">
                                @if($moment->caption)
                                    <p class="card-text">{{ $moment->caption }}</p>
                                @endif
                                <small class="text-muted">Sort Order: {{ $moment->sort_order }}</small>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif
@stop