@extends('layouts.default')

@push('styles')
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<style>
    /* Super Admin Specific Styling */
    .super-admin-accent {
        border-top: 4px solid #8b5cf6 !important;
    }

    .super-admin-red-accent {
        border-top: 4px solid #dc2626 !important;
    }

    .icon-shape-purple {
        background: rgba(139, 92, 246, 0.1);
        color: #8b5cf6;
    }




    /* Premium Dashboard Components */
    .dashboard-wrapper {
        padding: 10px;
    }

    .premium-card {
        background: #ffffff;
        border: 1px solid var(--border-color);
        border-radius: 16px;
        padding: 24px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        height: 100%;
    }

    .premium-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05);
    }

    .icon-shape {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        font-size: 1.4rem;
        background: rgba(37, 99, 235, 0.05);
        color: var(--primary-blue);
    }

    .stat-label {
        color: var(--text-muted);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 8px;
    }

    .stat-value {
        color: var(--text-main);
        font-weight: 800;
        font-size: 1.8rem;
        margin-bottom: 6px;
        letter-spacing: -0.5px;
    }

    /* Plan Banner - High Contrast */
    .plan-banner {
        background: #1e293b;
        background-image: radial-gradient(at 0% 0%, rgba(37, 99, 235, 0.3) 0, transparent 50%), radial-gradient(at 50% 0%, rgba(29, 78, 216, 0.2) 0, transparent 50%);
        color: white;
        border-radius: 16px;
        padding: 24px 32px;
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .inventory-list-item {
        padding: 14px 0;
        border-bottom: 1px solid #f1f5f9;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: background 0.2s;
    }

    .brand-icon {
        width: 40px;
        height: 40px;
        background: #f1f5f9;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-main);
        margin-right: 15px;
        font-size: 1.1rem;
    }

    .badge-soft {
        border-radius: 8px;
        padding: 6px 12px;
        font-weight: 600;
        font-size: 0.8rem;
    }

    .bg-soft-success {
        background: #ecfdf5;
        color: #059669;
    }

    .bg-soft-warning {
        background: #fffbeb;
        color: #d97706;
    }

    .bg-soft-danger {
        background: #fef2f2;
        color: #dc2626;
    }

    .btn-premium {
        background: var(--primary-blue);
        color: white;
        border-radius: 10px;
        padding: 10px 20px;
        font-weight: 600;
        border: none;
        transition: all 0.2s;
    }

    .btn-premium:hover {
        background: #1d4ed8;
        box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
    }

    /* Hide Scrollbar */
    ::-webkit-scrollbar {
        width: 6px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 10px;
    }

    .bg-soft-purple {
        background: #f5f3ff;
        color: #7c3aed;
    }
</style>
@endpush
@section('content')
<div class="card-section-header">
    <h2 class="card-section-title">Dashboard Overview</h2>
    <p class="card-section-subtitle">Welcome to your inventory management system.</p>
</div>
<div class="wrapper wrapper-content">
    <div class="dashboard-wrapper animate__animated animate__fadeIn">

        @if(auth()->check() && auth()->user()->user_type === 'sadmin')
        <div id="super-admin-view" class="view-section active">
            <div class="row g-4 mb-4">
                <div class="col-md-3">
                    <div class="premium-card super-admin-accent">
                        <div class="icon-shape icon-shape-purple"><i class="fa fa-shop"></i></div>
                        <div class="stat-label">Total RegisteredShops</div>
                        <div class="stat-value">84</div>
                        <div class="small fw-bold text-success"><i class="fa fa-plus me-1"></i>4 New this week</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="premium-card super-admin-accent">
                        <div class="icon-shape icon-shape-purple"><i class="fa fa-users"></i></div>
                        <div class="stat-label">TotalRegistered Users</div>
                        <div class="stat-value">1,240</div>
                        <div class="small text-muted">Across all branches</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="premium-card border-danger super-admin-red-accent">
                        <div class="icon-shape bg-soft-danger text-danger"><i class="fa fa-calendar-xmark"></i></div>
                        <div class="stat-label">Registration Expiring (7 Days)</div>
                        <div class="stat-value text-danger">18</div>
                        <div class="small fw-bold text-danger">Action required</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="premium-card super-admin-accent">
                        <div class="icon-shape icon-shape-purple"><i class="fa fa-tags"></i></div>
                        <div class="stat-label">Active Brands</div>
                        <div class="stat-value">22</div>
                        <div class="small text-muted">Global manufacturers</div>
                    </div>
                </div>
            </div>

            <div class="row g-4">
                <div class="col-lg-8">
                    <div class="premium-card">
                        <h3 class="fw-bold mb-4">Global Monthly Sales Performance</h3>
                        <div style="height: 350px;">
                            <canvas id="superAdminSalesChart"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="premium-card">
                        <h3 class="fw-bold mb-4">Items Per Brand</h3>
                        <div class="inventory-list">
                        <div class="inventory-list-item">
                                <div class="d-flex align-items-center">
                                    <div class="brand-icon"><i class="fa-solid fa-apple"></i></div>
                                    <span class="fw-semibold">Apple</span>
                                </div>
                                <span class="badge-soft bg-soft-purple">10 Units</span>
                            </div>
                            <div class="inventory-list-item">
                                <div class="d-flex align-items-center">
                                    <div class="brand-icon"><i class="fa-solid fa-samsung"></i></div>
                                    <span class="fw-semibold">Samsung</span>
                                </div>
                                <span class="badge-soft bg-soft-purple">10 Units</span>
                            </div>
                            <div class="inventory-list-item">
                                <div class="d-flex align-items-center">
                                    <div class="brand-icon"><i class="fa-solid fa-google"></i></div>
                                    <span class="fw-semibold">Google</span>
                                </div>
                                <span class="badge-soft bg-soft-purple">10 Units</span>
                            </div>
                            <div class="inventory-list-item">
                                <div class="d-flex align-items-center">
                                    <div class="brand-icon"><i class="fa-solid fa-xiaomi"></i></div>
                                    <span class="fw-semibold">Xiaomi</span>
                                </div>
                                <span class="badge-soft bg-soft-purple">10 Units</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif

        @if(auth()->check() && auth()->user()->user_type === 'user')
        <div class="plan-banner shadow-lg d-none">
            <div class="d-flex align-items-center">
                <div class="me-4 text-center" style="width: 50px; height: 50px; background: rgba(255,255,255,0.1); border-radius: 50%; line-height: 50px;">
                    <i class="fa fa-crown text-warning fa-lg"></i>
                </div>
                <div>
                    <h5 class="mb-1 fw-bold">Pro Subscription Active</h5>
                    <p class="mb-0 small opacity-75">Your monthly cycle ends in 12 days. Don't let your inventory go offline.</p>
                </div>
            </div>
            <button class="btn btn-light px-4 fw-bold" style="border-radius: 10px;">Extend Plan</button>
        </div>

        <div class="row g-4 mb-4">
            <div class="col-md-3">
                <div class="premium-card">
                    <div class="icon-shape"><i class="fa fa-chart-line"></i></div>
                    <div class="stat-label">Total Revenue</div>
                    <div class="stat-value">$14,250</div>
                    <div class="small fw-bold text-success"><i class="fa fa-arrow-up me-1"></i>+8.4% <span class="text-muted fw-normal">vs last month</span></div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="premium-card">
                    <div class="icon-shape" style="background: rgba(14, 165, 233, 0.05); color: #0ea5e9;"><i class="fa fa-shopping-cart"></i></div>
                    <div class="stat-label">Stock Inflow</div>
                    <div class="stat-value">$9,800</div>
                    <div class="small text-muted fw-medium">112 New units added</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="premium-card">
                    <div class="icon-shape" style="background: rgba(244, 63, 94, 0.05); color: #f43f5e;"><i class="fa fa-file-invoice-dollar"></i></div>
                    <div class="stat-label">Accounts Payable</div>
                    <div class="stat-value text-danger">$1,240</div>
                    <div class="small fw-bold text-danger"><i class="fa fa-clock me-1"></i>Due: 5 Invoices</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="premium-card">
                    <div class="icon-shape" style="background: rgba(16, 185, 129, 0.05); color: #10b981;"><i class="fa fa-hand-holding-dollar"></i></div>
                    <div class="stat-label">Accounts Receivable</div>
                    <div class="stat-value text-success">$3,550</div>
                    <div class="small text-muted fw-medium">Pending from 12 clients</div>
                </div>
            </div>
        </div>

        <div class="row g-4">
            <div class="col-lg-8">
                <div class="premium-card">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h3 class="fw-bold mb-0">Weekly Sales Analytics</h3>
                        <div class="dropdown d-none">
                            <button class="btn btn-light btn-sm rounded-pill px-3 border" type="button">7 Days <i class="fa fa-chevron-down ms-1 small"></i></button>
                        </div>
                    </div>
                    <div style="height: 350px;">
                        <canvas id="salesChart"></canvas>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="premium-card">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h3 class="fw-bold mb-0">Inventory</h3>
                    </div>
                    <div class="inventory-list mb-4">
                        <div class="inventory-list-item">
                            <div class="d-flex align-items-center">
                                <div class="brand-icon"><i class="fa-brands fa-apple"></i></div>
                                <span class="fw-semibold">Apple Inc.</span>
                            </div>
                            <span class="badge-soft bg-soft-success">20 Units</span>
                        </div>
                        <div class="inventory-list-item">
                            <div class="d-flex align-items-center">
                                <div class="brand-icon"><i class="fa-solid fa-mobile-screen"></i></div>
                                <span class="fw-semibold">Samsung</span>
                            </div>
                            <span class="badge-soft bg-soft-success">10 Units</span>
                        </div>
                        <div class="inventory-list-item">
                            <div class="d-flex align-items-center">
                                <div class="brand-icon"><i class="fa-solid fa-mobile-alt"></i></div>
                                <span class="fw-semibold">Google</span>
                            </div>
                            <span class="badge-soft bg-soft-warning">03 Units</span>
                        </div>
                        <div class="inventory-list-item">
                            <div class="d-flex align-items-center">
                                <div class="brand-icon"><i class="fa-solid fa-microchip"></i></div>
                                <span class="fw-semibold">Xiaomi</span>
                            </div>
                            <span class="badge-soft bg-soft-success">45 Units</span>
                        </div>
                        <div class="inventory-list-item">
                            <div class="d-flex align-items-center text-danger">
                                <div class="brand-icon"><i class="fa fa-triangle-exclamation"></i></div>
                                <span class="fw-semibold">Huawei</span>
                            </div>
                            <span class="badge-soft bg-soft-danger">Critical Stock</span>
                        </div>
                    </div>
                    <button class="btn btn-premium w-100 shadow-sm">
                        <i class="fa fa-file-export me-2"></i> Export Inventory Report
                    </button>
                </div>
            </div>
        </div>
        @endif
    </div>
</div>
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    $(document).ready(function() {
        // SUPER ADMIN CHART (Monthly)
        const superAdminChart = document.getElementById('superAdminSalesChart');
        if (superAdminChart) {
            const ctxSuper = superAdminChart.getContext('2d');
            new Chart(ctxSuper, {
                type: 'line',
                data: {
                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
                    datasets: [{
                        label: 'Platform Revenue',
                        data: [45000, 52000, 48000, 70000, 85000, 92000],
                        borderColor: '#8b5cf6',
                        backgroundColor: 'rgba(139, 92, 246, 0.1)',
                        fill: true,
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false
                }
            });
        }

        const salesChart = document.getElementById('salesChart');
        if (salesChart) {
            const ctx = salesChart.getContext('2d');

            // Create a high-end gradient
            const gradient = ctx.createLinearGradient(0, 0, 0, 350);
            gradient.addColorStop(0, 'rgba(37, 99, 235, 0.4)');
            gradient.addColorStop(1, 'rgba(37, 99, 235, 0.01)');

            new Chart(ctx, {
                type: 'line', // Changed to Line for a more premium look
                data: {
                    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    datasets: [{
                        label: 'Revenue',
                        data: [1200, 1900, 3000, 5000, 2400, 3500, 4200],
                        borderColor: '#2563eb',
                        borderWidth: 3,
                        pointBackgroundColor: '#fff',
                        pointBorderColor: '#2563eb',
                        pointBorderWidth: 2,
                        pointHoverRadius: 6,
                        tension: 0.4, // Smooth curves
                        fill: true,
                        backgroundColor: gradient
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: '#1e293b',
                            padding: 12,
                            titleFont: {
                                size: 14,
                                weight: '600'
                            },
                            cornerRadius: 8
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: '#f1f5f9',
                                drawBorder: false
                            },
                            ticks: {
                                color: '#94a3b8',
                                font: {
                                    size: 12
                                }
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                color: '#94a3b8',
                                font: {
                                    size: 12
                                }
                            }
                        }
                    }
                }
            });
        }
    });
</script>
@endpush
@endsection