@extends('layouts.winemaker')

@section('title', 'Vineyard Overview')

@push('styles')
<style>
    .overview-layout {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 2rem;
    }

    .filters-card,
    .table-card {
        background: #ffffff;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }

    .filters-card label {
        font-weight: 600;
        color: #1a365d;
        font-size: 0.9rem;
        display: block;
        margin-bottom: 0.4rem;
    }

    .filters-card input,
    .filters-card select {
        width: 100%;
        border-radius: 8px;
        border: 1px solid #cbd5e1;
        padding: 0.6rem 0.75rem;
        margin-bottom: 0.9rem;
        font-size: 0.95rem;
    }

    .filters-card button {
        width: 100%;
        border: none;
        border-radius: 8px;
        padding: 0.75rem 1rem;
        font-weight: 600;
        cursor: pointer;
    }

    .btn-secondary { background: #e2e8f0; color: #334155; }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    thead th {
        text-align: left;
        padding: 0.75rem;
        background: #f1f5f9;
        color: #1e293b;
        font-size: 0.9rem;
    }

    tbody td {
        padding: 0.75rem;
        border-bottom: 1px solid #e2e8f0;
        font-size: 0.9rem;
        color: #334155;
    }

    .status-pill {
        display: inline-flex;
        align-items: center;
        padding: 0.2rem 0.6rem;
        border-radius: 999px;
        font-size: 0.8rem;
        text-transform: capitalize;
        background: #e2e8f0;
        color: #1e293b;
    }

    .pagination { display: flex; gap: 0.5rem; margin-top: 1rem; }
    .pagination a,
    .pagination span { padding: 0.5rem 0.75rem; border-radius: 6px; background: #f1f5f9; color: #1e293b; text-decoration: none; font-size: 0.9rem; }
    .pagination .active { background: #2563eb; color: #ffffff; }
</style>
@endpush

@section('content')
<div class="overview-layout" data-page="vineyard-overview">
    <aside class="filters-card">
        <h2 style="margin-bottom:1rem; color:#1a365d;">Filters</h2>
        <form data-role="filters" method="GET">
            <label>Status
                <select name="status">
                    <option value="">All statuses</option>
                    @foreach ($statusOptions as $status)
                        <option value="{{ $status }}" {{ ($filters['status'] ?? '') === $status ? 'selected' : '' }}>{{ ucfirst($status) }}</option>
                    @endforeach
                </select>
            </label>
            <label>Variety variation
                <select name="variety_variation_id">
                    <option value="">All variations</option>
                    @foreach ($variationOptions as $option)
                        <option value="{{ $option['id'] }}" {{ ($filters['variety_variation_id'] ?? '') == $option['id'] ? 'selected' : '' }}>{{ $option['label'] }}</option>
                    @endforeach
                </select>
            </label>
            <label>Planting year from
                <input type="number" name="planting_year_from" value="{{ $filters['planting_year_from'] ?? '' }}">
            </label>
            <label>Planting year to
                <input type="number" name="planting_year_to" value="{{ $filters['planting_year_to'] ?? '' }}">
            </label>
            <label>Vine count min
                <input type="number" name="vine_count_min" value="{{ $filters['vine_count_min'] ?? '' }}">
            </label>
            <label>Vine count max
                <input type="number" name="vine_count_max" value="{{ $filters['vine_count_max'] ?? '' }}">
            </label>
            <button type="submit" class="btn-secondary">Apply filters</button>
            <button type="button" class="btn-secondary" style="margin-top:0.5rem;" data-control="reset-filters">Reset</button>
        </form>
    </aside>

    <section class="table-card">
        <h2 style="margin-bottom:1rem; color:#1a365d;">Rows</h2>
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Location</th>
                    <th>Variety</th>
                    <th>Vine count</th>
                    <th>Planting year</th>
                    <th>Status</th>
                    <th>Last treatment</th>
                    <th>Upcoming plans</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($rows as $row)
                    <tr>
                        <td>{{ $row->id }}</td>
                        <td>{{ $row->location ?? '—' }}</td>
                        <td>{{ $row->varietyVariation?->grapeVariety?->variety_name ?? 'N/A' }}</td>
                        <td>{{ $row->vine_count }}</td>
                        <td>{{ $row->planting_year ?? '—' }}</td>
                        <td><span class="status-pill">{{ $row->status }}</span></td>
                        <td>{{ optional($row->last_treatment_at)->format('Y-m-d') ?? '—' }}</td>
                        <td>{{ $row->upcoming_planned_count ?? 0 }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" style="text-align:center; padding:1.5rem; color:#64748b;">No rows match the selected filters.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>

        {{ $rows->withQueryString()->links() }}
    </section>
</div>
@endsection