@extends('home_layout.master_sidebar')

@section('page_styles')
    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        .container-fluid {
            max-width: 800px;
            margin-top: 20px;
        }
        .event-details {
            margin-bottom: 20px;
        }
        .event-details h2 {
            font-weight: bold;
            margin-bottom: 20px;
        }
        .event-details p {
            font-size: 1.1em;
            margin-bottom: 10px;
        }
        .event-details strong {
            color: #343a40;
        }
        .btn-group {
            margin-top: 20px;
        }
    </style>
@stop

@section('breadcrumbs')
    @include('home_layout.breadcrumb', [
       'title' => 'Event Details',
       'breadcrumbs' => [
           ['title' => 'Home', 'link' => '#'],
           ['title' => 'Events', 'link' => route('events.index')],
           ['title' => $event->event_name, 'link' => route('events.show', $event->id)]
       ]
   ])
@stop

@section('content')
    <div class="container-fluid">
        <div class="event-details">
            <h2>{{ $event->event_name }}</h2>
            <p><strong>Duration:</strong> {{ $event->duration }} minutes</p>
            <p><strong>Description:</strong> {{ $event->description }}</p>
            <p><strong>Location Type:</strong> {{ ucfirst(str_replace('_', ' ', $event->location_type)) }}</p>
            <p><strong>Location:</strong>
                @if($event->location_type == 'meeting_link')
                    <a href="{{ $event->meeting_link }}">{{ $event->meeting_link }}</a>
                @else
                    {{ $event->location }}
                @endif
            </p>
            <p><strong>Allow Guests:</strong> {{ $event->allow_guests ? 'Yes' : 'No' }}</p>
            <p><strong>Date Range:</strong> {{ $event->date_range }}</p>
            <p><strong>Buffer Time Before:</strong> {{ $event->buffer_time_before }} minutes</p>
            <p><strong>Buffer Time After:</strong> {{ $event->buffer_time_after }} minutes</p>
            <p><strong>Minimum Notice:</strong> {{ $event->min_notice }} hours</p>
            <p><strong>Daily Limit:</strong> {{ $event->daily_limit }}</p>
            <p><strong>Time Zone:</strong> {{ $event->timezone }}</p>
            <p><strong>Start Time Increments:</strong> {{ $event->start_increment }} minutes</p>
        </div>
        <div class="btn-group">
            <a href="{{ route('events.edit', $event->id) }}" class="btn btn-warning">Edit</a>
            <a href="{{ route('events.index') }}" class="btn btn-secondary">Back to Events</a>
        </div>
    </div>
@stop

@section('page_scripts')
    <!-- Include Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
@stop