@extends('layouts.main')

@section('main-container')
<div class="container-xl">

    <div class="page-header d-print-none mb-3">
        <div class="row align-items-center">
            <div class="col">
                <h2 class="page-title">Rainfall Data</h2>
            </div>
            <div class="col-auto">
                <a href="{{ route('watershed.rainfalls.create') }}" class="btn btn-primary">
                    ➕ Add Rainfall
                </a>
            </div>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <div class="card">
        <div class="card-body table-responsive">

            <table class="table table-bordered table-striped">
                <thead class="bg-primary-lt text-center">
                    <tr>
                        <th style="width:60px">#</th>
                        <th>State</th>
                        <th>District</th>
                        <th>Block</th>
                        <th>Years Covered</th>
                        <th>Avg (10 Years)</th>
                        <th>Data Source</th>
                        <th style="width:120px">Action</th>
                    </tr>
                </thead>

                <tbody>
@forelse ($rainfalls as $index => $rainfall)
    @php
        $json = $rainfall->sl_year_rainfall_mm ?? [];
        $yearsCount = is_array($json) ? count($json) : 0;
    @endphp
    <tr>
        <td class="text-center">{{ $index + 1 }}</td>
        <td>{{ $rainfall->state->name ?? '-' }}</td>
        <td>{{ $rainfall->district->name ?? '-' }}</td>
        <td>{{ $rainfall->block->name ?? '-' }}</td>

        <td class="text-center">
            {{ $yearsCount }} years
        </td>

        <td class="text-end">
            {{ $rainfall->average_last_10_years ?? '-' }}
        </td>

        <td>{{ $rainfall->data_source ?? '-' }}</td>

        <td class="text-center">
            <a href="{{ route('watershed.rainfalls.edit', $rainfall->id) }}"
               class="btn btn-sm btn-warning">✏️</a>

            <form action="{{ route('watershed.rainfalls.destroy', $rainfall->id) }}"
                  method="POST"
                  class="d-inline"
                  onsubmit="return confirm('Are you sure?')">
                @csrf
                @method('DELETE')
                <button class="btn btn-sm btn-danger">🗑</button>
            </form>
        </td>
    </tr>
@empty
    <tr>
        <td colspan="8" class="text-center text-muted">
            No rainfall data found
        </td>
    </tr>
@endforelse
</tbody>


            </table>
        </div>
    </div>
</div>
@endsection