@extends('layouts.dashboard')

@section('title', 'Reports')

@section('content')
<div class="content-wrapper">
    <!-- Header Section -->
    <div class="reports-header mb-4">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h4 class="mb-1 fw-bold">
                    <i class="bi bi-graph-up-arrow me-2 text-primary"></i>Reports Dashboard
                </h4>
                <p class="text-muted mb-0">Generate, analyze, and export detailed reports</p>
            </div>
            <div class="col-lg-6 text-lg-end mt-3 mt-lg-0">
                <span class="badge bg-light text-dark px-3 py-2">
                    <i class="bi bi-calendar3 me-1"></i>
                    {{ now()->format('F d, Y') }}
                </span>
            </div>
        </div>
    </div>

    <!-- Quick Stats Cards -->
    <div class="row g-3 mb-4">
        <div class="col-6 col-md-4 col-xl">
            <div class="report-stat-card">
                <div class="stat-icon users">
                    <i class="bi bi-people-fill"></i>
                </div>
                <div class="stat-content">
                    <span class="stat-value">{{ number_format($stats['total_users']) }}</span>
                    <span class="stat-label">Total Users</span>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-xl">
            <div class="report-stat-card">
                <div class="stat-icon active">
                    <i class="bi bi-person-check-fill"></i>
                </div>
                <div class="stat-content">
                    <span class="stat-value">{{ number_format($stats['active_users']) }}</span>
                    <span class="stat-label">Active Users</span>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-xl">
            <div class="report-stat-card">
                <div class="stat-icon calls">
                    <i class="bi bi-telephone-fill"></i>
                </div>
                <div class="stat-content">
                    <span class="stat-value">{{ number_format($stats['total_calls']) }}</span>
                    <span class="stat-label">Total Calls</span>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-xl">
            <div class="report-stat-card">
                <div class="stat-icon sms">
                    <i class="bi bi-chat-dots-fill"></i>
                </div>
                <div class="stat-content">
                    <span class="stat-value">{{ number_format($stats['total_sms']) }}</span>
                    <span class="stat-label">Total SMS</span>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-xl">
            <div class="report-stat-card">
                <div class="stat-icon promo">
                    <i class="bi bi-megaphone-fill"></i>
                </div>
                <div class="stat-content">
                    <span class="stat-value">{{ number_format($stats['total_promotions']) }}</span>
                    <span class="stat-label">Promotions</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Section Header -->
    <div class="d-flex align-items-center mb-3">
        <h5 class="mb-0 fw-semibold">
            <i class="bi bi-file-earmark-bar-graph me-2 text-primary"></i>Available Reports
        </h5>
        <span class="badge bg-primary ms-2">{{ count($availableReports) }}</span>
    </div>

    <!-- Report Cards Grid -->
    <div class="row g-4">
        @forelse($availableReports as $report)
        <div class="col-md-6 col-lg-4">
            <div class="report-card {{ $report['color'] }}">
                <div class="report-card-icon">
                    <i class="bi {{ $report['icon'] }}"></i>
                </div>
                <div class="report-card-content">
                    <h6 class="report-card-title">{{ $report['name'] }}</h6>
                    <p class="report-card-desc">{{ $report['description'] }}</p>
                </div>
                <a href="{{ route('dashboard.reports.' . str_replace('_', '-', $report['key'])) }}"
                    class="report-card-btn">
                    View Report
                    <i class="bi bi-arrow-right ms-1"></i>
                </a>
                <div class="report-card-decoration"></div>
            </div>
        </div>
        @empty
        <div class="col-12">
            <div class="empty-state">
                <div class="empty-state-icon">
                    <i class="bi bi-file-earmark-x"></i>
                </div>
                <h5>No Reports Available</h5>
                <p class="text-muted">No reports are available for your permission level.</p>
            </div>
        </div>
        @endforelse
    </div>
</div>

<style>
    /* Report Stat Cards */
    .report-stat-card {
        background: white;
        border-radius: 16px;
        padding: 1.25rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(0, 0, 0, 0.04);
        transition: all 0.3s ease;
        height: 100%;
    }

    .report-stat-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    }

    .report-stat-card .stat-icon {
        width: 52px;
        height: 52px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        flex-shrink: 0;
    }

    .report-stat-card .stat-icon.users {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .report-stat-card .stat-icon.active {
        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
        color: white;
    }

    .report-stat-card .stat-icon.calls {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        color: white;
    }

    .report-stat-card .stat-icon.sms {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        color: white;
    }

    .report-stat-card .stat-icon.promo {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        color: white;
    }

    .report-stat-card .stat-content {
        display: flex;
        flex-direction: column;
    }

    .report-stat-card .stat-value {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1a1a2e;
        line-height: 1.2;
    }

    .report-stat-card .stat-label {
        font-size: 0.75rem;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 500;
    }

    /* Report Cards */
    .report-card {
        background: white;
        border-radius: 16px;
        padding: 1.5rem;
        position: relative;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(0, 0, 0, 0.04);
        transition: all 0.3s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .report-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    }

    .report-card-icon {
        width: 60px;
        height: 60px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        margin-bottom: 1rem;
        transition: all 0.3s ease;
    }

    .report-card:hover .report-card-icon {
        transform: scale(1.1);
    }

    .report-card.primary .report-card-icon {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
        color: #667eea;
    }

    .report-card.success .report-card-icon {
        background: linear-gradient(135deg, rgba(40, 167, 69, 0.15) 0%, rgba(0, 200, 83, 0.15) 100%);
        color: #28a745;
    }

    .report-card.info .report-card-icon {
        background: linear-gradient(135deg, rgba(23, 162, 184, 0.15) 0%, rgba(0, 210, 255, 0.15) 100%);
        color: #17a2b8;
    }

    .report-card.warning .report-card-icon {
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(253, 126, 20, 0.15) 100%);
        color: #fd7e14;
    }

    .report-card.danger .report-card-icon {
        background: linear-gradient(135deg, rgba(220, 53, 69, 0.15) 0%, rgba(255, 87, 87, 0.15) 100%);
        color: #dc3545;
    }

    .report-card.secondary .report-card-icon {
        background: linear-gradient(135deg, rgba(108, 117, 125, 0.15) 0%, rgba(73, 80, 87, 0.15) 100%);
        color: #6c757d;
    }

    .report-card-content {
        flex-grow: 1;
    }

    .report-card-title {
        font-weight: 600;
        color: #1a1a2e;
        margin-bottom: 0.5rem;
        font-size: 1.1rem;
    }

    .report-card-desc {
        color: #6c757d;
        font-size: 0.875rem;
        margin-bottom: 1rem;
        line-height: 1.5;
    }

    .report-card-btn {
        display: inline-flex;
        align-items: center;
        padding: 0.625rem 1.25rem;
        border-radius: 10px;
        font-size: 0.875rem;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.3s ease;
        background: #f8f9fa;
        color: #667eea;
        border: none;
        width: fit-content;
    }

    .report-card-btn:hover {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateX(5px);
    }

    .report-card-decoration {
        position: absolute;
        top: -30px;
        right: -30px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        opacity: 0.05;
        transition: all 0.3s ease;
    }

    .report-card.primary .report-card-decoration {
        background: #667eea;
    }

    .report-card.success .report-card-decoration {
        background: #28a745;
    }

    .report-card.info .report-card-decoration {
        background: #17a2b8;
    }

    .report-card.warning .report-card-decoration {
        background: #fd7e14;
    }

    .report-card.danger .report-card-decoration {
        background: #dc3545;
    }

    .report-card.secondary .report-card-decoration {
        background: #6c757d;
    }

    .report-card:hover .report-card-decoration {
        transform: scale(1.5);
        opacity: 0.08;
    }

    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        background: white;
        border-radius: 16px;
        border: 1px solid rgba(0, 0, 0, 0.04);
    }

    .empty-state-icon {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: #f8f9fa;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: #adb5bd;
        margin: 0 auto 1rem;
    }

    /* Responsive adjustments */
    @media (max-width: 576px) {
        .report-stat-card {
            padding: 1rem;
        }

        .report-stat-card .stat-icon {
            width: 44px;
            height: 44px;
            font-size: 1.1rem;
        }

        .report-stat-card .stat-value {
            font-size: 1.25rem;
        }

        .report-card {
            padding: 1.25rem;
        }

        .report-card-icon {
            width: 50px;
            height: 50px;
            font-size: 1.5rem;
        }
    }
</style>
@endsection