@extends('admin.layout')

@section('title', 'Laporan Invoice')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Laporan Invoice</h1>
            <p class="mb-0 text-muted">Analisis dan laporan komprehensif invoice hotel</p>
        </div>
        <div>
            <a href="{{ route('admin.invoices.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Kembali ke Invoice
            </a>
        </div>
    </div>

    <!-- Filter Section -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Filter Laporan</h6>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('admin.invoices.reports') }}" class="row" id="report-filter">
                <div class="col-md-3 mb-3">
                    <label for="from_date" class="form-label">Dari Tanggal</label>
                    <input type="date" class="form-control" id="from_date" name="from_date" 
                           value="{{ request('from_date', now()->startOfMonth()->format('Y-m-d')) }}">
                </div>
                <div class="col-md-3 mb-3">
                    <label for="to_date" class="form-label">Sampai Tanggal</label>
                    <input type="date" class="form-control" id="to_date" name="to_date" 
                           value="{{ request('to_date', now()->format('Y-m-d')) }}">
                </div>
                <div class="col-md-2 mb-3">
                    <label for="status" class="form-label">Status</label>
                    <select class="form-control" id="status" name="status">
                        <option value="">Semua Status</option>
                        <option value="draft" {{ request('status') == 'draft' ? 'selected' : '' }}>Draft</option>
                        <option value="sent" {{ request('status') == 'sent' ? 'selected' : '' }}>Terkirim</option>
                        <option value="paid" {{ request('status') == 'paid' ? 'selected' : '' }}>Dibayar</option>
                        <option value="overdue" {{ request('status') == 'overdue' ? 'selected' : '' }}>Terlambat</option>
                        <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Dibatalkan</option>
                    </select>
                </div>
                <div class="col-md-2 mb-3">
                    <label for="hotel_id" class="form-label">Hotel</label>
                    <select class="form-control" id="hotel_id" name="hotel_id">
                        <option value="">Semua Hotel</option>
                        @foreach($hotels as $hotel)
                            <option value="{{ $hotel->id }}" {{ request('hotel_id') == $hotel->id ? 'selected' : '' }}>
                                {{ $hotel->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2 mb-3">
                    <label for="report_type" class="form-label">Jenis Laporan</label>
                    <select class="form-control" id="report_type" name="report_type">
                        <option value="summary" {{ request('report_type', 'summary') == 'summary' ? 'selected' : '' }}>Ringkasan</option>
                        <option value="detailed" {{ request('report_type') == 'detailed' ? 'selected' : '' }}>Detail</option>
                        <option value="monthly" {{ request('report_type') == 'monthly' ? 'selected' : '' }}>Bulanan</option>
                    </select>
                </div>
                <div class="col-12">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-chart-bar"></i> Generate Laporan
                    </button>
                    <button type="button" class="btn btn-danger" onclick="exportToPDF()">
                        <i class="fas fa-file-pdf"></i> Export PDF
                    </button>
                    <button type="button" class="btn btn-success" onclick="exportToExcel()">
                        <i class="fas fa-file-excel"></i> Export Excel
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Statistics Overview -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Total Invoice
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($reportData['total_invoices'] ?? 0) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-file-invoice fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Total Pendapatan
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">Rp {{ number_format($reportData['total_amount'] ?? 0, 0, ',', '.') }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                Sudah Dibayar
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">Rp {{ number_format($reportData['paid_amount'] ?? 0, 0, ',', '.') }}</div>
                            <div class="text-xs text-muted">{{ $reportData['paid_count'] ?? 0 }} invoice</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                Belum Dibayar
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">Rp {{ number_format($reportData['pending_amount'] ?? 0, 0, ',', '.') }}</div>
                            <div class="text-xs text-muted">{{ $reportData['pending_count'] ?? 0 }} invoice</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clock fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="row mb-4">
        <div class="col-lg-6">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Status Invoice</h6>
                </div>
                <div class="card-body">
                    <canvas id="statusChart" width="400" height="200"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Pendapatan per Hotel</h6>
                </div>
                <div class="card-body">
                    <canvas id="hotelChart" width="400" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>

    @if(request('report_type') === 'monthly')
        <!-- Monthly Report -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Laporan Bulanan</h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead class="thead-light">
                            <tr>
                                <th>Bulan</th>
                                <th>Total Invoice</th>
                                <th>Total Pendapatan</th>
                                <th>Sudah Dibayar</th>
                                <th>Belum Dibayar</th>
                                <th>Rata-rata per Invoice</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($reportData['monthly_data'] as $month => $data)
                                <tr>
                                    <td>{{ \Carbon\Carbon::parse($month)->format('F Y') }}</td>
                                    <td>{{ number_format($data['total_invoices']) }}</td>
                                    <td>Rp {{ number_format($data['total_amount'], 0, ',', '.') }}</td>
                                    <td>Rp {{ number_format($data['paid_amount'], 0, ',', '.') }}</td>
                                    <td>Rp {{ number_format($data['pending_amount'], 0, ',', '.') }}</td>
                                    <td>Rp {{ number_format($data['average_amount'], 0, ',', '.') }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    @endif

    @if(request('report_type') === 'detailed')
        <!-- Detailed Report -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Laporan Detail Invoice</h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered" id="detailedTable">
                        <thead class="thead-light">
                            <tr>
                                <th>No. Invoice</th>
                                <th>Tanggal</th>
                                <th>Booking Code</th>
                                <th>Nama Tamu</th>
                                <th>Hotel</th>
                                <th>Total</th>
                                <th>Status</th>
                                <th>Jatuh Tempo</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($reportData['detailed_invoices'] as $invoice)
                                <tr>
                                    <td>{{ $invoice->invoice_number }}</td>
                                    <td>{{ $invoice->created_at->format('d/m/Y') }}</td>
                                    <td>{{ $invoice->booking->booking_code }}</td>
                                    <td>{{ $invoice->booking->guest_name }}</td>
                                    <td>{{ $invoice->booking->room->hotel->name ?? 'N/A' }}</td>
                                    <td>Rp {{ number_format($invoice->total_amount, 0, ',', '.') }}</td>
                                    <td>
                                        @php
                                            $statusColors = [
                                                'draft' => 'secondary',
                                                'sent' => 'info',
                                                'paid' => 'success',
                                                'overdue' => 'danger',
                                                'cancelled' => 'dark'
                                            ];
                                            $statusLabels = [
                                                'draft' => 'Draft',
                                                'sent' => 'Terkirim',
                                                'paid' => 'Dibayar',
                                                'overdue' => 'Terlambat',
                                                'cancelled' => 'Dibatalkan'
                                            ];
                                        @endphp
                                        <span class="badge badge-{{ $statusColors[$invoice->status] ?? 'secondary' }}">
                                            {{ $statusLabels[$invoice->status] ?? ucfirst($invoice->status) }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($invoice->due_date)
                                            {{ \Carbon\Carbon::parse($invoice->due_date)->format('d/m/Y') }}
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    @endif

    <!-- Summary Report (Default) -->
    @if(request('report_type', 'summary') === 'summary')
        <div class="row">
            <div class="col-lg-6">
                <!-- Status Breakdown -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Breakdown Status</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-borderless">
                                @foreach($reportData['status_breakdown'] as $status => $data)
                                    <tr>
                                        <td>
                                            @php
                                                $statusColors = [
                                                    'draft' => 'secondary',
                                                    'sent' => 'info',
                                                    'paid' => 'success',
                                                    'overdue' => 'danger',
                                                    'cancelled' => 'dark'
                                                ];
                                                $statusLabels = [
                                                    'draft' => 'Draft',
                                                    'sent' => 'Terkirim',
                                                    'paid' => 'Dibayar',
                                                    'overdue' => 'Terlambat',
                                                    'cancelled' => 'Dibatalkan'
                                                ];
                                            @endphp
                                            <span class="badge badge-{{ $statusColors[$status] ?? 'secondary' }}">
                                                {{ $statusLabels[$status] ?? ucfirst($status) }}
                                            </span>
                                        </td>
                                        <td>{{ $data['count'] }} invoice</td>
                                        <td class="text-right">Rp {{ number_format($data['amount'], 0, ',', '.') }}</td>
                                    </tr>
                                @endforeach
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-6">
                <!-- Hotel Breakdown -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Breakdown per Hotel</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-borderless">
                                @foreach($reportData['hotel_breakdown'] as $hotel)
                                    <tr>
                                        <td><strong>{{ $hotel['name'] }}</strong></td>
                                        <td>{{ $hotel['count'] }} invoice</td>
                                        <td class="text-right text-success font-weight-bold">
                                            Rp {{ number_format($hotel['amount'], 0, ',', '.') }}
                                        </td>
                                    </tr>
                                @endforeach
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(document).ready(function() {
    // Initialize DataTable for detailed report
    if ($('#detailedTable').length) {
        $('#detailedTable').DataTable({
            "pageLength": 25,
            "order": [[ 1, "desc" ]],
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.24/i18n/Indonesian.json"
            }
        });
    }
    
    // Status Chart
    const statusCtx = document.getElementById('statusChart').getContext('2d');
    const statusChart = new Chart(statusCtx, {
        type: 'doughnut',
        data: {
            labels: {!! json_encode(array_keys($reportData['status_breakdown'])) !!}.map(status => {
                const labels = {
                    'draft': 'Draft',
                    'sent': 'Terkirim',
                    'paid': 'Dibayar',
                    'overdue': 'Terlambat',
                    'cancelled': 'Dibatalkan'
                };
                return labels[status] || status;
            }),
            datasets: [{
                data: {!! json_encode(array_column($reportData['status_breakdown'], 'count')) !!},
                backgroundColor: [
                    '#6c757d', // draft - secondary
                    '#17a2b8', // sent - info
                    '#28a745', // paid - success
                    '#dc3545', // overdue - danger
                    '#343a40'  // cancelled - dark
                ],
                borderWidth: 2
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
    
    // Hotel Chart
    const hotelCtx = document.getElementById('hotelChart').getContext('2d');
    const hotelChart = new Chart(hotelCtx, {
        type: 'bar',
        data: {
            labels: {!! json_encode(array_column($reportData['hotel_breakdown'], 'name')) !!},
            datasets: [{
                label: 'Pendapatan (Rp)',
                data: {!! json_encode(array_column($reportData['hotel_breakdown'], 'amount')) !!},
                backgroundColor: '#007bff',
                borderColor: '#0056b3',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return 'Rp ' + new Intl.NumberFormat('id-ID').format(value);
                        }
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });
});

function exportToPDF() {
    const form = document.getElementById('report-filter');
    const formData = new FormData(form);
    const params = new URLSearchParams(formData);
    
    window.open(`/admin/invoices/reports/export-pdf?${params.toString()}`, '_blank');
}

function exportToExcel() {
    const form = document.getElementById('report-filter');
    const formData = new FormData(form);
    const params = new URLSearchParams(formData);
    
    window.open(`/admin/invoices/reports/export-excel?${params.toString()}`, '_blank');
}
</script>
@endpush