@extends('layouts.app')

@section('title', 'Dashboard - ERP System')

@push('styles')
<style>
    /* Stats Grid */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1.5rem;
        margin-bottom: 3rem;
    }

    .stat-card {
        background: var(--white);
        border-radius: 12px;
        padding: 1.75rem 1.5rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }

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

    .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }

    .stat-icon.purple {
        background: rgba(91, 95, 237, 0.15);
        color: var(--purple);
    }

    .stat-icon.green {
        background: rgba(16, 185, 129, 0.15);
        color: var(--green);
    }

    .stat-icon.orange {
        background: rgba(245, 158, 11, 0.15);
        color: var(--orange);
    }

    .stat-icon.red {
        background: rgba(239, 68, 68, 0.15);
        color: var(--red);
    }

    .stat-label {
        color: var(--gray);
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
        font-weight: 500;
    }

    .stat-value {
        font-size: 2rem;
        font-weight: 700;
        color: var(--dark);
    }

    /* Modules Grid */
    .modules-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }

    .module-card {
        background: var(--white);
        border-radius: 12px;
        padding: 1.75rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .module-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
    }

    .module-card.purple::before {
        background: var(--purple);
    }

    .module-card.green::before {
        background: var(--green);
    }

    .module-card.orange::before {
        background: var(--orange);
    }

    .module-card.red::before {
        background: var(--red);
    }

    .module-card.blue::before {
        background: #3b82f6;
    }

    .module-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }

    .module-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        margin-bottom: 1.25rem;
    }

    .module-card.purple .module-icon {
        background: rgba(91, 95, 237, 0.15);
        color: var(--purple);
    }

    .module-card.green .module-icon {
        background: rgba(16, 185, 129, 0.15);
        color: var(--green);
    }

    .module-card.orange .module-icon {
        background: rgba(245, 158, 11, 0.15);
        color: var(--orange);
    }

    .module-card.red .module-icon {
        background: rgba(239, 68, 68, 0.15);
        color: var(--red);
    }

    .module-card.blue .module-icon {
        background: rgba(59, 130, 246, 0.15);
        color: #3b82f6;
    }

    .module-title {
        font-size: 1.125rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: var(--dark);
    }

    .module-desc {
        color: var(--gray);
        font-size: 0.875rem;
        margin-bottom: 1.5rem;
    }

    .module-stats {
        display: flex;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
        padding-top: 1rem;
        border-top: 1px solid #F3F4F6;
    }

    .module-stat {
        flex: 1;
    }

    .module-stat-label {
        font-size: 0.75rem;
        color: var(--light-gray);
        margin-bottom: 0.25rem;
        font-weight: 500;
    }

    .module-stat-value {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--dark);
    }

    .page-title {
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--dark);
        margin-bottom: 0.5rem;
    }

    .section-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--dark);
        margin-bottom: 1.5rem;
    }

    /* Quick Actions Grid */
    .quick-actions-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        margin-bottom: 3rem;
    }

    .quick-action-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 16px;
        padding: 2.5rem 2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 200px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        text-decoration: none;
        color: white;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .quick-action-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.1);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .quick-action-card:hover::before {
        opacity: 1;
    }

    .quick-action-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    }

    .quick-action-card.purple {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .quick-action-card.green {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    }

    .quick-action-card.orange {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    }

    .quick-action-card.blue {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    }

    .quick-action-card.red {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    }

    .quick-action-card.teal {
        background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    }

    .quick-action-icon {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.2);
        color: white;
        transition: all 0.3s ease;
        flex-shrink: 0;
        margin-bottom: 1.5rem;
    }

    .quick-action-card:hover .quick-action-icon {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.1);
    }

    .quick-action-info {
        position: relative;
        z-index: 1;
    }

    .quick-action-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: white;
        margin-bottom: 0.5rem;
    }

    .quick-action-desc {
        font-size: 0.875rem;
        color: rgba(255, 255, 255, 0.9);
        line-height: 1.5;
    }

    @media (max-width: 768px) {
        .stats-grid,
        .modules-grid {
            grid-template-columns: 1fr;
        }

        .quick-actions-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 480px) {
        .quick-actions-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
@endpush

@section('content')
<div class="container">
    <!-- Stats Section -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon purple">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                    <circle cx="9" cy="7" r="4"></circle>
                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                </svg>
            </div>
            <div class="stat-label">Team Leaders</div>
            <div class="stat-value">{{ $stats['total_team_leaders'] }}</div>
        </div>

        <div class="stat-card">
            <div class="stat-icon green">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="10"></circle>
                    <circle cx="12" cy="12" r="3"></circle>
                </svg>
            </div>
            <div class="stat-label">Active Agents</div>
            <div class="stat-value">{{ $stats['total_agents'] }}</div>
        </div>

        <div class="stat-card">
            <div class="stat-icon orange">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                    <polyline points="9 22 9 12 15 12 15 22"></polyline>
                </svg>
            </div>
            <div class="stat-label">Active Shops</div>
            <div class="stat-value">{{ $stats['total_shops'] }}</div>
        </div>

        <div class="stat-card">
            <div class="stat-icon red">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                    <circle cx="12" cy="7" r="4"></circle>
                </svg>
            </div>
            <div class="stat-label">Total Users</div>
            <div class="stat-value">{{ $stats['total_users'] }}</div>
        </div>
    </div>

    <!-- Quick Actions Section -->
    <div class="section">
        <h2 class="section-title">Quick Actions</h2>
        <div class="quick-actions-grid">
            <a href="/products/create" class="quick-action-card purple">
                <div>
                    <div class="quick-action-icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M12 5v14M5 12h14"/>
                        </svg>
                    </div>
                    <div class="quick-action-info">
                        <div class="quick-action-title">Add Product</div>
                        <div class="quick-action-desc">Add new item to catalog</div>
                    </div>
                </div>
            </a>

            <a href="/stock/add" class="quick-action-card green">
                <div>
                    <div class="quick-action-icon">
                       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
                            <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
                            <line x1="12" y1="22.08" x2="12" y2="12"></line>
                        </svg>
                    </div>
                    <div class="quick-action-info">
                        <div class="quick-action-title">Update Stock</div>
                        <div class="quick-action-desc">Adjust inventory levels</div>
                    </div>
                </div>
            </a>

            <a href="/agents/create" class="quick-action-card orange">
                <div>
                    <div class="quick-action-icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                            <circle cx="8.5" cy="7" r="4"></circle>
                            <line x1="20" y1="8" x2="20" y2="14"></line>
                            <line x1="23" y1="11" x2="17" y2="11"></line>
                        </svg>
                    </div>
                    <div class="quick-action-info">
                        <div class="quick-action-title">Add Agent</div>
                        <div class="quick-action-desc">Register new field agent</div>
                    </div>
                </div>
            </a>
        </div>
    </div>

    <!-- Modules Section -->
    <div class="section">
        <h2 class="section-title">ERP Modules</h2>

        <div class="modules-grid">
            <!-- Owner Module -->
            <div class="module-card purple">
                <div class="module-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
                        <polyline points="2 17 12 22 22 17"></polyline>
                        <polyline points="2 12 12 17 22 12"></polyline>
                    </svg>
                </div>
                <h3 class="module-title">Owner Dashboard</h3>
                <p class="module-desc">Full system control and analytics</p>

                <div class="module-stats">
                    <div class="module-stat">
                        <div class="module-stat-label">Total Revenue</div>
                        <div class="module-stat-value">Rs. {{ number_format($stats['total_revenue'], 2) }}</div>
                    </div>
                    <div class="module-stat">
                        <div class="module-stat-label">Outstanding</div>
                        <div class="module-stat-value" style="font-size: 0.875rem;">Rs.
                            {{ number_format($stats['outstanding_balance'], 2) }}</div>
                    </div>
                </div>

                <a href="/dashboard/analytics" class="btn btn-primary">View Analytics</a>
            </div>

            <!-- Team Leader Module -->
            <div class="module-card green">
                <div class="module-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                        <circle cx="9" cy="7" r="4"></circle>
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                    </svg>
                </div>
                <h3 class="module-title">Team Leaders</h3>
                <p class="module-desc">Manage team leaders and their regions</p>

                <div class="module-stats">
                    <div class="module-stat">
                        <div class="module-stat-label">Total</div>
                        <div class="module-stat-value">{{ $stats['total_team_leaders'] }}</div>
                    </div>
                    <div class="module-stat">
                        <div class="module-stat-label">Active</div>
                        <div class="module-stat-value">{{ $stats['total_team_leaders'] }}</div>
                    </div>
                </div>

                <a href="/team-leaders" class="btn btn-primary">Manage</a>
            </div>

            <!-- Agent Module -->
            <div class="module-card orange">
                <div class="module-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="12" cy="12" r="10"></circle>
                        <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                </div>
                <h3 class="module-title">Agents</h3>
                <p class="module-desc">Field agents and their activities</p>

                <div class="module-stats">
                    <div class="module-stat">
                        <div class="module-stat-label">Total</div>
                        <div class="module-stat-value">{{ $stats['total_agents'] }}</div>
                    </div>
                    <div class="module-stat">
                        <div class="module-stat-label">Active</div>
                        <div class="module-stat-value">{{ $stats['total_agents'] }}</div>
                    </div>
                </div>

                <a href="/agents" class="btn btn-primary">Manage</a>
            </div>

            <!-- Shop Module -->
            <div class="module-card red">
                <div class="module-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round">
                        <path d="M3 3h18v4H3V3z" />
                        <path d="M3 7l2 7h14l2-7" />
                        <path d="M5 14v7h4v-4h6v4h4v-7" />
                        <line x1="9" y1="21" x2="9" y2="17" />
                        <line x1="15" y1="21" x2="15" y2="17" />
                    </svg>
                </div>
                <h3 class="module-title">Shops</h3>
                <p class="module-desc">Manage shops and orders</p>

                <div class="module-stats">
                    <div class="module-stat">
                        <div class="module-stat-label">Total</div>
                        <div class="module-stat-value">{{ $stats['total_shops'] }}</div>
                    </div>
                    <div class="module-stat">
                        <div class="module-stat-label">Active</div>
                        <div class="module-stat-value">{{ $stats['total_shops'] }}</div>
                    </div>
                </div>

                <a href="/shops" class="btn btn-primary">Manage</a>
            </div>

            <!-- Stock Management Module -->
            <div class="module-card blue">
                <div class="module-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z">
                        </path>
                        <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
                        <line x1="12" y1="22.08" x2="12" y2="12"></line>
                    </svg>
                </div>
                <h3 class="module-title">Stock Management</h3>
                <p class="module-desc">Manage inventory and stock distribution</p>

                <div class="module-stats">
                    <div class="module-stat">
                        <div class="module-stat-label">Total Stock</div>
                        <div class="module-stat-value">{{ $stats['total_stock'] ?? 0 }}</div>
                    </div>
                    <div class="module-stat">
                        <div class="module-stat-label">Available</div>
                        <div class="module-stat-value">{{ $stats['available_stock'] ?? 0 }}</div>
                    </div>
                </div>

                <a href="/stock" class="btn btn-primary">Manage</a>
            </div>
        </div>
    </div>
</div>
@endsection