@extends('layouts.main')
@section('main-container')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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">
                    W.H.S Baseeline
                    </div>
                    <h2 class="page-title">
                        ADD - Beneficiary livilihood Detail
                    </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" class="btn btn-primary btn-5 d-none d-sm-inline-block">
                            <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>
                            Beneficiary Report
                        </a>
                            
                    </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">
                    @if (session('success'))
                        <div id="success-message" class="alert alert-success">
                            {{ session('success') }}
                        </div>    
                        <script>
                            setTimeout(function() {
                                document.getElementById('success-message').style.display = 'none';
                            }, 5000);
                        </script>
                    @endif
                        
                    
                    <form action="{{ route('farmer.details.storeLivihood', $farmer->id) }}" method="POST">
    @csrf

    <div class="card mb-4 shadow-sm">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0">Farmer Livelihood Details</h5>
    </div>

    <div class="card-body">

        {{-- Occupation --}}
        <div class="mb-4 border rounded p-3">
            <h6 class="text-secondary">Occupation in Family</h6>
            <select name="occupation_in_family[]" class="form-control" multiple>
                <option value="Farmer">Farmer</option>
                <option value="Labour">Labour</option>
                <option value="Other">Other</option>
            </select>
        </div>

        {{-- Land Details --}}
        <div class="mb-4 border rounded p-3">
            <h6 class="text-secondary">Land Details</h6>
            <div class="row">
                @foreach ([
                    'irrigated_land' => 'Irrigated Land (Acres)',
                    'non_irrigated_land' => 'Non-Irrigated Land (Acres)',
                    'leased_in_land' => 'Leased-In Land',
                    'leased_out_land' => 'Leased-Out Land',
                ] as $name => $label)
                    <div class="col-md-3 mb-3">
                        <label>{{ $label }}</label>
                        <input type="number" step="0.01" name="{{ $name }}" class="form-control">
                    </div>
                @endforeach
            </div>
            <div class="mb-3">
                <label>Land Type</label>
                <select name="land_type[]" class="form-control" multiple>
                    <option value="Upland">Upland</option>
                    <option value="Medium">Medium</option>
                    <option value="Lowland">Lowland</option>
                </select>
            </div>
        </div>

        {{-- Source of Irrigation --}}
        <div class="mb-4 border rounded p-3">
            <h6 class="text-secondary">Source of Irrigation</h6>
            <select name="source_of_irrigation[]" class="form-control" multiple>
                <option value="Well">Well</option>
                <option value="Canal">Canal</option>
                <option value="Tube Well">Tube Well</option>
                <option value="Pond">Pond</option>
            </select>
        </div>

        {{-- Livestock --}}
        <div class="mb-4 border rounded p-3">
            <h6 class="text-secondary">Livestock Ownership</h6>

            <div class="form-check mb-3">
                <input type="checkbox" name="owns_livestock" class="form-check-input" value="1">
                <label class="form-check-label">Owns Livestock</label>
            </div>

            <div class="row">
                @foreach ([
                    'number_of_cows' => 'Cows',
                    'number_of_buffaloes' => 'Buffaloes',
                    'number_of_goats' => 'Goats',
                    'number_of_sheep' => 'Sheep',
                    'number_of_pigs' => 'Pigs',
                    'number_of_poultry_birds' => 'Poultry Birds',
                ] as $name => $label)
                    <div class="col-md-2 mb-3">
                        <label>{{ $label }}</label>
                        <input type="number" name="{{ $name }}" class="form-control" value="0">
                    </div>
                @endforeach
            </div>

            <div class="mb-3">
                <label>Type of Livestock Owned</label>
                <select name="type_of_livestock_owned[]" class="form-control" multiple>
                    <option value="Cow">Cow</option>
                    <option value="Buffalo">Buffalo</option>
                    <option value="Goat">Goat</option>
                    <option value="Sheep">Sheep</option>
                    <option value="Pig">Pig</option>
                    <option value="Poultry">Poultry</option>
                </select>
            </div>

            <div class="mb-3">
                <label>Purpose of Livestock</label>
                <select name="purpose_of_livestock[]" class="form-control" multiple>
                    <option value="Milk">Milk</option>
                    <option value="Meat">Meat</option>
                    <option value="Manure">Manure</option>
                    <option value="Ploughing">Ploughing</option>
                </select>
            </div>

            <div class="row">
                @foreach ([
                    'fodder_availability' => 'Fodder Available',
                    'access_to_veterinary_services' => 'Access to Veterinary Services',
                    'animal_housing_available' => 'Animal Housing Available',
                    'vaccination_done' => 'Vaccination Done',
                ] as $name => $label)
                    <div class="col-md-3">
                        <div class="form-check">
                            <input type="checkbox" name="{{ $name }}" class="form-check-input" value="1">
                            <label class="form-check-label">{{ $label }}</label>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="mt-3">
                <label>Annual Income from Livestock (Rs.)</label>
                <input type="number" step="0.01" name="annual_income_livestock" class="form-control">
            </div>
        </div>

        {{-- Labour --}}
        <div class="mb-4 border rounded p-3">
            <h6 class="text-secondary">Labour Engagement</h6>
            <div class="row">
                <div class="col-md-4 mb-3">
                    <label>Number of Family Members Engaged</label>
                    <input type="number" name="family_members_in_labour" class="form-control">
                </div>
                <div class="col-md-4 mb-3">
                    <label>Type of Labour Work</label>
                    <select name="type_of_labour_work[]" class="form-control" multiple>
                        <option value="Agricultural">Agricultural</option>
                        <option value="Construction">Construction</option>
                        <option value="MNREGA">MNREGA</option>
                        <option value="Other">Other</option>
                    </select>
                </div>
            </div>
        </div>

        {{-- Migration --}}
        <div class="mb-4 border rounded p-3">
            <h6 class="text-secondary">Migration</h6>
            <div class="row">
                <div class="col-md-4 mb-3">
                    <label>Migration Type</label>
                    <select name="migration" class="form-control">
                        <option value="">-- Select --</option>
                        <option value="Nearby Town">Nearby Town</option>
                        <option value="Out of Town">Out of Town</option>
                    </select>
                </div>
                <div class="col-md-2 mb-3">
                    <label>Male Migrants</label>
                    <input type="number" name="migration_male" class="form-control" value="0">
                </div>
                <div class="col-md-2 mb-3">
                    <label>Female Migrants</label>
                    <input type="number" name="migration_female" class="form-control" value="0">
                </div>
            </div>
        </div>

        {{-- Labour Income --}}
        <div class="mb-4 border rounded p-3">
            <h6 class="text-secondary">Labour Income</h6>
            <div class="row">
                <div class="col-md-4 mb-3">
                    <label>Average Daily Wage (Rs.)</label>
                    <input type="number" step="0.01" name="average_daily_wage" class="form-control">
                </div>
                <div class="col-md-4 mb-3">
                    <label>Total Days Worked</label>
                    <input type="number" name="total_days_labour" class="form-control">
                </div>
            </div>
        </div>

        {{-- Other Income --}}
        <div class="mb-4 border rounded p-3">
            <h6 class="text-secondary">Other Income</h6>
            <label>Income from Other Sources (Rs.)</label>
            <input type="number" step="0.01" name="total_income_other_sources" class="form-control">
        </div>

        {{-- Submit --}}
        <div class="mt-4 text-end">
            <button type="submit" class="btn btn-primary px-4">Save Details</button>
        </div>
    </div>
</div>

</form>

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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $('#unit_id').on('change', function () {
        let unitId = $(this).val();

        $('#state_id').empty().append('<option value="">Loading...</option>');

        if (unitId) {
            $.ajax({
                url: '/get-states/' + unitId,
                type: 'GET',
                success: function (states) {
                    $('#state_id').empty().append('<option value="">Select State</option>');
                    $.each(states, function (key, state) {
                        $('#state_id').append('<option value="' + state.id + '">' + state.name + '</option>');
                    });
                }
            });
        } else {
            $('#stateId').empty().append('<option value="">Select State</option>');
        }
    });
</script>

<script>
    $(document).ready(function() {
        $('#state_id').change(function() {
            var stateId = $(this).val();
            
            if (stateId) {
                $.ajax({
                    url: '/geo/get-districts/' + stateId,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('#district_id').empty().append('<option value="">--Select District--</option>');
                        $.each(data, function(key, district) {
                            $('#district_id').append('<option value="'+ district.id +'">'+ district.name +'</option>');
                        });
                    },
                    error: function(xhr, status, error) {
                        console.log("AJAX Error:", error);
                    }
                });
            } else {
                $('#district_id').empty().append('<option value="">--Select District--</option>');
            }
        });
    });
</script>
<script>
    let familyIndex = 1; // Start from 1 as 0 is already used

    function addFamilyMember() {
        const container = document.getElementById('familyMembersContainer');
        const memberId = `family-member-${familyIndex}`;

        const memberHTML = `
        <div id="${memberId}" class="row family-member-group border-top pt-3 mt-3">
            <div class="col-md-12 text-end mb-2">
                <button type="button" class="btn btn-sm btn-danger" onclick="removeFamilyMember('${memberId}')">Remove</button>
            </div>

            <div class="col-md-6 mb-3">
                <label class="form-label">Name</label>
                <input type="text" name="household_members[${familyIndex}][name]" class="form-control" placeholder="Enter Name">
            </div>
            <div class="col-md-6 mb-3">
                <label class="form-label">Age</label>
                <input type="number" name="household_members[${familyIndex}][age]" class="form-control" placeholder="Enter Age">
            </div>

            <div class="col-md-6 mb-3">
                <label class="form-label">Gender</label>
                <select name="household_members[${familyIndex}][gender]" class="form-control">
                    <option value="">--Select Gender--</option>
                    <option value="M">Male</option>
                    <option value="F">Female</option>
                </select>
            </div>

            <div class="col-md-6 mb-3">
                <label class="form-label">Education Level</label>
                <select name="household_members[${familyIndex}][education_level]" class="form-control">
                    <option value="">--Select--</option>
                    <option value="Ill">Illiterate</option>
                    <option value="Pri">Primary</option>
                    <option value="Matric">Matric</option>
                    <option value="Inter">Intermediate</option>
                    <option value="Grad">Graduate</option>
                    <option value="Grad with Tech">Graduate with Tech</option>
                    <option value="Tech Degree">Technical Degree</option>
                </select>
            </div>

            <div class="col-md-6 mb-3">
                <label class="form-label">Skill Training</label>
                <textarea name="household_members[${familyIndex}][skill_training]" class="form-control" rows="1" placeholder="Details of Training"></textarea>
            </div>

            <div class="col-md-6 mb-3">
                <label class="form-label">Income from Skill Training (₹)</label>
                <input type="number" step="0.01" name="household_members[${familyIndex}][income_from_skill_training]" class="form-control" placeholder="e.g. 5000.00">
            </div>
        </div>
        `;

        container.insertAdjacentHTML('beforeend', memberHTML);
        familyIndex++;

        // Scroll to the new member
        document.getElementById(memberId).scrollIntoView({ behavior: 'smooth' });
    }

    function removeFamilyMember(memberId) {
        const element = document.getElementById(memberId);
        if (element) {
            element.remove();
        }
    }
</script>

<script>
    $(document).ready(function() {
        $('#district_id').change(function() {
            var districtId = $(this).val();

            if (districtId) {
                $.ajax({
                    url: '/geo/get-blocks/' + districtId,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('#block_id').empty().append('<option value="">--Select Block--</option>');
                        $.each(data, function(key, block) {
                            $('#block_id').append('<option value="'+ block.id +'">'+ block.name +'</option>');
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error("AJAX Error:", error);
                        alert("Failed to fetch blocks. Please try again.");
                    }
                });
            } else {
                $('#block_id').empty().append('<option value="">--Select Block--</option>');
            }
        });
    });
</script>


<script>
    $(document).ready(function() {
        $('#block_id').change(function() {
            var blockId = $(this).val();
            
            if (blockId) {
                $.ajax({
                    url: '/geo/get-panchayats/' + blockId,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('#panchayat_id').empty().append('<option value="">--Select Panchayat--</option>');
                        $.each(data, function(key, panchayat) {
                            $('#panchayat_id').append(
                                $('<option>', {
                                    value: panchayat.id,
                                    text: panchayat.name
                                })
                            );
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error("AJAX Error:", error);
                        alert("Failed to fetch Panchayats. Please try again.");
                    }
                });
            } else {
                $('#panchayat_id').empty().append('<option value="">--Select Panchayat--</option>');
            }
        });
    });
</script>

<script>
    $(document).ready(function() {
        $('#panchayat_id').on('change', function() {
            var panchayatId = $(this).val();

            if (panchayatId) {
                $.ajax({
                    url: '/geo/get-villages/' + panchayatId, // ensure this route is set
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('#village_id').empty().append('<option value="">--Select Village--</option>');
                        $.each(data, function(index, village) {
                            $('#village_id').append(
                                $('<option>', {
                                    value: village.id,
                                    text: village.name
                                })
                            );
                        });
                    },
                    error: function(xhr) {
                        alert("Something went wrong while fetching villages.");
                        console.error(xhr.responseText);
                    }
                });
            } else {
                $('#village_id').empty().append('<option value="">--Select Village--</option>');
            }
        });
    });
</script>




@endsection