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

@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" rel="stylesheet" />
@endsection

@section('content')
    <section class="sect-project-hero">
        <div class="project-hero-banner">
            <img class="hero-bg-image" src="{{ $project['image'] ?? '' }}" alt="Project Hero">
            <div class="hero-overlay-content">
                <div class="container">
                    <div class="hero-text-content">
                        <span class="hero-category">{{ $project['categories'][0]['name'] ?? '' }}</span>
                        <h1 class="hero-title">{{ $project['name'] ?? '' }}</h1>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="sect-project-content">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-project-info">
                    <h2 class="project-main-title">{{ $project['name'] ?? '' }}</h2>
                    <p class="project-description-text">
                        {{ $project['desc'] ?? '' }}
                    </p>
                    <div class="project-info-boxes">
                        <div class="row">
                            @if (!empty($project['location']))
                                <div class="col-md-4 col-sm-6 info-box-item">
                                    <div class="info-box">
                                        <div class="info-icon">
                                            <img src="{{ Module::asset('frontend:images/icon/pin-map.png') }}">
                                        </div>
                                        <div class="info-content">
                                            <h6>{{ __('frontend::lang.project.location') }}</h6>
                                            <p>{{ $project['location'] ?? '-' }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endif
                            @if (!empty($project['period']))
                                <div class="col-md-4 col-sm-6 info-box-item">
                                    <div class="info-box">
                                        <div class="info-icon">
                                            <i class="fas fa-clock"></i>
                                        </div>
                                        <div class="info-content">
                                            <h6>{{ __('frontend::lang.project.period') }}</h6>
                                            <p>{{ $project['period'] ?? '-' }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endif
                            @if (!empty($project['budget']))
                                <div class="col-md-4 col-sm-6 info-box-item">
                                    <div class="info-box">
                                        <div class="info-icon">
                                            <i class="fas fa-file-invoice-dollar"></i>
                                        </div>
                                        <div class="info-content">
                                            <h6>{{ __('frontend::lang.project.budget') }}</h6>
                                            <p>{{ $project['budget'] ?? '-' }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endif
                            @if (!empty($project['year']))
                                <div class="col-md-4 col-sm-6 info-box-item">
                                    <div class="info-box">
                                        <div class="info-icon">
                                            <i class="fas fa-calendar"></i>
                                        </div>
                                        <div class="info-content">
                                            <h6>{{ __('frontend::lang.project.year') }}</h6>
                                            <p>{{ $project['year'] ?? '-' }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endif
                            @if (!empty($project['status_work']))
                                <div class="col-md-4 col-sm-6 info-box-item">
                                    <div class="info-box">
                                        <div class="info-icon">
                                            <img src="{{ Module::asset('frontend:images/icon/achievement.png') }}">
                                        </div>
                                        <div class="info-content">
                                            <h6>{{ __('frontend::lang.project.status') }}</h6>
                                            <p>{{ __('frontend::lang.project.status_work_option.' . $project['status_work']) ?? '' }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-md-5">
                    @if (!empty($project['detail']))
                        <div class="about-project-section">
                            <h3 class="section-title">{{ __('frontend::lang.project.about_project') }}</h3>
                            <div class="about-content">
                                {!! $project['detail'] ?? '' !!}
                            </div>
                        </div>
                    @endif
                </div>
                <div class="col-md-7 col-media-slider">
                    @if (!empty($project['video'][0]))
                        <div class="media-slider-wrapper">
                            <div class="swiper project-media-slider">
                                <div class="swiper-wrapper">
                                    @foreach ($project['video'] as $v)
                                        <div class="swiper-slide">
                                            <div class="media-item">
                                                <img src="{{ $project['image'] ?? '' }}" alt="Project Media">
                                                <div class="media-play-overlay">
                                                    <video src="{{ asset($v['image'] ?? '') }}" muted loop autoplay></video>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="swiper-button-next"></div>
                                <div class="swiper-button-prev"></div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
    @php
        $count = !empty($project['gallery']) ? count($project['gallery']) : 0;
        $i = 0;
    @endphp
    @if ($count > 0)
        <section class="sect-project-gallery">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-4 cleft">
                        @while ($i < 3)
                            @if (!empty($project['gallery'][$i]['image']))
                                <div class="gallery-item gallery-item-col1-row{{ $i + 1 }}">
                                    <a data-glightbox="project-gallery" href="{{ asset($project['gallery'][$i]['image'] ?? '') }}">
                                        <img src="{{ asset($project['gallery'][$i]['image'] ?? '') }}" alt="Gallery Image">
                                    </a>
                                </div>
                            @endif
                            @php
                                $i++;
                            @endphp
                        @endwhile
                    </div>
                    @if ($count > 3)
                        <div class="col-xs-12 col-sm-12 col-md-8 cright">
                            <div class="row">
                                @php
                                    $chk_class = [
                                        3 => ['col-md-7', 'gallery-item-col2-row1'],
                                        4 => ['col-md-5', 'gallery-item-col2-row1'],
                                        5 => ['col-md-12', 'gallery-item-col2-row2-full'],
                                        6 => ['col-md-6', 'gallery-item-col2-row1'],
                                        7 => ['col-md-6', 'gallery-item-col2-row1'],
                                    ];
                                @endphp
                                @while ($i < $count)
                                    @if (!empty($project['gallery'][$i]['image']))
                                        <div class="col-xs-12 col-sm-12 {{ $chk_class[$i][0] }}">
                                            <div class="gallery-item {{ $chk_class[$i][1] }}">
                                                <a data-glightbox="project-gallery" href="{{ asset($project['gallery'][$i]['image'] ?? '') }}">
                                                    <img src="{{ asset($project['gallery'][$i]['image'] ?? '') }}" alt="Gallery Image">
                                                </a>
                                            </div>
                                        </div>
                                    @endif
                                    @php
                                        $i++;
                                    @endphp
                                @endwhile
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </section>
    @endif
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var mediaSwiper = new Swiper('.project-media-slider', {
                slidesPerView: 1,
                spaceBetween: 0,
                loop: true,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                autoplay: {
                    delay: 5000,
                    disableOnInteraction: false,
                },
            });

            const lightbox = GLightbox({
                selector: 'a[data-glightbox="project-gallery"]',
                touchNavigation: true,
                loop: true,
                autoplayVideos: true
            });
        });
    </script>
@endsection