@extends('user.layout')
@section('title', 'Page Title')
@section('content')
    @php
        // Treat blank, "-" and similar placeholders as empty, so empty facts are hidden.
        $telFilled = fn ($v) => is_string($v) ? !in_array(trim($v), ['', '-', '--', 'N/A', 'n/a'], true) : !empty($v);
        $telHighlights = array_values(array_filter((array) ($project->service_highlight ?? []), fn ($h) => is_string($h) && trim($h) !== ''));
    @endphp
    <div class="py-4 bg-white"></div>

    <div class="container mt-5">
        <div id="imageSlider" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
                @foreach ($project->galleries ?? [] as $gk => $gallery)
                    <div class="carousel-item {{ $loop->first ? 'active' : '' }}" data-category="{{ $gallery->title }}">
                        <img src="{{ optimizedImageUrl('project', @$gallery->image, 1600) }}" srcset="{{ optimizedImageSrcset('project', @$gallery->image, 1600) }}" sizes="100vw" loading="{{ $loop->first ? 'eager' : 'lazy' }}" fetchpriority="{{ $loop->first ? 'high' : 'auto' }}" decoding="async" class="img-fluid w-100 rounded" alt="{{ $project->name }} – photo {{ $loop->iteration }}" title="{{ $project->name }}" style="max-height: 450px;">
                    </div>
                @endforeach
            </div>
        </div>

        <div class="row justify-content-center align-items-center mt-3">
            <div class="col-2">
                <div class="d-flex align-items-center justify-content-center fw-bold">
                    <span id="currentSlide"></span>
                    <hr class="border-4 mx-1 mx-md-2" style="width: 20px;">
                    <span id="totalSlideCount"></span>
                </div>
            </div>

            <div class="col-8">
                <div class="progress-container position-relative overflow-hidden w-100" style="height: 4px;">
                    <div class="progress-bar-custom h-100 w-0"></div>
                </div>
            </div>

            <div class="col-2 d-flex justify-content-center gap-3">
                <button class="carousel-control-prev position-static btn" type="button" data-bs-target="#imageSlider" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true" style="filter: invert(100%);"></span>
                </button>

                <button class="carousel-control-next position-static btn" type="button" data-bs-target="#imageSlider" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true" style="filter: invert(100%);"></span>
                </button>
            </div>
        </div>

        <div class="text-center">
            <button class="btn filter-btn position-relative border-0 fw-bold secondary" data-filter="all">ALL</button>
            <button class="btn filter-btn position-relative border-0 fw-bold secondary" data-filter="Interior">INTERIOR</button>
            <button class="btn filter-btn position-relative border-0 fw-bold secondary" data-filter="Exterior">EXTERIOR</button>
        </div>
    </div>

    <div class="container-fluid container-md my-5 pb-4 scroll-reveal">
        <h1 class="mb-4 secondary h2">{{ $project->name }}</h1>

        <div class="row row-cols-1 row-cols-md-2 justify-content-center g-5">
            <div class="col">
                <div class="text-justify">{!! $project->description !!}</div>
                <button type="button" class="btn btn-custom mt-4" data-bs-toggle="modal" data-bs-target="#enquiryModal" style="width: 200px;"><span>GET IN TOUCH</span></button>
            </div>

            <div class="col">
                <div class="row row-cols-1 row-cols-lg-2 g-4">
                    @if ($telFilled($project->build_up_area))
                    <div class="col">
                        <div class="card border-0 h-100 project-card">
                            <div class="card-body text-center py-4 px-2 d-flex flex-column">
                                <div class="icon-wrapper bg-primary-light mb-3 mx-auto rounded-circle">
                                    <i class="bi bi-aspect-ratio fs-3 text-primary"></i>
                                </div>
                                <h6 class="card-subtitle mb-2 text-secondary fw-semibold text-uppercase small">Build Up Area</h6>
                                <h5 class="card-title mb-0 text-dark fw-bold">{{ $project->build_up_area }}</h5>
                            </div>
                        </div>
                    </div>
                    @endif
                
                    @if ($telFilled(optional($project->projectCategory)->name))
                    <div class="col">
                        <div class="card border-0 h-100 project-card">
                            <div class="card-body text-center py-4 px-2 d-flex flex-column">
                                <div class="icon-wrapper bg-primary-light mb-3 mx-auto rounded-circle">
                                    <i class="bi bi-buildings fs-3 text-primary"></i>
                                </div>
                                <h6 class="card-subtitle mb-2 text-secondary fw-semibold text-uppercase small">Project Type</h6>
                                <h5 class="card-title mb-0 text-dark fw-bold">{{ $project->projectCategory->name }}</h5>
                            </div>
                        </div>
                    </div>
                    @endif
                    
                    @if ($telFilled($project->timeline))
                    <div class="col">
                        <div class="card border-0 h-100 project-card">
                            <div class="card-body text-center py-4 px-2 d-flex flex-column">
                                <div class="icon-wrapper bg-primary-light mb-3 mx-auto rounded-circle">
                                    <i class="bi bi-hourglass-split fs-3 text-primary"></i>
                                </div>
                                <h6 class="card-subtitle mb-2 text-secondary fw-semibold text-uppercase small">Timeline</h6>
                                <h5 class="card-title mb-0 text-dark fw-bold">{{ $project->timeline }}</h5>
                            </div>
                        </div>
                    </div>
                    @endif
                    
                    @if (count($telHighlights))
                    <div class="col">
                        <div class="card border-0 h-100 project-card">
                            <div class="card-body text-center py-2 px-0 d-flex flex-column">
                                <div class="icon-wrapper bg-primary-light mb-2 mx-auto rounded-circle">
                                    <i class="bi bi-tools fs-3 text-primary"></i>
                                </div>
                                <h6 class="card-subtitle mb-2 text-secondary fw-semibold text-uppercase small">Service Highlights</h6>
                                <ul class="list-group list-group-flush list-group-numbered text-start">
                                    @foreach($telHighlights as $sh_key => $highlight)
                                        <li class="list-group-item fs-small fw-semibold border-0 py-0">{{ $highlight }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
                
            </div>
        </div>
    </div>
    <form method="POST" action="{{ route('contact-store') }}" enctype="multipart/form-data" class="custom-form">
        @csrf
        <div class="modal fade" id="enquiryModal" tabindex="-1" aria-labelledby="enquiryModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title secondary" id="enquiryModalLabel">Send Enquiry</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        @if ($errors->any())
                            <div class="alert alert-danger" role="alert">{{ $errors->first() }}</div>
                        @endif
                        <div class="custom-form">
                            <div class="row g-3 mb-3">
                                <div class="col-md-6 position-relative">
                                    <input type="text" class="form-control" name="name" id="prjEnqName" value="{{ old('name') }}" placeholder=" " required>
                                    <label for="prjEnqName" class="form-label">Full Name</label>
                                </div>
                                <div class="col-md-6 position-relative">
                                    <input type="text" class="form-control" name="company_name" id="prjEnqCompany" value="{{ old('company_name') }}" placeholder=" " required>
                                    <label for="prjEnqCompany" class="form-label">Company Name</label>
                                </div>
                                <div class="col-md-6 position-relative">
                                    <input type="text" class="form-control" name="phone" id="prjEnqPhone" value="{{ old('phone') }}" placeholder=" " required>
                                    <label for="prjEnqPhone" class="form-label">Contact Number</label>
                                </div>
                                <div class="col-md-6 position-relative">
                                    <input type="email" class="form-control" name="email" id="prjEnqEmail" value="{{ old('email') }}" placeholder=" " required>
                                    <label for="prjEnqEmail" class="form-label">Email</label>
                                </div>
                                <div class="col-12 position-relative">
                                    <textarea class="form-control" name="message" id="prjEnqMessage" rows="4" placeholder=" " required>{{ old('message', 'I saw your ' . $project->name . ' project and would like to discuss a similar project.') }}</textarea>
                                    <label for="prjEnqMessage" class="form-label">Type your message here</label>
                                </div>
                                <div class="col-12 position-relative">
                                    <input type="file" class="form-control" name="attachment" id="prjEnqFile" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx">
                                    <small class="form-text text-muted">PDF, JPG, PNG, DOC, or DOCX; maximum 5 MB. If an error occurs, choose the file again.</small>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-custom px-4" style="width: 180px;"><span>SEND ENQUIRY</span></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

@push('styles')
    <style>
        header .navbar, header .offcanvas { background-color: white; }
        header .nav-link { color: rgb(58, 57, 57); }
    </style>
@endpush

@push('scripts')
    <script>
        const progressBar = document.querySelector('.progress-bar-custom');
        const carouselElement = document.getElementById('imageSlider');
        const currentSlideNumber = document.getElementById('currentSlide');
        const filterButtons = document.querySelectorAll('.filter-btn');
        let allSlides = [...document.querySelectorAll('.carousel-item')];
        const carouselInner = document.querySelector('.carousel-inner');
        let bootstrapCarousel;

        function updateProgress(index, total) {
            let progressWidth = (index / total) * 100;
            progressBar.style.width = progressWidth + '%';
            currentSlideNumber.textContent = index;
        }

        function initializeCarousel() {
            if (bootstrapCarousel) bootstrapCarousel.dispose();
            bootstrapCarousel = new bootstrap.Carousel(carouselElement, { interval: 4000, ride: 'carousel' });
        }

        function filterSlides(category) {
            carouselInner.innerHTML = '';
            let filteredSlides = allSlides.filter(slide => category === 'all' || slide.getAttribute('data-category') === category);
            filteredSlides.forEach((slide, index) => {
                slide.classList.remove('d-none');
                index === 0 ? slide.classList.add('active') : slide.classList.remove('active');
                carouselInner.appendChild(slide);
            });
            initializeCarousel();
            document.getElementById('totalSlideCount').textContent = filteredSlides.length;
            updateProgress(1, filteredSlides.length);
        }

        updateProgress(1, allSlides.length);
        initializeCarousel();

        filterButtons.forEach(button => {
            button.addEventListener('click', () => {
                filterButtons.forEach(btn => btn.classList.remove('active'));
                button.classList.add('active');
                const filterValue = button.getAttribute('data-filter');
                filterSlides(filterValue);
            });
        });

        filterSlides('all');

        carouselElement.addEventListener('slide.bs.carousel', event => {
            let index = event.to + 1;
            let total = document.querySelectorAll('.carousel-item:not(.d-none)').length;
            updateProgress(index, total);
        });
    </script>
    
    <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "CreativeWork",
          "name": {!! json_encode($project->name) !!},
          "headline": {!! json_encode(Str::limit($project->name, 110)) !!},
          "description": {!! json_encode(Str::limit(trim(preg_replace('/\s+/u', ' ', html_entity_decode(strip_tags($project->description), ENT_QUOTES | ENT_HTML5, 'UTF-8'))), 200)) !!},
          "url": "{{ request()->url() }}",
          "image": "{{ asset('storage/project/' . @$project->firstGallery->image) }}",
          "author": {
            "@type": "Organization",
            "name": "{{ config('app.name') }}",
            "url": "{{ route('about') }}"
          },
          "publisher": {
            "@type": "Organization",
            "name": "{{ config('app.name') }}",
            "logo": {
              "@type": "ImageObject",
              "url": "{{ asset('images/Triangle-BD-Favicon.png') }}"
            }
          },
          "datePublished": "{{ $project->created_at->toW3cString() }}",
          "dateModified": "{{ $project->updated_at->toW3cString() }}",
          "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "{{ request()->url() }}"
          }
        }
    </script>
    
    <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "Article",
          "headline": {!! json_encode(Str::limit($project->name, 110)) !!},
          "description": {!! json_encode(Str::limit(trim(preg_replace('/\s+/u', ' ', html_entity_decode(strip_tags($project->description), ENT_QUOTES | ENT_HTML5, 'UTF-8'))), 200)) !!},
          "image": "{{ asset('storage/project/' . @$project->firstGallery->image) }}",
          "author": {
            "@type": "Organization",
            "name": "{{ config('app.name') }}",
            "url": "{{ route('about') }}"
          },
          "publisher": {
            "@type": "Organization",
            "name": "{{ config('app.name') }}",
            "logo": {
              "@type": "ImageObject",
              "url": "{{ asset('images/Triangle-BD-Favicon.png') }}"
            }
          },
          "datePublished": "{{ $project->created_at->toIso8601String() }}",
          "dateModified": "{{ $project->updated_at->toIso8601String() }}",
          "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "{{ request()->url() }}"
          }
        }
    </script>

    @if ($project->projectCategory)
        <script type="application/ld+json">
            {!! json_encode([
                '@context' => 'https://schema.org',
                '@type' => 'BreadcrumbList',
                'itemListElement' => [
                    ['@type' => 'ListItem', 'position' => 1, 'name' => 'Home', 'item' => url('/')],
                    ['@type' => 'ListItem', 'position' => 2, 'name' => 'Projects', 'item' => route('project-category')],
                    ['@type' => 'ListItem', 'position' => 3, 'name' => $project->projectCategory->name, 'item' => route('project-list', $project->projectCategory->slug)],
                    ['@type' => 'ListItem', 'position' => 4, 'name' => $project->name, 'item' => route('project-details', [$project->projectCategory->slug, $project->slug])],
                ],
            ], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG) !!}
        </script>
    @endif
@endpush