@extends('admin.layout.content')

@section('content')
<div class="container-fluid px-3 px-lg-4 py-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold">Laporan Masa Tanam</h2>
            <p class="text-muted mb-0">Pilih periode masa tanam untuk melihat laporan detail.</p>
        </div>
        <a href="{{ route('admin.reports.excel', ['code' => session('admin_route_code')]) }}" download class="btn text-white rounded-3 d-flex align-items-center py-2" style="background: var(--primary)">
            <span class="material-symbols-outlined align-middle me-2" style="font-size: 20px;">download</span>
            Unduh Semua (Excel)
        </a>
    </div>

    <!-- Cards Section -->
    <div class="row g-3 mb-5">
        @foreach($periods as $period)
        <div class="col-12 col-md-4 col-lg-3">
            <a href="{{ route('admin.reports.show', $period->planting_period_id) }}" class="text-decoration-none">
                <div class="tf-card p-3 h-100" style="transition: transform 0.2s;">
                    <div class="d-flex align-items-center gap-3">
                        <div class="tf-icon-box rounded-3 d-flex align-items-center justify-content-center bg-success-subtle text-success flex-shrink-0" style="width: 48px; height: 48px; min-width: 48px; min-height: 48px;">
                            <span class="material-symbols-outlined" style="font-size: 24px;">analytics</span>
                        </div>
                        <div style="min-width: 0; flex: 1;">
                            <h6 class="fw-bold mb-1 text-dark text-truncate">{{ $period->product->product_name ?? 'Produk Tidak Diketahui' }}</h6>
                            <span class="badge {{ $period->status == 'active' ? 'bg-success' : 'bg-secondary' }} text-truncate d-inline-block" style="max-width: 100%;">
                                Kode: {{ $period->period_code }}
                            </span>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        @endforeach
        @if($periods->isEmpty())
        <div class="col-12 text-center py-4 text-muted">
            Belum ada data masa tanam.
        </div>
        @endif
    </div>

    </div>
</div>
<style>
    .tf-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
</style>
@endsection