@extends('layout.guest')

@section('title')
GGP Directory {{ $is_service ? 'Service' : 'Product'}} List
@endsection

@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/css/lightgallery-bundle.min.css" />
    <div class="directory-item-listing">
        @include('directory.partials.header', ['title' => $title, 'not_product_group' => true])
        <div class="directory-listing-header">
            <div class="d-flex align-items-center px-2">
                <div class="breadcrumbs">
                    @foreach($breadcrumbs as $breadcrumb)
                        @if ($loop->last)
                            <b>{{ $breadcrumb['name'] }}</b>
                        @else
                            <span class="text-gray">
                                @if(isset($breadcrumb['link']))
                                    <a class="text-gray" href="{{ $breadcrumb['link'] }}">
                                        {{ $breadcrumb['name'] }}
                                    </a>
                                @else
                                    {{ $breadcrumb['name'] }}
                                @endif
                            </span> > 
                        @endif
                    @endforeach
                </div>
            </div>
            <hr style="margin-top:0.3rem"/>
        </div>
        <div class="directory-item">
            <div class="directory-product-top-info">
                <div id="lightgallery" style="display:none;">
                    @foreach ($images as $img)
                        <a href="{{ assetFile($img) }}">
                            <img src="{{ assetFile($img) }}" />
                        </a>
                    @endforeach
                </div>

                <div class="image-container">
                    <div class="thumbnails">
                        @for ($i = 1; $i <= 3; $i++)
                            @if (isset($images[$i]))
                                <div class="thumbnail" onclick="openGallery({{ $i }})">
                                    <img src="{{ assetFile($images[$i]) }}" />
                                    @if ($i === 3 && count($images) > 4)
                                        <div class="overlay">+{{ count($images) - 4 }}</div>
                                    @endif
                                </div>
                            @else
                                <div class="thumbnail"></div>
                            @endif
                        @endfor
                    </div>
                    <div class="main-image">
                        <img src="{{ isset($images[0]) ? assetFile($images[0]) : asset('assets/media/misc/image.png') }}" onerror="this.onerror=null; this.src='{{ asset('assets/media/misc/image.png') }}';" onclick="openGallery(0)" />
                    </div>
                </div>
                {{-- <div class="image-container">
                    <img src="{{ assetFile($image) }}" onerror="this.onerror=null; this.src='{{ asset('assets/media/misc/image.png') }}';" class="img-fluid mb-2">
                </div> --}}
                <div class="info-container">
                    <h2>{{ $name }}</h2>
                    <div class="label-group">
                        <div class="label">Listing Number</div>
                        <span>{{ $product->item_no }}</span>
                    </div>
                    <div class="label-group">
                        <div class="label">Company</div>
                        <span>{{ $company->company_name }}</span>
                    </div>
                    <div class="label-group">
                        <div class="label">{{ $is_service ? 'Service Brochure' : 'Product Brochure'}}</div>
                        <a href="{{ assetFile($brochure) }}" download>Download {{ $is_service ? 'Service Brochure' : 'Product Brochure'}}</a>
                    </div>
                    {{-- <a class="btn btn-primary-light-green text-white" href="#">PRINT PRODUCT INFO</a> --}}
                </div>
            </div>
        </div>

        @php
            $alphabet = range('A', 'Z');
            $alphabetIndex = 0;
        @endphp

        <ul class="nav nav-tabs nav-fill directory-item-tabs" id="formTabs" role="tablist">
            @if($form)
                @foreach ($form->formSections->sortBy('order_index') as $formSection)
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {{ $loop->first ? 'active' : '' }}" id="{{ $formSection->id }}-tab" data-bs-toggle="tab" data-bs-target="#{{ $formSection->id }}-tab-content" type="button" role="tab">
                            <div class="step-title">
                                <span class="main-text">
                                    @php
                                        $sectionName = $formSection->section_name;
                                        if (strlen($sectionName) > 2) {
                                            $words = explode(' ', $sectionName);
                                        }
                                    @endphp
                                    {!! ucwords(strtolower($sectionName)) !!}
                                </span>
                            </div>
                        </button>
                    </li>
                @endforeach
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-content" type="button" role="tab">
                        <div class="step-title">
                            <span class="main-text">
                                Get {{ $is_service ? 'Service' : 'Product'}}
                            </span>
                        </div>
                    </button>
                </li>
            @endif
        </ul>

        @php
            $alphabetIndex = 0;
        @endphp

        <div class="tab-content">
            @if($form)
                @foreach ($form->formSections->sortBy('order_index') as $formSection)
                    <div id="{{ $formSection->id }}-tab-content" class="tab-pane fade show {{ $loop->first ? 'active' : '' }}">
                        <div class="bg-white">
                            @include('directory.partials.form.base', ['alphabetIndex' => $alphabetIndex++])
                        </div>
                    </div>
                @endforeach
            @endif

            {{-- <div id="contact-tab-content" class="tab-pane fade show">
                <div class="bg-white">
                    @include('directory.partials.form.base', ['alphabetIndex' => $alphabetIndex++])
                </div>
            </div> --}}

            <div id="contact-tab-content" class="tab-pane fade">
                <div class="bg-white">
                    @include('directory.partials.form.contact-person')
                </div>
            </div>

            {{-- <div id="contact-tab-content" class="tab-pane fade">
                <div class="bg-white">
                    @include('directory.partials.form.sales-channel')
                </div>
            </div> --}}
        </div>
    </div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/lightgallery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/plugins/zoom/lg-zoom.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/plugins/thumbnail/lg-thumbnail.min.js"></script>
<script>
    const lightGalleryInstance = lightGallery(document.getElementById('lightgallery'), {
        selector: 'a',
        plugins: [lgZoom, lgThumbnail],
        speed: 500,
        download: false,
        hideBarsDelay: 3000
    });

    function openGallery(index) {
        lightGalleryInstance.openGallery(index);
    }
</script>
@endsection