@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="booking_source" class="form-label">Sumber Booking</label>
                    <select class="form-control" id="booking_source" name="booking_source">
                        <option value="">Semua Sumber</option>
                        @php
                            $sources = $booking_sources ?? ['Internal','Agoda','Booking.com','Traveloka','Airbnb','Other'];
                        @endphp
                        @foreach($sources as $src)
                            <option value="{{ $src }}" {{ request('booking_source') == $src ? 'selected' : '' }}>
                                {{ $src }}
                            </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-md-2 mb-3 d-flex align-items-end">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="exclude_nonstay" name="exclude_nonstay" value="1" {{ request('exclude_nonstay') ? 'checked' : '' }}>
                        <label class="form-check-label" for="exclude_nonstay">Kecualikan Non-Stay</label>
                    </div>
                </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 Channel Pembayaran</h6>
                </div>
                <div class="card-body">
                    <canvas id="channelChart" 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>Sumber Booking</th>
                                <th>Kategori</th>
                                <th>Item</th>
                                <th>Unit/Kamar</th>
                                <th>Qty</th>
                                <th>Nominal</th>
                                <th>Status</th>
                                <th>Jatuh Tempo</th>
                                <th>Tanggal Pembayaran</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse(($reportData['detailed_rows'] ?? []) as $row)
                                <tr>
                                    <td>{{ $row['invoice_number'] }}</td>
                                    <td>{{ $row['report_date']->format('d/m/Y') }}</td>
                                    <td>{{ $row['booking_code'] }}</td>
                                    <td>{{ $row['guest_name'] }}</td>
                                    <td>{{ $row['hotel_name'] }}</td>
                                    <td>{{ $row['booking_source'] }}</td>
                                    <td>{{ $row['category'] ?? '-' }}</td>
                                    <td>{{ $row['item_name'] ?? '-' }}</td>
                                    <td>{{ $row['room_label'] ?? '-' }}</td>
                                    <td>{{ number_format($row['quantity'] ?? 0, 0, ',', '.') }}</td>
                                    <td>Rp {{ number_format($row['line_amount'] ?? 0, 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[$row['status']] ?? 'secondary' }}">
                                            {{ $statusLabels[$row['status']] ?? ucfirst($row['status']) }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($row['due_date'])
                                            {{ $row['due_date']->format('d/m/Y') }}
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($row['paid_at'])
                                            {{ $row['paid_at']->format('d/m/Y H:i') }}
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="14" class="text-center text-muted">Tidak ada data detail untuk rentang tanggal ini.</td>
                                </tr>
                            @endforelse
                        </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
                                                $labels = [
                                                    'draft' => 'Draft',
                                                    'sent' => 'Terkirim',
                                                    'paid' => 'Dibayar',
                                                    'overdue' => 'Terlambat',
                                                    'cancelled' => 'Dibatalkan'
                                                ];
                                                $colors = [
                                                    'draft' => ['#6c757d', '#f2f3f5'],
                                                    'sent' => ['#17a2b8', '#e8f7fb'],
                                                    'paid' => ['#28a745', '#eaf7ea'],
                                                    'overdue' => ['#dc3545', '#fdecef'],
                                                    'cancelled' => ['#343a40', '#eceeef']
                                                ];
                                                $c = $colors[$status] ?? ['#6c757d', '#f2f3f5'];
                                            @endphp
                                            <span class="badge" style="background-color: {{ $c[1] }}; color: {{ $c[0] }}; border: 1px solid {{ $c[0] }};">
                                                {{ $labels[$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">
                <!-- Payment Channel Breakdown -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Breakdown per Channel Pembayaran</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-borderless">
                                @foreach($reportData['channel_breakdown'] as $channel)
                                    <tr>
                                        <td><strong>{{ $channel['name'] }}</strong></td>
                                        <td>{{ $channel['count'] }} invoice</td>
                                        <td class="text-right text-success font-weight-bold">
                                            Rp {{ number_format($channel['amount'], 0, ',', '.') }}
                                        </td>
                                    </tr>
                                @endforeach
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <!-- Booking Source Breakdown -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Breakdown per Sumber Booking</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-borderless">
                                @foreach($reportData['source_breakdown'] as $src)
                                    <tr>
                                        <td><strong>{{ $src['name'] }}</strong></td>
                                        <td>{{ $src['count'] }} invoice</td>
                                        <td class="text-right text-info font-weight-bold">
                                            Rp {{ number_format($src['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'
                }
            }
        }
    });
    
    // Payment Channel Chart
    const channelCtx = document.getElementById('channelChart').getContext('2d');
    const channelChart = new Chart(channelCtx, {
        type: 'bar',
        data: {
            labels: {!! json_encode(array_column($reportData['channel_breakdown'], 'name')) !!},
            datasets: [{
                label: 'Pendapatan (Rp)',
                data: {!! json_encode(array_column($reportData['channel_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(`{{ route('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(`{{ route('admin.invoices.reports.export-excel') }}?${params.toString()}`, '_blank');
}
</script>
@endpush