@extends('layouts.public')

@section('title', 'خانه - asrit.ir')

@section('styles')
    <style>
        /* For screen sizes smaller than 768px (most phones) */
        @media (max-width: 768px) {
            .carousel-item {
                height: 40vh; /* Set slider height to 40% of the screen height */
                min-height: 250px; /* Minimum height */
            }
        }
    </style>
@endsection

@section('content')

    @if($slides->isNotEmpty())
        <div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                @foreach($slides as $key => $slide)
                    <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="{{ $key }}" class="{{ $loop->first ? 'active' : '' }}"></button>
                @endforeach
            </div>
            <div class="carousel-inner">
                @foreach($slides as $slide)
                    <div class="carousel-item {{ $loop->first ? 'active' : '' }}" style="height: 60vh; min-height: 400px;">
                        @if($slide->image_path_mobile)
                            {{-- Show mobile-specific image on small screens, and desktop on larger screens --}}
                            <img src="{{ Storage::url($slide->image_path) }}" class="d-none d-md-block w-100 h-100" style="object-fit: cover;" alt="{{ $slide->title }}">
                            <img src="{{ Storage::url($slide->image_path_mobile) }}" class="d-block d-md-none w-100 h-100" style="object-fit: cover;" alt="{{ $slide->title }}">
                        @else
                            {{-- Fallback to the main image if no mobile image is provided --}}
                            <img src="{{ Storage::url($slide->image_path) }}" class="d-block w-100 h-100" style="object-fit: cover;" alt="{{ $slide->title }}">
                        @endif
                        <div class="carousel-caption d-none d-md-block text-center bg-dark bg-opacity-50 p-4 rounded">
                            <h2 class="fs-4 fs-md-2">{{ $slide->title }}</h2>
                            <p class="fs-6 fs-md-5">{{ $slide->subtitle }}</p>
                            @if($slide->link_url)
                                <a href="{{ $slide->link_url }}" class="btn btn-primary">{{ $slide->link_text }}</a>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="to="prev">
            <span class="carousel-control-prev-icon"></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="to="next">
            <span class="carousel-control-next-icon"></span>
            </button>
        </div>
    @endif

    <div class="container px-4 py-5">
        <h2 class="pb-2 border-bottom text-center">آخرین پروژه‌ها</h2>

        @if($recentProjects->isNotEmpty())
            <div id="projectsCarousel" class="carousel slide my-5" data-bs-ride="carousel">
                <div class="carousel-inner">

                    @foreach($recentProjects->chunk(5) as $chunk)
                        <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
                            <div class="row g-3 justify-content-center">
                                @foreach($chunk as $project)
                                    <div class="col-2">
                                        {{-- ✅ FIX: The '$project' parameter must be passed to the route --}}
                                        <a href="{{ route('projects.show', $project) }}" class="text-decoration-none text-dark">
                                            <div class="text-center">
                                                <div class="p-2 border rounded shadow-sm">
                                                    <img src="{{ Storage::url($project->image_path) }}" class="img-fluid" alt="{{ $project->title }}" style="aspect-ratio: 4/3; object-fit: contain;">
                                                </div>
                                                <p class="mt-2 small">{{ $project->title }}</p>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endforeach

                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#projectsCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#projectsCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </button>
            </div>
        @else
            <div class="col-12 text-center mt-5">
                <p>پروژه‌ای برای نمایش وجود ندارد.</p>
            </div>
        @endif
    </div>
@endsection