@extends('layouts.main')

@section('main-container')

{{-- SUCCESS MESSAGE --}}
@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}

        <button type="button"
                class="btn-close"
                data-bs-dismiss="alert"></button>
    </div>
@endif


{{-- ERROR MESSAGE --}}
@if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">

        <ul class="mb-0">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>

        <button type="button"
                class="btn-close"
                data-bs-dismiss="alert"></button>
    </div>
@endif
<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">
                    Household Survey Form
                </h2>
            </div>

            

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


<form action="{{ route('watershed.household-survey.store') }}" method="POST">
    @csrf

<div class="container-xl">

    <div id="householdContainer">

        {{-- ================= HOUSEHOLD ROW ================= --}}
        <div class="row household-row border rounded p-3 mb-4 bg-light"
             data-index="0">

            {{-- Micro Watershed --}}
            <div class="col-md-3 mb-3">
                <label class="form-label">Micro Watershed Code</label>

                <select name="households[0][micro_watershed_code]"
                        class="form-select micro-code"
                        required>

                    <option value="">-- Select Micro Watershed --</option>

                    @foreach($records->unique('micro_watershed_code') as $record)
                        <option value="{{ $record->micro_watershed_code }}">
                            {{ $record->micro_watershed_code }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- Village --}}
            <div class="col-md-3 mb-3">
                <label class="form-label">Village</label>

                <select name="households[0][village_id]"
                        class="form-select"
                        required>

                    <option value="">Select Village</option>

                    @foreach($villages as $village)
                        <option value="{{ $village->id }}">
                            {{ $village->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- Head --}}
            <div class="col-md-3 mb-3">
                <label class="form-label">Head of Household</label>

                <input type="text"
                       name="households[0][head_of_household_name]"
                       class="form-control"
                       required>
            </div>

            {{-- Category --}}
            <div class="col-md-3 mb-3">
                <label class="form-label">Category</label>

                <select name="households[0][category]"
                        class="form-select">

                    <option value="">Select</option>
                    <option>SC</option>
                    <option>ST</option>
                    <option>OBC</option>
                    <option>General</option>
                    <option>Other</option>
                </select>
            </div>

            {{-- Land --}}
            <div class="col-md-3 mb-3">
                <label class="form-label">Land Holding (Acre)</label>

                <input type="number"
                       step="0.01"
                       min="0"
                       name="households[0][land_holding_acre]"
                       id="land_holding_acre_0"
                       class="form-control">
            </div>

            {{-- Farmer Type --}}
            <div class="col-md-3 mb-3">
                <label class="form-label">Farmer Type</label>

                <select name="households[0][farmer_type]"
                        id="farmer_type_0"
                        class="form-select">

                    <option value="">Select</option>
                    <option>Landless</option>
                    <option>Marginal</option>
                    <option>Small</option>
                    <option>Semi-medium</option>
                    <option>Medium</option>
                    <option>Large</option>
                </select>
            </div>

            {{-- Action Buttons --}}
            <div class="col-12 mt-2">
                <div class="d-flex gap-2">

                    <button type="button"
                            class="btn btn-info openPlotModal">
                        Add Plot
                    </button>

                    <button type="button"
                            class="btn btn-warning openFamilyModal">
                        Add Family
                    </button>

                </div>
            </div>

            {{-- Add Remove --}}
            <div class="col-12 text-end mt-4">

                <button type="button"
                        class="btn btn-primary btn-sm addRow">
                    ➕ Add Household
                </button>

                <button type="button"
                        class="btn btn-danger btn-sm removeRow">
                    🗑 Remove
                </button>

            </div>

        </div>

    </div>

    {{-- Submit --}}
    <div class="text-end mb-4">
        <button type="submit" class="btn btn-success">
            Save Household Survey
        </button>
    </div>

</div>



{{-- ================= FAMILY MODAL ================= --}}
<div class="modal fade" id="familyModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            {{-- Header --}}
            <div class="modal-header">
                <h5 class="modal-title">Family Members</h5>

                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal">
                </button>
            </div>

            {{-- Body --}}
            <div class="modal-body">

                <table class="table table-bordered"
                       id="familyTable">

                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Sex</th>
                            <th>Age</th>
                            <th width="120">Action</th>
                        </tr>
                    </thead>

                    <tbody></tbody>

                </table>

            </div>

            {{-- Footer --}}
            <div class="modal-footer">

                <button type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal">
                    Close
                </button>

                <button type="button"
                        class="btn btn-success"
                        id="saveFamilyBtn">
                    Save Family
                </button>

            </div>

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



{{-- ================= PLOT MODAL ================= --}}
<div class="modal fade" id="plotModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Plot Details</h5>

                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">

                <table class="table table-bordered"
                       id="plotTable">

                    <thead>
                        <tr>
                            <th>Area (Acre)</th>
                            <th>Irrigation</th>
                            <th>Plot No</th>
                            <th width="120">Action</th>
                        </tr>
                    </thead>

                    <tbody></tbody>

                </table>

            </div>

            <div class="modal-footer">

                <button type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal">
                    Close
                </button>

                <button type="button"
                        class="btn btn-success"
                        id="submitPlots">
                    Save Plot
                </button>

            </div>

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

</form>




<script>
let householdsData = {};
let activeHousehold = 0;
let activeHouseholdPlot = 0;
let rowIndex = 1;

/* ================= FARMER TYPE ================= */
function setFarmerType(val, index) {

    val = parseFloat(val);

    let typeSelect = $('#farmer_type_' + index);

    if (isNaN(val) || val <= 0) {
        typeSelect.val('Landless');
    }
    else if (val < 2.5) {
        typeSelect.val('Marginal');
    }
    else if (val < 5) {
        typeSelect.val('Small');
    }
    else if (val < 10) {
        typeSelect.val('Semi-medium');
    }
    else if (val < 25) {
        typeSelect.val('Medium');
    }
    else {
        typeSelect.val('Large');
    }
}

/* ================= AUTO FARMER TYPE ================= */
$(document).on('input', 'input[name*="[land_holding_acre]"]', function () {

    let val = $(this).val();

    let index = $(this).closest('.household-row').data('index');

    setFarmerType(val, index);
});


/* ================= FAMILY MODAL OPEN ================= */
$(document).on('click', '.openFamilyModal', function () {

    activeHousehold = $(this).closest('.household-row').data('index');

    if (!householdsData[activeHousehold]) {
        householdsData[activeHousehold] = { family: [], plots: [] };
    }

    $('#familyTable tbody').empty();

    let data = householdsData[activeHousehold].family || [];

    if (data.length === 0) {
        addFamilyRowUI();
    } else {
        data.forEach(f => addFamilyRowUI(f));
    }

    $('#familyModal').modal('show');
});


function addFamilyRowUI(data = {}) {

    let row = `
        <tr>
            <td><input type="text" class="form-control name" value="${data.name || ''}"></td>
            <td>
                <select class="form-select sex">
                    <option value="">Select</option>
                    <option value="Male" ${data.sex == 'Male' ? 'selected' : ''}>Male</option>
                    <option value="Female" ${data.sex == 'Female' ? 'selected' : ''}>Female</option>
                    <option value="Other" ${data.sex == 'Other' ? 'selected' : ''}>Other</option>
                </select>
            </td>
            <td><input type="number" class="form-control age" value="${data.age || ''}"></td>
            <td>
                <button type="button" class="btn btn-success btn-sm addFamilyRow">+</button>
                <button type="button" class="btn btn-danger btn-sm removeFamilyRow">-</button>
            </td>
        </tr>
    `;

    $('#familyTable tbody').append(row);
}

/* ADD / REMOVE FAMILY ROW */
$(document).on('click', '.addFamilyRow', function () {
    addFamilyRowUI();
});

$(document).on('click', '.removeFamilyRow', function () {
    if ($('#familyTable tbody tr').length > 1) {
        $(this).closest('tr').remove();
    }
});

/* ================= SAVE FAMILY ================= */
$('#saveFamilyBtn').on('click', function () {

    let list = [];

    $('#familyTable tbody tr').each(function () {

        let name = $(this).find('.name').val();
        let sex = $(this).find('.sex').val();
        let age = $(this).find('.age').val();

        if (name) {
            list.push({ name, sex, age });
        }
    });

    if (!householdsData[activeHousehold]) {
        householdsData[activeHousehold] = { family: [], plots: [] };
    }

    householdsData[activeHousehold].family = list;

    $('#familyModal').modal('hide');
});


/* ================= PLOT MODAL OPEN ================= */
$(document).on('click', '.openPlotModal', function () {

    activeHouseholdPlot = $(this).closest('.household-row').data('index');

    if (!householdsData[activeHouseholdPlot]) {
        householdsData[activeHouseholdPlot] = { family: [], plots: [] };
    }

    $('#plotTable tbody').empty();

    let plots = householdsData[activeHouseholdPlot].plots || [];

    if (plots.length === 0) {
        addPlotRowUI();
    } else {
        plots.forEach(p => addPlotRowUI(p));
    }

    $('#plotModal').modal('show');
});


function addPlotRowUI(data = {}) {

    let row = `
        <tr>
            <td><input type="number" step="0.01" class="form-control plot-area" value="${data.area_acre || ''}"></td>
            <td>
                <select class="form-select irrigation">
                    <option value="">Select</option>
                    <option value="Irrigated" ${data.irrigation_status == 'Irrigated' ? 'selected' : ''}>Irrigated</option>
                    <option value="Unirrigated" ${data.irrigation_status == 'Unirrigated' ? 'selected' : ''}>Unirrigated</option>
                </select>
            </td>
            <td><input type="text" class="form-control plot_no" value="${data.plot_no || ''}"></td>
            <td>
                <button type="button" class="btn btn-success btn-sm addPlotRow">+</button>
                <button type="button" class="btn btn-danger btn-sm removePlotRow">-</button>
            </td>
        </tr>
    `;

    $('#plotTable tbody').append(row);
}

/* ADD / REMOVE PLOT ROW */
$(document).on('click', '.addPlotRow', function () {
    addPlotRowUI();
});

$(document).on('click', '.removePlotRow', function () {
    if ($('#plotTable tbody tr').length > 1) {
        $(this).closest('tr').remove();
    }
});


/* ================= SAVE PLOTS ================= */
$('#submitPlots').on('click', function () {

    let plots = [];
    let totalArea = 0;

    $('#plotTable tbody tr').each(function () {

        let area = parseFloat($(this).find('.plot-area').val());
        let irrigation = $(this).find('.irrigation').val();
        let plot_no = $(this).find('.plot_no').val();

        if (!isNaN(area)) {
            totalArea += area;
        }

        if (area) {
            plots.push({
                area_acre: area,
                irrigation_status: irrigation,
                plot_no: plot_no
            });
        }
    });

    if (!householdsData[activeHouseholdPlot]) {
        householdsData[activeHouseholdPlot] = { family: [], plots: [] };
    }

    householdsData[activeHouseholdPlot].plots = plots;

    $('#land_holding_acre_' + activeHouseholdPlot).val(totalArea.toFixed(2));

    setFarmerType(totalArea, activeHouseholdPlot);

    $('#plotModal').modal('hide');
});


/* ================= FINAL FORM SUBMIT ================= */
$('form').on('submit', function () {

    $('.dynamic-hidden').remove();

    let container = $('<div class="dynamic-hidden"></div>');

    Object.keys(householdsData).forEach(hIndex => {

        let data = householdsData[hIndex] || { family: [], plots: [] };

        (data.family || []).forEach((f, i) => {

            container.append(`
                <input type="hidden" name="households[${hIndex}][family_members][${i}][name]" value="${f.name || ''}">
                <input type="hidden" name="households[${hIndex}][family_members][${i}][sex]" value="${f.sex || ''}">
                <input type="hidden" name="households[${hIndex}][family_members][${i}][age]" value="${f.age || ''}">
            `);
        });

        (data.plots || []).forEach((p, i) => {

            container.append(`
                <input type="hidden" name="households[${hIndex}][plots][${i}][plot_no]" value="${p.plot_no || ''}">
                <input type="hidden" name="households[${hIndex}][plots][${i}][area_acre]" value="${p.area_acre || ''}">
                <input type="hidden" name="households[${hIndex}][plots][${i}][irrigation_status]" value="${p.irrigation_status || ''}">
            `);
        });

    });

    $(this).append(container);
});


/* ================= ADD HOUSEHOLD ROW ================= */
$(document).on('click', '.addRow', function () {

    let row = $('.household-row:first').clone();

    row.attr('data-index', rowIndex);

    row.find('input,select').each(function () {

        let name = $(this).attr('name');

        if (name) {
            $(this).attr('name', name.replace(/\[\d+\]/g, '[' + rowIndex + ']'));
        }

        $(this).val('');
    });

    row.find('[id^="land_holding_acre_"]').attr('id', 'land_holding_acre_' + rowIndex);
    row.find('[id^="farmer_type_"]').attr('id', 'farmer_type_' + rowIndex);

    $('#householdContainer').append(row);

    rowIndex++;
});


/* ================= REMOVE HOUSEHOLD ================= */
$(document).on('click', '.removeRow', function () {

    if ($('.household-row').length > 1) {

        let index = $(this).closest('.household-row').data('index');

        delete householdsData[index];

        $(this).closest('.household-row').remove();
    }
});
</script>

@endsection