@extends('frontend.layouts.app')

@section('style')
    <style>
        p {
            line-height: 1.8;
            font-size: 1.1rem;
        }

        .service-card {
            transition: all 0.3s ease-in-out;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        .service-card:hover .zoom-icon {
            background: rgba(0, 0, 0, 0.8);
        }

        .service-card img {
            height: 220px;
            object-fit: cover;
            width: 100%;
        }

        .card-body {
            padding: 10px;
        }
    </style>
@endsection

@section('content')
    <div class="row px-4 py-4" style="margin-top: 100px">
        <h2 class="mb-3 text-dark aos-init aos-animate" data-aos="fade-down-right" data-aos-duration="800">
            Some of<span style="color: #7dbd42"> Our Work</span>
        </h2>
        <p class="lead">Every step of the way tells a story...</p>

        <div class="row row-cols-1 row-cols-md-4 g-4">
            <div class="col">
                <div class="card service-card">
                    <img src="{{ asset('assets-frontend/projects/1.JPG') }}" class="card-img-top img-zoomable" alt=""
                        data-bs-toggle="modal" data-bs-target="#imageModal" data-img="{{ asset('assets-frontend/projects/1.JPG') }}">

                    <div class="card-body text-center">
                        <h5 class="card-title font-weight-bold">Project1</h5>
                    </div>
                </div>
            </div>

            <div class="col">
                <div class="card service-card">
                    <img src="{{ asset('assets-frontend/projects/2.JPG') }}" class="card-img-top img-zoomable" alt=""
                        data-bs-toggle="modal" data-bs-target="#imageModal" data-img="{{ asset('assets-frontend/projects/2.JPG') }}">

                    <div class="card-body text-center">
                        <h5 class="card-title font-weight-bold">Project2</h5>
                    </div>
                </div>
            </div>

            <div class="col">
                <div class="card service-card">
                    <img src="{{ asset('assets-frontend/projects/4.JPG') }}" class="card-img-top img-zoomable" alt=""
                        data-bs-toggle="modal" data-bs-target="#imageModal" data-img="{{ asset('assets-frontend/projects/4.JPG') }}">

                    <div class="card-body text-center">
                        <h5 class="card-title font-weight-bold">Project3</h5>
                    </div>
                </div>
            </div>

            <div class="col">
                <div class="card service-card">
                    <img src="{{ asset('assets-frontend/projects/5.JPG') }}" class="card-img-top img-zoomable" alt=""
                        data-bs-toggle="modal" data-bs-target="#imageModal" data-img="{{ asset('assets-frontend/projects/5.JPG') }}">

                    <div class="card-body text-center">
                        <h5 class="card-title font-weight-bold">Project4</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('frontend.sections.partners')

    <!-- Image Modal -->
    <div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body p-0">
                    <img id="modalImage" src="" class="w-100">
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script>
    document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll(".img-zoomable").forEach(img => {
            img.addEventListener("click", function () {
                let modalImage = document.getElementById("modalImage");
                modalImage.src = this.getAttribute("data-img");
            });
        });
    });
</script>
@endsection