@extends('layouts.main')
@section('main-container')
<div class="page-header d-print-none">
	<div class="container-xl">
		<div class="row g-2 align-items-center">
                <div class="col">
                    <!-- Page pre-title -->
                    <div class="page-pretitle">
                     Baseline-W.H.S
                    </div>
                    <h2 class="page-title">
                        Report - Beneficiary
                    </h2>
                </div>
				<!-- Page title actions -->
				<div class="col-auto ms-auto d-print-none">
					<div class="btn-list">
	                    <span class="d-none d-sm-inline">
                            <a href="#" class="btn btn-1">New view</a>
	                    </span>
                            <a href="/farmers/create" class="btn btn-primary btn-5 d-none d-sm-inline-block" >
	                            <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
	                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-2"><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
                                ADD - Beneficiary
                            </a>
                            <a href="#" class="btn btn-primary btn-6 d-sm-none btn-icon" data-bs-toggle="modal" data-bs-target="#modal-report" aria-label="Create new report">
	                            <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
	                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-2"><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
                            </a>
                    </div>

                    <div class="modal modal-blur fade" id="modal-report" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                        <h5 class="modal-title">New report</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                </div>
            </div>
	    </div>
    </div>
</div>


<!-- Page body -->
<div class="page-body">
	<div class="container-xl">
            <div class="row row-cards">
                <div class="col-12">
                <table class="table table-bordered table-striped table-hover table-responsive-md">
                    <thead class="table-light">
                     <tr class="bg-light text-center align-middle">
            
        
                     <th class="border px-1 bg-primary text-white">S.N</th>
                     <th class="border px-2 py-2 bg-primary text-white">Project Name</th>
                     <th class="border px-2 py-2 bg-primary text-white">Farmer Name</th>
                     <th class="border px-2 py-2 bg-primary text-white">Mobile No</th>
                     <th class="border px-2 py-2 bg-primary text-white">Male</th>
                     <th class="border px-2 py-2 bg-primary text-white">Female</th>
                     <th class="border px-2 py-2 bg-primary text-white">Categ</th>
                     <th class="border px-2 py-2 bg-primary text-white">Panchayat</th>
                     <th class="border px-2 py-2 bg-primary text-white">Village</th>
                     <th class="border px-2 py-2 bg-primary text-white" colspan="2">Action</th>
            </tr>
        </thead>
        <tbody>
        @php $i = 1; @endphp
            @forelse ($farmers as $farmer)
                <tr>
                    <td class="border  px-1 text-center">{{ $i++ }}</td>
                    <td class="border px-2 py-2 text-center">{{ $farmer->project->name ?? 'N/A' }}</td>
                    <td class="border px-2 py-2 text-center">{{ $farmer->farmer_name }}</td>
                    <td class="border px-2 py-2 text-center">{{ $farmer->mobile_no }}</td>
                    <td class="border px-2 py-2 text-center">{{ $farmer->number_of_males }}</td>
                    <td class="border px-2 py-2 text-center">{{ $farmer->number_of_females}}</td>
                    <td class="border px-2 py-2 text-center">{{ $farmer->category}}</td>
                    <td class="border px-2 py-2 text-center">{{ $farmer->panchayat_id }}</td>
                    <td class="border px-2 py-2 text-center">{{ $farmer->village_id }}</td>
                    <td class="border px-2 py-2 text-center">
                    <a href="{{ route('farmer.createLivihood', $farmer->id) }}" class="btn btn-sm btn-success">
                    Add Livelihood
                    </a>
                    <a href="/farmers/crops/create"class="btn btn-sm btn-success">Add Crops</a>
                    </td>
                    <td class="border px-2 py-2 text-center">Inactive</td>
                    
                </tr>
            @empty
                <tr>
                    <td colspan="6">No farmers found.</td>
                </tr>
            @endforelse
        </tbody>                </table>

                        </div>
                    </div>
                </div>
            </div>    
        </div>
    </div>
</div>

   <script>
        setTimeout(() => {
            const alert = document.getElementById('successAlert');
            if (alert) alert.style.display = 'none';
        }, 3000); // 3000 milliseconds = 3 seconds
    </script>

@endsection