@extends('layouts.app')

@php
    $formatRupiah = fn ($value) => 'Rp ' . number_format((int) $value, 0, ',', '.');
@endphp

@section('content')
    <div class="mb-6 flex flex-wrap items-center justify-between gap-4">
        <div>
            <h2 class="text-2xl font-bold text-white">Dashboard</h2>
            <p class="text-sm text-slate-400">Ringkasan keuangan studio Anda.</p>
        </div>
        <div class="flex flex-wrap gap-2">
            <button data-modal-open="incomeModal" class="rounded-lg bg-emerald-500 px-4 py-2 text-sm font-semibold text-slate-950 hover:bg-emerald-400">+ Quick Uang Masuk</button>
            <button data-modal-open="expenseModal" class="rounded-lg bg-rose-500 px-4 py-2 text-sm font-semibold text-white hover:bg-rose-400">+ Quick Uang Keluar</button>
        </div>
    </div>

    <div class="mb-6 grid gap-4 lg:grid-cols-2">
        <div class="rounded-2xl border border-emerald-500/30 bg-gradient-to-br from-emerald-500/20 via-emerald-500/10 to-slate-900 p-6">
            <p class="text-xs uppercase tracking-[0.2em] text-emerald-300">Total Masuk</p>
            <p class="mt-2 text-3xl font-bold text-emerald-200">{{ $formatRupiah($income) }}</p>
        </div>
        <div class="rounded-2xl border border-rose-500/30 bg-gradient-to-br from-rose-500/20 via-rose-500/10 to-slate-900 p-6">
            <p class="text-xs uppercase tracking-[0.2em] text-rose-300">Total Keluar</p>
            <p class="mt-2 text-3xl font-bold text-rose-200">{{ $formatRupiah($expense) }}</p>
        </div>
    </div>

    <div class="mb-6 rounded-2xl border border-slate-800 bg-slate-900/60 p-5">
        <div class="mb-4 flex items-center justify-between">
            <h3 class="text-lg font-semibold text-white">Grafik Bulanan</h3>
            <span class="text-sm text-slate-400">Saldo: {{ $formatRupiah($balance) }}</span>
        </div>
        <div class="h-80">
            <canvas id="monthlyChart"></canvas>
        </div>
    </div>

    <div class="rounded-2xl border border-slate-800 bg-slate-900/60 p-5">
        <h3 class="mb-4 text-lg font-semibold text-white">Transaksi Terbaru</h3>
        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead>
                    <tr class="border-b border-slate-800 text-left text-slate-400">
                        <th class="pb-3">Tanggal</th>
                        <th class="pb-3">Tipe</th>
                        <th class="pb-3">Kategori</th>
                        <th class="pb-3">Keterangan</th>
                        <th class="pb-3">Jumlah</th>
                        <th class="pb-3 text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($transactions as $transaction)
                        <tr class="border-b border-slate-800/80">
                            <td class="py-3">{{ \Illuminate\Support\Carbon::parse($transaction->transaction_date)->format('d/m/Y') }}</td>
                            <td class="py-3">
                                <span class="rounded-full px-2 py-1 text-xs {{ $transaction->type === 'income' ? 'bg-emerald-500/20 text-emerald-300' : 'bg-rose-500/20 text-rose-300' }}">
                                    {{ $transaction->type === 'income' ? 'Masuk' : 'Keluar' }}
                                </span>
                            </td>
                            <td class="py-3">{{ $transaction->category }}</td>
                            <td class="py-3 text-slate-300">{{ $transaction->description ?: '-' }}</td>
                            <td class="py-3 font-semibold {{ $transaction->type === 'income' ? 'text-emerald-300' : 'text-rose-300' }}">
                                {{ $formatRupiah($transaction->amount) }}
                            </td>
                            <td class="py-3 text-right">
                                <a href="{{ route('transactions.edit', $transaction) }}" class="mr-2 rounded-lg bg-slate-800 px-3 py-1 text-xs hover:bg-slate-700">Edit</a>
                                <form method="POST" action="{{ route('transactions.destroy', $transaction) }}" class="inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="rounded-lg bg-rose-600 px-3 py-1 text-xs hover:bg-rose-500">Hapus</button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="py-6 text-center text-slate-400">Belum ada transaksi.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    @foreach (['income' => 'Uang Masuk', 'expense' => 'Uang Keluar'] as $type => $title)
        <div id="{{ $type }}Modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-slate-950/80 p-4">
            <div class="w-full max-w-xl rounded-2xl border border-slate-700 bg-slate-900 p-6">
                <div class="mb-4 flex items-center justify-between">
                    <h4 class="text-lg font-semibold text-white">{{ $title }} - Quick Action</h4>
                    <button data-modal-close="{{ $type }}Modal" class="text-slate-400 hover:text-white">Tutup</button>
                </div>
                <form method="POST" action="{{ route('transactions.store') }}" class="space-y-3">
                    @csrf
                    <input type="hidden" name="type" value="{{ $type }}">
                    <div>
                        <label class="mb-1 block text-sm text-slate-300">Nominal</label>
                        <input type="number" min="1" name="amount" required class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-white">
                    </div>
                    <div>
                        <label class="mb-1 block text-sm text-slate-300">Kategori</label>
                        <select name="category" required class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-white">
                            @foreach($categories[$type] as $category)
                                <option value="{{ $category }}">{{ $category }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="mb-1 block text-sm text-slate-300">Tanggal</label>
                        <input type="date" name="transaction_date" required class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-white">
                    </div>
                    <div>
                        <label class="mb-1 block text-sm text-slate-300">Keterangan</label>
                        <input type="text" name="description" class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-white">
                    </div>
                    <button type="submit" class="rounded-lg bg-indigo-500 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-400">Simpan</button>
                </form>
            </div>
        </div>
    @endforeach
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const labels = @json($monthly->pluck('label')->toArray());
        const incomeSeries = @json($monthly->pluck('income_total')->toArray());
        const expenseSeries = @json($monthly->pluck('expense_total')->toArray());

        const ctx = document.getElementById('monthlyChart');
        if (ctx) {
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels,
                    datasets: [
                        {
                            label: 'Uang Masuk',
                            data: incomeSeries,
                            borderColor: '#10b981',
                            backgroundColor: 'rgba(16, 185, 129, 0.2)',
                            tension: 0.3
                        },
                        {
                            label: 'Uang Keluar',
                            data: expenseSeries,
                            borderColor: '#e11d48',
                            backgroundColor: 'rgba(225, 29, 72, 0.2)',
                            tension: 0.3
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { labels: { color: '#cbd5e1' } }
                    },
                    scales: {
                        x: { ticks: { color: '#94a3b8' }, grid: { color: 'rgba(148,163,184,0.1)' } },
                        y: { ticks: { color: '#94a3b8' }, grid: { color: 'rgba(148,163,184,0.1)' } }
                    }
                }
            });
        }

        document.querySelectorAll('[data-modal-open]').forEach((button) => {
            button.addEventListener('click', () => {
                const modal = document.getElementById(button.getAttribute('data-modal-open'));
                if (modal) modal.classList.remove('hidden');
                if (modal) modal.classList.add('flex');
            });
        });

        document.querySelectorAll('[data-modal-close]').forEach((button) => {
            button.addEventListener('click', () => {
                const modal = document.getElementById(button.getAttribute('data-modal-close'));
                if (modal) modal.classList.add('hidden');
                if (modal) modal.classList.remove('flex');
            });
        });
    </script>
@endpush