@extends('layouts.main')

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

    {{-- Page Header --}}
    <div class="page-header d-print-none mb-3">
        <div class="row align-items-center">
            <div class="col">
                <h2 class="page-title">Watershed List</h2>
            </div>

            <div class="col-auto">
                <a href="{{ route('watershed.household-survey.create') }}" class="btn btn-primary">
                    ➕ Add Survey
                </a>
            </div>
        </div>
    </div>

    {{-- Success Message --}}
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="card">
        <div class="card-body p-0">

            <div class="table-responsive">
                <table class="table table-bordered table-hover table-striped mb-0">

                    <thead class="bg-primary-lt text-center">
                        <tr>
                            <th style="width:60px">#</th>
                            <th>State ID</th>
                            <th>Unit ID</th>
                            <th>Watershed Name</th>
                            <th>Watershed Code</th>
                            <th style="width:160px">Action</th>
                        </tr>
                    </thead>

                    <tbody>
                    @forelse ($watersheds as $index => $watershed)
                        <tr>

                            <td class="text-center">
                                {{ $index + 1 }}
                            </td>

                            <td class="text-center">
                            {{ $watershed->state->name ?? '-' }}
                            </td>

                            <td class="text-center">
                           {{ $watershed->unit->name ?? '-' }}
                            </td>

                            <td>
                                {{ $watershed->watershed_name ?? '-' }}
                            </td>

                            <td class="text-center">
                                {{ $watershed->watershed_code ?? '-' }}

                        
                            </td>

                            <td class="text-center">

                                <a href="{{ route('watershed.household-survey.create', ['watershed_id' => $watershed->id]) }}"
                                   class="btn btn-sm btn-primary">
                                   Add Survey
                                </a>

                            <a href="{{ route('watershed.household-survey.show', ['household_survey' => $watershed->id]) }}"
                                class="btn btn-sm btn-success">
                                View
                                </a>

                            </td>

                        </tr>

                    @empty
                        <tr>
                            <td colspan="6" class="text-center text-muted py-4">
                                No watershed data found
                            </td>
                        </tr>
                    @endforelse
                    </tbody>

                </table>
            </div>

        </div>
    </div>

</div>
@endsection