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

@section('content')
    @if (!empty($banners[0]))
        <div class="carousel" id="slider" data-items="1" data-autoplay="2000">
            @foreach ($banners as $b)
                @if ($b['type'] == 'image')
                    <div class="slide">
                        @if (!empty($b['url']))
                            <a href="{{ $b['url'] }}" target="_blank">
                        @endif
                        <img src="{{ $b['src'] ?? '' }}" alt="{{ $b['name'] ?? '' }}">
                        @if (!empty($b['url']))
                            </a>
                        @endif
                    </div>
                @elseif ($b['type'] == 'youtube')
                    <div class="slide">
                        <iframe src="https://www.youtube.com/embed/{{ $b['src'] }}?si=YvQC-mg50KChYMEP" title="{{ $b['name'] ?? '' }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                    </div>
                @endif
            @endforeach
        </div>
    @endif

    <section class="sect-whatnew">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="whatnew-card">
                        <div class="whatnew-head">
                            <h2>{{ __('frontend::lang.page.index.title_what_new') }}</h2>
                        </div>
                        <div class="whatnew-table-wrap">
                            <table class="whatnew-table">
                                <thead>
                                    <tr>
                                        <th>{{ __('frontend::lang.page.index.label.create_date') }}</th>
                                        <th>{{ __('frontend::lang.page.index.label.topic') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if (!empty($what_new[0]))
                                        @foreach ($what_new as $key => $w)
                                            <tr>
                                                <td>{{ date('d/m/Y', strtotime($w['publish_at'])) ?? '' }}</td>
                                                <td>
                                                    <button class="wn-title-toggle" data-toggle-target="wn-doc-{{ $key + 1 }}" type="button">
                                                        {{ $w['name'] ?? '' }}
                                                    </button>
                                                    @if (!empty($w['gallery'][0]))
                                                        <div class="wn-doc-panel" id="wn-doc-{{ $key + 1 }}">
                                                            <div class="wn-doc-content active" id="wn-doc-{{ $key + 1 }}-1">
                                                                <table class="wn-doc-table">
                                                                    <tbody>
                                                                        @foreach ($w['gallery'] as $key_g => $g)
                                                                            <tr>
                                                                                <td class="wn-doc-title">{{ $g['name'] ?? '' }}</td>
                                                                                <td>
                                                                                    <a class="wn-download-btn" href="{{ asset($g['image']) }}" download>
                                                                                        {{ __('frontend::lang.page.index.label.download_document') }}
                                                                                    </a>
                                                                                </td>
                                                                            </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    @else
                                        <tr>
                                            <td class="text-center" colspan="2">{{ __('frontend::lang.page.index.label.no_data') }}</td>
                                        </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if (!empty($company_profile) || !empty($page_init['contact']['tel']))
        <section class="sect-profile spad">
            <div class="container">
                <div class="row profile-row">
                    {!! $company_profile['detail'] ?? '' !!}
                    <div class="col-xs-12 col-sm-12 col-md-6 profile-col profile-col--text">
                        <div class="profile-cta-row">
                            @if (!empty($company_profile['file']))
                                <a class="btn profile-contact-btn m-t-10 js-pdf-preview" data-preview-name="Company Profile" href="{{ asset($company_profile['file']) }}">
                                    <span class="profile-contact-btn__icon" aria-hidden="true">
                                        <i class="fa fa-file"></i>
                                    </span>
                                    {{ __('frontend::lang.btn.company_profile') }}
                                </a>
                            @endif
                            @if (!empty($page_init['contact']['tel']))
                                <div class="profile-phone-block">
                                    <span class="profile-phone-block__circle">
                                        <i class="icon-phone"></i>
                                    </span>
                                    <div class="profile-phone-block__text">
                                        <span class="profile-phone-block__label">{{ __('frontend::lang.page.index.have_questions') }}</span>
                                        <a class="profile-phone-block__num" href="tel:{{ $page_init['contact']['tel'] }}">{{ $page_init['contact']['tel'] }}</a>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

    <section class="sect-home-contact no-padding">
        <div class="home-contact-area">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-6 cleft">
                    <div class="row">
                        @if (!empty($page_init['contact']))
                            @php
                                $contact = $page_init['contact'] ?? [];
                            @endphp
                            <div class="col-xs-12 col-sm-12 col-md-6 contact-info-1">
                                <h4 class="m-b-10 text-color">{{ $contact['name'] ?? '' }}</h4>
                                <address>{{ $contact['office'] ?? '' }}</address>
                                @if (!empty($contact['tel']))
                                    <h3 class="m-t-30">
                                        <a href="tel:{{ $contact['tel'] ?? '' }}">
                                            <i class="icon-phone"></i>
                                            {{ $contact['tel'] ?? '' }}
                                        </a>
                                    </h3>
                                @endif
                                @if (!empty($contact['google_map_link']))
                                    <a class="text-link m-t-30 border-bottom" href="{{ $contact['google_map_link'] ?? '' }}">
                                        <img src="{{ asset('assets/frontend/images/icon/Google-Maps-icon.png') }}" alt="" height="20">
                                        {{ __('frontend::lang.page.index.label.google_map') }}
                                        <i class="icon-arrow-right"></i>
                                    </a>
                                @endif
                            </div>
                        @endif
                        @if (!empty($branches['list'][0]))
                            @foreach ($branches['list'] as $b)
                                <div class="col-xs-12 col-sm-12 col-md-6 contact-info-2">
                                    <h4 class="text-color" style="font-size: 19px; margin-bottom: 14px;">
                                        {{ $b['name'] ?? '' }}
                                    </h4>
                                    <address>{{ $b['office'] ?? '' }}</address>
                                    @if (!empty($b['tel_numbers'][0]))
                                        <h3 class="m-t-30">
                                            <a href="tel:{{ $b['tel_numbers'][0] ?? '' }}">
                                                <i class="icon-phone"></i>
                                                {{ $b['tel_numbers'][0] ?? '' }}
                                            </a>
                                        </h3>
                                    @endif
                                    @if (!empty($b['tel_numbers'][1]))
                                        <ul class="list">
                                            @foreach ($b['tel_numbers'] as $key => $tel)
                                                @if ($key == 0)
                                                    @continue
                                                @endif

                                                <li>
                                                    <a href="tel:{{ $tel }}">
                                                        {{ __('frontend::lang.page.index.label.tel') }} : {{ $tel }}
                                                    </a>
                                                </li>
                                            @endforeach
                                        </ul>
                                    @endif
                                    @if (!empty($b['google_map_link']))
                                        <a class="text-link m-t-30 border-bottom" href="{{ $b['google_map_link'] ?? '' }}">
                                            <img src="{{ asset('assets/frontend/images/icon/Google-Maps-icon.png') }}" alt="" height="20">
                                            {{ __('frontend::lang.page.index.label.google_map') }}
                                            <i class="icon-arrow-right"></i>
                                        </a>
                                    @endif
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 cright">
                    <img class="w100" src="{{ asset('assets/frontend/images/banner-1.jpg') }}" alt="">
                </div>
            </div>
        </div>
    </section>

    <div class="wn-preview-popup" id="wn-preview-popup" aria-hidden="true">
        <div class="wn-preview-popup__dialog">
            <div class="wn-preview-popup__head">
                <h4 id="wn-preview-title">{{ __('frontend::lang.page.index.label.preview_document') }}</h4>
                <button class="wn-preview-popup__close" id="wn-preview-close" type="button" aria-label="Close preview">&times;</button>
            </div>
            <div class="wn-preview-popup__body">
                <iframe id="wn-preview-iframe" src="" title="Document preview"></iframe>
                <p class="wn-preview-popup__fallback" id="wn-preview-fallback">{{ __('frontend::lang.page.index.label.preview_document_not_found') }}</p>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var previewPopup = document.getElementById('wn-preview-popup');
            var previewIframe = document.getElementById('wn-preview-iframe');
            var previewTitle = document.getElementById('wn-preview-title');
            var previewFallback = document.getElementById('wn-preview-fallback');
            var previewCloseButton = document.getElementById('wn-preview-close');

            function openPreview(url, name) {
                var hasUrl = url && url !== '#' && url !== window.location.href;
                previewTitle.textContent = name ? ('Preview: ' + name) : 'Preview เอกสาร';
                previewPopup.classList.add('active');
                previewPopup.setAttribute('aria-hidden', 'false');
                document.body.classList.add('wn-preview-open');
                if (hasUrl) {
                    previewIframe.src = url;
                    previewIframe.style.display = 'block';
                    previewFallback.style.display = 'none';
                } else {
                    previewIframe.src = '';
                    previewIframe.style.display = 'none';
                    previewFallback.style.display = 'block';
                }
            }

            function closePreview() {
                previewPopup.classList.remove('active');
                previewPopup.setAttribute('aria-hidden', 'true');
                previewIframe.src = '';
                document.body.classList.remove('wn-preview-open');
            }
            var titleToggles = document.querySelectorAll('.wn-title-toggle');
            titleToggles.forEach(function(toggleButton) {
                toggleButton.addEventListener('click', function() {
                    var targetId = this.getAttribute('data-toggle-target');
                    var targetPanel = document.getElementById(targetId);
                    if (targetPanel) {
                        targetPanel.classList.toggle('active');
                    }
                });
            });
            var tabButtons = document.querySelectorAll('.wn-doc-tab');
            tabButtons.forEach(function(tabButton) {
                tabButton.addEventListener('click', function() {
                    var parentPanel = this.closest('.wn-doc-panel');
                    if (!parentPanel) {
                        return;
                    }
                    parentPanel.querySelectorAll('.wn-doc-tab').forEach(function(item) {
                        item.classList.remove('active');
                    });
                    this.classList.add('active');
                    parentPanel.querySelectorAll('.wn-doc-content').forEach(function(content) {
                        content.classList.remove('active');
                    });
                    var contentId = this.getAttribute('data-doc-target');
                    var targetContent = parentPanel.querySelector('#' + contentId);
                    if (targetContent) {
                        targetContent.classList.add('active');
                    }
                });
            });
            var docTitleCells = document.querySelectorAll('.wn-doc-title');
            docTitleCells.forEach(function(titleCell) {
                titleCell.addEventListener('click', function() {
                    var tableRow = this.closest('tr');
                    if (!tableRow) {
                        return;
                    }
                    var downloadLink = tableRow.querySelector('.wn-download-btn');
                    var docName = this.textContent.trim();
                    var docUrl = downloadLink ? downloadLink.getAttribute('href') : '';
                    openPreview(docUrl, docName);
                });
            });
            var pdfPreviewLinks = document.querySelectorAll('a.js-pdf-preview');
            pdfPreviewLinks.forEach(function(link) {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    var url = this.getAttribute('href');
                    var name = this.getAttribute('data-preview-name') || 'Document';
                    openPreview(url, name);
                });
            });
            if (previewCloseButton) {
                previewCloseButton.addEventListener('click', closePreview);
            }
            if (previewPopup) {
                previewPopup.addEventListener('click', function(event) {
                    if (event.target === previewPopup) {
                        closePreview();
                    }
                });
            }
            document.addEventListener('keydown', function(event) {
                if (event.key === 'Escape' && previewPopup.classList.contains('active')) {
                    closePreview();
                }
            });
        });
    </script>
@endpush