@extends('layouts.main')

@section('main-container')
<div class="container">
    <h3 class="mb-4">Measurement Summary Report</h3>

    {{-- Filter Form --}}
    <form method="GET" action="{{ route('reports.measurement_summary') }}" class="row g-3 mb-4">
        <div class="col-md-3">
            <label for="project_type_id" class="form-label">Project Type</label>
            <select name="project_type_id" id="project_type_id" class="form-select" onchange="this.form.submit()">
                <option value="">All Types</option>
                @foreach($projectTypes as $type)
                    <option value="{{ $type->id }}" {{ request('project_type_id') == $type->id ? 'selected' : '' }}>
                        {{ $type->name }}
                    </option>
                @endforeach
            </select>
        </div>

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

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

        <div class="col-md-3">
            <label for="user_id" class="form-label">User</label>
            <select name="user_id" id="user_id" class="form-select" onchange="this.form.submit()">
                <option value="">All Users</option>
                @foreach($users as $user)
                    <option value="{{ $user->id }}" {{ request('user_id') == $user->id ? 'selected' : '' }}>
                        {{ $user->name }}
                    </option>
                @endforeach
            </select>
        </div>
    </form>

    {{-- Summary Card --}}
    <div class="card mb-4">
        <div class="card-header bg-primary text-white">Overall Measurement Summary</div>
        <div class="card-body row text-center">
            <div class="col-md-4">
                <strong>Total Entries:</strong><br>{{ $summary->total_entries ?? 0 }}
            </div>
            <div class="col-md-4">
                <strong>Avg. BS:</strong><br>{{ number_format($summary->avg_bs, 2) ?? '0.00' }}
            </div>
            <div class="col-md-4">
                <strong>Avg. HI:</strong><br>{{ number_format($summary->avg_hi, 2) ?? '0.00' }}
            </div>
        </div>
    </div>

    {{-- Chart Card --}}
    <div class="card mb-4">
        <div class="card-header bg-success text-white d-flex justify-content-between">
            <span>Entries by Project Type</span>
            <span>Total: {{ $byProject->sum('total') }}</span>
        </div>
        <div class="card-body">
            <canvas id="projectChart" height="250"></canvas>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('projectChart').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: {!! json_encode($byProject->pluck('project')) !!},
            datasets: [{
                label: 'Total Entries',
                data: {!! json_encode($byProject->pluck('total')) !!},
                backgroundColor: 'rgba(54, 162, 235, 0.6)'
            }]
        },
        options: { responsive: true }
    });
</script>
@endsection