Projects/3BIT/winter-semester/IIS/xnecasr00/resources/views/vineyard/overview/index.blade.php
2026-04-14 19:28:46 +02:00

164 lines
5.4 KiB
PHP

@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