@extends('layouts.main')

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

    <div class="page-header d-print-none">
        <div class="row align-items-center">
            <div class="col">
                <h2 class="page-title">Add Rainwater Structure / Openwell</h2>
            </div>
        </div>
    </div>

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

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

    {{-- ================= Location Card ================= --}}
    <div class="card mb-4">
        <div class="card-header bg-info-lt">
            <strong>Location Details</strong>
        </div>

        <div class="card-body">
            <div class="row align-items-end" id="locationRow">


                <div class="col-md-3">
                    <label class="form-label">Micro Watershed Code</label>
                    <input type="text" name="micro_watershed_code" id="micro_watershed_code"
                           class="form-control" placeholder="MW Code" required>
                </div>



                <div class="col-md-1 text-center">
                    <label class="form-label d-block">&nbsp;</label>
                    <button type="button" id="lockToggle" class="btn btn-outline-secondary">
                        🔓
                    </button>
                </div>

                <div class="col-md-2">
                    <label class="form-label">Village</label>
                    <select name="village_id" id="village_id" class="form-select location-field">
                        <option value="">Select Village</option>
                    </select>
                </div>

            </div>
        </div>
    </div>
    
<div class="card mb-4">
        <div class="card-header bg-info-lt">
            <strong>Details of existing Open wells / Dugout wells / Rainwater harvesting structures</strong>
        </div>


    <div class="card-body bg-light">
    

        <form action="" method="POST">
            @csrf
            <div class="container">
                <div id="structure-rows">
                    <!-- Initial row of inputs -->
                    <div class="row g-3 structure-row align-items-end mb-2 p-2 border rounded bg-white">
                        <div class="col-md-3">
                            <label class="form-label">Structure Type</label>
                            <select name="structure_type[]" class="form-select">
                                @foreach(['Check Dam', 'Percolation Tank', 'Open Wells', 'Farm Pond'] as $type)
                                    <option value="{{ $type }}">{{ $type }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">Nearest Location</label>
                            <input type="text" name="nearest_location[]" class="form-control">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">Length (m)</label>
                            <input type="number" step="0.01" name="length[]" class="form-control">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">Width (m)</label>
                            <input type="number" step="0.01" name="width[]" class="form-control">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">Depth / Height (m)</label>
                            <input type="number" step="0.01" name="depth_height[]" class="form-control">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">Storage Potential (m³)</label>
                            <input type="number" step="0.01" name="storage_potential[]" class="form-control">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">Functionality Status</label>
                            <select name="functionality_status[]" class="form-select">
                                @foreach(['Functional', 'Defunct'] as $status)
                                    <option value="{{ $status }}">{{ $status }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-12 text-end mt-2">
                            <button type="button" class="btn btn-danger btn-sm remove-row">Remove Row</button>
                        </div>
                    </div>
                </div>


                <div class="row mt-3">
                    <div class="col-6">
                        <button type="button" id="add-row" class="btn btn-success">Add Row</button>
                    </div>
                    <div class="col-6 text-end">
                    
                    </div>
                </div>


<div class="card mb-4 mt-2">
    <div class="card-header bg-info-lt">
        <strong>Details of existing Open wells / Dugout wells (Observation well)</strong>
    </div>

    <div class="card-body">


            <div id="open-well-rows">
                {{-- Initial Row --}}
                <div class="row g-3 mb-3 open-well-row p-2 border rounded bg-white">
                    <div class="col-md-3">
                        <label>Household Survey ID</label>
                        <input type="number" name="household_survey_id[]" class="form-control" required>
                    </div>

                    <div class="col-md-3">
                        <label>Village</label>
                        <select name="village_id[]" class="form-select" required>
                            
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label>Micro Watershed Code</label>
                        <input type="text" name="micro_watershed_code[]" class="form-control" required>
                    </div>

                    <div class="col-md-3">
                        <label>Financial Year</label>
                        <input type="text" name="financial_year[]" class="form-control" required>
                    </div>

                    <div class="col-md-3">
                        <label>Beneficiary Name</label>
                        <input type="text" name="beneficiary_name[]" class="form-control" required>
                    </div>

                    <div class="col-md-3">
                        <label>Location</label>
                        <input type="text" name="location[]" class="form-control">
                    </div>

                    <div class="col-md-3">
                        <label>Latitude</label>
                        <input type="number" step="0.0000001" name="latitude[]" class="form-control">
                    </div>

                    <div class="col-md-3">
                        <label>Longitude</label>
                        <input type="number" step="0.0000001" name="longitude[]" class="form-control">
                    </div>

                    <div class="col-md-3">
                        <label>Plot No</label>
                        <input type="text" name="plot_no[]" class="form-control">
                    </div>

                    <div class="col-md-3">
                        <label>Well Diameter (m)</label>
                        <input type="number" step="0.01" name="well_diameter[]" class="form-control">
                    </div>

                    <div class="col-md-3">
                        <label>First Quarter</label>
                        <input type="number" step="0.01" name="first_quarter[]" class="form-control">
                    </div>

                    <div class="col-md-3">
                        <label>Second Quarter</label>
                        <input type="number" step="0.01" name="second_quarter[]" class="form-control">
                    </div>

                    <div class="col-md-3">
                        <label>Third Quarter</label>
                        <input type="number" step="0.01" name="third_quarter[]" class="form-control">
                    </div>

                    <div class="col-md-3">
                        <label>Fourth Quarter</label>
                        <input type="number" step="0.01" name="fourth_quarter[]" class="form-control">
                    </div>

                    <div class="col-md-3">
                        <label>Status</label>
                        <select name="status[]" class="form-select">
                            <option value="Active">Active</option>
                            <option value="Inactive">Inactive</option>
                        </select>
                    </div>

                    <div class="col-md-3 d-flex align-items-end">
                        <button type="button" class="btn btn-danger btn-sm remove-row">Remove</button>
                        <input type="hidden" name="user_id[]" value="{{ auth()->user()->id }}">
                    </div>
                </div>
            </div>

            {{-- Add Row / Submit --}}
            <div class="row mt-3">
                <div class="col-6">
                    <button type="button" id="add-open-well-row" class="btn btn-success">Add Row</button>
                </div>
                <div class="col-6 text-end">
                    <button type="submit" class="btn btn-primary">Save Open Wells</button>
                </div>
            </div>
        
    </div>
</div>

{{-- JS for Add / Remove Rows with Alternating BG --}}
<script>
document.getElementById('add-open-well-row').addEventListener('click', function() {
    let container = document.getElementById('open-well-rows');
    let firstRow = container.querySelector('.open-well-row');
    let newRow = firstRow.cloneNode(true);

    // Clear all input/select values
    newRow.querySelectorAll('input, select').forEach(function(input) {
        if(input.tagName === 'SELECT') {
            input.selectedIndex = 0;
        } else {
            input.value = '';
        }
    });

    // Alternate background color
    let rowCount = container.querySelectorAll('.open-well-row').length;
    newRow.classList.remove('bg-white', 'bg-light');
    newRow.classList.add(rowCount % 2 === 0 ? 'bg-light' : 'bg-white');

    container.appendChild(newRow);
});

document.getElementById('open-well-rows').addEventListener('click', function(e) {
    if(e.target && e.target.classList.contains('remove-row')) {
        let rows = document.querySelectorAll('.open-well-row');
        if(rows.length > 1) { // Keep at least 1 row
            e.target.closest('.open-well-row').remove();

            // Recalculate alternating colors
            document.querySelectorAll('.open-well-row').forEach(function(row, index) {
                row.classList.remove('bg-white', 'bg-light');
                row.classList.add(index % 2 === 0 ? 'bg-white' : 'bg-light');
            });
        } else {
            alert('At least one row is required.');
        }
    }
});
</script>

                
                <!-- Buttons row -->
                <div class="row mt-3">
                    <div class="col-6">
                    
                    </div>
                    <div class="col-6 text-end">
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- JavaScript to add/remove rows -->
<script>
    document.getElementById('add-row').addEventListener('click', function() {
        let container = document.getElementById('structure-rows');
        let firstRow = container.querySelector('.structure-row');
        let newRow = firstRow.cloneNode(true);

        // Clear input/select values
        newRow.querySelectorAll('input, select').forEach(function(input) {
            if(input.tagName === 'SELECT') {
                input.selectedIndex = 0;
            } else {
                input.value = '';
            }
        });

        container.appendChild(newRow);
    });

    // Remove row functionality using event delegation
    document.getElementById('structure-rows').addEventListener('click', function(e) {
        if(e.target && e.target.classList.contains('remove-row')) {
            let rows = document.querySelectorAll('.structure-row');
            if(rows.length > 1) { // Keep at least 1 row
                e.target.closest('.structure-row').remove();
            } else {
                alert('At least one row is required.');
            }
        }
    });
</script>

@endsection