@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">
                <div class="page-pretitle">Watershed</div>
                <h2 class="page-title">Add Land Use (LULC)</h2>
            </div>

            <div class="col-auto ms-auto d-print-none">
                <a href="{{ route('watershed.land-use-categories.index') }}" class="btn btn-secondary">
                    ← Back
                </a>
            </div>
        </div>
    </div>
</div>

<div class="container-xl">
<div class="card">
<div class="card-header bg-info text-white">
    <h4 class="mb-0">Land Use Details</h4>
</div>

<div class="card-body">

{{-- 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

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

{{-- Validation Errors --}}
@if ($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

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

<input type="hidden" name="household_survey_id" value="{{ request('household_survey_id') }}">

{{-- Watershed --}}
<div class="mb-3">
    <label class="form-label">Watershed</label>
    <input type="text" class="form-control" value="{{ $watershed->watershed_name }}" readonly>
    <input type="hidden" name="watershed_general_information_id" value="{{ $watershed->id }}">
</div>

{{-- Total Geographical Area --}}

{{-- ================= SLOPE SECTION ================= --}}
<h5>Slope Details</h5>

<table class="table table-bordered">
    <thead>
        <tr>
            <th>Slope Class</th>
            <th>Area (ha)</th>
            <th>Structure</th>
        </tr>
    </thead>
    <tbody>
        @for ($i = 0; $i < 4; $i++)
        <tr>
            <td>
                <select name="slope_id[]" class="form-control" required>
                    <option value="">Select Slope</option>
                    @foreach($slopes as $slop)
                        <option value="{{ $slop->id }}">{{ $slop->name }}</option>
                    @endforeach
                </select>
            </td>
            <td>
                <input type="number" step="0.01"
                    name="slope_area_ha[]"
                    class="form-control"
                    required>
            </td>
            <td>
                <input type="text"
                    name="structure_type[]"
                    class="form-control"
                    required>
            </td>
        </tr>
        @endfor
    </tbody>
</table>
<div class="mb-3">
    <label class="form-label">Total Geographical Area (ha)</label>
    <input type="number" step="0.01"
        id="total_area"
        name="total_geographical_area"
        value="{{ old('total_geographical_area') }}"
        class="form-control" required>
</div>

<hr>

{{-- ================= LULC SECTION ================= --}}
<h5>Land Use Categories</h5>

<div class="table-responsive">
<table class="table table-bordered">
    <thead class="table-light">
        <tr>
            <th>Land Use Category</th>
            <th>Area (ha)</th>
            <th>% of Total Area</th>
            <th>Action</th>
        </tr>
    </thead>

    <tbody id="lulc-table-body">
        <tr>
            <td>
                <select name="lulc_category_id[]" class="form-control" required>
                    <option value="">Select Category</option>
                    @foreach($lulcCategories as $category)
                        <option value="{{ $category->id }}">
                            {{ $category->category_name }}
                        </option>
                    @endforeach
                </select>
            </td>

            <td>
               <input type="number" name="area[]" class="form-control area-input">
                    
            </td>

            <td>
             <input type="text" name="percentage_total_area[]" class="form-control percentage-input" readonly>
            </td>

            <td>
                <button type="button" class="btn btn-danger btn-sm remove-row">
                    Remove
                </button>
            </td>
        </tr>
    </tbody>
</table>
</div>

<div class="mt-2">
    <button type="button" class="btn btn-success" id="add-row">
        + Add More Row
    </button>
</div>

<div class="text-end mt-3">
    <button type="submit" class="btn btn-primary">
        Save
    </button>
</div>

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

{{-- ================= JAVASCRIPT ================= --}}
<script>
document.addEventListener("DOMContentLoaded", function () {

    const tableBody = document.getElementById("lulc-table-body");
    const addRowBtn = document.getElementById("add-row");

    // 🔢 Calculate Percentage Based on Sum of Entered Areas
    function updatePercentages() {

        let sum = 0;

        let areaInputs = tableBody.querySelectorAll(".area-input");
        let percentageInputs = tableBody.querySelectorAll(".percentage-input");

        // Calculate total sum
        areaInputs.forEach(function (input) {
            sum += parseFloat(input.value) || 0;
        });

        // Update each row percentage
        areaInputs.forEach(function (input, index) {

            let areaValue = parseFloat(input.value) || 0;

            let percentage = 0;

            if (sum > 0) {
                percentage = (areaValue / sum) * 100;
            }

            percentageInputs[index].value = percentage.toFixed(2);
        });
    }

    // When area changes
    tableBody.addEventListener("input", function (e) {
        if (e.target.classList.contains("area-input")) {
            updatePercentages();
        }
    });

    // ➕ Add Row
    addRowBtn.addEventListener("click", function () {

        let newRow = tableBody.rows[0].cloneNode(true);

        newRow.querySelectorAll("input").forEach(input => input.value = "");
        newRow.querySelectorAll("select").forEach(select => select.selectedIndex = 0);

        tableBody.appendChild(newRow);
    });

    // ❌ Remove Row
    tableBody.addEventListener("click", function (e) {

        if (e.target.classList.contains("remove-row")) {

            if (tableBody.rows.length > 1) {
                e.target.closest("tr").remove();
                updatePercentages();
            } else {
                alert("At least one row is required.");
            }
        }
    });

});




</script>
<script>
    setTimeout(function() {
        let alerts = document.querySelectorAll('.alert');
        alerts.forEach(alert => {
            alert.classList.remove('show');
        });
    }, 3000);
</script>


@endsection