@extends('layouts.app')

@section('title', 'Employee Dashboard')

@section('nav-items')
    <li><a href="{{ route('employee.dashboard') }}">Dashboard</a></li>
    <li><a href="{{ route('employee.requests.index') }}">My Requests</a></li>
    <li><a href="{{ route('employee.media.index') }}">Media Library</a></li>
    <li><a href="{{ route('employee.brand-assets.index') }}">Brand Assets</a></li>
    <li><a href="{{ route('employee.giveaways.index') }}">Giveaways</a></li>
@endsection

@section('styles')
<style>
    .stats-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .stat-card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        border: 1px solid var(--gray-200);
    }

    .stat-value {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--primary);
        margin-bottom: 0.5rem;
    }

    .stat-label {
        color: var(--gray-600);
        font-size: 0.875rem;
    }

    .actions-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .action-card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        border: 1px solid var(--gray-200);
        transition: all 0.2s;
        text-decoration: none;
        color: inherit;
        display: block;
    }

    .action-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        border-color: var(--primary);
    }

    .action-icon {
        width: 48px;
        height: 48px;
        background: rgba(227, 27, 35, 0.1);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
    }

    .action-icon svg {
        width: 24px;
        height: 24px;
        color: var(--primary);
    }

    .action-title {
        font-size: 1.125rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .action-desc {
        font-size: 0.875rem;
        color: var(--gray-600);
    }

    .request-list {
        list-style: none;
        padding: 0;
    }

    .request-item {
        padding: 1rem;
        border-bottom: 1px solid var(--gray-200);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .request-item:last-child {
        border-bottom: none;
    }

    .request-info h4 {
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
    }

    .request-meta {
        font-size: 0.75rem;
        color: var(--gray-500);
    }

    .status-badge {
        padding: 0.25rem 0.75rem;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    .status-pending {
        background: rgba(245, 158, 11, 0.1);
        color: var(--warning);
    }

    .status-in_progress {
        background: rgba(59, 130, 246, 0.1);
        color: var(--info);
    }

    .status-completed {
        background: rgba(5, 150, 105, 0.1);
        color: var(--success);
    }

    @media (max-width: 768px) {
        .stats-row {
            grid-template-columns: 1fr 1fr;
        }
        .actions-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
@endsection

@section('content')
<h1 style="font-size: 2rem; font-weight: 700; margin-bottom: 2rem; color: var(--gray-900);">
    Welcome back, {{ auth()->user()->name }}!
</h1>

<!-- Stats -->
<div class="stats-row">
    <div class="stat-card">
        <div class="stat-value">{{ $stats['my_requests'] }}</div>
        <div class="stat-label">Total Requests</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ $stats['pending_requests'] }}</div>
        <div class="stat-label">Pending</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ $stats['my_media'] }}</div>
        <div class="stat-label">Media Uploads</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ $stats['approved_media'] }}</div>
        <div class="stat-label">Approved</div>
    </div>
</div>

<!-- Quick Actions -->
<h2 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--gray-900);">
    Quick Actions
</h2>

<div class="actions-grid">
    <a href="{{ route('employee.requests.create') }}" class="action-card">
        <div class="action-icon">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
        </div>
        <div class="action-title">New Request</div>
        <div class="action-desc">Submit a marketing request for artwork, video, event, or exhibition</div>
    </a>

    <a href="{{ route('employee.media.create') }}" class="action-card">
        <div class="action-icon">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
            </svg>
        </div>
        <div class="action-title">Upload Media</div>
        <div class="action-desc">Upload photos and videos to the media library</div>
    </a>

    <a href="{{ route('employee.brand-assets.index') }}" class="action-card">
        <div class="action-icon">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
            </svg>
        </div>
        <div class="action-title">Brand Assets</div>
        <div class="action-desc">Access PowerPoint templates and brand guidelines</div>
    </a>

    <a href="{{ route('employee.giveaways.index') }}" class="action-card">
        <div class="action-icon">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"/>
            </svg>
        </div>
        <div class="action-title">Giveaways</div>
        <div class="action-desc">Browse available giveaways with pricing and MOQ</div>
    </a>
</div>

<!-- Recent Requests -->
<div class="card">
    <div class="card-header">Recent Requests</div>
    <ul class="request-list">
        @forelse($recentRequests as $request)
            <li class="request-item">
                <div class="request-info">
                    <h4>{{ $request->title }}</h4>
                    <div class="request-meta">
                        {{ ucfirst($request->request_type) }} • {{ $request->created_at->diffForHumans() }}
                    </div>
                </div>
                <span class="status-badge status-{{ $request->status }}">
                    {{ str_replace('_', ' ', $request->status) }}
                </span>
            </li>
        @empty
            <li style="padding: 2rem; text-align: center; color: var(--gray-500);">
                No requests yet. <a href="{{ route('employee.requests.create') }}" style="color: var(--primary); text-decoration: none;">Create your first request</a>
            </li>
        @endforelse
    </ul>
    @if($recentRequests->count() > 0)
        <a href="{{ route('employee.requests.index') }}" class="btn btn-secondary" style="margin-top: 1rem; width: 100%;">
            View All Requests
        </a>
    @endif
</div>
@endsection