@extends('front.layout.app')
@section('content')
    @php echo cms_edit_page("module/news");@endphp
   
         <div class="career pagetitle mb-4">
            <div class="container">
                <h1>Portfolio</h1>
            </div>
        </div>
         <!-- Inner page title end -->


		<main id="main">
			
			<!-- Our Services -->
			<div class="innerpagewrap project-page">
				<div class="container"> 
					
<!--					 <div class="view_box" data-aos=fade-up data-aos-delay=250 data-aos-duration=1000>-->
<!--<div class="view-filter">-->
<!--    <label for="view">View by: </label>-->
<!--    <select id="viewFilter" class="form-control">-->
<!--        <option value="20">View by 20</option>-->
<!--        <option value="50">View by 50</option>-->
<!--    </select>-->
<!--    <p>Showing 1-20 of 50 Results</p>-->
<!--</div> -->
<!--</div>-->

<div class="row align-items-md-center mb-4">
    <div class="col-md-6">
        <ul class="nav nav-tabs portfolio-tabs" id="yearTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link {{ $selectedYear == 'all' ? 'active' : '' }}" 
                   href="{{ url('portfolio?year=all' . (request('pagination') ? '&pagination=' . request('pagination') : '')) }}">
                    ALL
                </a>
            </li>
            @foreach($years as $year)
            <li class="nav-item" role="presentation">
                <a class="nav-link {{ $selectedYear == $year ? 'active' : '' }}" 
                   href="{{ url('portfolio?year=' . $year . (request('pagination') ? '&pagination=' . request('pagination') : '')) }}">
                    {{ $year }}
                </a>
            </li>
            @endforeach
        </ul>
    </div>
    
    <!--<div class="col-md-6">-->
    <!--    <div class="view-filter-wrapper d-flex justify-content-end align-items-center">-->
    <!--        <label for="viewFilter" class="me-2 mb-0">View by:</label>-->
    <!--        <select id="viewFilter" class="form-select view-select me-3">-->
    <!--            <option value="12" {{ !request('pagination') || request('pagination') == 12 ? 'selected' : '' }}>View by 12</option>-->
    <!--            <option value="20" {{ request('pagination') == 20 ? 'selected' : '' }}>View by 20</option>-->
    <!--            <option value="50" {{ request('pagination') == 50 ? 'selected' : '' }}>View by 50</option>-->
    <!--            <option value="80" {{ request('pagination') == 80 ? 'selected' : '' }}>View by 80</option>-->
    <!--        </select>-->
    <!--        <p class="mb-0 results-text">-->
    <!--            Showing {{ $get_all_projects->firstItem() ?? 0 }}-{{ $get_all_projects->lastItem() ?? 0 }} of {{ $get_all_projects->total() }} Results-->
    <!--        </p>-->
    <!--    </div>-->
    <!--</div>-->
</div>
<!-- Portfolio Grid -->
<div class="our-projects intprojects">
    <div class="row">
    @foreach ($get_all_projects as $project)
    @php
        // Extract slug from post_slug (remove module prefix)
        $dbSlug = str_replace($module_type . '/', '', $project->post_slug);
        
        // If database slug is empty, invalid, or just numbers, generate from heading
        if (empty($dbSlug) || !$dbSlug || $dbSlug == '/' || is_numeric($dbSlug) || strlen(trim($dbSlug)) < 2) {
            $slug = \Illuminate\Support\Str::slug($project->heading);
        } else {
            $slug = $dbSlug;
        }
    @endphp
    <div class="col-md-6 col-lg-3 mb-4"> 
        <div class="portfolio-card">
            <a href="{{ url('portfolio/' . $slug) }}">
                <div class="portfolio-image">
                    <img src="{{ asset_uploads('module/' . $module_type . '/thumb/' . $project->featured_img) }}"
                        title="{{ $project['featured_img_title'] ?? '' }}"
                        alt="{{ $project['featured_img_alt'] ?? $project->heading }}" 
                        loading="lazy">
                    <div class="portfolio-overlay">
                        <div class="portfolio-content">
                            <h3 class="portfolio-title">{!! $project->heading !!}</h3>
                            <p class="portfolio-excerpt">{!! Str::limit(strip_tags($project['content'] ?? ''), 60, '...') !!}</p>
                        </div>
                        <div class="portfolio-arrow">
                            <i class="fa-solid fa-arrow-right"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
    @endforeach
    </div>
</div>



 <nav aria-label="Page navigation example">
                        <ul class="pagination justify-content-center">
                            @if(isset($get_all_projects) && count($get_all_projects))
                                {{ $get_all_projects->links() }}
                            @endif
                        </ul>
                </nav>
                 
            </div>
        </div>
    </div>

		</main>

@endsection
@section('beforeBodyClose')
<style>
/* Portfolio Tabs Styling */
.portfolio-tabs {
    border: none;
    gap: 0;
}

.portfolio-tabs .nav-item {
    margin: 0;
}

.portfolio-tabs .nav-link {
    background: white;
    color: #333;
    border: 2px solid #333399;
    padding: 12px 30px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    border-radius: 0;
    transition: all 0.3s ease;
    margin: 0;
}

.portfolio-tabs .nav-item:first-child .nav-link {
    border-radius: 8px 0 0 8px;
    border-right: 1px solid #333399;
}

.portfolio-tabs .nav-item:last-child .nav-link {
    border-radius: 0 8px 8px 0;
    border-left: 1px solid #333399;
}

.portfolio-tabs .nav-link.active {
    background: #333399;
    color: white;
    border-color: #333399;
}

.portfolio-tabs .nav-link:hover:not(.active) {
    background: #f8f9fa;
}

/* View Filter Styling */
.view-filter-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

.view-filter-wrapper label {
    font-weight: 600;
    color: #333;
    font-size: 14px;
    white-space: nowrap;
}

.view-select {
    width: auto;
    min-width: 140px;
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}

.view-select:focus {
    border-color: #333399;
    box-shadow: 0 0 0 0.2rem rgba(196, 30, 58, 0.25);
}

.results-text {
    color: #666;
    font-size: 14px;
    white-space: nowrap;
}

/* Portfolio Card Styles */
.portfolio-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.portfolio-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.portfolio-image {
    position: relative;
    padding-bottom: 75%; /* 4:3 aspect ratio */
    overflow: hidden;
}

.portfolio-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.portfolio-card:hover .portfolio-image img {
    transform: scale(1.1);
}

.portfolio-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 60%, transparent 100%);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.portfolio-content {
    flex: 1;
    color: white;
}

.portfolio-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: white;
    text-transform: uppercase;
    line-height: 1.3;
}

.portfolio-excerpt {
    font-size: 13px;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
}

.portfolio-arrow {
    width: 45px;
    height: 45px;
    background: #333399;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 15px;
    transition: background 0.3s ease, transform 0.3s ease;
}

.portfolio-arrow i {
    color: white;
    font-size: 18px;
}

.portfolio-card:hover .portfolio-arrow {
    background: #333399;
    transform: scale(1.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .view-filter-wrapper {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }
    
    .view-select {
        width: 100%;
    }
    
    .results-text {
        font-size: 13px;
    }
    
    .portfolio-tabs .nav-link {
        padding: 10px 20px;
        font-size: 13px;
    }
    
    .portfolio-title {
        font-size: 14px;
    }
    
    .portfolio-excerpt {
        font-size: 12px;
    }
    
    .portfolio-arrow {
        width: 40px;
        height: 40px;
    }
    
    .portfolio-arrow i {
        font-size: 16px;
    }
}
</style>
<script>
//     $(document).ready(function() {
//         $('#viewFilter').on('change', function() {
//             var selectedValue = $(this).val();
//             var url = "/projects?pagination="+selectedValue;
//             window.location.href = url;
//         });
//     });

$(document).ready(function() {
    // Check if there is a pagination value in the cookie and set it as selected value
    var paginationCookie = getCookie('pagination');
    if (paginationCookie) {
        $('#viewFilter').val(paginationCookie);
    }

    // Handle change event
    $('#viewFilter').on('change', function() {
        var selectedValue = $(this).val();

        // Store selected value in cookies
        setCookie('pagination', selectedValue, 7); // Stores for 7 days

        // Get current year parameter from URL
        var urlParams = new URLSearchParams(window.location.search);
        var yearParam = urlParams.get('year') || 'all';

        // Redirect to the URL with both pagination and year values
        var url = "/portfolio?year=" + yearParam + "&pagination=" + selectedValue;
        window.location.href = url;
    });
});

// Function to set a cookie
function setCookie(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

// Function to get a cookie by name
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

 </script>

@endsection