@extends('web.layouts.layout')
@section('content')

@php($projectsPage = $projectsPage ?? null)
@php($projectsDescriptionRaw = $projectsPage && $projectsPage->currentDescription ? $projectsPage->currentDescription->description : null)
@php($projectsTitleRaw = $projectsPage && $projectsPage->currentDescription ? $projectsPage->currentDescription->title : null)
@php($projectsTitle = $projectsTitleRaw ? strip_tags($projectsTitleRaw) : __('web.projects_title_default'))
@php($projectsDescription = $projectsDescriptionRaw ? strip_tags($projectsDescriptionRaw) : __('web.projects_description_default'))

@php($suppliersPage = $suppliersPage ?? null)
@php($suppliersDescriptionRaw = $suppliersPage && $suppliersPage->currentDescription ? $suppliersPage->currentDescription->description : null)
@php($suppliersTitleRaw = $suppliersPage && $suppliersPage->currentDescription ? $suppliersPage->currentDescription->title : null)
@php($suppliersTitle = $suppliersTitleRaw ? strip_tags($suppliersTitleRaw) : __('web.suppliers_title_default'))
@php($suppliersDescription = $suppliersDescriptionRaw ? strip_tags($suppliersDescriptionRaw) : __('web.suppliers_description_default'))

<main>

    <!-- ---------- innerheader ----------- -->
    <section class="inner-header pt-100">
        <div class="container">
            <div class="cont text-center col-lg-4 mx-auto">
                <div class="bread d-flex fw-bold fsz-18 justify-content-center">
                    <a href="{{ route('web.home') }}"> <i class="fal fa-home"></i> </a>
                    <span class="mx-3"> / </span>
                    <a href="{{ route('web.projects') }}"> {{ __('web.projects') }} </a>
                </div>
                <h1 class="fsz-40 mt-10 cr-sub"> {{ $page->currentDescription->title ?? __('web.projects') }} </h1>
                <div class="text fsz-20 mt-15 cr-sub fw-bold"> {{ $page->currentDescription->description ?? __('web.projects_description_default') }} </div>
            </div>
        </div>
        <img src="{{ asset('assets/web/images/hero-top-shap.png') }}" alt="" class="shap">
    </section>

    <!-- ---------- portfolio  ----------- -->
    <section class="portfolio section-padding">
        <div class="container">
            <div class="cards">
                <div class="row">
                    @forelse($projects as $project)
                        @php($projectImage = $project->photos && $project->photos->count() > 0 ? $project->photos->first()->image_url : asset('assets/web/images/port1.jpg'))
                        @php($projectTitle = strip_tags($project->currentDescription->title ?? $project->title ?? $projectsTitle))
                        @php($projectBody = $project->currentDescription->description ?? $project->description ?? null)
                        @php($projectCategory = $project->category_title ?? null)
                        @php($projectCity = $project->city_title ?? null)
                        @php($projectArea = $project->area_title ?? null)
                        @php($projectDate = $project->project_date instanceof \Carbon\Carbon ? $project->project_date->format('Y-m-d') : (is_string($project->project_date) ? $project->project_date : null))
                        @php($projectPhotos = $project->photos ? $project->photos->map(function($photo) { return $photo->image_url; })->toArray() : [])
                        @php($projectPayload = [
                            'title' => $projectTitle,
                            'image' => $projectImage,
                            'body' => $projectBody,
                            'category' => $projectCategory,
                            'city' => $projectCity,
                            'area' => $projectArea,
                            'date' => $projectDate,
                            'photos' => $projectPhotos,
                        ])
                        <div class="col-lg-6">
                            <div class="portfolio-card mb-4">
                                <div class="img imgrotate-scale-hover">
                                    <img src="{{ $projectImage }}" alt="{{ $projectTitle }}" class="img-cover">
                                </div>
                                <div class="info">
                                    <div class="card-content">
                                        <h6 class="card-title col-lg-7"> {{ $projectTitle }} </h6>
                                      
                                    </div>
                                    <a href="javascript:void(0);" class="arrow icon-60 dnf-center border border-white rounded-circle d-none d-lg-inline-flex fsz-16" data-bs-toggle="modal" data-bs-target="#modal-project" data-project="{{ json_encode($projectPayload, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}" style="pointer-events: auto;">
                                        <i class="fal fa-arrow-up-left"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    @empty
                        @php($projectPayload = [
                            'title' => $projectsTitle,
                            'image' => asset('assets/web/images/port1.jpg'),
                            'body' => $projectsDescription,
                            'location' => null,
                            'date' => null,
                        ])
                        <div class="col-lg-6">
                            <div class="portfolio-card mb-4">
                                <div class="img imgrotate-scale-hover">
                                    <img src="{{ asset('assets/web/images/port1.jpg') }}" alt="{{ $projectsTitle }}" class="img-cover">
                                </div>
                                <div class="info">
                                    <div class="card-content">
                                        <h6 class="card-title col-lg-6"> {{ $projectsTitle }} </h6>
                                       
                                    </div>
                                    <a href="javascript:void(0);" class="arrow icon-60 dnf-center border border-white rounded-circle d-none d-lg-inline-flex fsz-16" data-bs-toggle="modal" data-bs-target="#modal-project" data-project="{{ json_encode($projectPayload, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}" style="pointer-events: auto;">
                                        <i class="fal fa-arrow-up-left"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="portfolio-card mb-4">
                                <div class="img imgrotate-scale-hover">
                                    <img src="{{ asset('assets/web/images/port2.jpg') }}" alt="{{ $projectsTitle }}" class="img-cover">
                                </div>
                                <div class="info">
                                    <div class="card-content">
                                        <h6 class="card-title col-lg-6"> {{ $projectsTitle }} </h6>
                                       
                                    </div>
                                    <a href="javascript:void(0);" class="arrow icon-60 dnf-center border border-white rounded-circle d-none d-lg-inline-flex fsz-16" data-bs-toggle="modal" data-bs-target="#modal-project" data-project="{{ json_encode($projectPayload, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}" style="pointer-events: auto;">
                                        <i class="fal fa-arrow-up-left"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="portfolio-card mb-4">
                                <div class="img imgrotate-scale-hover">
                                    <img src="{{ asset('assets/web/images/port3.jpg') }}" alt="{{ $projectsTitle }}" class="img-cover">
                                </div>
                                <div class="info">
                                    <div class="card-content">
                                        <h6 class="card-title col-lg-6"> {{ $projectsTitle }} </h6>
                                      
                                    </div>
                                    <a href="javascript:void(0);" class="arrow icon-60 dnf-center border border-white rounded-circle d-none d-lg-inline-flex fsz-16" data-bs-toggle="modal" data-bs-target="#modal-project" data-project="{{ json_encode($projectPayload, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}" style="pointer-events: auto;">
                                        <i class="fal fa-arrow-up-left"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="portfolio-card mb-4">
                                <div class="img imgrotate-scale-hover">
                                    <img src="{{ asset('assets/web/images/port1.jpg') }}" alt="{{ $projectsTitle }}" class="img-cover">
                                </div>
                                <div class="info">
                                    <div class="card-content">
                                        <h6 class="card-title col-lg-6"> {{ $projectsTitle }} </h6>
                                     
                                    </div>
                                    <a href="javascript:void(0);" class="arrow icon-60 dnf-center border border-white rounded-circle d-none d-lg-inline-flex fsz-16" data-bs-toggle="modal" data-bs-target="#modal-project" data-project="{{ json_encode($projectPayload, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}" style="pointer-events: auto;">
                                        <i class="fal fa-arrow-up-left"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </section>


    <!-- ---------- partners ----------- -->
    <section class="partners partners-lg section-padding">
        <div class="container">
            <div class="title-wrapper text-center col-lg-4 mx-auto mb-30">
                <div class="fsz-21 text-balance"> {{ $suppliersDescription }} </div>
                <h2 class="fsz-50 fw-bold cr-main"> {{ $suppliersTitle }} </h2>
            </div>
            <div class="partners-slider">
                <div class="swiper-wrapper">
                    @forelse($suppliers as $supplier)
                        @php($supplierImage = $supplier->image_url ?? asset('assets/web/images/partners/9.png'))
                        <div class="swiper-slide">
                            <a href="javascript:void(0);" class="partner">
                                <img src="{{ $supplierImage }}" alt="{{ $suppliersTitle }}">
                            </a>
                        </div>
                    @empty
                        <div class="swiper-slide">
                            <a href="javascript:void(0);" class="partner">
                                <img src="{{ asset('assets/web/images/partners/9.png') }}" alt="{{ $suppliersTitle }}">
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="javascript:void(0);" class="partner">
                                <img src="{{ asset('assets/web/images/partners/10.png') }}" alt="{{ $suppliersTitle }}">
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="javascript:void(0);" class="partner">
                                <img src="{{ asset('assets/web/images/partners/11.png') }}" alt="{{ $suppliersTitle }}">
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="javascript:void(0);" class="partner">
                                <img src="{{ asset('assets/web/images/partners/12.png') }}" alt="{{ $suppliersTitle }}">
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="javascript:void(0);" class="partner">
                                <img src="{{ asset('assets/web/images/partners/13.png') }}" alt="{{ $suppliersTitle }}">
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="javascript:void(0);" class="partner">
                                <img src="{{ asset('assets/web/images/partners/14.png') }}" alt="{{ $suppliersTitle }}">
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="javascript:void(0);" class="partner">
                                <img src="{{ asset('assets/web/images/partners/15.png') }}" alt="{{ $suppliersTitle }}">
                            </a>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </section>

    <!-- Modal Project -->
    <div class="modal fade modal-project" id="modal-project" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content border-0 p-20 radius-30">
                <div class="modal-header pb-0 border-0 mb-10">
                    <h6 class="text-center cr-sub "> <i class="fal fa-arrow-left me-2"></i>   تفاصيل المشروع  </h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="project-body">
                        <div class="row">
                            <div class="col-lg-5">
                                <div class="imgs-slider">
                                    <div class="swiper-wrapper modal-project-photos">
                                        <!-- Photos will be dynamically inserted here -->
                                    </div>
                                    <div class="swiper-pagination"></div>
                                </div>
                            </div>
                            <div class="col-lg-7">
                                <div class="info p-4">
                                    <h3 class="fsz-25 cr-sub mb-20  modal-project-title ">           </h3>
                                    <div class="text fw-600 modal-project-body"></div>
                                    <h6 class="fsz-18 fw-bold cr-sub mt-30 d-flex align-items-center"> <i class="fal fa-dash me-3"></i> {{ __('web.project_details') }} </h6>
                                    <ul class="info-list">
                                        <li class="modal-project-category-row" style="display:none;"> <strong class="me-2 cr-sub"> {{ __('web.project_category') }} : </strong> <span class="modal-project-category"></span> </li>
                                        <li class="modal-project-city-row" style="display:none;"> <strong class="me-2 cr-sub"> {{ __('web.project_city') }} : </strong> <span class="modal-project-city"></span> </li>
                                        <li class="modal-project-area-row" style="display:none;"> <strong class="me-2 cr-sub"> {{ __('web.project_area') }} : </strong> <span class="modal-project-area"></span> </li>
                                        <li class="modal-project-date-row" style="display:none;"> <strong class="me-2 cr-sub"> {{ __('web.project_date') }} : </strong> <span class="modal-project-date"></span> </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</main>

@endsection

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Handle project modal
    const projectModal = document.getElementById('modal-project');
    if (projectModal) {
        projectModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            const projectData = JSON.parse(button.getAttribute('data-project'));

            // Update modal content
            const titleElement = projectModal.querySelector('.modal-project-title');
            const bodyElement = projectModal.querySelector('.modal-project-body');
            const photosContainer = projectModal.querySelector('.modal-project-photos');
            const categoryElement = projectModal.querySelector('.modal-project-category');
            const cityElement = projectModal.querySelector('.modal-project-city');
            const areaElement = projectModal.querySelector('.modal-project-area');
            const dateElement = projectModal.querySelector('.modal-project-date');
            const categoryRow = projectModal.querySelector('.modal-project-category-row');
            const cityRow = projectModal.querySelector('.modal-project-city-row');
            const areaRow = projectModal.querySelector('.modal-project-area-row');
            const dateRow = projectModal.querySelector('.modal-project-date-row');

            // Update title and body
            if (titleElement) titleElement.textContent = projectData.title;
            if (bodyElement) bodyElement.textContent = projectData.body || '';

            // Update photos slider
            if (photosContainer) {
                photosContainer.innerHTML = '';
                if (projectData.photos && projectData.photos.length > 0) {
                    projectData.photos.forEach(photo => {
                        const slide = document.createElement('div');
                        slide.className = 'swiper-slide';
                        slide.innerHTML = `
                            <div class="img">
                                <img src="${photo}" alt="${projectData.title}" class="img-cover">
                            </div>
                        `;
                        photosContainer.appendChild(slide);
                    });
                } else {
                    // Fallback to single image
                    const slide = document.createElement('div');
                    slide.className = 'swiper-slide';
                    slide.innerHTML = `
                        <div class="img">
                            <img src="${projectData.image}" alt="${projectData.title}" class="img-cover">
                        </div>
                    `;
                    photosContainer.appendChild(slide);
                }
            }

            // Update project details
            if (categoryElement) categoryElement.textContent = projectData.category || '';
            if (cityElement) cityElement.textContent = projectData.city || '';
            if (areaElement) areaElement.textContent = projectData.area || '';
            if (dateElement) dateElement.textContent = projectData.date || '';

            // Show/hide detail rows
            if (categoryRow) categoryRow.style.display = projectData.category ? 'block' : 'none';
            if (cityRow) cityRow.style.display = projectData.city ? 'block' : 'none';
            if (areaRow) areaRow.style.display = projectData.area ? 'block' : 'none';
            if (dateRow) dateRow.style.display = projectData.date ? 'block' : 'none';

            // Initialize Swiper for photos if there are multiple photos
            if (projectData.photos && projectData.photos.length > 1) {
                setTimeout(() => {
                    const swiper = new Swiper('.imgs-slider', {
                        slidesPerView: 1,
                        spaceBetween: 30,
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true,
                        },
                    });
                }, 100);
            }
        });
    }
});
</script>
