@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">Land Use & Slope Details</h2>
            </div>

            <div class="col-auto ms-auto">
                <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 mb-4">
    <div class="card-header bg-primary text-white">
        <h4 class="mb-0">Watershed Information</h4>
    </div>
    <div class="card-body">
        <strong>Watershed Name:</strong> {{ $watershed->watershed_name }}
    </div>
</div>


{{-- ================= SLOPE SECTION ================= --}}
<div class="card mb-4">
    <div class="card-header bg-info text-white">
        <h4 class="mb-0">Slope Details</h4>
    </div>
    <div class="card-body">

        <div class="table-responsive">
        <table class="table table-bordered">
            <thead class="table-light">
                <tr>
                    <th>Slope Class</th>
                    <th  class="text-center">Area (ha)</th>
                    <th  class="text-center">Structure Type</th>
                </tr>
            </thead>
            <tbody>
                @forelse($watershed->slopeClasses as $slope)
                <tr>
                    <td>{{ $slope->slope->name ?? '-' }}</td>
                    <td  class="text-center">{{ $slope->area_ha }}</td>
                    <td  class="text-center">{{ $slope->structure_type }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="3" class="text-center">No slope data available</td>
                </tr>
                @endforelse
            </tbody>
        </table>
        </div>

    </div>
</div>


{{-- ================= LULC SECTION ================= --}}
<div class="card">
    <div class="card-header bg-success text-white">
        <h4 class="mb-0">Land Use (LULC) Details</h4>
    </div>
    <div class="card-body">

        <div class="table-responsive">
        <table class="table table-bordered">
            <thead class="table-light">
                <tr>
                    <th>Category</th>
                    <th  class="text-center">Area (ha)</th>
                    <th  class="text-center">% of Total Area</th>
                </tr>
            </thead>
           <tbody>
    @php
        $totalArea = 0;
        $totalPercentage = 0;
    @endphp

    @forelse($watershed->landUses as $landUse)

        @php
            $totalArea += $landUse->area_ha;
            $totalPercentage += $landUse->percentage_total_area;
        @endphp

        <tr>
            <td>{{ $landUse->lulcCategory->category_name ?? '-' }}</td>
            <td class="text-center">{{ number_format($landUse->area_ha, 2) }}</td>
            <td class="text-center">
                {{ number_format($landUse->percentage_total_area, 2) }} %
            </td>
        </tr>

    @empty
        <tr>
            <td colspan="3" class="text-center">No land use data available</td>
        </tr>
    @endforelse

    @if($watershed->landUses->count() > 0)
    <tr class="table-secondary fw-bold">
        <td>Total</td>
        <td class="text-center">
            {{ number_format($totalArea, 2) }}
        </td>
        <td class="text-center">
            {{ number_format($totalPercentage, 2) }} %
        </td>
    </tr>
    @endif

</tbody>

        </table>
        </div>

    </div>
</div>

</div>

@endsection