@extends('layouts.master')
@section('title', $project->name ? $project->name : getSetting('site_name'))
@push('css')
<style>
    @media(max-width:720px) {
        .next-project {
            height: auto !important;
            background-attachment: scroll !important;
            
        }

        .next-project-text {
            font-size: 1.5rem;
        }

        .next-project-name {
            font-size: 2rem;
            margin-top: 0px !important;
        }
    }
    
    .main-next {
        padding: 50px 0 0px 0;
    }

    .next-project {
        position: relative;
        width: 100%;
        height: 500px;
        background-size: cover;
        background-position: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        text-align: center;
        cursor: pointer;
        background-attachment: fixed;
    }

    .next-project .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        transition: background 0.5s ease;
        z-index: 1;
        opacity:1;
        display:block;
    }

    .next-project:hover .overlay {
        background: rgba(0, 0, 0, 0.6);
    }

    .next-project-text ,
    .next-project-name {
        position: relative;
        z-index: 2;
        color: #fff;
        margin: 0;
        padding: 0 1rem;
    }

    .next-project-text {
        font-size: 70px;
        font-weight: 400;
        letter-spacing: 1px;
    }

    .next-project-name {
        font-size: 80px;
        font-weight: 600;
        margin-top: 5rem;
    }
</style>
@endpush
@section('content')
<!-- Main Details Section -->
<section class="main-details">
    <div class="col-12" data-aos="fade-up" data-aos-duration="1000">
        <div class="main-details">
            <!-- Large Image Section -->
            <img src="{{ asset('storage/' . $project->main_image) }}" alt="Project Image">
        </div>
    </div>
</section>

<!-- Project Title and Description Section -->
<section class="project-title container">
    <div class="row justify-content-center d-flex">
        <div class="main-title col-md-6" data-aos="fade-right" data-aos-duration="1000">
            <h1>{{ __('messages.ABOUT') }}</h1>
            <h1>{{ __('messages.THE PROJECT') }}</h1>
        </div>
        <div class="project-des col-md-6" data-aos="fade-left" data-aos-duration="1000">
            <p>{!! $project->desc !!}</p>
        </div>
    </div>
    <div class="footer-project">
        <div class="row justify-content-center">
            <div class="col-6 col-md-3 text-center client" data-aos="fade-up" data-aos-duration="1000">
                <p>{{ __('messages.CLIENT') }}</p>
                <h2>{{ $project->client }}</h2>
            </div>
            <div class="col-6 col-md-3 text-center project" data-aos="fade-up" data-aos-delay="100"
                data-aos-duration="1000">
                <p>{{ __('messages.SERVICE') }}</p>
                <h2>{{ $project->service->contetn }}</h2>
            </div>
            <div class="col-6 col-md-3 text-center client" data-aos="fade-up" data-aos-delay="200"
                data-aos-duration="1000">
                <p>{{ __('messages.YEAR') }}</p>
                <h2>{{ $project->year }}</h2>
            </div>
            <div class="col-6 col-md-3 text-center client" data-aos="fade-up" data-aos-delay="300"
                data-aos-duration="1000">
                <p>{{ __('messages.COUNTRY') }}</p>
                <h2>{{ $project->country }}</h2>
            </div>
        </div>
    </div>
</section>

<!-- Project Images Section -->
<section class="container">
    <div class="row justify-content-center">
        @if ($project->project_images)
        @foreach ($project->project_images as $image)
        <div class="col-12 mb-4" data-aos="zoom-in" data-aos-duration="1000">
            <div class="img-project">
                <img src="{{ asset('storage/' . $image) }}" alt="Project Image" class="img-fluid">
            </div>
        </div>
        @endforeach
        @endif
    </div>
</section>

<!-- Next Project Section -->
<section class="container-fluid main-next">
    @if ($nextProject)
    <a href="{{ route('project_details', $nextProject->slug) }}" class="next-project"
        style="background-image:url({{ asset('storage/' . $nextProject->main_image) }});">
        <div class="overlay"></div>
        <p class="next-project-text">{{ __('messages.NEXT PROJECT') }}</p>
        <p class="next-project-name">{{ $nextProject->name }}</p>
    </a>
    @else
    <p class="text-center py-5">{{ __('messages.nodata') }}</p>
    @endif
</section>

@include('layouts.cta')
@endsection
@push('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
<script>
    gsap.registerPlugin(ScrollTrigger);

    function initScrollTrigger() {
        if (window.innerWidth > 720) {
            gsap.to(".next-project", {
                backgroundPositionY: "50%",
                ease: "none",
                scrollTrigger: {
                    trigger: ".next-project",
                    start: "top bottom",
                    end: "bottom top",
                    scrub: true,
                },
            });
        }
    }

    initScrollTrigger();
    let resizeTimer;
    window.addEventListener('resize', () => {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(() => {
            ScrollTrigger.getAll().forEach(trigger => trigger.kill());
            initScrollTrigger();
        }, 250);
    });
</script>
@endpush