@extends('layouts.app')

@section('content')
<div class="container-wrapper">
    <div class="d-flex justify-content-between align-items-center mb-4 px-3">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1 small text-uppercase fw-bold">
                    <li class="breadcrumb-item"><a href="{{ route('accountant.budgets.index') }}" class="text-decoration-none text-muted">Budgets</a></li>
                    <li class="breadcrumb-item active text-primary">Analysis</li>
                </ol>
            </nav>
            <h2 class="h3 font-weight-bold text-dark mb-0">{{ $budget->name }} Analysis</h2>
            <p class="text-muted small mb-0">{{ date('M d, Y', strtotime($budget->start_date)) }} — {{ date('M d, Y', strtotime($budget->end_date)) }}</p>
        </div>
        <button class="btn btn-outline-secondary rounded-3" onclick="window.print()"><i class="fas fa-print me-2"></i> Print</button>
    </div>

    <div class="row mx-3 g-4 mb-4">
        <!-- Summary Cards -->
        <div class="col-md-3">
            <div class="card border-0 shadow-sm rounded-4 h-100 p-3 bg-primary text-white">
                <div class="small fw-bold opacity-75">TOTAL PLANNED</div>
                <div class="h3 fw-bold mb-0">{{ formatCurrency($totalPlanned) }}</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm rounded-4 h-100 p-3">
                <div class="small fw-bold text-muted">TOTAL ACTUAL</div>
                <div class="h3 fw-bold mb-0 text-dark">{{ formatCurrency($totalActual) }}</div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card border-0 shadow-sm rounded-4 h-100 p-3">
                <div class="small fw-bold text-muted mb-2">BUDGET COMPLETION</div>
                @php $percent = $totalPlanned > 0 ? ($totalActual / $totalPlanned) * 100 : 0; @endphp
                <div class="progress rounded-pill mb-2" style="height: 12px">
                    <div class="progress-bar bg-{{ $percent > 100 ? 'danger' : 'success' }}" style="width: {{ min(100, $percent) }}%"></div>
                </div>
                <div class="small fw-bold text-{{ $percent > 100 ? 'danger' : 'success' }}">{{ number_format($percent, 1) }}% of Planned Budget Used</div>
            </div>
        </div>
    </div>

    <div class="row mx-3 g-4">
        <!-- Visual Graph -->
        <div class="col-md-5">
            <div class="card border-0 shadow-sm rounded-4 h-100 p-4">
                <h5 class="fw-bold mb-4">Budget vs Actual</h5>
                <canvas id="budgetChart" height="250"></canvas>
            </div>
        </div>

        <!-- Detailed Table -->
        <div class="col-md-7">
            <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
                <div class="card-header bg-white p-4 border-0">
                    <h5 class="mb-0 fw-bold text-dark">Account-wise Comparison</h5>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th class="ps-4 border-0 small fw-bold">Account</th>
                                <th class="text-end border-0 small fw-bold">Planned</th>
                                <th class="text-end border-0 small fw-bold">Actual</th>
                                <th class="text-end pe-4 border-0 small fw-bold">Difference</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($reportData as $row)
                            <tr class="{{ $row['is_over'] ? 'bg-danger bg-opacity-10' : '' }}">
                                <td class="ps-4">
                                    <div class="fw-bold small text-dark">{{ $row['account_name'] }}</div>
                                    <div class="xx-small text-muted">{{ $row['account_type'] }}</div>
                                </td>
                                <td class="text-end fw-bold text-muted">{{ formatCurrency($row['planned']) }}</td>
                                <td class="text-end fw-bold text-dark">{{ formatCurrency($row['actual']) }}</td>
                                <td class="text-end pe-4">
                                    <span class="fw-bold {{ $row['difference'] < 0 ? 'text-danger' : 'text-success' }}">
                                        {{ $row['difference'] < 0 ? '-' : '+' }}{{ formatCurrency(abs($row['difference'])) }}
                                    </span>
                                    @if($row['is_over'])
                                        <span class="badge bg-danger ms-2 px-2" style="font-size: 0.6rem">OVER</span>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('budgetChart').getContext('2d');
    new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['Planned', 'Actual'],
            datasets: [{
                data: [{{ $totalPlanned }}, {{ $totalActual }}],
                backgroundColor: ['#e9ecef', '{{ $totalActual > $totalPlanned ? "#dc3545" : "#0d6efd" }}'],
                borderWidth: 0,
                cutout: '70%'
            }]
        },
        options: {
            plugins: {
                legend: { position: 'bottom' }
            }
        }
    });
</script>
@endsection