@if (!empty($page_init['policy']))
    <div id="privacy-policy-popup" class="privacy-popup-overlay" data-policy-id="{{ $page_init['policy']['id'] ?? '' }}" data-save-url="{{ route('api.pdpa.save') }}">
        <!-- Close Button -->
        <button type="button" id="privacy-close-btn" class="privacy-close-btn">
            <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 class="privacy-popup-content">
            <div class="privacy-popup-inner">
                <div class="privacy-text-wrapper">
                    <div class="privacy-popup-header">
                        <h3>{{ $page_init['policy']['name'] ?? '' }}</h3>
                    </div>
                    <div class="privacy-popup-body">
                        {{ $page_init['policy']['desc'] ?? '' }}
                    </div>
                </div>
                <div class="privacy-popup-footer">
                    <a href="{{ $page_init['policy']['url'] ?? '#' }}" class="btn btn-outline" id="privacy-detail-btn" target="_blank">
                        <span>{{ __('frontend::common.view_policy') }}</span>
                    </a>
                    <a class="btn" style="cursor: pointer" id="privacy-accept-btn">
                        <span>{{ __('frontend::common.accept_all') }}</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <style>
        .privacy-popup-overlay {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: transparent;
            display: none;
            align-items: flex-end;
            justify-content: center;
            z-index: 9999;
            padding: 0;
        }

        .privacy-popup-overlay.show {
            display: flex;
        }

        .privacy-popup-content {
            background: white;
            border-radius: 12px 12px 0 0;
            max-width: 100%;
            width: 100%;
            position: relative;
            box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
            animation: slideUp 0.3s ease-out;
        }

        .privacy-popup-inner {
            display: flex;
            flex-direction: column;
            gap: 16px;
            padding: 20px;
        }

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

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

        @media (min-width: 640px) {
            .privacy-popup-overlay {
                padding: 20px;
            }

            .privacy-popup-content {
                max-width: 100%;
                border-radius: 12px;
            }

            .privacy-popup-inner {
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                padding: 20px 24px;
            }

            .privacy-text-wrapper {
                flex: 1;
                padding: 0;
            }

            .privacy-popup-footer {
                flex-shrink: 0;
                border-top: none;
                padding: 0;
                margin-left: 20px;
            }
        }

        .privacy-close-btn {
            position: absolute;
            top: 16px;
            right: 16px;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6b7280;
            transition: color 0.2s;
            z-index: 10;
        }

        .privacy-close-btn:hover {
            color: #374151;
        }

        .privacy-text-wrapper {
            padding: 0;
        }

        .privacy-popup-header {
            margin-bottom: 8px;
        }

        .privacy-popup-header h3 {
            font-size: 18px;
            font-weight: 700;
            color: #111827;
            margin: 0;
        }

        .privacy-popup-body {
            color: #6b7280;
            line-height: 1.5;
            font-size: 14px;
            margin: 0;
        }

        .privacy-popup-footer {
            display: flex;
            gap: 12px;
            padding: 0;
            border-top: none;
            justify-content: flex-end;
        }

        .privacy-popup-footer .btn {
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .privacy-popup-footer .btn-outline {
            background: transparent;
            border: 1px solid #d1d5db;
            color: #374151;
        }

        .privacy-popup-footer .btn-outline:hover {
            background: #f9fafb;
            border-color: #9ca3af;
        }

        .privacy-popup-footer .btn:not(.btn-outline) {
            background: #2563eb;
            color: white;
            border: none;
        }

        .privacy-popup-footer .btn:not(.btn-outline):hover {
            background: #1d4ed8;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const popup = document.getElementById('privacy-policy-popup');
            const closeBtn = document.getElementById('privacy-close-btn');
            const acceptBtn = document.getElementById('privacy-accept-btn');
            const policyId = popup ? parseInt(popup.dataset.policyId || '0', 10) : 0;
            const saveUrl = popup ? popup.dataset.saveUrl : '';

            // ตรวจสอบว่า user ยอมรับ cookies แล้วหรือยัง
            function checkCookieConsent() {
                const consent = localStorage.getItem('privacy-consent');
                if (!consent) {
                    popup.classList.add('show');
                }
            }

            // ปิด popup (ซ่อนชั่วคราว) - ไม่ตั้งค่า consent
            function closePopup() {
                popup.classList.remove('show');
            }

            // บันทึก log policy ไป API
            function savePolicyLog() {
                if (!saveUrl || !policyId) return;
                var csrf = document.querySelector('meta[name="csrf-token"]');
                fetch(saveUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': csrf ? csrf.getAttribute('content') : '',
                    },
                    body: JSON.stringify({
                        status: policyId,
                        _token: csrf ? csrf.getAttribute('content') : ''
                    }),
                }).catch(function() {});
            }

            function onAccept() {
                savePolicyLog();
                // บันทึก consent เฉพาะตอนที่ผู้ใช้กดยอมรับทั้งหมด
                localStorage.setItem('privacy-consent', 'accepted');
                closePopup();
            }

            // Event listeners
            if (closeBtn) {
                closeBtn.addEventListener('click', closePopup);
            }
            if (acceptBtn) {
                acceptBtn.addEventListener('click', onAccept);
            }

            checkCookieConsent();
        });
    </script>
@endif