@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-12">
            

            @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            @endif

            <!-- Summary Cards -->
            <div class="row mb-4">
                <div class="col-md-4">
                    <div class="card bg-success text-white">
                        <div class="card-body">
                            <h6>Income (Pemasukan)</h6>
                            <h3>Rp {{ number_format($totalIncome, 0, ',', '.') }}</h3>
                            <small>Total pemasukan dari booking</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card bg-danger text-white">
                        <div class="card-body">
                            <h6>Expense (Pengeluaran)</h6>
                            <h3>Rp {{ number_format($totalExpense, 0, ',', '.') }}</h3>
                            <small>Total pengeluaran operasional</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card bg-primary text-white">
                        <div class="card-body">
                            <h6>Net Income (Keuntungan)</h6>
                            <h3>Rp {{ number_format($totalIncome - $totalExpense, 0, ',', '.') }}</h3>
                            <small>Income - Expense</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Filter & Tambah Transaksi -->
            <div class="card mb-4">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h5 class="mb-0">Filter Laporan</h5>
                        </div>
                        <div class="col-md-4 text-right">
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalTambahTransaksi">
                                <i class="fas fa-plus"></i> Tambah Transaksi
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.laporan-keuangan.index') }}" method="GET" class="form-inline">
                        <div class="form-group mr-3">
                            <label for="start_date" class="mr-2">Dari Tanggal:</label>
                            <input type="date" class="form-control" id="start_date" name="start_date" value="{{ $startDate }}">
                        </div>
                        <div class="form-group mr-3">
                            <label for="end_date" class="mr-2">Sampai Tanggal:</label>
                            <input type="date" class="form-control" id="end_date" name="end_date" value="{{ $endDate }}">
                        </div>
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-filter"></i> Filter
                        </button>
                    </form>
                </div>
            </div>

            <!-- Chart -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Grafik Income vs Expense</h5>
                </div>
                <div class="card-body">
                    <div style="position: relative; height: 400px;">
                        <canvas id="chartKeuangan"></canvas>
                    </div>
                </div>
            </div>

            <!-- Riwayat Transaksi -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Riwayat Transaksi</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>Tanggal</th>
                                    <th>Jenis</th>
                                    <th>Kategori</th>
                                    <th>Keterangan</th>
                                    <th>Jumlah</th>
                                    <th>Metode</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($transaksi as $t)
                                <tr>
                                    <td>{{ $t->tanggal->format('d/m/Y') }}</td>
                                    <td>
                                        @if($t->jenis == 'pemasukan')
                                        <span class="badge badge-success">Pemasukan</span>
                                        @else
                                        <span class="badge badge-danger">Pengeluaran</span>
                                        @endif
                                    </td>
                                    <td>{{ ucwords($t->kategori) }}</td>
                                    <td>{{ $t->keterangan ?? '-' }}</td>
                                    <td>
                                        <strong class="{{ $t->jenis == 'pemasukan' ? 'text-success' : 'text-danger' }}">
                                            {{ $t->jenis == 'pemasukan' ? '+' : '-' }} Rp {{ number_format($t->jumlah, 0, ',', '.') }}
                                        </strong>
                                    </td>
                                    <td>{{ strtoupper($t->metode) }}</td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-warning" onclick="editTransaksi({{ $t->transaksi_id }}, '{{ $t->tanggal->format('Y-m-d') }}', '{{ $t->jenis }}', '{{ $t->kategori }}', '{{ addslashes($t->keterangan ?? '') }}', {{ $t->jumlah }}, '{{ $t->metode }}')">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        
                                        @if(!$t->pembayaran_id)
                                        <form action="{{ route('admin.laporan-keuangan.destroy', $t->transaksi_id) }}" method="POST" class="d-inline" onsubmit="return confirm('Yakin ingin menghapus transaksi ini?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-danger">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                        @else
                                        <small class="text-muted">(Auto)</small>
                                        @endif
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="7" class="text-center text-muted">Belum ada transaksi di periode ini.</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="mt-3">
                <a href="{{ route('admin.dashboard') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Kembali ke Dashboard
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Modal Tambah Transaksi -->
<div class="modal fade" id="modalTambahTransaksi" tabindex="-1" role="dialog" aria-labelledby="modalTambahLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTambahLabel">Tambah Transaksi</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ route('admin.laporan-keuangan.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label>Tanggal *</label>
                        <input type="date" class="form-control" name="tanggal" value="{{ date('Y-m-d') }}" required>
                    </div>
                    <div class="form-group">
                        <label>Jenis *</label>
                        <select class="form-control" name="jenis" required>
                            <option value="pemasukan">Pemasukan</option>
                            <option value="pengeluaran">Pengeluaran</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Kategori *</label>
                        <select class="form-control" name="kategori" required>
                            <option value="reservasi kamar">Reservasi Kamar</option>
                            <option value="restoran">Restoran</option>
                            <option value="maintenance">Maintenance</option>
                            <option value="gaji staff">Gaji Staff</option>
                            <option value="promo">Promo/Iklan</option>
                            <option value="utilitas">Utilitas (Listrik, Air)</option>
                            <option value="lainnya">Lainnya</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Keterangan</label>
                        <input type="text" class="form-control" name="keterangan" placeholder="Opsional">
                    </div>
                    <div class="form-group">
                        <label>Jumlah (Rp) *</label>
                        <input type="number" class="form-control" name="jumlah" min="0" step="1000" placeholder="0" required>
                    </div>
                    <div class="form-group">
                        <label>Metode Pembayaran *</label>
                        <select class="form-control" name="metode" required>
                            <option value="cash">Cash</option>
                            <option value="transfer">Transfer</option>
                            <option value="qris">QRIS</option>
                            <option value="other">Lainnya</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Edit Transaksi -->
<div class="modal fade" id="modalEditTransaksi" tabindex="-1" role="dialog" aria-labelledby="modalEditLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalEditLabel">Edit Transaksi</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="formEditTransaksi" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <input type="hidden" id="edit_transaksi_id">
                    <div class="form-group">
                        <label>Tanggal *</label>
                        <input type="date" class="form-control" id="edit_tanggal" name="tanggal" required>
                    </div>
                    <div class="form-group">
                        <label>Jenis *</label>
                        <select class="form-control" id="edit_jenis" name="jenis" required>
                            <option value="pemasukan">Pemasukan</option>
                            <option value="pengeluaran">Pengeluaran</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Kategori *</label>
                        <select class="form-control" id="edit_kategori" name="kategori" required>
                            <option value="reservasi kamar">Reservasi Kamar</option>
                            <option value="restoran">Restoran</option>
                            <option value="maintenance">Maintenance</option>
                            <option value="gaji staff">Gaji Staff</option>
                            <option value="promo">Promo/Iklan</option>
                            <option value="utilitas">Utilitas</option>
                            <option value="lainnya">Lainnya</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Keterangan</label>
                        <input type="text" class="form-control" id="edit_keterangan" name="keterangan">
                    </div>
                    <div class="form-group">
                        <label>Jumlah (Rp) *</label>
                        <input type="number" class="form-control" id="edit_jumlah" name="jumlah" min="0" step="1000" required>
                    </div>
                    <div class="form-group">
                        <label>Metode Pembayaran *</label>
                        <select class="form-control" id="edit_metode" name="metode" required>
                            <option value="cash">Cash</option>
                            <option value="transfer">Transfer</option>
                            <option value="qris">QRIS</option>
                            <option value="other">Lainnya</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>

<script>
// Wait for page fully loaded
window.addEventListener('load', function() {
    // Check if Chart.js loaded
    if (typeof Chart === 'undefined') {
        console.error('Chart.js not loaded!');
        return;
    }

    var canvas = document.getElementById('chartKeuangan');
    
    if (!canvas) {
        console.error('Canvas element not found!');
        return;
    }

    var ctx = canvas.getContext('2d');
    
    // Chart data from Laravel
    var chartLabels = {!! json_encode($chartData['labels']) !!};
    var chartIncome = {!! json_encode($chartData['income']) !!};
    var chartExpense = {!! json_encode($chartData['expense']) !!};

    console.log('Chart data loaded:', {labels: chartLabels, income: chartIncome, expense: chartExpense});

    // Create chart
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: chartLabels,
            datasets: [
                {
                    label: 'Income (Pemasukan)',
                    data: chartIncome,
                    borderColor: 'rgb(40, 167, 69)',
                    backgroundColor: 'rgba(40, 167, 69, 0.1)',
                    borderWidth: 3,
                    tension: 0.4,
                    fill: true,
                    pointRadius: 5,
                    pointHoverRadius: 7
                },
                {
                    label: 'Expense (Pengeluaran)',
                    data: chartExpense,
                    borderColor: 'rgb(220, 53, 69)',
                    backgroundColor: 'rgba(220, 53, 69, 0.1)',
                    borderWidth: 3,
                    tension: 0.4,
                    fill: true,
                    pointRadius: 5,
                    pointHoverRadius: 7
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: {
                mode: 'index',
                intersect: false,
            },
            plugins: {
                legend: {
                    position: 'top',
                    labels: {
                        font: {
                            size: 14,
                            weight: 'bold'
                        },
                        padding: 20
                    }
                },
                title: {
                    display: true,
                    text: 'Grafik Keuangan ({{ date("d/m/Y", strtotime($startDate)) }} s/d {{ date("d/m/Y", strtotime($endDate)) }})',
                    font: {
                        size: 16,
                        weight: 'bold'
                    },
                    padding: 20
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            let label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            label += 'Rp ' + context.parsed.y.toLocaleString('id-ID');
                            return label;
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return 'Rp ' + value.toLocaleString('id-ID');
                        },
                        font: {
                            size: 12
                        }
                    },
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)'
                    }
                },
                x: {
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)'
                    },
                    ticks: {
                        font: {
                            size: 12
                        }
                    }
                }
            }
        }
    });

    console.log('Chart created successfully!');
});

// Function untuk edit transaksi
function editTransaksi(id, tanggal, jenis, kategori, keterangan, jumlah, metode) {
    document.getElementById('edit_transaksi_id').value = id;
    document.getElementById('edit_tanggal').value = tanggal;
    document.getElementById('edit_jenis').value = jenis;
    document.getElementById('edit_kategori').value = kategori;
    document.getElementById('edit_keterangan').value = keterangan;
    document.getElementById('edit_jumlah').value = jumlah;
    document.getElementById('edit_metode').value = metode;
    
    // Set form action URL
    document.getElementById('formEditTransaksi').action = '{{ url("/admin/laporan-keuangan") }}/' + id;
    
    // Show modal
    $('#modalEditTransaksi').modal('show');
}
</script>
@endsection