@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                            </i><span class="font-weight-bold">Kembali</button>
                        {{-- check authorize edit --}}
                        @if ($authorize->edit == '1' && $list->status == 'entry' && $list->isactive == '1')
                            {{-- button edit --}}
                            <a href="{{ url($url_menu . '/edit/' . encrypt($list->id)) }}" class="btn btn-warning mb-0">
                                <i class="fas fa-edit me-1"></i><span class="font-weight-bold">Edit</span>
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4" style="margin-top: 18px;">
        <div class="row">
            <div class="col-md-12">
                {{-- Preview Label --}}
                <div class="mb-3">
                    <span class="badge bg-info px-3 py-2">
                        <i class="fas fa-eye me-1"></i> Preview Broadcast - Seperti yang dilihat Vendor
                    </span>
                    @if ($list->status == 'posted')
                        <span class="badge bg-success px-3 py-2 ms-2">Posted</span>
                    @elseif ($list->isactive == '0')
                        <span class="badge bg-secondary px-3 py-2 ms-2">Inactive</span>
                    @else
                        <span class="badge bg-warning px-3 py-2 ms-2">Entry (Belum dipost)</span>
                    @endif
                    <span class="badge bg-light text-dark px-3 py-2 ms-2">ID: {{ $list->id }}</span>
                </div>

                {{-- Full width preview card --}}
                <div class="preview-modal-wrapper mx-auto">
                    <div class="announcement-modal-content">
                        <div class="announcement-modal-header">
                            <div class="d-flex align-items-center gap-3">
                                <div class="announcement-icon-wrapper">
                                    <i class="fas fa-bullhorn"></i>
                                </div>
                                <div>
                                    <h5 class="modal-title mb-0 fw-bold">
                                        Pengumuman Penting
                                    </h5>
                                    <small>PT Multi Spunindo Jaya Tbk</small>
                                </div>
                            </div>
                        </div>
                        <div class="announcement-content p-4">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div class="announcement-date-badge">
                                    <i class="fas fa-calendar-alt me-1"></i>
                                    {{ \Carbon\Carbon::parse($list->tanggal_awal)->format('d M Y') }}
                                    -
                                    {{ \Carbon\Carbon::parse($list->tanggal_akhir)->format('d M Y') }}
                                </div>
                                <small class="text-muted">
                                    <i class="fas fa-clock me-1"></i>
                                    {{ \Carbon\Carbon::parse($list->created_at)->diffForHumans() }}
                                </small>
                            </div>

                            <div class="announcement-recipient mb-3">
                                <strong>Kepada Yth.</strong>
                                <div class="mt-2 d-flex flex-wrap gap-1">
                                    @php
                                        $vendorList = explode(', ', $list->vendor_names);
                                    @endphp
                                    @foreach ($vendorList as $vname)
                                        <span class="badge bg-info"
                                            style="font-size: 12px; white-space: normal; word-break: break-word;">{{ strtoupper(trim($vname)) }}</span>
                                    @endforeach
                                </div>
                            </div>

                            <div class="announcement-message-wrapper">
                                <div class="announcement-message-content">
                                    {!! $list->pesan !!}
                                </div>
                                <div class="scroll-indicator scroll-indicator-left" onclick="scrollMessage(-200)">
                                    <i class="fas fa-chevron-left"></i>
                                </div>
                                <div class="scroll-indicator scroll-indicator-right" onclick="scrollMessage(200)">
                                    <i class="fas fa-chevron-right"></i>
                                </div>
                            </div>

                            <div class="announcement-signature mt-4">
                                <div class="signature-line"></div>
                                <p class="mb-1 text-muted">Hormat kami,</p>
                                <p class="mb-0 fw-bold text-primary">PT Multi Spunindo Jaya Tbk</p>
                                <small class="text-muted">Nonwovens Manufacturer</small>
                                <p class="mb-1">Desa Jabaran, RT.008 RW.003</p>
                                <p class="mb-1">Desa Jabaran, Balongbendo, Kab. Sidoarjo Jawa Timur 61263, Jawa Timur -
                                    Indonesia</p>
                                <p class="mb-1">Telp : +62-31 -8975555</p>
                                <p class="mb-0">Fax : +62-31-8976666, 8971300</p>
                            </div>
                        </div>
                        <div class="announcement-modal-footer">
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">
                                    <i class="fas fa-info-circle me-1"></i>
                                    Preview ini menampilkan tampilan broadcast seperti yang akan dilihat oleh vendor
                                </small>
                                <!-- <button type="button" class="btn btn-primary" onclick="history.back()">
                                    <i class="fas fa-arrow-left me-1"></i> Kembali
                                </button> -->
                            </div>
                        </div>
                    </div> {{-- Close announcement-modal-content --}}
                </div> {{-- Close preview-modal-wrapper --}}
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const messageContent = document.querySelector('.announcement-message-content');
            const scrollLeftBtn = document.querySelector('.scroll-indicator-left');
            const scrollRightBtn = document.querySelector('.scroll-indicator-right');

            if (messageContent && scrollLeftBtn && scrollRightBtn) {
                // Function to check scroll position and show/hide indicators
                function updateScrollIndicators() {
                    const hasHorizontalScroll = messageContent.scrollWidth > messageContent.clientWidth;
                    const hasVerticalScroll = messageContent.scrollHeight > messageContent.clientHeight;

                    if (hasHorizontalScroll || hasVerticalScroll) {
                        // Show left indicator if not at start
                        if (messageContent.scrollLeft > 0 || messageContent.scrollTop > 0) {
                            scrollLeftBtn.classList.add('active');
                        } else {
                            scrollLeftBtn.classList.remove('active');
                        }

                        // Show right indicator if not at end
                        const atEndHorizontal = messageContent.scrollLeft >= (messageContent.scrollWidth - messageContent.clientWidth - 5);
                        const atEndVertical = messageContent.scrollTop >= (messageContent.scrollHeight - messageContent.clientHeight - 5);

                        if (!atEndHorizontal || !atEndVertical) {
                            scrollRightBtn.classList.add('active');
                        } else {
                            scrollRightBtn.classList.remove('active');
                        }
                    }
                }

                // Initial check
                setTimeout(updateScrollIndicators, 100);

                // Update on scroll
                messageContent.addEventListener('scroll', updateScrollIndicators);

                // Update on window resize
                window.addEventListener('resize', updateScrollIndicators);
            }
        });

        // Function to scroll message content
        function scrollMessage(amount) {
            const messageContent = document.querySelector('.announcement-message-content');
            if (messageContent) {
                // Try horizontal scroll first, then vertical
                if (messageContent.scrollWidth > messageContent.clientWidth) {
                    messageContent.scrollBy({ left: amount, behavior: 'smooth' });
                } else {
                    messageContent.scrollBy({ top: amount, behavior: 'smooth' });
                }
            }
        }
    </script>
@endpush

@push('addjs')
    <style>
        .announcement-modal-content {
            border: none;
            border-radius: 16px;
            overflow: visible;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            background: #fff;
            position: relative;
            z-index: 1;
        }

        .announcement-modal-header {
            background: linear-gradient(135deg, #028284 0%, #017374 100%);
            color: white;
            padding: 20px 25px;
            border: none;
            border-radius: 16px 16px 0 0;
        }

        .announcement-modal-header .modal-title {
            color: white;
        }

        .announcement-modal-header small {
            color: rgba(255, 255, 255, 0.8) !important;
        }

        .announcement-icon-wrapper {
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .announcement-icon-wrapper i {
            font-size: 24px;
            color: white;
        }

        .announcement-content {
            background: #fff;
        }

        .announcement-date-badge {
            background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
            color: #2e7d32;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
        }

        .announcement-recipient {
            font-size: 15px;
            color: #444;
        }

        /* Scrollable message wrapper */
        .announcement-message-wrapper {
            position: relative;
            max-height: 400px;
            overflow: visible;
        }

        .announcement-message-content {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 20px;
            border-left: 4px solid #028284;
            color: #333;
            font-size: 14px;
            line-height: 1.8;
            max-height: 400px;
            overflow-y: auto;
            overflow-x: auto;
            scroll-behavior: smooth;
        }

        .announcement-message-content::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        .announcement-message-content::-webkit-scrollbar-track {
            background: #e9ecef;
            border-radius: 4px;
        }

        .announcement-message-content::-webkit-scrollbar-thumb {
            background: #028284;
            border-radius: 4px;
        }

        .announcement-message-content::-webkit-scrollbar-thumb:hover {
            background: #017374;
        }

        .announcement-message-content::-webkit-scrollbar-corner {
            background: #e9ecef;
        }

        .announcement-message-content p {
            margin-bottom: 10px;
        }

        .announcement-message-content p:last-child {
            margin-bottom: 0;
        }

        /* Allow images to display at original size with scrolling */
        .announcement-message-content img {
            max-width: none;
            height: auto;
            border-radius: 8px;
            margin: 10px 0;
            display: block;
        }

        /* Scroll indicators */
        .scroll-indicator {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            background: rgba(2, 130, 132, 0.9);
            color: white;
            border-radius: 50%;
            display: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        .scroll-indicator:hover {
            background: #017374;
            transform: translateY(-50%) scale(1.1);
        }

        .scroll-indicator-left {
            left: 5px;
        }

        .scroll-indicator-right {
            right: 5px;
        }

        .announcement-message-wrapper:hover .scroll-indicator.active {
            display: flex;
        }

        .announcement-signature {
            text-align: right;
            padding-top: 15px;
        }

        .announcement-signature p {
            margin-bottom: 3px;
            font-size: 13px;
            color: #444;
        }

        .signature-line {
            width: 150px;
            height: 2px;
            background: linear-gradient(90deg, transparent, #028284);
            margin-left: auto;
            margin-bottom: 10px;
        }

        .announcement-modal-footer {
            background: #f8f9fa;
            border-top: 1px solid #e9ecef;
            padding: 15px 25px;
        }

        @media (max-width: 768px) {
            .announcement-modal-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }

            .announcement-date-badge {
                font-size: 11px;
                padding: 6px 12px;
            }

            .announcement-signature {
                text-align: center;
            }

            .signature-line {
                margin: 0 auto 10px;
            }
        }
    </style>
@endpush