@extends('layouts.site')

@section('content')
    @include('frontend.common.breadcrumb')
    <section class="projects-listing-section">
        <div class="container" x-data="projectFilter()">

            <div class="section-header">
                <div class="project-filters">
                    <button class="filter-btn" :class="activeFilter === 'all' ? 'active' : ''"
                        @click="activeFilter = 'all'">All</button>

                    @foreach ($projects->pluck('category')->unique('id')->filter() as $cat)
                        <button class="filter-btn" :class="activeFilter === '{{ $cat->slug }}' ? 'active' : ''"
                            @click="activeFilter = '{{ $cat->slug }}'">
                            {{ $cat->name }}
                        </button>
                    @endforeach
                </div>
            </div>
            <div class="row">
                @foreach ($projects as $project)
                    <div class="col-lg-6 mb-4 "
                        x-show="activeFilter === 'all' || activeFilter === '{{ $project->category?->slug }}'" x-transition>
                        <div class="card h-100  unique-split-card">
                            <div class="row g-0 h-100">
                                <div class="col-md-5 position-relative overflow-hidden">
                                    <img src="{{ $project->image ? Storage::url($project->image) : 'https://ui-avatars.com/api/?name=' . urlencode($project->title) }}"
                                        alt="{{ $project->title }}" class="img-fluid h-100 object-fit-cover split-card-img"
                                        alt="Workshop">
                                </div>
                                <div class="col-md-7">
                                    <div class="card-body p-4">
                                        <h5 class="card-title fw-bold mb-3">{{ $project->title }}</h5>
                                        {{-- <p class="card-text text-muted small mb-4">{{ $project->short_des }}</p> --}}
                                        <p class="card-text text-muted small mb-4">
                                            {{ Str::words($project->short_des, 20, '...') }}
                                        </p>
                                        <div class="d-flex justify-content-between align-items-center mt-auto">
                                            <span class="btn btn-sm btn-outline-success rounded-pill px-3 category-badge">
                                                <i class="bi bi-tag-fill me-1 text-success"></i>
                                                {{ $project->category->name }}
                                            </span>
                                            <a href="{{ route('projects.detail', ['type' => $project->category->slug, 'slug' => $project->slug]) }}"
                                                class="btn btn-sm btn-outline-success rounded-pill px-3">Read Full
                                                Story</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

            </div>
        </div>
    </section>
@endsection
@push('scripts')
    <script>
        function projectFilter() {
            return {
                activeFilter: 'all',
            };
        }
    </script>
@endpush