@extends('layouts.app')

@section('title', 'All Innovations')

@section('content')
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h2 class="fw-bold mb-0">All Innovations</h2>
            <p class="text-muted mb-0">Browse innovations from across Uganda</p>
        </div>
    </div>

    
    {{-- SEARCH / FILTERS --}}
    <div class="card border-0 shadow-sm mb-4" style="border-radius: 16px;">
        <div class="card-body p-4">

            <form method="GET" action="{{ route('innovations.explore') }}" class="row g-3 align-items-end">

                {{-- Search --}}
                <div class="col-lg-6">
                    <label class="form-label fw-semibold">Search</label>
                    <div class="input-group">
                        <span class="input-group-text bg-white">
                            <i class="fas fa-magnifying-glass"></i>
                        </span>
                        <input
                            type="text"
                            name="search"
                            class="form-control"
                            placeholder="Title, description, location, contact person, district..."
                            value="{{ request('search') }}"
                        >
                    </div>
                </div>

                {{-- Category --}}
                <div class="col-lg-3 col-md-6">
                    <label class="form-label fw-semibold">Category</label>
                    <select name="category" class="form-select">
                        <option value="">All Categories</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                                {{ $category->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Stage --}}
                <div class="col-lg-3 col-md-6">
                    <label class="form-label fw-semibold">Stage</label>
                    <select class="form-select" name="stage">
                        <option value="">All Stages</option>
                        @foreach($stages as $s)
                            <option value="{{ $s }}" {{ request('stage') === $s ? 'selected' : '' }}>
                                {{ ucfirst($s) }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Funding --}}
                <div class="col-lg-3 col-md-6">
                    <label class="form-label fw-semibold">Funding</label>
                    <select class="form-select" name="funding_status">
                        <option value="">All Funding</option>
                        @foreach($fundingStatuses as $fs)
                            <option value="{{ $fs }}" {{ request('funding_status') === $fs ? 'selected' : '' }}>
                                {{ ucfirst(str_replace('_', ' ', $fs)) }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Partnership --}}
                <div class="col-lg-3 col-md-6">
                    <label class="form-label fw-semibold">Partnership</label>
                    <select class="form-select" name="partnerships">
                        <option value="">All Partnerships</option>
                        @foreach($partnerships as $p)
                            <option value="{{ $p }}" {{ request('partnerships') === $p ? 'selected' : '' }}>
                                {{ ucfirst($p) }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Buttons --}}
                <div class="col-lg-6 d-flex gap-2 flex-wrap justify-content-lg-end">
                    <button class="btn btn-primary">
                        <i class="fas fa-search me-1"></i> Search
                    </button>

                    @if(
                        request()->filled('search') ||
                        request()->filled('category') ||
                        request()->filled('stage') ||
                        request()->filled('funding_status') ||
                        request()->filled('partnerships')
                    )
                        <a href="{{ route('innovations.explore') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-rotate-left me-1"></i> Clear
                        </a>
                    @endif
                </div>

            </form>

        </div>
    </div>



    <div class="row">
        @forelse($innovations as $innovation)
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card h-100 shadow-sm">
                    @php
                        $image = ($innovation->images && count($innovation->images) > 0)
                            ? asset('images/' . $innovation->images[0])
                            : asset('images/micro.jpeg');
                    @endphp

                    <img src="{{ $image }}"
                        class="card-img-top"
                        alt="{{ $innovation->title }}"
                        style="height: 200px; object-fit: cover;">


                    <div class="card-body d-flex flex-column">
                        <div class="mb-2">
                            @if($innovation->category)
                                <span class="badge bg-primary">{{ $innovation->category->name }}</span>
                            @endif
                            @if($innovation->region)
                                <span class="badge bg-secondary">{{ $innovation->region }}</span>
                            @endif
                        </div>

                        <h5 class="card-title">{{ $innovation->title }}</h5>
                        <p class="card-text text-muted flex-grow-1">
                            {{ \Illuminate\Support\Str::limit($innovation->description, 120) }}
                        </p>

                        <div class="mt-auto">
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">
                                    <i class="fas fa-user me-1"></i>
                                    {{ $innovation->contact_person ?? 'N/A' }}
                                </small>
                                <small class="text-muted">
                                    {{ $innovation->created_at->diffForHumans() }}
                                </small>
                            </div>

                            <div class="mt-2">
                                <a href="{{ route('innovation.show', $innovation) }}"
                                   class="btn btn-outline-primary btn-sm">View Details</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12">
                <p class="text-muted">No innovations found.</p>
            </div>
        @endforelse
    </div>

    <div class="d-flex justify-content-center">
        {{ $innovations->links() }}
    </div>
</div>
@endsection