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

@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" rel="stylesheet" />
@endsection

@section('content')
    @php
        $b = [['name' => $detail['name_store'] ?? '']];
    @endphp
    <livewire:frontend::section.breadcrumb id_menu="{{ $menu_id }}" :breadcrumb="$b" />
    <section class="sec-product-detail">
        <div class="container">
            <div class="row">
                <div class="col-4">
                    <div class="product-image-brand">
                        <img src="{{ $detail['logo'] ?? '' }}" alt="{{ $detail['name_store'] ?? '' }}">
                    </div>
                </div>
                <div class="col-8">
                    <div class="product-brand-info">
                        <h2 class="product-title">{{ $detail['name_store'] ?? '' }}</h2>
                        <p class="product-desc">
                            {!! $detail['detail'] ?? '' !!}
                        </p>
                    </div>
                </div>
                @if (!empty($detail['youtube']))
                    <div class="col-12 mt-5">
                        <div class="youtube-video">
                            <iframe src="https://www.youtube.com/embed/{{ $detail['youtube'] ?? '' }}" title="YouTube video player" width="100%" height="100%" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        </div>
                    </div>
                @endif
            </div>
            @if (!empty($detail['items'][0]))
                <div class="row">
                    <section class="sec-product-brand">
                        <div class="box-area-content">
                            <div class="container">
                                <div class="row">
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="carousel tour-slide" data-items="4" data-margin="20">
                                            @php
                                                $items = $detail['items'] ?? [];
                                                $itemsCount = count($items);
                                                $targetCount = 4;

                                                // ถ้ามี items น้อยกว่า 4 ให้ลูปมาเติมจนครบ 4
                                                if ($itemsCount > 0 && $itemsCount < $targetCount) {
                                                    $loopedItems = [];
                                                    for ($i = 0; $i < $targetCount; $i++) {
                                                        $loopedItems[] = $items[$i % $itemsCount];
                                                    }
                                                    $items = $loopedItems;
                                                }
                                            @endphp
                                            @foreach ($items as $item)
                                                <div class="product-card">
                                                    <div class="product-image">
                                                        <img src="{{ $item['image'] ?? '' }}" alt="{{ $item['name'] ?? '' }}" />
                                                    </div>
                                                    <div class="product-content">
                                                        <div class="title">{{ $item['name'] ?? '' }}</div>
                                                        <div class="description">{!! $item['detail'] ?? '' !!}</div>
                                                        @if (!empty($item['price_normal']) && !empty($item['price']))
                                                            <div class="price-area">
                                                                <div>
                                                                    <div class="original-price">{{ number_format($item['price_normal'] ?? 0) }} {{ __('frontend::lang.member.page.thb') }}</div>
                                                                    <div class="price">{{ number_format($item['price'] ?? 0) }} {{ __('frontend::lang.member.page.thb') }}</div>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            @endif
        </div>
    </section>
    <section class="reg-1">
        <div class="container">
            <div class="row">
                @if (!empty($detail['enterprise_image']) && !empty($detail['enterprise_code']) && !empty($detail['enterprise_date']))
                    <div class="col-6">
                        <div class="toggle-section">
                            <div class="title-reg-1" onclick="toggleRegInfo(this)">
                                <h2>{{ __('frontend::lang.member.list.enterprise_title') }}</h2>
                                <span class="toggle-icon">▶</span>
                            </div>
                            <div class="toggle-content">
                                <p>{{ __('frontend::lang.input.enterprise_code') }} {{ $detail['enterprise_code'] ?? '' }}</p>
                                <p>{{ __('frontend::lang.input.enterprise_date') }} {{ str_date($detail['enterprise_date'] ?? '', 'd M Y') }}</p>
                            </div>
                        </div>
                        @if (!empty($detail['enterprise_image']))
                            <div class="detail-reg-1">
                                <img src="{{ $detail['enterprise_image'] ?? '' }}" alt="{{ $detail['enterprise_code'] ?? '' }}" />
                            </div>
                        @endif
                    </div>
                @endif
                @if (!empty($detail['commerce_image']) && !empty($detail['commerce_code']) && !empty($detail['commerce_code_request']) && !empty($detail['commerce_date']))
                    <div class="col-6">
                        <div class="toggle-section">
                            <div class="title-reg-1" onclick="toggleRegInfo(this)">
                                <h2>{{ __('frontend::lang.member.list.commerce_title') }}</h2>
                                <span class="toggle-icon">▶</span>
                            </div>
                            <div class="toggle-content">
                                <p>{{ __('frontend::lang.input.commerce_code') }} {{ $detail['commerce_code'] ?? '' }}</p>
                                <p>{{ __('frontend::lang.input.commerce_code_request') }} {{ $detail['commerce_code_request'] ?? '' }}</p>
                                <p>{{ __('frontend::lang.input.commerce_date') }} {{ str_date($detail['commerce_date'] ?? '', 'd M Y') }}</p>
                            </div>
                        </div>
                        @if (!empty($detail['commerce_image']))
                            <div class="detail-reg-1">
                                <img src="{{ $detail['commerce_image'] ?? '' }}" alt="{{ $detail['commerce_code'] ?? '' }}" />
                            </div>
                        @endif
                    </div>
                @endif
            </div>
        </div>
    </section>
    @if (!empty($detail['otop_image'][0]))
        <section class="otop">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="toggle-section">
                            <div class="title-reg-1">
                                <h2>{{ __('frontend::lang.member.list.otop_title') }}</h2>
                            </div>
                        </div>
                    </div>
                    @foreach ($detail['otop_image'] as $item)
                        <div class="col-4">
                            <div class="detail-reg-1">
                                <img src="{{ $item['image'] ?? '' }}" alt="{{ __('frontend::lang.member.list.otop_title') }}_{{ $item['index'] ?? '' }}" />
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
    @if (!empty($detail['goods_image'][0]))
        <section class="product-standards">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="toggle-section">
                            <div class="title-reg-1">
                                <h2>{{ __('frontend::lang.member.list.goods_standard_title') }}</h2>
                            </div>
                        </div>
                    </div>
                    @foreach ($detail['goods_image'] as $item)
                        <div class="col-4">
                            <div class="detail-reg-1">
                                <img src="{{ $item['image'] ?? '' }}" alt="{{ __('frontend::lang.member.list.goods_standard_title') }}_{{ $item['index'] ?? '' }}" />
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
    @if (!empty($detail['other_image'][0]))
        <section class="product-standards">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="toggle-section">
                            <div class="title-reg-1">
                                <h2>{{ __('frontend::lang.member.list.other_cert_title') }}</h2>
                            </div>
                        </div>
                    </div>
                    @foreach ($detail['other_image'] as $item)
                        <div class="col-4">
                            <div class="detail-reg-1">
                                <img src="{{ $item['image'] ?? '' }}" alt="{{ __('frontend::lang.member.list.other_cert_title') }}_{{ $item['index'] ?? '' }}" />
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
    @if (!empty($detail['contact']) || !empty($detail['contact']['social']) || !empty($detail['contact']['google_map']))
        <section class="contact-product">
            <div class="container">
                <div class="row">
                    <div class="contact-product-title">
                        <h2>{{ __('frontend::lang.member.page.contact_title') }}</h2>
                        <div class="card-body col-md-7">
                            <div class="p-3  h-100">
                                @php
                                    $contactFields = [
                                        'first_name' => __('frontend::lang.input.first_name'),
                                        'last_name' => __('frontend::lang.input.last_name'),
                                        'tel' => __('frontend::lang.input.tel'),
                                        'email' => __('frontend::lang.input.email'),
                                        'address' => __('frontend::lang.input.address'),
                                    ];
                                @endphp
                                @foreach ($contactFields as $field => $label)
                                    @if (!empty($detail['contact'][$field]))
                                        <p>
                                            <strong>{{ $label }} : </strong>
                                            {{ $detail['contact'][$field] ?? '' }}
                                        </p>
                                    @endif
                                @endforeach
                                @php
                                    $social = [
                                        'line' => 'fab fa-line',
                                        'facebook' => 'fab fa-facebook-f',
                                        'youtube' => 'fab fa-youtube',
                                        'instagram' => 'fab fa-instagram',
                                        'twitter' => 'fab fa-x-twitter',
                                        'tiktok' => 'fab fa-tiktok',
                                    ];
                                @endphp
                                <div class="social-icons social-icons-colored social-icons-rounded m-t-20">
                                    <ul>
                                        @foreach ($detail['contact']['social'] as $k_s => $s)
                                            @if (!empty($s['url']))
                                                <li class="social-{{ $k_s }}">
                                                    <a href="{{ $s['url'] ?? 'javascript:void(0);' }}" target="_blank">
                                                        <i class="{{ $social[$k_s] ?? '' }}"></i>
                                                    </a>
                                                </li>
                                            @endif
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                        @if (!empty($detail['contact']['google_map']))
                            <div class="col-md-5 contact-detail-right">
                                <div class="ratio ratio-1x1" id="mapPreview">
                                    {!! $detail['contact']['google_map'] !!}
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </section>
    @endif
@endsection

@section('scripts')
    <script>
        function toggleRegInfo(element) {
            const content = element.nextElementSibling;
            const icon = element.querySelector('.toggle-icon');
            content.classList.toggle('active');
        }
    </script>
@endsection