@extends('layouts.admin.master')

@section('title')
    View Event - {{ $event->name }}
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <div class="card dashboard-custom-card">
                    <div class="card-header custom-card-header p-0 border-0">
                        <div class="d-flex justify-content-between align-items-center">
                            <h4 class="mb-0">
                                <i class="fas fa-calendar-alt me-2"></i>
                                Event Details
                            </h4>
                            <div class="card-tools">
                                <a href="{{ route('admin.events.index') }}" class="btn btn-secondary btn-sm">
                                    <i class="fas fa-arrow-left me-1"></i> Back to List
                                </a>
                                <a href="{{ route('admin.events.edit', $event->id) }}" class="btn btn-primary btn-sm ms-2">
                                    <i class="fas fa-edit me-1"></i> Edit Event
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        <!-- Basic Information Section -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="section-title">
                                    <i class="fas fa-info-circle me-2"></i>Basic Information
                                </h5>
                                <div class="row mb-4">
                                    <div class="col-sm-12 col-md-6">
                                        <div class="info-item">
                                            <label class="info-label">Event Name</label>
                                            <div class="info-value">{{ $event->name }}</div>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-6">
                                        <div class="row">
                                            <div class="col-sm-12 col-md-4">
                                                <div class="info-item">
                                                    <label class="info-label">Category</label>
                                                    <div class="info-value">
                                                        <span class="badge bg-primary">{{ $event->category_name }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-12 col-md-4">
                                                <div class="info-item">
                                                    <label class="info-label">Order</label>
                                                    <div class="info-value">{{ $event->order ?? 'Not set' }}</div>
                                                </div>
                                            </div>
                                            <div class="col-sm-12 col-md-4">
                                                <div class="info-item">
                                                    <label class="info-label">Status</label>
                                                    <div class="info-value">{!! $event->status_badge !!}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-4">
                                    <div class="col-12">
                                        <div class="info-item">
                                            <label class="info-label">Venue</label>
                                            <div class="info-value">{{ $event->venue ?? '' }}</div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="info-item">
                                            <label class="info-label">Description</label>
                                            <div class="info-value description-text">{!! $event->description ?? '' !!}</div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="info-item">
                                            <label class="info-label">Expected Attendees</label>
                                            <div class="info-value">{{ $event->expected_attendees ?? 'Not specified' }}</div>
                                        </div>
                                    </div>
                                    <!-- Special Requirements Section -->
                                    @if($event->special_requirements)
                                        <div class="col-12">
                                            <div class="info-item">
                                                <label class="info-label">Special Requirements</label>
                                                <div class="info-value">{{ $event->special_requirements }}</div>
                                            </div>
                                        </div>
                                    @endif
                                </div>

                                <!-- Additional Options Section -->
                                <div class="row mb-4">
                                    <div class="col-md-6">
                                        <div class="info-item">
                                            <label class="info-label">Guest Allowed</label>
                                            <div class="info-value">
                                                @if($event->is_guest_allowed)
                                                    <span class="badge bg-success">Yes</span>
                                                @else
                                                    <span class="badge bg-secondary">No</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="info-item">
                                            <label class="info-label">Accommodation Assistance</label>
                                            <div class="info-value">
                                                @if($event->is_accommodation_available)
                                                    <span class="badge bg-success">Available</span>
                                                @else
                                                    <span class="badge bg-secondary">Not Available</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Highlights Section -->
                                @if($event->highlights && count($event->highlights) > 0)
                                    <div class="row mb-4">
                                        <div class="col-12">
                                            <h5 class="section-title">
                                                <i class="fas fa-star me-2"></i>Highlights
                                            </h5>
                                            <div class="highlights-container">
                                                @foreach($event->highlights as $highlight)
                                                    <div class="highlight-item">
                                                        <i class="fas fa-check-circle text-success me-2"></i>
                                                        {{ $highlight }}
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                <!-- Event Dates and Pricing Section -->
                                @if($event->dates && $event->dates->count() > 0)
                                    <div class="row mb-4">
                                        <div class="col-12">
                                            <h5 class="section-title">
                                                <i class="fas fa-calendar-day me-2"></i>Event Dates & Pricing
                                            </h5>
                                            <div class="table-responsive">
                                                <table class="table table-bordered table-hover">
                                                    <thead class="table-light">
                                                        <tr>
                                                            <th>Start Date</th>
                                                            <th>End Date</th>
                                                            <th>Day Offer</th>
                                                            <th>Base Fee</th>
                                                            <th>Guest Pricing</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach($event->dates as $date)
                                                        <tr>
                                                            <td>
                                                                <strong>{{ $date->start_date_time->format('M d, Y h:i A') }}</strong>
                                                            </td>
                                                            <td>
                                                                <strong>{{ $date->end_date_time->format('M d, Y h:i A') }}</strong>
                                                            </td>
                                                            <td>
                                                                @if (!empty($date->day_offer))
                                                                    <ul>
                                                                        @foreach (explode(',',$date->day_offer) as $offer)
                                                                            <li>{{ $offer }}</li>
                                                                        @endforeach
                                                                    </ul>
                                                                @else
                                                                    <small>No Offer</small>
                                                                @endif
                                                            </td>
                                                            <td>
                                                                <span class="price-tag">৳{{ number_format($date->fee, 2) }}</span>
                                                            </td>
                                                            @if($event->is_guest_allowed)
                                                            <td>
                                                                <div class="guest-pricing">
                                                                    <div class="pricing-row border-bottom">
                                                                        <span class="pricing-label">Spouse:</span>
                                                                        <span class="pricing-value">৳{{ number_format($date->spouse_fee ?? 0, 2) }}</span>
                                                                    </div>
                                                                    <div class="pricing-row border-bottom">
                                                                        <span class="pricing-label">Children (0-5):</span>
                                                                        <span class="pricing-value">৳{{ number_format($date->children_below_5_fee ?? 0, 2) }}</span>
                                                                    </div>
                                                                    <div class="pricing-row border-bottom">
                                                                        <span class="pricing-label">Children (5-12):</span>
                                                                        <span class="pricing-value">৳{{ number_format($date->children_5_to_12_fee ?? 0, 2) }}</span>
                                                                    </div>
                                                                    <div class="pricing-row border-bottom">
                                                                        <span class="pricing-label">Children (12+):</span>
                                                                        <span class="pricing-value">৳{{ number_format($date->children_above_12_fee ?? 0, 2) }}</span>
                                                                    </div>
                                                                    <div class="pricing-row border-bottom">
                                                                        <span class="pricing-label">Driver:</span>
                                                                        <span class="pricing-value">৳{{ number_format($date->driver_fee ?? 0, 2) }}</span>
                                                                    </div>
                                                                    <div class="pricing-row border-bottom">
                                                                        <span class="pricing-label">Maid:</span>
                                                                        <span class="pricing-value">৳{{ number_format($date->maid_fee ?? 0, 2) }}</span>
                                                                    </div>
                                                                    <div class="pricing-row border-bottom">
                                                                        <span class="pricing-label">Other:</span>
                                                                        <span class="pricing-value">৳{{ number_format($date->other_guest_fee ?? 0, 2) }}</span>
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            @endif
                                                        </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                            </div>

                        </div>


                        <!-- Files Section -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="section-title">
                                    <i class="fas fa-paperclip me-2"></i>Attachments
                                </h5>
                                <div class="files-container">
                                    @if($event->files && $event->files->count() > 0)
                                        <div class="files-grid">
                                            @foreach($event->files as $file)
                                                <div class="file-item">
                                                    @if (in_array(pathinfo($file->file_path, PATHINFO_EXTENSION), ['jpg', 'jpeg', 'png', 'gif']))
                                                        <div class="image-preview">
                                                            <img src="{{ asset('storage/' . $file->file_path) }}"
                                                                 alt="Event Image"
                                                                 class="img-fluid"
                                                                 onclick="openImageModal(this.src)">
                                                        </div>
                                                    @elseif (in_array(pathinfo($file->file_path, PATHINFO_EXTENSION), ['mp4', 'webm', 'ogg']))
                                                        <div class="video-preview">
                                                            <video controls class="img-fluid">
                                                                <source src="{{ asset('storage/' . $file->file_path) }}"
                                                                        type="video/{{ pathinfo($file->file_path, PATHINFO_EXTENSION) }}">
                                                                Your browser does not support the video tag.
                                                            </video>
                                                        </div>
                                                    @else
                                                        <div class="document-preview">
                                                            <i class="fas fa-file-alt"></i>
                                                            <span class="file-name">{{ basename($file->file_path) }}</span>
                                                            <a href="{{ asset('storage/' . $file->file_path) }}"
                                                               target="_blank"
                                                               class="btn btn-sm btn-outline-primary">
                                                                <i class="fas fa-download me-1"></i>Download
                                                            </a>
                                                        </div>
                                                    @endif
                                                </div>
                                            @endforeach
                                        </div>
                                    @else
                                        <div class="no-files">
                                            <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                                            <p class="text-muted">No files uploaded for this event</p>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Image Modal -->
    <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageModalLabel">Image Preview</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <img id="modalImage" src="" alt="Preview" class="img-fluid">
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <style>
        .section-title {
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 8px;
            margin-bottom: 20px;
            font-weight: 600;
        }

        .info-item {
            margin-bottom: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid #3498db;
        }

        .info-label {
            display: block;
            font-weight: 600;
            color: #495057;
            margin-bottom: 8px;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .info-value {
            color: #2c3e50;
            font-size: 1rem;
        }

        .description-text {
            background: white;
            padding: 20px;
            border-radius: 8px;
            border: 1px solid #dee2e6;
            line-height: 1.6;
            min-height: 120px;
        }

        .highlights-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 15px;
        }

        .highlight-item {
            background: white;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #e9ecef;
            display: flex;
            align-items: center;
            font-size: 0.95rem;
        }

        .highlight-item i {
            color: #28a745;
            margin-right: 10px;
        }

        .table {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .table th {
            background: #f8f9fa;
            border-bottom: 2px solid #dee2e6;
            font-weight: 600;
            color: #495057;
        }

        .price-tag {
            background: #28a745;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.9rem;
        }

        .guest-pricing {
            font-size: 0.85rem;
        }

        .pricing-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 4px;
            padding: 2px 0;
        }

        .pricing-label {
            color: #6c757d;
            font-weight: 500;
        }

        .pricing-value {
            color: #28a745;
            font-weight: 600;
        }

        .files-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }

        .files-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
        }

        .file-item {
            border: 1px solid #dee2e6;
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .file-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .image-preview img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .image-preview img:hover {
            opacity: 0.8;
        }

        .video-preview video {
            width: 100%;
            height: 150px;
            object-fit: cover;
        }

        .document-preview {
            padding: 20px;
            text-align: center;
            background: #f8f9fa;
        }

        .document-preview i {
            font-size: 2.5em;
            color: #6c757d;
            margin-bottom: 10px;
        }

        .file-name {
            display: block;
            font-size: 0.85rem;
            color: #495057;
            margin-bottom: 15px;
            word-break: break-word;
        }

        .no-files {
            text-align: center;
            padding: 40px 20px;
            color: #6c757d;
        }

        .badge {
            font-size: 0.8rem;
            padding: 6px 12px;
        }

        .card-header {
            background: transparent;
            color: #2c3e50;
            padding: 20px;
            border-radius: 8px 8px 0 0;
        }

        .card-header h4 {
            color: #2c3e50;
            margin: 0;
        }

        .btn {
            border-radius: 6px;
            font-weight: 500;
        }

        .btn-sm {
            padding: 6px 12px;
            font-size: 0.85rem;
        }
    </style>
@endpush

@push('js')
    <script>
        function openImageModal(imageSrc) {
            document.getElementById('modalImage').src = imageSrc;
            new bootstrap.Modal(document.getElementById('imageModal')).show();
        }
    </script>
@endpush