@extends('frontend::layouts.app')

@section('content')
    <!-- Page title -->
    <x-frontend::breadcrumb title="{{ end($breadcrumb)['name'] ?? '' }}" :breadcrumbs="$breadcrumb" />
    <!-- end: Page title -->

    <!-- Page Content -->
    <section id="page-content" class="p-t-60 p-b-60">
        <div class="custom-page-wrapper">
        <div class="container">
                <div class="tabs policy-tabs">
                    <!-- Hamburger Button for Mobile -->
                    <button type="button"
                        class="text-right d-xl-none btn hamburguer-btn hamburguer-btn-sticky-dark side-panel-toggle"
                        data-bs-toggle="button" autocomplete="off" aria-pressed="false" data-set-active="false"
                        data-extra-class="side-panel-without-overlay">
                        <span class="hamburguer">
                            <span></span>
                            <span></span>
                            <span></span>
                        </span>
                        <span class="close">
                            <span></span>
                            <span></span>
                        </span>
                    </button>

                    @if (!empty($policy))
                         <!-- Tab Navigation -->
                    <ul class="nav nav-tabs">
                        @foreach ($policy as $pc)
                            <li class="nav-item">
                                <a class="nav-link {{ $loop->index == 0 ? 'active' : '' }}" href="#tab{{ $loop->index + 1 }}" data-bs-toggle="tab">{!! $pc['name'] ?? '' !!}</a>
                            </li>
                        @endforeach
                    </ul>
                    <!-- Tab Content -->
                    <div class="tab-content">
                        <!-- Tab 01: Cookie Policy -->
                        @foreach ($policy as $item)
                            <div id="tab{{ $loop->index + 1 }}" class="tab-pane {{ $loop->index == 0 ? 'active' : '' }}">
                                <div class="pb-6 lg:pb-10">
                                    {!! $item['detail'] ?? '' !!}
                                    @if (!empty($list))
                                        <div class="row pt-5">
                                            @foreach ($list as $l)
                                                <div class="col-12 col-sm-6 col-lg-4 pb-4">
                                                    <a href="{{ $l['url'] ?? '' }}">
                                                        <div class="d-flex flex-column align-items-center">
                                                            <div class="img-wrapper mb-3">
                                                                <img src="{{ asset($l['image']) }}" style="max-width:70px;max-height:70px;">
                                                            </div>
                                                            <p class="font-weight-bold" style="cursor: pointer;">
                                                                {{ $l['name'] ?? '' }}<br>(Personal Data protection Policy)
                                                            </p>
                                                        </div>
                                                    </a>
                                                </div>
                                            @endforeach
                                        </div>
                                    @endif
                                    @livewire('frontend::form.privacy')
                                </div>
                            </div>
                        @endforeach
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
    <!-- end: Page Content -->
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Hamburger button toggle
            const hamburgerBtn = document.querySelector('.hamburguer-btn');
            const navTabs = document.querySelector('.policy-tabs .nav-tabs');

            if (hamburgerBtn && navTabs) {
                hamburgerBtn.addEventListener('click', function() {
                    this.classList.toggle('active');
                    navTabs.classList.toggle('show');
                });

                // Close menu when clicking outside
                document.addEventListener('click', function(e) {
                    if (!hamburgerBtn.contains(e.target) && !navTabs.contains(e.target)) {
                        hamburgerBtn.classList.remove('active');
                        navTabs.classList.remove('show');
                    }
                });

                // Close menu when clicking on nav link (mobile)
                const navLinks = navTabs.querySelectorAll('.nav-link');
                navLinks.forEach(link => {
                    link.addEventListener('click', function() {
                        if (window.innerWidth < 1200) {
                            hamburgerBtn.classList.remove('active');
                            navTabs.classList.remove('show');
                        }
                    });
                });
            }

            // Initialize Bootstrap tabs if available
            if (typeof bootstrap !== 'undefined') {
                const triggerTabList = document.querySelectorAll('#page-content .nav-tabs a[data-bs-toggle="tab"]');
                triggerTabList.forEach(triggerEl => {
                    const tabTrigger = new bootstrap.Tab(triggerEl);
                    triggerEl.addEventListener('click', event => {
                        event.preventDefault();
                        tabTrigger.show();
                    });
                });
            } else {
                // Fallback for jQuery/bootstrap 4 or vanilla JS
                const tabLinks = document.querySelectorAll('.nav-tabs .nav-link');
                const tabPanes = document.querySelectorAll('.tab-pane');

                tabLinks.forEach(link => {
                    link.addEventListener('click', function(e) {
                        e.preventDefault();

                        const targetTab = this.getAttribute('href');

                        // Remove active class from all links and panes
                        tabLinks.forEach(l => {
                            l.classList.remove('active');
                            if (l.parentElement) {
                                l.parentElement.classList.remove('active');
                            }
                        });
                        tabPanes.forEach(p => p.classList.remove('active', 'show'));

                        // Add active class to clicked link and corresponding pane
                        this.classList.add('active');
                        if (this.parentElement) {
                            this.parentElement.classList.add('active');
                        }
                        const pane = document.querySelector(targetTab);
                        if (pane) {
                            pane.classList.add('active', 'show');
                            // Update URL hash
                            if (history.pushState) {
                                history.pushState(null, null, targetTab);
                            }
                        }
                    });
                });
            }

            // Handle hash on page load
            if (window.location.hash) {
                const hash = window.location.hash;
                const link = document.querySelector(`.nav-tabs a[href="${hash}"]`);
                if (link) {
                    setTimeout(() => {
                        link.click();
                    }, 100);
                }
            }

            // Privacy Request Form Handling
            const privacyRequestForm = document.getElementById('privacyRequestForm');
            let privacyRecaptchaWidget = null;

            if (privacyRequestForm) {
                // File upload handling
                const attachmentFile = document.getElementById('attachment_file');
                const fileNameDisplay = document.getElementById('file-name');
                const fileLabelText = document.getElementById('file-label-text');

                if (attachmentFile) {
                    attachmentFile.addEventListener('change', function(e) {
                        const file = e.target.files[0];
                        if (file) {
                            // Check file size (4 MB = 4 * 1024 * 1024 bytes)
                            const maxSize = 4 * 1024 * 1024;
                            if (file.size > maxSize) {
                                showPrivacyError('attachment_file', 'ขนาดไฟล์ต้องไม่เกิน 4 MB');
                                e.target.value = '';
                                fileNameDisplay.textContent = '';
                                fileLabelText.textContent = 'คลิกเพื่อเลือกไฟล์';
                                return;
                            }

                            // Check file type
                            const allowedTypes = ['application/pdf', 'image/jpeg', 'image/jpg',
                            'image/png'];
                            if (!allowedTypes.includes(file.type)) {
                                showPrivacyError('attachment_file',
                                    'กรุณาเลือกไฟล์ .pdf, .jpg หรือ .png เท่านั้น');
                                e.target.value = '';
                                fileNameDisplay.textContent = '';
                                fileLabelText.textContent = 'คลิกเพื่อเลือกไฟล์';
                                return;
                            }

                            fileNameDisplay.textContent = file.name;
                            fileLabelText.textContent = 'เปลี่ยนไฟล์';
                            clearPrivacyError('attachment_file');
                        } else {
                            fileNameDisplay.textContent = '';
                            fileLabelText.textContent = 'คลิกเพื่อเลือกไฟล์';
                        }
                    });
                }

                // Load reCAPTCHA
                window.loadPrivacyRecaptcha = function() {
                    const recaptchaSiteKey = document.getElementById('privacy-recaptcha')?.value;
                    const captchaDiv = document.getElementById('privacy-captcha');

                    if (recaptchaSiteKey && captchaDiv && typeof grecaptcha !== 'undefined') {
                        if (privacyRecaptchaWidget) {
                            grecaptcha.reset(privacyRecaptchaWidget);
                        } else {
                            privacyRecaptchaWidget = grecaptcha.render('privacy-captcha', {
                                'sitekey': recaptchaSiteKey,
                                'theme': 'light'
                            });
                        }
                    }
                }

                // Try rendering as soon as the API is available.
                if (typeof grecaptcha !== 'undefined') {
                    setTimeout(() => loadPrivacyRecaptcha(), 150);
                }

                // Re-render/reset captcha after changing tabs.
                const tabLinks = document.querySelectorAll('.nav-tabs .nav-link');
                tabLinks.forEach(link => {
                    link.addEventListener('click', function() {
                        setTimeout(() => {
                            if (typeof grecaptcha !== 'undefined') {
                                loadPrivacyRecaptcha();
                            }
                        }, 250);
                    });
                });

                // Form submission
                privacyRequestForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    submitPrivacyRequest();
                });
            }

            function clearPrivacyErrors() {
                document.querySelectorAll('#privacyRequestForm .error-message').forEach(el => {
                    el.textContent = '';
                    el.style.display = 'none';
                });
                document.querySelectorAll('#privacyRequestForm .form-control').forEach(el => {
                    el.classList.remove('error');
                });
            }

            function showPrivacyError(field, message) {
                const errorEl = document.getElementById(field + '-error');
                const inputEl = document.getElementById(field);
                if (errorEl) {
                    errorEl.textContent = message;
                    errorEl.style.display = 'block';
                }
                if (inputEl) {
                    inputEl.classList.add('error');
                }
            }

            function clearPrivacyError(field) {
                const errorEl = document.getElementById(field + '-error');
                const inputEl = document.getElementById(field);
                if (errorEl) {
                    errorEl.textContent = '';
                    errorEl.style.display = 'none';
                }
                if (inputEl) {
                    inputEl.classList.remove('error');
                }
            }

            async function submitPrivacyRequest() {
                clearPrivacyErrors();

                const form = document.getElementById('privacyRequestForm');
                const formData = new FormData(form);
                const submitBtn = document.getElementById('submitPrivacyBtn');

                // Validate reCAPTCHA
                const recaptchaResponse = privacyRecaptchaWidget ? grecaptcha.getResponse(
                    privacyRecaptchaWidget) : null;
                if (!recaptchaResponse) {
                    showPrivacyError('recaptcha', 'กรุณายืนยันตัวตนด้วย reCAPTCHA');
                    return;
                }
                formData.append('g-recaptcha-response', recaptchaResponse);

                // Disable submit button
                submitBtn.disabled = true;
                submitBtn.textContent = 'กำลังส่ง...';

                try {
                    const response = await fetch('/privacy-submit', {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                                ?.getAttribute('content') || formData.get('_token')
                        }
                    });

                    const data = await response.json();

                    if (data.success) {
                        alert('ส่งข้อมูลสำเร็จ! เราจะติดต่อกลับในเร็วๆ นี้');
                        form.reset();
                        fileNameDisplay.textContent = '';
                        fileLabelText.textContent = 'คลิกเพื่อเลือกไฟล์';
                        if (privacyRecaptchaWidget && typeof grecaptcha !== 'undefined') {
                            grecaptcha.reset(privacyRecaptchaWidget);
                        }
                    } else {
                        // Show validation errors
                        if (data.errors) {
                            Object.keys(data.errors).forEach(field => {
                                showPrivacyError(field, data.errors[field][0]);
                            });
                        } else {
                            alert(data.message || 'เกิดข้อผิดพลาดในการส่งข้อมูล');
                        }
                    }
                } catch (error) {
                    console.error('Error:', error);
                    alert('เกิดข้อผิดพลาดในการส่งข้อมูล กรุณาลองใหม่อีกครั้ง');
                } finally {
                    submitBtn.disabled = false;
                    submitBtn.textContent = 'ส่งข้อมูล';
                }
            }
        });
    </script>
    <!-- reCAPTCHA Script -->
    @if (!empty($page_init['setting']['recapcha']))
        <script
            src="https://www.google.com/recaptcha/api.js?onload=loadPrivacyRecaptcha&render=explicit&hl={{ app()->getLocale() }}"
            async defer></script>
    @endif
@endsection