@php
    $mode = $mode ?? 'full';
@endphp

@if ($mode === 'button')
    <button
        type="button"
        class="btn btn-sm support-tickets-tutorial-btn"
        data-toggle="modal"
        data-target="#supportTicketFlowVideoModal"
        aria-label="Watch support ticket tutorial video"
        title="Watch tutorial: How to use support tickets"
    >
        <span class="support-tickets-tutorial-btn__icon" aria-hidden="true">
            <i class="fas fa-play-circle"></i>
        </span>
        <span class="support-tickets-tutorial-btn__label">Watch tutorial</span>
    </button>
@else
    @once
        @push('stylesheets')
            <style>
                .support-tickets-tutorial-btn {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.4rem;
                    border-radius: 8px !important;
                    font-weight: 600 !important;
                    font-size: 0.75rem !important;
                    padding: 0.38rem 0.8rem !important;
                    border: 1px solid rgba(6, 148, 148, 0.35) !important;
                    color: #069494 !important;
                    background: rgba(6, 148, 148, 0.08) !important;
                    box-shadow: none !important;
                    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
                }

                .support-tickets-tutorial-btn:hover,
                .support-tickets-tutorial-btn:focus {
                    color: #047272 !important;
                    background: rgba(6, 148, 148, 0.16) !important;
                    border-color: rgba(6, 148, 148, 0.55) !important;
                }

                .support-tickets-tutorial-btn__icon {
                    display: inline-flex;
                    font-size: 1.05rem;
                    line-height: 1;
                }

                #supportTicketFlowVideoModal .modal-content {
                    border: none;
                    border-radius: 12px;
                    overflow: hidden;
                    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
                }

                #supportTicketFlowVideoModal .modal-header {
                    background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
                    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
                    padding: 0.85rem 1.1rem;
                }

                #supportTicketFlowVideoModal .modal-title {
                    display: inline-flex;
                    align-items: center;
                    font-size: 1rem;
                    font-weight: 700;
                    color: #0f172a;
                }

                #supportTicketFlowVideoModal .modal-title i {
                    color: #069494;
                }

                .support-ticket-flow-video-wrap {
                    position: relative;
                    background: #0f172a;
                    aspect-ratio: 16 / 9;
                }

                .support-ticket-flow-video-wrap video {
                    width: 100%;
                    height: 100%;
                    display: block;
                    object-fit: contain;
                    background: #000;
                }
            </style>
        @endpush
    @endonce

    <div
        class="modal fade"
        id="supportTicketFlowVideoModal"
        tabindex="-1"
        role="dialog"
        aria-labelledby="supportTicketFlowVideoModalLabel"
        aria-hidden="true"
    >
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="supportTicketFlowVideoModalLabel">
                        <i class="fas fa-play-circle mr-2" aria-hidden="true"></i>Support ticket tutorial
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body p-0">
                    <div class="support-ticket-flow-video-wrap">
                        <video
                            id="supportTicketFlowVideo"
                            controls
                            playsinline
                            preload="metadata"
                        >
                            <source src="{{ asset('videos/support-ticket-flow-video.mp4') }}" type="video/mp4">
                            Your browser does not support embedded video playback.
                        </video>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @once
        @push('scripts')
            <script>
                (function () {
                    var modal = document.getElementById('supportTicketFlowVideoModal');
                    var video = document.getElementById('supportTicketFlowVideo');

                    if (!modal || !video) {
                        return;
                    }

                    function resetVideo() {
                        video.pause();
                        video.currentTime = 0;
                    }

                    if (window.jQuery) {
                        jQuery(modal).on('hidden.bs.modal', resetVideo);
                    } else {
                        modal.addEventListener('hidden.bs.modal', resetVideo);
                    }
                })();
            </script>
        @endpush
    @endonce
@endif