{{-- resources/views/web/projects/index.blade.php --}}
@extends('layouts.app')

@section('title', 'Our Projects - ZISMO Engineering')
@section('meta_description', 'View our portfolio of electrical engineering projects across Botswana and the SADC region.')

@section('content')
<!-- Banner Area -->
<div class="banner-area" style="background-image:url({{ asset('images/banner/banner1.jpg') }})">
    <div class="banner-text">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="banner-heading">
                        <h1 class="banner-title">Our Projects</h1>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb justify-content-center">
                                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Projects</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Projects Content -->
<section id="main-container" class="main-container">
    <div class="container">
        <!-- Filters -->
        <div class="row mb-4">
            <div class="col-md-8">
                <div class="shuffle-btn-group">
                    <label class="active" for="all">
                        <input type="radio" name="shuffle-filter" id="all" value="all" checked="checked">Show All
                    </label>
                    @foreach($categories as $category)
                        <label for="{{ strtolower($category) }}">
                            <input type="radio" name="shuffle-filter" id="{{ strtolower($category) }}" value="{{ strtolower($category) }}">{{ $category }}
                        </label>
                    @endforeach
                </div>
            </div>
            <div class="col-md-4">
                <form action="{{ route('projects.index') }}" method="GET" class="d-flex">
                    <input type="text" name="search" class="form-control" placeholder="Search projects..." value="{{ request('search') }}">
                    <button type="submit" class="btn btn-primary ms-2"><i class="fa fa-search"></i></button>
                </form>
            </div>
        </div>

        <div class="row shuffle-wrapper">
            <div class="col-1 shuffle-sizer"></div>
            @forelse($projects as $project)
                <div class="col-lg-4 col-md-6 shuffle-item" data-groups='["{{ strtolower($project->category ?? 'general') }}"]'>
                    <div class="project-card">
                        <!-- Project Image -->
                        <div class="project-img-wrapper">
                            @if($project->featured_image)
                                <img src="{{ asset('storage/'.$project->featured_image) }}" alt="{{ $project->title }}">
                            @else
                                <div class="project-img-placeholder">
                                    <i class="fas fa-building fa-3x"></i>
                                </div>
                            @endif
                            @if($project->category)
                                <span class="project-category-tag">{{ $project->category }}</span>
                            @endif
                        </div>
                        
                        <!-- Project Info -->
                        <div class="project-info">
                            <h4 class="project-title">
                                <a href="{{ route('projects.show', $project->slug) }}">{{ $project->title }}</a>
                            </h4>
                            <div class="project-meta">
                                @if($project->client)
                                    <span><i class="fas fa-user"></i> {{ $project->client }}</span>
                                @endif
                                @if($project->location)
                                    <span><i class="fas fa-map-marker-alt"></i> {{ $project->location }}</span>
                                @endif
                            </div>
                            <a href="{{ route('projects.show', $project->slug) }}" class="btn-view">View Project <i class="fas fa-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12 text-center py-5">
                    <i class="fas fa-folder-open fa-3x text-muted mb-3"></i>
                    <h4>No projects found</h4>
                    <p class="text-muted">Check back later for our project portfolio.</p>
                </div>
            @endforelse
        </div>

        <!-- Pagination -->
        @if($projects->hasPages())
            <div class="row mt-5">
                <div class="col-12">
                    <ul class="pagination justify-content-center">
                        {{-- Previous Page Link --}}
                        @if($projects->onFirstPage())
                            <li class="page-item disabled"><span class="page-link">&laquo;</span></li>
                        @else
                            <li class="page-item"><a class="page-link" href="{{ $projects->previousPageUrl() }}" rel="prev">&laquo;</a></li>
                        @endif

                        {{-- Pagination Elements --}}
                        @foreach($projects->getUrlRange(1, $projects->lastPage()) as $page => $url)
                            @if($page == $projects->currentPage())
                                <li class="page-item active"><span class="page-link">{{ $page }}</span></li>
                            @else
                                <li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>
                            @endif
                        @endforeach

                        {{-- Next Page Link --}}
                        @if($projects->hasMorePages())
                            <li class="page-item"><a class="page-link" href="{{ $projects->nextPageUrl() }}" rel="next">&raquo;</a></li>
                        @else
                            <li class="page-item disabled"><span class="page-link">&raquo;</span></li>
                        @endif
                    </ul>
                </div>
            </div>
        @endif
    </div>
</section>

@push('styles')
<style>
    /* Project Cards */
    .project-card {
        background: #ffffff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
        transition: all 0.3s ease;
        height: 100%;
        border: 1px solid #e9ecef;
    }

    .project-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        border-color: #c93e2b;
    }

    .project-img-wrapper {
        position: relative;
        height: 200px;
        overflow: hidden;
        background: #f5f7fa;
    }

    .project-img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

    .project-card:hover .project-img-wrapper img {
        transform: scale(1.05);
    }

    .project-img-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f5f7fa;
        color: #adb5bd;
    }

    .project-category-tag {
        position: absolute;
        top: 12px;
        right: 12px;
        background: #c93e2b;
        color: #ffffff;
        padding: 3px 12px;
        border-radius: 20px;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .project-info {
        padding: 16px 18px 20px;
        background: #ffffff;
    }

    .project-title {
        font-size: 15px;
        font-weight: 700;
        margin: 0 0 5px 0;
        line-height: 1.3;
    }

    .project-title a {
        color: #0b1a26;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .project-title a:hover {
        color: #c93e2b;
    }

    .project-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        font-size: 12px;
        color: #6c757d;
        margin-bottom: 10px;
    }

    .project-meta span {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .project-meta i {
        color: #c93e2b;
        font-size: 11px;
        width: 13px;
    }

    .btn-view {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 14px;
        background: transparent;
        color: #c93e2b;
        border: 2px solid #c93e2b;
        border-radius: 30px;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .btn-view:hover {
        background: #c93e2b;
        color: #ffffff;
    }

    .btn-view i {
        transition: transform 0.3s ease;
    }

    .btn-view:hover i {
        transform: translateX(3px);
    }

    /* Shuffle Filter */
    .shuffle-btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        border-bottom: 2px solid #c93e2b;
        padding-bottom: 8px;
    }

    .shuffle-btn-group label {
        display: inline-block;
        color: #212121;
        font-size: 12px;
        padding: 4px 14px;
        font-weight: 600;
        text-transform: uppercase;
        transition: all 0.3s;
        cursor: pointer;
        margin: 0;
        border-radius: 20px;
        border: 2px solid transparent;
    }

    .shuffle-btn-group label.active {
        color: #ffffff;
        background: #c93e2b;
        border-color: #c93e2b;
    }

    .shuffle-btn-group label:hover:not(.active) {
        color: #c93e2b;
        border-color: #c93e2b;
    }

    .shuffle-btn-group label input {
        display: none;
    }

    .shuffle-item {
        margin-bottom: 25px;
    }

    /* Pagination */
    .pagination {
        display: flex;
        gap: 4px;
        margin: 0;
        padding: 0;
        justify-content: center;
        flex-wrap: wrap;
    }

    .pagination .page-item {
        list-style: none;
    }

    .pagination .page-link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        height: 32px;
        padding: 0 10px;
        color: #0b1a26;
        font-size: 13px;
        font-weight: 500;
        background: #ffffff;
        border: 1px solid #e9ecef;
        border-radius: 4px;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .pagination .page-link:hover {
        background: #c93e2b;
        color: #ffffff;
        border-color: #c93e2b;
    }

    .pagination .active .page-link {
        background: #c93e2b;
        color: #ffffff;
        border-color: #c93e2b;
    }

    .pagination .disabled .page-link {
        color: #adb5bd;
        pointer-events: none;
        cursor: not-allowed;
    }

    @media (max-width: 768px) {
        .project-img-wrapper {
            height: 180px;
        }
        
        .project-title {
            font-size: 14px;
        }
        
        .shuffle-btn-group label {
            font-size: 10px;
            padding: 3px 10px;
        }
        
        .pagination .page-link {
            min-width: 28px;
            height: 28px;
            font-size: 12px;
            padding: 0 8px;
        }
    }

    @media (max-width: 576px) {
        .project-img-wrapper {
            height: 160px;
        }
        
        .project-info {
            padding: 12px 14px 16px;
        }
    }
</style>
@endpush