<div>
   <!-- breadcrumb-area -->
   <section class="breadcrumb__area breadcrumb__bg" data-background="{{url('/')}}/assets/img/bg/breadcrumb__bg.jpg">
      <div class="container">
            <div class="row">
               <div class="col-12">
                  <div class="breadcrumb__content">
                        <h2 class="title">Our Portfolio</h2>
                  </div>
               </div>
            </div>
      </div>
   </section>
   <!-- breadcrumb-area-end -->

    <!-- portfolio-area -->
    <section class="services__area-four section-py-140 p-relative">
        <div class="container">
            <div class="row align-items-center mb-50">
                <div class="col-lg-12 col-md-12">
                    <div class="section__title text-center">
                        <h2 class="title">Explore Our Work</h2>
                        <p>Discover our portfolio of successful projects and achievements</p>
                    </div>
                </div>
            </div>

            @if($this->portfolios->count() > 0)
                <div class="row gutter-y-30">
                    @foreach($this->portfolios as $portfolio)
                        <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6">
                            <div class="services__item-three services__item-four shine__animate-item" style="cursor: pointer;" wire:click="openModal({{ $portfolio->id }})">
                                @if($portfolio->image)
                                    <div class="services__thumb-two">
                                        <img src="{{url('/')}}/public/storage/{{$portfolio->image}}" alt="{{$portfolio->title}}">
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Pagination -->
                @if($this->portfolios->hasPages())
                    <div class="row mt-50">
                        <div class="col-12">
                            <div class="pagination__wrap">
                                <nav aria-label="Page navigation">
                                    <ul class="pagination justify-content-center">
                                        @if ($this->portfolios->onFirstPage())
                                            <li class="page-item disabled">
                                                <span class="page-link"><i class="fas fa-angle-left"></i></span>
                                            </li>
                                        @else
                                            <li class="page-item">
                                                <a class="page-link" href="#" wire:click.prevent="previousPage"><i class="fas fa-angle-left"></i></a>
                                            </li>
                                        @endif

                                        @foreach ($this->portfolios->getUrlRange(1, $this->portfolios->lastPage()) as $page => $url)
                                            @if ($page == $this->portfolios->currentPage())
                                                <li class="page-item active"><span class="page-link">{{ $page }}</span></li>
                                            @else
                                                <li class="page-item"><a class="page-link" href="#" wire:click.prevent="gotoPage({{ $page }})">{{ $page }}</a></li>
                                            @endif
                                        @endforeach

                                        @if ($this->portfolios->hasMorePages())
                                            <li class="page-item">
                                                <a class="page-link" href="#" wire:click.prevent="nextPage"><i class="fas fa-angle-right"></i></a>
                                            </li>
                                        @else
                                            <li class="page-item disabled">
                                                <span class="page-link"><i class="fas fa-angle-right"></i></span>
                                            </li>
                                        @endif
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                @endif
            @else
                <div class="row">
                    <div class="col-12">
                        <div class="text-center py-5">
                            <p class="text-muted">No portfolio items available at the moment.</p>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </section>
    <!-- portfolio-area-end -->

    <!-- Portfolio Modal -->
    @if($showModal && $selectedPortfolio)
        <div class="portfolio-modal-overlay" wire:click="closeModal" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px;">
            <div class="portfolio-modal-content" wire:click.stop style="position: relative; max-width: 90%; max-height: 90vh; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);">
                <button wire:click="closeModal" style="position: absolute; top: 15px; right: 15px; background: rgba(0, 0, 0, 0.7); color: #fff; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 24px; line-height: 1; z-index: 10; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease;">
                    <i class="fas fa-times"></i>
                </button>
                
                <div style="padding: 20px;">
                    @if($selectedPortfolio->image)
                        <div style="text-align: center;">
                            <img src="{{url('/')}}/public/storage/{{$selectedPortfolio->image}}" 
                                 alt="{{$selectedPortfolio->title}}" 
                                 style="max-width: 100%; max-height: 70vh; height: auto; border-radius: 4px; object-fit: contain;">
                        </div>
                    @endif
                </div>
            </div>
        </div>
    @endif
     


<style>
    .portfolio-modal-overlay {
        animation: fadeIn 0.3s ease;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    .portfolio-modal-content {
        animation: slideUp 0.3s ease;
    }
    
    @keyframes slideUp {
        from {
            transform: translateY(50px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    .portfolio-modal-overlay button:hover {
        background: rgba(0, 0, 0, 0.9) !important;
        transform: scale(1.1);
    }
</style>
</div>