@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">Climatic</div>
                <h2 class="page-title">Add Climatic Data</h2>
            </div>

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


@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
@if ($errors->any())
    <div class="alert alert-danger alert-dismissible fade show">
        <strong>Please fix the following errors:</strong>
        <ul class="mb-0 mt-2">
            @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="card mb-4">
<div class="card-header bg-info text-white">
<h4 class="mb-0">Add Climatic Data</h4>
</div>

<div class="card-body">


<div class="col-12 mt-4">

<form method="POST" action="{{ route('watershed.climatic-data.store') }}">
@csrf
<input type="hidden" name="watershed_id" value="{{ $watershed_id }}">

{{-- Meteorological Station --}}
<div class="row mb-3">
<label class="col-md-4">Nearest Meteorological Station</label>
<div class="col-md-8">
<input type="text" name="nearest_meteorological_station" class="form-control">
</div>
</div>


{{-- Distance --}}
<div class="row mb-3">
<label class="col-md-4">Distance from Project Site (km)</label>
<div class="col-md-8">
<input type="number" step="0.01" name="distance_from_project_site_km" class="form-control">
</div>
</div>


{{-- Rainfall --}}
<div class="row mb-3">
<label class="col-md-4">Normal Annual Rainfall (mm)</label>
<div class="col-md-8">
<input type="number" step="0.01" name="normal_annual_rainfall_mm" class="form-control">
</div>
</div>


<div class="row mb-3">
<label class="col-md-4">Highest Rainfall Intensity / hr (mm)</label>
<div class="col-md-8">
<input type="number" step="0.01" name="highest_rainfall_intensity_per_hr_10yr_mm" class="form-control">
</div>
</div>


<div class="row mb-3">
<label class="col-md-4">Highest Rainfall in 24 hours (mm)</label>
<div class="col-md-8">
<input type="number" step="0.01" name="highest_rainfall_24hr_10yr_mm" class="form-control">
</div>
</div>


{{-- Temperature Section --}}
<h4 class="mt-4">Temperature (°C Average)</h4>


<table class="table table-bordered" id="temperatureTable">
<thead>
<tr>
<th>S.N.</th>
<th>Particulars</th>
<th>Summer</th>
<th>Monsoon</th>
<th>Winter</th>
<th>Action</th>
</tr>
</thead>

<tbody>
<tr>
<td class="sn">1</td>
<td><input type="text" name="particulars[]" class="form-control"></td>
<td><input type="text" name="summer[]" class="form-control"></td>
<td><input type="text" name="monsoon[]" class="form-control"></td>
<td><input type="text" name="winter[]" class="form-control"></td>
<td><button type="button" class="btn btn-danger btn-sm removeTempRow">Remove</button></td>
</tr>
</tbody>
</table>

<button type="button" class="btn btn-primary btn-sm mb-3" id="addRow">+ Add More</button>



{{-- Year Temperature --}}
<div class="card mt-3">
<div class="card-header">
<h7>Year Wise Temperature</h7>
</div>

<div class="card-body">

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

<thead>
<tr>
<th>S.N.</th>
<th>Year</th>
<th>Avg Max Temp</th>
<th>Avg Min Temp</th>
<th>Action</th>
</tr>
</thead>

<tbody>

<tr>
<td class="sn">1</td>
<td>
     <select name="year_id[]" class="form-control">
        <option value="">Select Year</option>
        @foreach($years as $year)
            <option value="{{ $year->id }}">{{ $year->name }}</option>
        @endforeach
    </select>
</td>
<td><input type="number" step="0.01" name="avg_max_temp[]" class="form-control"></td>
<td><input type="number" step="0.01" name="avg_min_temp[]" class="form-control"></td>
<td><button type="button" class="btn btn-danger btn-sm removeYearRow">Remove</button></td>
</tr>

</tbody>

</table>

<button type="button" class="btn btn-primary btn-sm" id="addYearRow">+ Add More</button>

</div>
</div>

<script>
    document.getElementById('addYearRow').onclick=function(){

let table=document.querySelector('#yearTempTable tbody')
let count=table.rows.length+1

let row=table.insertRow()

row.innerHTML=`
<td class="sn">${count}</td>
<td>
    <select name="year_id[]" class="form-control">
        <option value="">Select Year</option>
        @foreach($years as $year)
            <option value="{{ $year->id }}">{{ $year->year }}</option>
        @endforeach
    </select>
</td>
<td><input type="number" step="0.01" name="avg_max_temp[]" class="form-control"></td>
<td><input type="number" step="0.01" name="avg_min_temp[]" class="form-control"></td>
<td><button type="button" class="btn btn-danger btn-sm removeYearRow">Remove</button></td>
`
}
</script>





<div class="card mt-3">
    <div class="card-header">
        <h3 class="card-title">Monthly Humidity (%)</h3>
    </div>

    <div class="card-body">

        <table class="table table-bordered text-center" id="monthlyHumidityTable">
            <thead class="table-light">
                <tr>
                    <th width="60">S.N.</th>
                    <th>Month</th>
                    <th>Humidity (%)</th>
                    <th width="100">Action</th>
                </tr>
            </thead>

            <tbody>

                <tr>
                    <td class="sn">1</td>

                    <td>
                        <select name="month[]" class="form-control">
                            <option value="">Select Month</option>
                            <option>January</option>
                            <option>February</option>
                            <option>March</option>
                            <option>April</option>
                            <option>May</option>
                            <option>June</option>
                            <option>July</option>
                            <option>August</option>
                            <option>September</option>
                            <option>October</option>
                            <option>November</option>
                            <option>December</option>
                        </select>
                    </td>

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

                    <td>
                        <button type="button" class="btn btn-danger btn-sm removeHumidityRow">
                            Remove
                        </button>
                    </td>

                </tr>

            </tbody>
        </table>

        <button type="button" class="btn btn-primary btn-sm mt-2" id="addHumidityRow">
            + Add More
        </button>

    </div>
</div>

<script>

document.getElementById('addHumidityRow').addEventListener('click', function(){

    let table = document.querySelector('#monthlyHumidityTable tbody');
    let count = table.rows.length + 1;

    let row = document.createElement('tr');

    row.innerHTML = `
        <td class="sn">${count}</td>

        <td>
            <select name="month[]" class="form-control">
                <option value="">Select Month</option>
                <option>January</option>
                <option>February</option>
                <option>March</option>
                <option>April</option>
                <option>May</option>
                <option>June</option>
                <option>July</option>
                <option>August</option>
                <option>September</option>
                <option>October</option>
                <option>November</option>
                <option>December</option>
            </select>
        </td>

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

        <td>
            <button type="button" class="btn btn-danger btn-sm removeHumidityRow">Remove</button>
        </td>
    `;

    table.appendChild(row);

});


document.addEventListener('click', function(e){

    if(e.target.classList.contains('removeHumidityRow')){

        let table = e.target.closest('table');

        e.target.closest('tr').remove();

        let rows = table.querySelectorAll('tbody tr');

        rows.forEach((row,index)=>{
            row.querySelector('.sn').innerText = index + 1;
        });

    }

});

</script>



{{-- Humidity --}}
<div class="card mt-3">

<div class="card-header">
<h4>All Year Average Humidity</h4>
</div>

<div class="card-body">

<div class="row">

<div class="col-md-4">
<label>Maximum Humidity (%)</label>
<input type="number" step="0.01" name="max_humidity_percent" class="form-control" readonly>
</div>

<div class="col-md-4">
<label>Minimum Humidity (%)</label>
<input type="number" step="0.01" name="min_humidity_percent" class="form-control" readonly>
</div>

<div class="col-md-4">
<label>Average Humidity (%)</label>
<input type="number" step="0.01" name="avg_humidity_percent" class="form-control" readonly>
</div>

</div>

</div>
</div>

<script>

function calculateHumidity(){

let inputs=document.querySelectorAll('input[name="monthly_humidity[]"]')

let values=[]

inputs.forEach(function(input){

let val=parseFloat(input.value)

if(!isNaN(val)){
values.push(val)
}

})

if(values.length===0){
return
}

let max=Math.max(...values)
let min=Math.min(...values)

let sum=values.reduce((a,b)=>a+b,0)
let avg=sum/values.length

document.querySelector('input[name="max_humidity_percent"]').value=max.toFixed(2)
document.querySelector('input[name="min_humidity_percent"]').value=min.toFixed(2)
document.querySelector('input[name="avg_humidity_percent"]').value=avg.toFixed(2)

}



document.addEventListener('input',function(e){

if(e.target.name==="monthly_humidity[]"){
calculateHumidity()
}

})



document.addEventListener('click',function(e){

if(e.target.classList.contains('removeHumidityRow')){

setTimeout(function(){
calculateHumidity()
},100)

}

})

</script>


<div class="mt-3">
<label>Data Source</label>
<input type="text" name="data_source" class="form-control">
</div>


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

</form>

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



{{-- JS for Dynamic Tables --}}
<script>

document.getElementById('addRow').onclick=function(){

let table=document.querySelector('#temperatureTable tbody')
let count=table.rows.length+1

let row=table.insertRow()

row.innerHTML=`
<td class="sn">${count}</td>
<td><input type="text" name="particulars[]" class="form-control"></td>
<td><input type="text" name="summer[]" class="form-control"></td>
<td><input type="text" name="monsoon[]" class="form-control"></td>
<td><input type="text" name="winter[]" class="form-control"></td>
<td><button type="button" class="btn btn-danger btn-sm removeTempRow">Remove</button></td>
`
}



document.getElementById('addYearRow').onclick=function(){

let table=document.querySelector('#yearTempTable tbody')
let count=table.rows.length+1

let row=table.insertRow()

row.innerHTML=`
<td class="sn">${count}</td>
<td><input type="number" name="year[]" class="form-control"></td>
<td><input type="number" step="0.01" name="avg_max_temp[]" class="form-control"></td>
<td><input type="number" step="0.01" name="avg_min_temp[]" class="form-control"></td>
<td><button type="button" class="btn btn-danger btn-sm removeYearRow">Remove</button></td>
`
}



document.addEventListener('click',function(e){

if(e.target.classList.contains('removeTempRow') || e.target.classList.contains('removeYearRow')){

let table=e.target.closest('table')
e.target.closest('tr').remove()

let rows=table.querySelectorAll('tbody tr')

rows.forEach((row,index)=>{
row.querySelector('.sn').innerText=index+1
})

}

})

</script>

@endsection