@extends('layout.app')

@section('title', 'Laporan Keuangan - Sistem Manajemen ISP')

@section('content')
<x-material-page-header 
    title="Laporan Keuangan" 
    :breadcrumbs="[
        ['name' => 'Laporan']
    ]"
    :secondaryAction="'exportPdf()'"
    secondaryActionLabel="Export PDF"
    secondaryActionIcon="picture_as_pdf"
    :tertiaryAction="'exportExcel()'"
    tertiaryActionLabel="Export Excel"
    tertiaryActionIcon="download"
/>

<div class="container-fluid py-4">
    <!-- Date Range Filter -->
    <div class="card my-4">
        <div class="card-header pb-0 pt-3">
            <h6 class="mb-0">Filter Periode</h6>
        </div>
        <div class="card-body pt-0">
        <form method="GET" action="{{ route('laporan.keuangan') }}">
            <div class="row">
                <div class="col-md-3">
                    <div class="input-group input-group-outline mb-3">
                        <label for="date_from" class="form-label">Dari Tanggal</label>
                        <input type="date" name="date_from" id="date_from" class="form-control" 
                               value="{{ $dateFrom }}">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="input-group input-group-outline mb-3">
                        <label for="date_to" class="form-label">Sampai Tanggal</label>
                        <input type="date" name="date_to" id="date_to" class="form-control" 
                               value="{{ $dateTo }}">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="input-group input-group-outline mb-3">
                        <label for="report_type" class="form-label">Tipe Laporan</label>
                        <select name="report_type" id="report_type" class="form-control">
                            <option value="overview" {{ $reportType == 'overview' ? 'selected' : '' }}>Overview</option>
                            <option value="revenue" {{ $reportType == 'revenue' ? 'selected' : '' }}>Revenue</option>
                            <option value="customers" {{ $reportType == 'customers' ? 'selected' : '' }}>Customers</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="input-group input-group-outline mb-3">
                        <label class="form-label">&nbsp;</label>
                        <button type="submit" class="btn bg-gradient-primary mb-0 w-100">
                            <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">filter_list</i> Filter
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Summary Cards -->
<div class="row mb-4">
    <x-material-card-stat 
        title="Total Revenue" 
        :value="'Rp ' . number_format($data['total_revenue'], 0, ',', '.')" 
        icon="payments" 
        color="primary"
    />
    <x-material-card-stat 
        title="Outstanding Invoices" 
        :value="'Rp ' . number_format($data['outstanding_invoices'], 0, ',', '.')" 
        icon="description" 
        color="success"
    />
    <x-material-card-stat 
        title="Total Customers" 
        :value="number_format($data['total_customers'])" 
        icon="people" 
        color="info"
    />
    <x-material-card-stat 
        title="Paid Invoices" 
        :value="$data['paid_invoices'] . '/' . $data['total_invoices']" 
        icon="check_circle" 
        color="warning"
    />
</div>

<!-- Charts Row -->
<div class="row mb-4">
    <!-- Revenue Chart -->
    <div class="col-xl-8 col-lg-7">
        <div class="card my-4">
            <div class="card-header pb-0 pt-3">
                <h6 class="mb-0 font-weight-bold text-primary">Revenue Trend</h6>
            </div>
            <div class="card-body pt-0">
                <div class="chart-area">
                    <canvas id="revenueChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Payment Methods Chart -->
    <div class="col-xl-4 col-lg-5">
        <div class="card my-4">
            <div class="card-header pb-0 pt-3">
                <h6 class="mb-0 font-weight-bold text-primary">Payment Methods</h6>
            </div>
            <div class="card-body pt-0">
                <div class="chart-pie pt-4 pb-2">
                    <canvas id="paymentMethodsChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Package Revenue Chart -->
<div class="row mb-4">
    <div class="col-xl-12">
        <div class="card my-4">
            <div class="card-header pb-0 pt-3">
                <h6 class="mb-0 font-weight-bold text-primary">Package Revenue</h6>
            </div>
            <div class="card-body pt-0">
                <div class="chart-bar">
                    <canvas id="packageRevenueChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Recent Payments -->
<div class="row">
    <div class="col-xl-12">
        <div class="card my-4">
            <div class="card-header pb-0 pt-3">
                <h6 class="mb-0 font-weight-bold text-primary">Recent Payments</h6>
            </div>
            <div class="card-body pt-0">
                <div class="table-responsive">
                    <table class="table align-items-center mb-0" width="100%">
                        <thead>
                            <tr>
                                <th>Tanggal</th>
                                <th>Customer</th>
                                <th>Amount</th>
                                <th>Method</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($data['recent_payments'] as $payment)
                            <tr>
                                <td>{{ $payment->tanggal_pembayaran->format('d/m/Y') }}</td>
                                <td>{{ $payment->tagihan->pelanggan->nama_lengkap }}</td>
                                <td>Rp {{ number_format($payment->jumlah_pembayaran, 0, ',', '.') }}</td>
                                <td>{{ $payment->metode_pembayaran }}</td>
                                <td>
                                    <span class="badge badge-sm bg-gradient-{{ $payment->status_badge_class }}">
                                        {{ $payment->status }}
                                    </span>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="text-center">Tidak ada data pembayaran</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Revenue Chart
const revenueCtx = document.getElementById('revenueChart').getContext('2d');
const revenueChart = new Chart(revenueCtx, {
    type: 'line',
    data: {
        labels: {!! json_encode($data['monthly_revenue']->pluck('month')) !!},
        datasets: [{
            label: 'Revenue',
            data: {!! json_encode($data['monthly_revenue']->pluck('revenue')) !!},
            borderColor: 'rgb(75, 192, 192)',
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            tension: 0.1
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function(value) {
                        return 'Rp ' + value.toLocaleString();
                    }
                }
            }
        }
    }
});

// Payment Methods Chart
const paymentMethodsCtx = document.getElementById('paymentMethodsChart').getContext('2d');
const paymentMethodsChart = new Chart(paymentMethodsCtx, {
    type: 'doughnut',
    data: {
        labels: {!! json_encode($data['payment_methods']->pluck('metode_pembayaran')) !!},
        datasets: [{
            data: {!! json_encode($data['payment_methods']->pluck('total')) !!},
            backgroundColor: [
                '#FF6384',
                '#36A2EB',
                '#FFCE56',
                '#4BC0C0',
                '#9966FF'
            ]
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});

// Package Revenue Chart
const packageRevenueCtx = document.getElementById('packageRevenueChart').getContext('2d');
const packageRevenueChart = new Chart(packageRevenueCtx, {
    type: 'bar',
    data: {
        labels: {!! json_encode($data['package_revenue']->pluck('nama_paket')) !!},
        datasets: [{
            label: 'Revenue',
            data: {!! json_encode($data['package_revenue']->pluck('revenue')) !!},
            backgroundColor: 'rgba(54, 162, 235, 0.8)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function(value) {
                        return 'Rp ' + value.toLocaleString();
                    }
                }
            }
        }
    }
});

function exportPdf() {
    const dateFrom = document.getElementById('date_from').value;
    const dateTo = document.getElementById('date_to').value;
    window.location.href = `{{ route('laporan.keuangan.export-pdf') }}?date_from=${dateFrom}&date_to=${dateTo}`;
}

function exportExcel() {
    const dateFrom = document.getElementById('date_from').value;
    const dateTo = document.getElementById('date_to').value;
    window.location.href = `{{ route('laporan.keuangan.export-excel') }}?date_from=${dateFrom}&date_to=${dateTo}`;
}
</script>
@endsection