@php
    // Whole modal is toggleable from Theme Options.
    if (theme_option('order_packaging_modal_enabled', 'yes') !== 'yes') {
        return;
    }

    $packagingTitle = theme_option('order_packaging_modal_title') ?: trans('plugins/ecommerce::order.packaging_video_title');
    $packagingSubtitle = theme_option('order_packaging_modal_subtitle') ?: trans('plugins/ecommerce::order.how_to_package_order_description');

    // Display source: YouTube/Vimeo link, uploaded video file, or an image.
    $packagingVideoSource = theme_option('order_packaging_video_source', 'youtube');

    // --- Uploaded video (validated: must look like a video file) ---
    $packagingVideoFile = trim((string) theme_option('order_packaging_video_file'));
    $packagingIsUpload = $packagingVideoSource === 'upload'
        && $packagingVideoFile !== ''
        && preg_match('/\.(mp4|webm|ogg|mov|m4v)(\?.*)?$/i', $packagingVideoFile);
    $packagingUploadUrl = $packagingIsUpload
        ? (str_starts_with($packagingVideoFile, 'http') ? $packagingVideoFile : RvMedia::getImageUrl($packagingVideoFile))
        : null;

    // --- Image ---
    $packagingImage = theme_option('order_packaging_image');
    $packagingIsImage = $packagingVideoSource === 'image' && ! empty($packagingImage);
    $packagingImageUrl = $packagingIsImage ? RvMedia::getImageUrl($packagingImage) : null;

    $defaultVideoUrl = theme_option('order_packaging_video_url', 'https://www.youtube.com/watch?v=dQw4w9WgXcQ');
    $videoUrl = $order->packaging_video_url ?? $defaultVideoUrl;

    if (empty($videoUrl)) {
        $videoUrl = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
    }

    // Convert standard YouTube watch URLs, short URLs, and Shorts to embed URLs
    if (str_contains($videoUrl, 'youtube.com/watch?v=')) {
        $videoUrl = str_replace('youtube.com/watch?v=', 'youtube.com/embed/', $videoUrl);
    } elseif (str_contains($videoUrl, 'youtube.com/shorts/')) {
        $videoUrl = str_replace('youtube.com/shorts/', 'youtube.com/embed/', $videoUrl);
    } elseif (str_contains($videoUrl, 'youtu.be/')) {
        $videoUrl = str_replace('youtu.be/', 'youtube.com/embed/', $videoUrl);
    } elseif (str_contains($videoUrl, 'vimeo.com/') && !str_contains($videoUrl, 'player.vimeo.com')) {
        $videoUrl = str_replace('vimeo.com/', 'player.vimeo.com/video/', $videoUrl);
    }

    // Ensure enablejsapi=1 is present for iframe manipulation if it's YouTube
    if (str_contains($videoUrl, 'youtube.com') && !str_contains($videoUrl, 'enablejsapi=')) {
        $separator = str_contains($videoUrl, '?') ? '&' : '?';
        $videoUrl .= $separator . 'enablejsapi=1';
    }

    // Only treat as a valid embed when the URL is actually YouTube/Vimeo.
    $packagingIsYoutube = $packagingVideoSource === 'youtube'
        && preg_match('/youtube\.com|youtu\.be|vimeo\.com|player\.vimeo/i', (string) $videoUrl);

    // Feature boxes (each independently toggleable + editable text).
    $packagingBoxes = [];
    foreach ([1, 2, 3] as $bi) {
        if (theme_option("order_packaging_box{$bi}_enabled", 'yes') !== 'yes') {
            continue;
        }
        $packagingBoxes[] = [
            'index' => $bi,
            'title' => theme_option("order_packaging_box{$bi}_title", ''),
            'desc' => theme_option("order_packaging_box{$bi}_desc", ''),
        ];
    }
@endphp

<!-- Packaging Video Modal -->
<div class="bb-packaging-modal-overlay" id="packagingVideoModal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="packagingModalTitle">
    <div class="bb-packaging-modal-dialog">
        <div class="bb-packaging-modal-content">
            <!-- Modal Header -->
            <div class="bb-packaging-modal-header">
                <div class="bb-packaging-modal-header-info">
                    <div class="bb-packaging-icon-badge">
                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="m7.5 4.27 9 5.15"></path>
                            <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"></path>
                            <path d="m3.3 7 8.7 5 8.7-5"></path>
                            <path d="M12 22V12"></path>
                        </svg>
                    </div>
                    <div>
                        <h3 class="bb-packaging-modal-title" id="packagingModalTitle">{{ $packagingTitle }}</h3>
                        <p class="bb-packaging-modal-subtitle">{{ $packagingSubtitle }}</p>
                    </div>
                </div>
                <button type="button" class="bb-packaging-modal-close" id="btnClosePackagingVideoModal" aria-label="{{ trans('plugins/ecommerce::order.close') }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </button>
            </div>

            <!-- Modal Body (Responsive Video Player) -->
            <div class="bb-packaging-modal-body">
                <div class="bb-packaging-video-wrapper">
                    @if ($packagingIsImage)
                        <img src="{{ $packagingImageUrl }}" alt="{{ $packagingTitle }}" style="width:100%;height:100%;object-fit:contain;background:#000;">
                    @elseif ($packagingIsUpload)
                        <video
                            id="packagingVideoFile"
                            data-src="{{ $packagingUploadUrl }}"
                            src=""
                            controls
                            playsinline
                            preload="none"
                            style="width:100%;height:100%;">
                        </video>
                    @elseif ($packagingIsYoutube)
                        <iframe
                            id="packagingVideoIframe"
                            data-src="{{ $videoUrl }}"
                            src=""
                            title="{{ $packagingTitle }}"
                            frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                            allowfullscreen>
                        </iframe>
                    @else
                        <div style="display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#94a3b8;font-size:14px;">
                            {{ __('لا يوجد محتوى للعرض') }}
                        </div>
                    @endif
                </div>

                <!-- Packaging Highlights / Steps (each box: editable + toggleable) -->
                @if (! empty($packagingBoxes))
                    @php
                        $packagingIcons = [
                            1 => '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/>',
                            2 => '<rect width="16" height="20" x="4" y="2" rx="2"/><line x1="8" x2="16" y1="6" y2="6"/><line x1="8" x2="16" y1="10" y2="10"/><line x1="8" x2="12" y1="14" y2="14"/>',
                            3 => '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
                        ];
                    @endphp
                    <div class="bb-packaging-features">
                        @foreach ($packagingBoxes as $box)
                            <div class="bb-packaging-feature-item">
                                <div class="feature-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        {!! $packagingIcons[$box['index']] ?? '' !!}
                                    </svg>
                                </div>
                                <div class="feature-text">
                                    <strong>{{ $box['title'] }}</strong>
                                    <span>{{ $box['desc'] }}</span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

            <!-- Modal Footer -->
            <div class="bb-packaging-modal-footer">
                <button type="button" class="bb-packaging-btn-close" id="btnFooterClosePackagingModal">
                    {{ trans('plugins/ecommerce::order.close') }}
                </button>
            </div>
        </div>
    </div>
</div>

<style>
/* Side-by-side Packaging Video Button Styling */
.btn-packaging-video {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.875rem 1.5rem;
    background: #ffffff;
    color: var(--checkout-primary-color, #5a1a1a) !important;
    font-size: 0.9375rem;
    font-weight: 600;
    border: 1.5px solid var(--checkout-primary-color, #5a1a1a);
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.btn-packaging-video svg {
    color: var(--checkout-primary-color, #5a1a1a);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.btn-packaging-video:hover {
    background: rgba(90, 26, 26, 0.06);
    border-color: var(--checkout-primary-color, #5a1a1a);
    color: var(--checkout-primary-color, #5a1a1a) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(90, 26, 26, 0.12);
}

.btn-packaging-video:hover svg {
    transform: scale(1.15);
}

.btn-packaging-video:active {
    transform: translateY(0);
}

/* Packaging Video Modal Styles */
.bb-packaging-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    direction: rtl;
    text-align: right;
    box-sizing: border-box;
}

.bb-packaging-modal-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.bb-packaging-modal-dialog {
    width: 100%;
    max-width: 780px;
    max-height: 92vh;
    margin: auto;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.bb-packaging-modal-overlay.is-active .bb-packaging-modal-dialog {
    transform: scale(1) translateY(0);
}

.bb-packaging-modal-content {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.bb-packaging-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
    background: #fafbfc;
}

.bb-packaging-modal-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bb-packaging-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(90, 26, 26, 0.08);
    color: var(--checkout-primary-color, #5a1a1a);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bb-packaging-modal-title {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
    line-height: 1.3;
}

.bb-packaging-modal-subtitle {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 3px 0 0 0;
    line-height: 1.4;
}

.bb-packaging-modal-close {
    background: #f1f5f9;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

.bb-packaging-modal-close:hover {
    background: #e2e8f0;
    color: #0f172a;
    transform: rotate(90deg);
}

.bb-packaging-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
}

.bb-packaging-video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    border-radius: 12px;
    overflow: hidden;
    background: #000000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.bb-packaging-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.bb-packaging-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 1.25rem;
}

.bb-packaging-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.bb-packaging-feature-item .feature-icon {
    color: var(--checkout-primary-color, #5a1a1a);
    flex-shrink: 0;
    margin-top: 2px;
}

.bb-packaging-feature-item .feature-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bb-packaging-feature-item .feature-text strong {
    font-size: 0.8125rem;
    color: #1e293b;
}

.bb-packaging-feature-item .feature-text span {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.3;
}

.bb-packaging-modal-footer {
    padding: 1rem 1.5rem;
    background: #fafbfc;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
}

.bb-packaging-btn-close {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #334155;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bb-packaging-btn-close:hover {
    background: #e2e8f0;
    color: #0f172a;
}

@media (max-width: 768px) {
    .bb-packaging-features {
        grid-template-columns: 1fr;
    }
    .bb-packaging-modal-header {
        padding: 1rem;
    }
    .bb-packaging-modal-body {
        padding: 1rem;
    }
    .btn-packaging-video {
        width: 100%;
    }
    .success-actions .btn-continue-shopping {
        width: 100%;
    }
    .success-actions .btn-view-orders {
        width: 100%;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const modal = document.getElementById('packagingVideoModal');
    const openBtn = document.getElementById('btnOpenPackagingVideoModal');
    const closeBtn = document.getElementById('btnClosePackagingVideoModal');
    const footerCloseBtn = document.getElementById('btnFooterClosePackagingModal');
    const iframe = document.getElementById('packagingVideoIframe');
    const videoEl = document.getElementById('packagingVideoFile');

    if (!modal || !openBtn) return;

    function openModal() {
        if (iframe && iframe.dataset.src) {
            let videoSrc = iframe.dataset.src;
            // Append autoplay=1 when opening
            if (!videoSrc.includes('autoplay=1')) {
                videoSrc += (videoSrc.includes('?') ? '&' : '?') + 'autoplay=1';
            }
            iframe.src = videoSrc;
        }
        if (videoEl && videoEl.dataset.src) {
            if (!videoEl.src) {
                videoEl.src = videoEl.dataset.src;
            }
            videoEl.play().catch(function() {});
        }
        modal.classList.add('is-active');
        document.body.style.overflow = 'hidden';
    }

    function closeModal() {
        modal.classList.remove('is-active');
        document.body.style.overflow = '';
        if (iframe) {
            // Reset iframe source to stop playback immediately
            iframe.src = '';
        }
        if (videoEl) {
            videoEl.pause();
        }
    }

    openBtn.addEventListener('click', function(e) {
        e.preventDefault();
        openModal();
    });

    if (closeBtn) {
        closeBtn.addEventListener('click', closeModal);
    }

    if (footerCloseBtn) {
        footerCloseBtn.addEventListener('click', closeModal);
    }

    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            closeModal();
        }
    });

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && modal.classList.contains('is-active')) {
            closeModal();
        }
    });
});
</script>