@extends('layouts.app')

@section('content')
<div class="container-fluid px-4">
    <!-- Header Section -->
    <div class="d-flex justify-content-between align-items-center pt-3 pb-4 mb-4 border-bottom">
        <div>
            <h1 class="h2 mb-1">
                <i class="bi bi-graph-up me-2 text-primary"></i>Analytics & Reports
            </h1>
            <p class="text-muted mb-0">Comprehensive insights across all your business channels</p>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#dateRangeModal">
                <i class="bi bi-calendar3 me-2"></i>{{ \Carbon\Carbon::parse($startDate)->format('M d') }} - {{ \Carbon\Carbon::parse($endDate)->format('M d, Y') }}
            </button>
            <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown">
                <i class="bi bi-download me-2"></i>Export
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="{{ route('reports.export', [$website, 'format' => 'csv', 'start_date' => $startDate, 'end_date' => $endDate]) }}">
                    <i class="bi bi-filetype-csv me-2"></i>CSV
                </a></li>
                <li><a class="dropdown-item" href="#" onclick="window.print()">
                    <i class="bi bi-printer me-2"></i>Print
                </a></li>
            </ul>
        </div>
    </div>

    <!-- Overall Stats Row -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-0 shadow-sm" style="background: linear-gradient(to right, #2948ff, #396afc);">
                <div class="card-body text-white text-center">
                    <i class="bi bi-cart3 display-4 mb-2"></i>
                    <h3 class="mb-1">{{ number_format($reports['overall']['total_orders']) }}</h3>
                    <p class="mb-0 opacity-75">Total Orders</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                <div class="card-body text-white text-center">
                    <i class="bi bi-cash-stack display-4 mb-2"></i>
                    <h3 class="mb-1">RM {{ number_format($reports['overall']['total_revenue'], 0) }}</h3>
                    <p class="mb-0 opacity-75">Total Revenue</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                <div class="card-body text-white text-center">
                    <i class="bi bi-clock-history display-4 mb-2"></i>
                    <h3 class="mb-1">{{ number_format($reports['overall']['pending_orders']) }}</h3>
                    <p class="mb-0 opacity-75">Pending Orders</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                <div class="card-body text-white text-center">
                    <i class="bi bi-check-circle display-4 mb-2"></i>
                    <h3 class="mb-1">{{ number_format($reports['overall']['completed_orders']) }}</h3>
                    <p class="mb-0 opacity-75">Completed Orders</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Revenue Chart -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0">
                        <i class="bi bi-graph-up me-2 text-primary"></i>Daily Revenue by Channel
                    </h5>
                </div>
                <div class="card-body">
                    <canvas id="revenueChart" height="100"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Channel Performance -->
    <div class="row mb-4">
        <div class="col-lg-4 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-primary text-white">
                    <h6 class="mb-0">
                        <i class="bi bi-cart3 me-2"></i>eCommerce
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6 mb-3">
                            <div class="border-end">
                                <h4 class="text-primary mb-1">{{ number_format($reports['channels']['ecommerce']['orders']) }}</h4>
                                <small class="text-muted">Orders</small>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <h4 class="text-success mb-1">RM {{ number_format($reports['channels']['ecommerce']['revenue'], 0) }}</h4>
                            <small class="text-muted">Revenue</small>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Products Sold:</span>
                        <span class="fw-semibold">{{ number_format($reports['channels']['ecommerce']['products_sold']) }}</span>
                    </div>

                    <div class="d-flex justify-content-between mb-3">
                        <span class="text-muted">Avg Order Value:</span>
                        <span class="fw-semibold">RM {{ number_format($reports['channels']['ecommerce']['avg_order_value'], 2) }}</span>
                    </div>

                    @if($reports['channels']['ecommerce']['top_products']->count() > 0)
                    <div class="border-top pt-3">
                        <h6 class="text-muted mb-2">Top Products</h6>
                        @foreach($reports['channels']['ecommerce']['top_products']->take(3) as $product)
                        <div class="d-flex justify-content-between mb-1">
                            <small class="text-truncate me-2">{{ $product->name }}</small>
                            <small class="text-muted">{{ $product->quantity }}x</small>
                        </div>
                        @endforeach
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-4 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-success text-white">
                    <h6 class="mb-0">
                        <i class="bi bi-calendar-event me-2"></i>Bookings
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6 mb-3">
                            <div class="border-end">
                                <h4 class="text-primary mb-1">{{ number_format($reports['channels']['booking']['bookings']) }}</h4>
                                <small class="text-muted">Bookings</small>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <h4 class="text-success mb-1">RM {{ number_format($reports['channels']['booking']['revenue'], 0) }}</h4>
                            <small class="text-muted">Revenue</small>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Confirmed:</span>
                        <span class="fw-semibold">{{ number_format($reports['channels']['booking']['confirmed_bookings']) }}</span>
                    </div>

                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Upcoming:</span>
                        <span class="fw-semibold">{{ number_format($reports['channels']['booking']['upcoming_bookings']) }}</span>
                    </div>

                    <div class="d-flex justify-content-between mb-3">
                        <span class="text-muted">Avg Booking Value:</span>
                        <span class="fw-semibold">RM {{ number_format($reports['channels']['booking']['avg_booking_value'], 2) }}</span>
                    </div>

                    @if($reports['channels']['booking']['top_properties']->count() > 0)
                    <div class="border-top pt-3">
                        <h6 class="text-muted mb-2">Top Properties</h6>
                        @foreach($reports['channels']['booking']['top_properties']->take(3) as $property)
                        <div class="d-flex justify-content-between mb-1">
                            <small class="text-truncate me-2">{{ $property->name }}</small>
                            <small class="text-muted">{{ $property->bookings }}x</small>
                        </div>
                        @endforeach
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-4 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-info text-white">
                    <h6 class="mb-0">
                        <i class="bi bi-credit-card me-2"></i>Payment Forms
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6 mb-3">
                            <div class="border-end">
                                <h4 class="text-primary mb-1">{{ number_format($reports['channels']['payment_form']['submissions']) }}</h4>
                                <small class="text-muted">Submissions</small>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <h4 class="text-success mb-1">RM {{ number_format($reports['channels']['payment_form']['revenue'], 0) }}</h4>
                            <small class="text-muted">Revenue</small>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Successful Payments:</span>
                        <span class="fw-semibold">{{ number_format($reports['channels']['payment_form']['successful_payments']) }}</span>
                    </div>

                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Form Views:</span>
                        <span class="fw-semibold">{{ number_format($reports['channels']['payment_form']['form_views']) }}</span>
                    </div>

                    <div class="d-flex justify-content-between mb-3">
                        <span class="text-muted">Avg Payment:</span>
                        <span class="fw-semibold">RM {{ number_format($reports['channels']['payment_form']['avg_payment_amount'], 2) }}</span>
                    </div>

                    @if($reports['channels']['payment_form']['top_forms']->count() > 0)
                    <div class="border-top pt-3">
                        <h6 class="text-muted mb-2">Top Forms</h6>
                        @foreach($reports['channels']['payment_form']['top_forms']->take(3) as $form)
                        <div class="d-flex justify-content-between mb-1">
                            <small class="text-truncate me-2">{{ $form->name }}</small>
                            <small class="text-muted">{{ $form->submissions }}x</small>
                        </div>
                        @endforeach
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Top Performing Items -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0">
                        <i class="bi bi-trophy me-2 text-primary"></i>Top Performing Items
                    </h5>
                </div>
                <div class="card-body">
                    @if($reports['top_items']->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Rank</th>
                                    <th>Item</th>
                                    <th>Type</th>
                                    <th>Quantity/Orders</th>
                                    <th>Revenue</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($reports['top_items'] as $index => $item)
                                <tr>
                                    <td>
                                        <span class="badge bg-{{ $index < 3 ? 'warning' : 'secondary' }}">
                                            #{{ $index + 1 }}
                                        </span>
                                    </td>
                                    <td class="fw-semibold">{{ $item->item_name }}</td>
                                    <td>
                                        <span class="badge bg-{{ $item->type === 'product' ? 'primary' : ($item->type === 'property' ? 'success' : 'info') }}">
                                            {{ ucfirst($item->type) }}
                                        </span>
                                    </td>
                                    <td>{{ number_format($item->quantity) }}</td>
                                    <td class="text-success fw-semibold">RM {{ number_format($item->revenue, 2) }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                    <div class="text-center py-4">
                        <i class="bi bi-graph-up display-4 text-muted mb-3"></i>
                        <h5 class="text-muted">No performance data yet</h5>
                        <p class="text-muted">Start selling products, taking bookings, or collecting payments to see performance metrics.</p>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Date Range Modal -->
<div class="modal fade" id="dateRangeModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Select Date Range</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('reports.index', $website) }}" method="GET">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="start_date" class="form-label">Start Date</label>
                            <input type="date" class="form-control" id="start_date" name="start_date" value="{{ $startDate }}">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="end_date" class="form-label">End Date</label>
                            <input type="date" class="form-control" id="end_date" name="end_date" value="{{ $endDate }}">
                        </div>
                    </div>

                    <div class="d-flex gap-2 flex-wrap">
                        <button type="button" class="btn btn-sm btn-outline-primary" onclick="setDateRange(7)">Last 7 days</button>
                        <button type="button" class="btn btn-sm btn-outline-primary" onclick="setDateRange(30)">Last 30 days</button>
                        <button type="button" class="btn btn-sm btn-outline-primary" onclick="setDateRange(90)">Last 3 months</button>
                        <button type="button" class="btn btn-sm btn-outline-primary" onclick="setCurrentMonth()">This month</button>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Apply</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Revenue Chart
const ctx = document.getElementById('revenueChart').getContext('2d');
const revenueData = @json($reports['daily_revenue']);

const chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: revenueData.map(item => new Date(item.date).toLocaleDateString()),
        datasets: [
            {
                label: 'eCommerce',
                data: revenueData.map(item => item.ecommerce),
                borderColor: '#667eea',
                backgroundColor: 'rgba(102, 126, 234, 0.1)',
                tension: 0.4
            },
            {
                label: 'Bookings',
                data: revenueData.map(item => item.booking),
                borderColor: '#f5576c',
                backgroundColor: 'rgba(245, 87, 108, 0.1)',
                tension: 0.4
            },
            {
                label: 'Payment Forms',
                data: revenueData.map(item => item.payment_form),
                borderColor: '#4facfe',
                backgroundColor: 'rgba(79, 172, 254, 0.1)',
                tension: 0.4
            }
        ]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function(value) {
                        return 'RM ' + value.toLocaleString();
                    }
                }
            }
        },
        plugins: {
            tooltip: {
                callbacks: {
                    label: function(context) {
                        return context.dataset.label + ': RM ' + context.parsed.y.toLocaleString();
                    }
                }
            }
        }
    }
});

// Date range functions
function setDateRange(days) {
    const endDate = new Date();
    const startDate = new Date();
    startDate.setDate(endDate.getDate() - days);

    document.getElementById('start_date').value = startDate.toISOString().split('T')[0];
    document.getElementById('end_date').value = endDate.toISOString().split('T')[0];
}

function setCurrentMonth() {
    const now = new Date();
    const startDate = new Date(now.getFullYear(), now.getMonth(), 1);
    const endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);

    document.getElementById('start_date').value = startDate.toISOString().split('T')[0];
    document.getElementById('end_date').value = endDate.toISOString().split('T')[0];
}
</script>

<style>
@media print {
    .btn, .modal { display: none !important; }
    .card { border: 1px solid #dee2e6 !important; }
}

.border-end {
    border-right: 1px solid #dee2e6 !important;
}
</style>
@endsection