@extends('layouts.public')

@section('content')
<div class="max-w-7xl mx-auto p-6">
    <h1 class="text-2xl font-bold mb-4">ファンド一覧</h1>

    <form method="GET" class="mb-6 grid grid-cols-1 md:grid-cols-6 gap-4 bg-white p-6 rounded-lg shadow-sm">
        <div class="flex flex-col">
            <label class="text-xs text-gray-500 mb-1">キーワード</label>
            <input type="text" name="q" value="{{ request('q') }}" placeholder="例: ソーラー" class="border rounded p-2">
        </div>
        <div class="flex flex-col">
            <label class="text-xs text-gray-500 mb-1">サイト</label>
            <select name="site_id" class="border rounded p-2">
            <option value="">サイト</option>
            @foreach($sites as $site)
                <option value="{{ $site->id }}" @selected(request('site_id') == $site->id)>{{ $site->name }}</option>
            @endforeach
            </select>
        </div>
        <div class="flex flex-col">
            <label class="text-xs text-gray-500 mb-1">ステータス</label>
            <select name="status" class="border rounded p-2">
            <option value="">ステータス</option>
            @foreach($statusOptions as $value => $label)
                <option value="{{ $value }}" @selected(request('status') === $value)>{{ $label }}</option>
            @endforeach
            </select>
        </div>
        <div class="flex flex-col">
            <label class="text-xs text-gray-500 mb-1">都道府県</label>
            <input type="text" name="property_prefecture" value="{{ request('property_prefecture') }}" placeholder="例: 東京都" class="border rounded p-2">
        </div>
        <div class="flex flex-col">
            <label class="text-xs text-gray-500 mb-1">最低利回り(%)</label>
            <input type="number" step="0.1" name="min_return_rate" value="{{ request('min_return_rate') }}" class="border rounded p-2 w-full">
        </div>
        <div class="flex flex-col">
            <label class="text-xs text-gray-500 mb-1">最高利回り(%)</label>
            <input type="number" step="0.1" name="max_return_rate" value="{{ request('max_return_rate') }}" class="border rounded p-2 w-full">
        </div>
        <div class="md:col-span-6 flex items-center justify-end gap-3 pt-2">
            <a href="{{ route('public.funds.index') }}" class="px-4 py-2 border rounded text-gray-700">クリア</a>
            <button class="px-4 py-2 bg-blue-600 text-white rounded">検索</button>
        </div>
    </form>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        @foreach ($funds as $fund)
            <div class="p-4 bg-white rounded-lg shadow-sm border">
                <div class="flex items-start justify-between">
                    <a href="{{ $fund->url ?: route('public.funds.show', $fund) }}" target="_blank" rel="noopener" class="text-base font-semibold text-blue-700 hover:underline">{{ $fund->name }}</a>
                    <x-ui.fav-toggle :fund="$fund" />
                </div>
                <div class="text-xs text-gray-500">{{ optional($fund->crowdfundingSite)->name }}</div>
                <div class="mt-2 text-sm grid grid-cols-2 gap-2">
                    <div>利回り: {{ $fund->expected_return_rate ? number_format($fund->expected_return_rate, 2) . '%' : '-' }}</div>
                    <div>最低投資: {{ $fund->minimum_investment ? '¥' . number_format($fund->minimum_investment, 0) : '-' }}</div>
                    <div>募集: ¥{{ number_format($fund->target_amount, 0) }}</div>
                    <div>応募: ¥{{ number_format($fund->current_amount, 0) }} ({{ number_format($fund->progress_rate, 1) }}%)</div>
                </div>
                <div class="mt-3"><x-ui.progress :value="$fund->progress_rate" color="blue"/></div>
            </div>
        @endforeach
    </div>

    <div class="mt-6">
        {{ $funds->links('vendor.pagination.public') }}
    </div>
</div>
@endsection