@extends('layouts.app')

@section('content')
    <main class="main-content">
        <div class="page-header d-flex justify-content-between align-items-end flex-wrap" style="gap: 12px;">
            <div>
                <h1 class="page-title" style="margin-bottom: 0;">Dashboard</h1>
            </div>

            <form method="GET" action="{{ route('home') }}" class="d-flex flex-wrap gap-3 align-items-end">
                <div>
                    <label class="form-label mb-1">Secretaria</label>
                    <select name="secretaria_id" class="form-select form-select-lg" style="min-width: 360px;">
                        <option value="">Todas</option>
                        @foreach(($secretarias ?? []) as $s)
                            <option value="{{ $s->id }}" {{ (string)($secretariaSelecionada ?? '') === (string)$s->id ? 'selected' : '' }}>{{ $s->nome }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="form-label mb-1">Mês</label>
                    <select name="mes" class="form-select form-select-lg" style="min-width: 220px;">
                        @foreach(($meses ?? []) as $num => $nome)
                            <option value="{{ $num }}" {{ (int)($mesSelecionado ?? 0) === (int)$num ? 'selected' : '' }}>{{ $nome }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="form-label mb-1">Ano</label>
                    <select name="ano" class="form-select form-select-lg" style="min-width: 160px;">
                        @foreach(($anos ?? []) as $y)
                            <option value="{{ $y }}" {{ (int)($anoSelecionado ?? 0) === (int)$y ? 'selected' : '' }}>{{ $y }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <button type="submit" class="btn btn-primary btn-lg">Filtrar</button>
                </div>
            </form>
        </div>

        <div class="row g-3 mb-3">
                <div class="col-md-3">
                    <div class="card bg-info text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-white-50 mb-1">Restante</h6>
                                    <h3 class="mb-0">R$ {{ number_format((float)($totalRestante ?? 0), 2, ',', '.') }}</h3>
                                </div>
                                <div>
                                    <i class="fas fa-coins fa-3x opacity-50"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card bg-warning text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-white-50 mb-1">Parcelas Vencendo (7 dias)</h6>
                                    <h3 class="mb-0">{{ $parcelasVencendo ?? 0 }}</h3>
                                </div>
                                <div>
                                    <i class="fas fa-calendar-alt fa-3x opacity-50"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card bg-danger text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-white-50 mb-1">Parcelas Vencidas</h6>
                                    <h3 class="mb-0">{{ $parcelasVencidas ?? 0 }}</h3>
                                </div>
                                <div>
                                    <i class="fas fa-exclamation-triangle fa-3x opacity-50"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card bg-success text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-white-50 mb-1">Pago no Mês</h6>
                                    <h3 class="mb-0">R$ {{ number_format((float)($pagoMes ?? 0), 2, ',', '.') }}</h3>
                                </div>
                                <div>
                                    <i class="fas fa-hand-holding-usd fa-3x opacity-50"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>

        <div class="row g-3">
            <div class="col-lg-8">
                <div class="users-card h-100">
                    <div class="users-header">
                        <h3 class="users-title">Pagamentos (últimos 12 meses)</h3>
                    </div>
                    <div style="padding: 15px;">
                        <canvas id="chartPagos12m" height="110"></canvas>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="users-card h-100">
                    <div class="users-header">
                        <h3 class="users-title">Gastos por Secretaria (mês)</h3>
                    </div>
                    <div style="padding: 15px;">
                        <canvas id="chartSecretarias" height="160"></canvas>
                    </div>
                </div>
            </div>
        </div>

    </main>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
    <script>
        (function () {
            if (typeof Chart === 'undefined') return;

            const labelsMeses = @json($labelsMeses ?? []);
            const valoresMeses = @json($valoresMeses ?? []);
            const secLabels = @json($secretariasLabels ?? []);
            const secValores = @json($secretariasValores ?? []);

            const el1 = document.getElementById('chartPagos12m');
            if (el1) {
                new Chart(el1, {
                    type: 'line',
                    data: {
                        labels: labelsMeses,
                        datasets: [{
                            label: 'Pagos (R$)',
                            data: valoresMeses,
                            borderColor: '#159feb',
                            backgroundColor: 'rgba(21, 159, 235, 0.2)',
                            tension: 0.35,
                            fill: true,
                            pointRadius: 2,
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: { display: false },
                        },
                        scales: {
                            y: {
                                ticks: {
                                    callback: function (v) {
                                        try {
                                            return Number(v || 0).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
                                        } catch (e) {
                                            return v;
                                        }
                                    }
                                }
                            }
                        }
                    }
                });
            }

            const el2 = document.getElementById('chartSecretarias');
            if (el2) {
                new Chart(el2, {
                    type: 'bar',
                    data: {
                        labels: secLabels,
                        datasets: [{
                            label: 'Gastos (R$)',
                            data: secValores,
                            backgroundColor: '#159feb',
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: { display: false },
                        },
                        scales: {
                            y: {
                                ticks: {
                                    callback: function (v) {
                                        try {
                                            return Number(v || 0).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
                                        } catch (e) {
                                            return v;
                                        }
                                    }
                                }
                            }
                        }
                    }
                });
            }
        })();
    </script>
@endsection