@extends('layouts.site')

@section('content')
    @include('frontend.common.breadcrumb')
    <!-- Projects Listing -->
    <section class="projects-listing-section">
        <div class="container">
            <div class="row">
                @foreach ($projects as $project)
                    <div class="col-lg-6 mb-4 ">
                        <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('styles')
    <style>

    </style>
@endpush