@extends('layouts.app')

@section('content')
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed page-with-wide-sidebar">
        <!-- begin #header -->
        @include('partials.header')
        <!-- end #header -->

        <!-- begin #sidebar -->
        @include('partials.sidebar')
        <!-- end #sidebar -->

        <!-- begin #content -->
        <div id="content" class="content">
            <!-- begin breadcrumb -->
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                <li class="breadcrumb-item"><a href="javascript:;">Marketing</a></li>
                <li class="breadcrumb-item"><a href="{{ route('promotions.index') }}">Promotions</a></li>
                <li class="breadcrumb-item active">View</li>
            </ol>
            <!-- end breadcrumb -->

            <!-- begin page-header -->
            <h1 class="page-header">View Promotion</h1>
            <!-- end page-header -->

            <!-- Dynamic alert container for AJAX responses -->
            <div id="alert-container"></div>

            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <h4 class="panel-title">Promotion Details</h4>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-8">
                            <!-- Promotion Content Details -->
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        Promotion Content
                                        <span
                                            class="badge badge-{{ $promotion->mode == 'image' ? 'primary' : 'danger' }} ml-2">
                                            @if ($promotion->mode == 'image')
                                                <i class="fa fa-images"></i> Image Mode
                                            @else
                                                <i class="fa fa-play"></i> Video Mode
                                            @endif
                                        </span>
                                        <span class="badge badge-{{ $promotion->is_active ? 'success' : 'secondary' }} ml-1"
                                            id="status-badge">
                                            {{ $promotion->is_active ? 'Active' : 'Inactive' }}
                                        </span>
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="content-display" style="font-size: 16px; line-height: 1.6;">
                                        @if ($promotion->title)
                                            <div class="mb-3">
                                                <h6>
                                                    Title:
                                                </h6>
                                                <div class="bg-light p-3 rounded">
                                                    {!! nl2br(e($promotion->title)) !!}
                                                </div>
                                            </div>
                                        @endif

                                        @if ($promotion->description)
                                            <div class="mb-3">
                                                <h6>Description:</h6>
                                                <div class="bg-light p-3 rounded">
                                                    {!! nl2br(e($promotion->description)) !!}
                                                </div>
                                            </div>
                                        @endif

                                        <div class="row">
                                            <div class="col-md-6">
                                                <p><strong>Created:</strong>
                                                    {{ $promotion->created_at->format('M d, Y g:i A') }}</p>
                                                @if ($promotion->updated_at != $promotion->created_at)
                                                    <p><strong>Updated:</strong>
                                                        {{ $promotion->updated_at->format('M d, Y g:i A') }}</p>
                                                @endif
                                            </div>
                                            <div class="col-md-6">
                                                @if ($promotion->mode == 'image')
                                                    <p><strong>Images:</strong> {{ $promotion->images->count() }} image(s)
                                                    </p>
                                                @elseif($promotion->mode == 'video')
                                                    <p><strong>Video Source:</strong> YouTube</p>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Media Content Section -->
                            @if ($promotion->mode == 'video')
                                <!-- Video Content -->
                                <div class="card mt-3">
                                    <div class="card-header">
                                        <h5 class="card-title mb-0">
                                            <i class="fa fa-play text-danger"></i> YouTube Video
                                        </h5>
                                    </div>
                                    <div class="card-body">
                                        @if ($promotion->youtube_url && $promotion->youtube_video_id)
                                            <div class="embed-responsive embed-responsive-16by9 mb-3">
                                                <iframe class="embed-responsive-item"
                                                    src="{{ $promotion->youtube_embed_url }}" allowfullscreen></iframe>
                                            </div>

                                            <div class="mt-3">
                                                <p class="mb-2"><strong>YouTube URL:</strong></p>
                                                <a href="{{ $promotion->youtube_url }}" target="_blank"
                                                    class="btn btn-sm btn-outline-danger">
                                                    <i class="fa fa-external-link-alt"></i> Open on YouTube
                                                </a>
                                            </div>
                                        @else
                                            <div class="text-center py-5">
                                                <i class="fa fa-exclamation-triangle fa-3x text-muted mb-3"></i>
                                                <p class="text-muted">No valid YouTube URL found</p>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @else
                                <!-- Image Content -->
                                <div class="card mt-3">
                                    <div class="card-header">
                                        <h5 class="card-title mb-0">
                                            <i class="fa fa-images text-primary"></i>
                                            Images ({{ $promotion->images->count() }})
                                        </h5>
                                    </div>
                                    <div class="card-body">
                                        @if ($promotion->images->count() > 0)
                                            <div class="row">
                                                @foreach ($promotion->images->sortBy('sort_order') as $image)
                                                    <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
                                                        <div class="card">
                                                            @if ($image->imageExists())
                                                                <img src="{{ $image->image_url }}"
                                                                    alt="{{ $image->original_filename }}"
                                                                    class="card-img-top image-clickable"
                                                                    style="height: 200px; object-fit: cover; cursor: pointer;"
                                                                    data-image-url="{{ $image->image_url }}"
                                                                    data-image-title="{{ $image->original_filename }}">
                                                            @else
                                                                <div class="card-img-top d-flex align-items-center justify-content-center bg-light"
                                                                    style="height: 200px;">
                                                                    <div class="text-center text-muted">
                                                                        <i
                                                                            class="fa fa-exclamation-triangle fa-2x mb-2"></i>
                                                                        <p class="mb-0">Image not found</p>
                                                                    </div>
                                                                </div>
                                                            @endif

                                                            <div class="card-body p-2">
                                                                <h6 class="card-title text-truncate"
                                                                    title="{{ $image->original_filename ?: $image->image_path }}">
                                                                    {{ $image->original_filename ?: $image->image_path }}
                                                                </h6>
                                                                <p class="card-text small text-muted mb-0">
                                                                    {{ $image->human_file_size }} •
                                                                    {{ $image->resolution }}
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @else
                                            <div class="text-center py-5">
                                                <i class="fa fa-image fa-3x text-muted mb-3"></i>
                                                <p class="text-muted">No images found</p>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endif
                        </div>

                        <div class="col-md-4">
                            <!-- Thumbnail Preview -->
                            @if ($promotion->thumbnail && $promotion->thumbnailExists())
                                <div class="card">
                                    <div class="card-header">
                                        <h6 class="card-title mb-0">
                                            <i class="fa fa-image"></i> Thumbnail Preview
                                        </h6>
                                    </div>
                                    <div class="card-body text-center">
                                        <img src="{{ $promotion->thumbnail_url }}"
                                            alt="{{ $promotion->title }} Thumbnail" class="img-responsive img-thumbnail"
                                            style="max-width: 100%; max-height: 200px; object-fit: contain; cursor: pointer;"
                                            data-image-url="{{ $promotion->thumbnail_url }}" data-image-title="Thumbnail"
                                            onclick="openImageModal(this)">
                                    </div>
                                </div>
                            @endif

                            <!-- Basic Information -->
                            <div class="card mt-3">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fa fa-info-circle"></i> Basic Information
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <table class="table table-borderless table-sm">
                                        <tr>
                                            <td class="font-weight-bold">Title:</td>
                                            <td>{{ $promotion->title }}</td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">Media Type:</td>
                                            <td>
                                                <span
                                                    class="badge badge-{{ $promotion->mode == 'image' ? 'primary' : 'danger' }}">
                                                    {{ ucfirst($promotion->mode) }}
                                                </span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">Status:</td>
                                            <td>
                                                @if ($promotion->is_active)
                                                    <span class="badge badge-success">Active</span>
                                                @else
                                                    <span class="badge badge-secondary">Inactive</span>
                                                @endif
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">Created:</td>
                                            <td>{{ $promotion->created_at->format('M d, Y \a\t H:i') }}</td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">Last Updated:</td>
                                            <td>{{ $promotion->updated_at->format('M d, Y \a\t H:i') }}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>

                            <!-- Action Buttons -->
                            <div class="card mt-3">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fa fa-cogs"></i> Actions
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="d-grid gap-2">
                                        <!-- Toggle Active Status Button -->
                                        <button type="button"
                                            class="btn btn-custom btn-{{ $promotion->is_active ? 'warning' : 'success' }} btn-block toggle-status"
                                            data-id="{{ $promotion->id }}" id="toggle-status-btn">
                                            <i class="fa {{ $promotion->is_active ? 'fa-pause' : 'fa-play' }}"
                                                id="toggle-icon"></i>
                                            <span
                                                id="toggle-text">{{ $promotion->is_active ? 'Deactivate' : 'Activate' }}</span>
                                        </button>

                                        <!-- Edit Button -->
                                        <a href="{{ route('promotions.edit', $promotion->id) }}"
                                            class="btn btn-custom btn-block">
                                            <i class="fa fa-edit"></i> Edit Promotion
                                        </a>

                                        <!-- Back Button -->
                                        <a href="{{ route('promotions.index') }}" class="btn btn-custom btn-block">
                                            <i class="fa fa-arrow-left"></i> Back to List
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <!-- Technical Information -->
                            <div class="card mt-3">
                                <div class="card-header">
                                    <h6 class="card-title mb-0">
                                        <i class="fa fa-cog"></i> Technical Details
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <table class="table table-borderless table-sm">
                                        <tr>
                                            <td class="font-weight-bold">ID:</td>
                                            <td>
                                                <small class="text-muted">
                                                    <code>#{{ $promotion->id }}</code>
                                                </small>
                                            </td>
                                        </tr>
                                        @if ($promotion->mode == 'image')
                                            <tr>
                                                <td class="font-weight-bold">Total Images:</td>
                                                <td>
                                                    <small class="text-muted">
                                                        {{ $promotion->images->count() }} files
                                                    </small>
                                                </td>
                                            </tr>
                                        @endif
                                        @if ($promotion->youtube_video_id)
                                            <tr>
                                                <td class="font-weight-bold">Video ID:</td>
                                                <td>
                                                    <small class="text-muted">
                                                        <code>{{ $promotion->youtube_video_id }}</code>
                                                    </small>
                                                </td>
                                            </tr>
                                        @endif
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end panel -->
        </div>
        <!-- end #content -->

        <!-- begin scroll to top btn -->
        <a href="javascript:;" class="btn btn-icon btn-circle btn-custom btn-scroll-to-top fade" data-click="scroll-top">
            <i class="fa fa-angle-up"></i>
        </a>
        <!-- end scroll to top btn -->
    </div>

    <!-- Image Fullscreen Modal -->
    <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageModalLabel">Image Preview</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center p-2">
                    <img id="fullscreenImage" src="" alt="" class="img-fluid"
                        style="max-height: 70vh; max-width: 100%;">
                </div>
            </div>
        </div>
    </div>

    <!-- Loading Overlay -->
    <div id="loadingOverlay" style="display: none;">
        <div class="loading-content">
            <i class="fa fa-spinner fa-spin fa-2x"></i>
            <p class="mt-2">Loading...</p>
        </div>
    </div>

    <!-- Include jQuery and Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

    <style>
        .card {
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
        }

        .card-header {
            background-color: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
            padding: 0.75rem 1.25rem;
        }

        .card-body {
            padding: 1.25rem;
        }

        .content-display {
            background-color: #f8f9fa;
            padding: 1rem;
            border-radius: 0.375rem;
            border: 1px solid #dee2e6;
        }

        /* Ensure panel title is black */
        .panel-title {
            color: #000000 !important;
        }

        /* Card title styling */
        .card-title {
            color: #000000 !important;
        }

        /* Custom button variants */
        .btn-custom.btn-success {
            background-color: #28a745 !important;
            border-color: #28a745 !important;
            color: white !important;
        }

        .btn-custom.btn-success:hover {
            background-color: #218838 !important;
            border-color: #1e7e34 !important;
            color: white !important;
        }

        .btn-custom.btn-warning {
            background-color: #ffc107 !important;
            border-color: #ffc107 !important;
            color: #212529 !important;
        }

        .btn-custom.btn-warning:hover {
            background-color: #e0a800 !important;
            border-color: #d39e00 !important;
            color: #212529 !important;
        }

        .btn-custom.btn-danger {
            background-color: #dc3545 !important;
            border-color: #dc3545 !important;
            color: white !important;
        }

        .btn-custom.btn-danger:hover {
            background-color: #c82333 !important;
            border-color: #bd2130 !important;
            color: white !important;
        }

        .btn-custom.btn-secondary {
            background-color: #6c757d !important;
            border-color: #6c757d !important;
            color: white !important;
        }

        .btn-custom.btn-secondary:hover {
            background-color: #5a6268 !important;
            border-color: #545b62 !important;
            color: white !important;
        }

        /* Button group spacing */
        .d-grid {
            display: grid;
        }

        .gap-2 {
            gap: 0.5rem;
        }

        .btn-block {
            display: block;
            width: 100%;
        }

        .btn-block+.btn-block {
            margin-top: 0.25rem;
        }

        /* Loading state for buttons */
        .btn-loading {
            opacity: 0.6;
            pointer-events: none;
        }

        .image-clickable {
            transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
        }

        .image-clickable:hover {
            transform: scale(1.05);
            opacity: 0.9;
        }

        #loadingOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .loading-content {
            background: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            color: #333;
        }

        /* Ensure modal appears above everything */
        .modal {
            z-index: 10000;
        }

        .modal-backdrop {
            z-index: 9999;
        }

        /* Better modal styling */
        .modal-content {
            border: none;
            border-radius: 8px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        }

        .modal-header {
            border-bottom: 1px solid #e9ecef;
            background-color: #f8f9fa;
            border-radius: 8px 8px 0 0;
        }

        .modal-footer {
            border-top: 1px solid #e9ecef;
            background-color: #f8f9fa;
            border-radius: 0 0 8px 8px;
        }

        #fullscreenImage {
            border-radius: 4px;
            transition: opacity 0.3s ease-in-out;
        }

        /* Loading state for images */
        .image-loading {
            opacity: 0.5;
        }

        /* Alert animations */
        .alert {
            animation: slideInDown 0.3s ease-out;
        }

        @keyframes slideInDown {
            from {
                transform: translateY(-100%);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* Image styling */
        .img-responsive {
            max-width: 100%;
            height: auto;
        }

        .img-thumbnail {
            padding: 0.25rem;
            background-color: #fff;
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
        }

        /* Responsive design */
        @media (max-width: 768px) {
            .d-grid {
                width: 100%;
            }

            .d-grid .btn {
                width: 100%;
                margin-bottom: 0.5rem;
            }
        }
    </style>

    <script>
        window.routes = {
            togglePromotionStatus: '{{ route('promotions.toggleStatus', ':id') }}'
        };
    </script>

    <script>
        $(document).ready(function() {
            // CSRF token setup for AJAX requests
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Initialize modal properly
            $('#imageModal').modal({
                show: false,
                backdrop: true,
                keyboard: true
            });

            // Handle image clicks with improved functionality
            $(document).on('click', '.image-clickable', function(e) {
                e.preventDefault();
                openImageModal(this);
            });

            // Function to open image modal
            window.openImageModal = function(imageElement) {
                const imageUrl = $(imageElement).data('image-url') || $(imageElement).attr('src');
                const imageTitle = $(imageElement).data('image-title') || 'Image Preview';

                if (!imageUrl) {
                    console.error('No image URL found');
                    return;
                }

                // Show loading overlay
                showLoadingOverlay();

                // Set modal content
                $('#imageModalLabel').text(imageTitle);

                // Create new image element to preload
                const img = new Image();

                img.onload = function() {
                    // Image loaded successfully
                    $('#fullscreenImage').attr('src', imageUrl).attr('alt', imageTitle);
                    hideLoadingOverlay();
                    $('#imageModal').modal('show');
                };

                img.onerror = function() {
                    // Image failed to load
                    hideLoadingOverlay();
                    showAlert('danger', 'Failed to load image. Please try again.');
                };

                // Start loading the image
                img.src = imageUrl;
            };

            // Handle modal events
            $('#imageModal').on('show.bs.modal', function() {
                console.log('Modal is opening');
            });

            $('#imageModal').on('shown.bs.modal', function() {
                console.log('Modal is now visible');
                // Focus on the modal for better accessibility
                $(this).focus();
            });

            $('#imageModal').on('hide.bs.modal', function() {
                console.log('Modal is closing');
            });

            $('#imageModal').on('hidden.bs.modal', function() {
                console.log('Modal is now hidden');
                // Clear the image source to free memory
                $('#fullscreenImage').attr('src', '').attr('alt', '');
            });

            // Handle escape key
            $(document).on('keydown', function(e) {
                if (e.key === 'Escape' && $('#imageModal').hasClass('show')) {
                    $('#imageModal').modal('hide');
                }
            });

            // Handle status toggle with improved error handling
            $('.toggle-status').on('click', function() {
                const promotionId = $(this).data('id');
                const button = $(this);

                // Prevent double clicks
                if (button.prop('disabled')) {
                    return;
                }

                // Disable button during request
                button.prop('disabled', true);
                const originalHtml = button.html();
                button.html('<i class="fa fa-spinner fa-spin"></i> Processing...');

                $.ajax({
                        url: window.routes.togglePromotionStatus.replace(':id', promotionId),
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        timeout: 10000 // 10 second timeout
                    })
                    .done(function(data) {
                        if (data.success) {
                            // Redirect to index page instead of reloading
                            window.location.href = '{{ route('promotions.index') }}';
                        } else {
                            showAlert('danger', data.message || 'Failed to update status');
                            button.prop('disabled', false);
                            button.html(originalHtml);
                        }
                    })
                    .fail(function(xhr, status, error) {
                        let errorMessage = 'Failed to update status';
                        if (status === 'timeout') {
                            errorMessage = 'Request timed out. Please try again.';
                        } else if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }

                        showAlert('danger', errorMessage);
                        button.prop('disabled', false);
                        button.html(originalHtml);
                    });
            });

            // Auto-dismiss alerts after 5 seconds
            setTimeout(function() {
                $('.alert').alert('close');
            }, 5000);
        });

        // Utility functions
        function showLoadingOverlay() {
            $('#loadingOverlay').fadeIn(200);
        }

        function hideLoadingOverlay() {
            $('#loadingOverlay').fadeOut(200);
        }

        function showAlert(type, message) {
            // Remove existing alerts
            $('#alert-container .alert').remove();

            const alertHtml = `
                <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                    <i class="fa fa-${type === 'success' ? 'check-circle' : 'exclamation-triangle'}"></i> 
                    <strong>${type === 'success' ? 'Success!' : 'Error!'}</strong> ${message}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            `;

            $('#alert-container').prepend(alertHtml);

            // Auto-dismiss after 5 seconds
            setTimeout(function() {
                $('#alert-container .alert').alert('close');
            }, 5000);
        }
    </script>
@endsection