@extends('layouts.main')

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

<form method="GET" action="{{ route('reports.bill_approval_summary') }}" class="row g-3 mb-4">
    <div class="col-md-3">
        <label for="financial_year_id" class="form-label">Financial Year</label>
        <select name="financial_year_id" class="form-select">
            <option value="">-- All --</option>
            @foreach($financialYears as $id => $name)
                <option value="{{ $id }}" {{ request('financial_year_id') == $id ? 'selected' : '' }}>{{ $name }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-md-3">
        <label for="unit_id" class="form-label">Unit</label>
        <select name="unit_id" class="form-select">
            <option value="">-- All --</option>
            @foreach($units as $id => $name)
                <option value="{{ $id }}" {{ request('unit_id') == $id ? 'selected' : '' }}>{{ $name }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-md-3">
        <label for="block_id" class="form-label">Block</label>
        <select name="block_id" class="form-select">
            <option value="">-- All --</option>
            @foreach($blocks as $id => $name)
                <option value="{{ $id }}" {{ request('block_id') == $id ? 'selected' : '' }}>{{ $name }}</option>
            @endforeach
        </select>
    </div>

  

    <div class="col-md-3">
        <button type="submit" class="btn btn-primary mt-4">Filter</button>
    </div>
</form>

    <h3 class="mb-4">Bill Approval Summary Report</h3>

    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Financial Year</th>
                <th>District</th>
                <th>Total Bills</th>
                <th>Total Amount (₹)</th>
                <th>Total GST (₹)</th>
                <th>Grand Total (₹)</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($summary as $item)
                <tr>
                    <td>{{ $item->financial_year }}</td>
                    <td>{{ $item->district }}</td>
                    <td>{{ $item->total_bills }}</td>
                    <td>{{ number_format($item->total_amount, 2) }}</td>
                    <td>{{ number_format($item->total_gst, 2) }}</td>
                    <td><strong>{{ number_format($item->total_grand, 2) }}</strong></td>
                </tr>
            @endforeach
        </tbody>
    </table>

    {{-- Chart --}}
    <canvas id="billChart" height="120"></canvas>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const chartData = {
        labels: @json($summary->pluck('district')),
        datasets: [{
            label: 'Grand Total (₹)',
            data: @json($summary->pluck('total_grand')),
            backgroundColor: 'rgba(54, 162, 235, 0.6)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    };

    const config = {
        type: 'bar',
        data: chartData,
        options: {
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: 'Grand Total by District'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Amount (₹)'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'District'
                    }
                }
            }
        }
    };

    new Chart(document.getElementById('billChart'), config);
</script>
@endsection