@extends('layouts.app')

@section('title', 'لوحة التحكم')

@section('content')
@if (!Auth::check())
    @php
        return redirect()->route('home')->send();
    @endphp
@endif

<style>
    .dashboard {
        padding: 3rem 0;
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
        min-height: calc(100vh - 100px);
        position: relative;
        overflow: hidden;
    }
    .dashboard::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 300px;
        background: linear-gradient(135deg, rgba(13, 110, 253, 0.05) 0%, rgba(220, 53, 69, 0.05) 100%);
        transform: skewY(-5deg);
        transform-origin: top left;
    }
    .dashboard-title {
        color: #2c3e50;
        font-size: 2.5rem;
        font-weight: 800;
        text-align: center;
        margin-bottom: 3.5rem;
        position: relative;
        padding-bottom: 1.5rem;
    }
    .dashboard-title:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 120px;
        height: 4px;
        background: linear-gradient(90deg, #0d6efd, #0dcaf0);
        border-radius: 2px;
        box-shadow: 0 2px 4px rgba(13, 110, 253, 0.2);
    }
    .dashboard-card {
        background: white;
        border-radius: 20px;
        border: none;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        position: relative;
        z-index: 1;
        backdrop-filter: blur(10px);
        box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
    }
    .dashboard-card:hover {
        transform: translateY(-12px) scale(1.02);
        box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1);
    }
    .dashboard-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--accent-color-start), var(--accent-color-end));
        z-index: 2;
        transition: height 0.3s ease;
    }
    .dashboard-card:hover::before {
        height: 8px;
    }
    .card-body {
        padding: 2.5rem 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 300px;
        position: relative;
        z-index: 2;
    }
    .dashboard-icon {
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 24px;
        margin-bottom: 1.75rem;
        background: linear-gradient(135deg, var(--accent-color-start) 0%, var(--accent-color-end) 100%);
        color: white;
        font-size: 2.25rem;
        transition: all 0.4s ease;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }
    .dashboard-card:hover .dashboard-icon {
        transform: scale(1.15) rotate(8deg);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        border-radius: 28px;
    }
    .card-title {
        font-size: 1.6rem;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 1.25rem;
        transition: color 0.3s ease;
    }
    .dashboard-card:hover .card-title {
        color: var(--accent-color-start);
    }
    .card-text {
        color: #6c757d;
        text-align: center;
        margin-bottom: 1.75rem;
        flex-grow: 1;
        font-size: 1.1rem;
        line-height: 1.6;
    }
    .dashboard-btn {
        padding: 0.875rem 2rem;
        border-radius: 50px;
        font-weight: 600;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        width: 85%;
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    .dashboard-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }
    .dashboard-btn::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 120%;
        height: 120%;
        background: rgba(255, 255, 255, 0.2);
        transform: translate(-50%, -50%) scale(0);
        border-radius: 50%;
        transition: transform 0.6s ease;
    }
    .dashboard-btn:hover::after {
        transform: translate(-50%, -50%) scale(1);
    }
    
    /* Card variations with enhanced gradients */
    .categories-card { 
        --accent-color-start: #0d6efd; 
        --accent-color-end: #0dcaf0; 
    }
    .products-card { 
        --accent-color-start: #198754; 
        --accent-color-end: #20c997; 
    }
    .orders-card { 
        --accent-color-start: #dc3545; 
        --accent-color-end: #fd7e14; 
    }
    .ads-card { 
        --accent-color-start: #ffc107; 
        --accent-color-end: #fd7e14; 
    }

    @media (max-width: 768px) {
        .dashboard {
            padding: 2rem 0;
        }
        .dashboard-title {
            font-size: 2rem;
            margin-bottom: 2.5rem;
        }
        .card-body {
            min-height: 280px;
            padding: 2rem 1.25rem;
        }
        .dashboard-icon {
            width: 70px;
            height: 70px;
            font-size: 2rem;
        }
        .card-title {
            font-size: 1.4rem;
        }
        .card-text {
            font-size: 1rem;
        }
        .dashboard-btn {
            width: 100%;
            padding: 0.75rem 1.5rem;
        }
    }
</style>

<div class="dashboard">
    <div class="container">
        <h1 class="dashboard-title">لوحة التحكم</h1>
        
        <div class="row g-4 justify-content-center">
            <!-- إدارة الأقسام -->
            <div class="col-md-6 col-lg-4">
                <div class="dashboard-card categories-card">
                    <div class="card-body">
                        <div class="dashboard-icon">
                            <i class="bi bi-grid-fill"></i>
                        </div>
                        <h4 class="card-title">إدارة الأقسام</h4>
                        <p class="card-text">إنشاء وتحرير وإدارة الأقسام في الموقع</p>
                        <a href="{{ route('categories.index') }}" class="dashboard-btn btn btn-outline-primary">
                            الدخول إلى الأقسام
                        </a>
                    </div>
                </div>
            </div>

            <!-- إدارة المنتجات -->
            <div class="col-md-6 col-lg-4">
                <div class="dashboard-card products-card">
                    <div class="card-body">
                        <div class="dashboard-icon">
                            <i class="bi bi-box-seam-fill"></i>
                        </div>
                        <h4 class="card-title">إدارة المنتجات</h4>
                        <p class="card-text">إضافة وتحرير وإدارة المنتجات في المتجر</p>
                        <a href="{{ route('items.index') }}" class="dashboard-btn btn btn-outline-success">
                            الدخول إلى المنتجات
                        </a>
                    </div>
                </div>
            </div>

            <!-- إدارة الطلبات -->
            <div class="col-md-6 col-lg-4">
                <div class="dashboard-card orders-card">
                    <div class="card-body">
                        <div class="dashboard-icon">
                            <i class="bi bi-cart-check-fill"></i>
                        </div>
                        <h4 class="card-title">إدارة الطلبات</h4>
                        <p class="card-text">متابعة وإدارة طلبات العملاء في المتجر</p>
                        <a href="{{ route('orders.index') }}" class="dashboard-btn btn btn-outline-danger">
                            الدخول إلى الطلبات
                        </a>
                    </div>
                </div>
            </div>

            <!-- إدارة الإعلانات -->
            <div class="col-md-6 col-lg-4">
                <div class="dashboard-card ads-card">
                    <div class="card-body">
                        <div class="dashboard-icon">
                            <i class="bi bi-megaphone-fill"></i>
                        </div>
                        <h4 class="card-title">إدارة الإعلانات</h4>
                        <p class="card-text">إدارة وتحديث إعلانات الصفحة الرئيسية</p>
                        <a href="{{ route('carousel.index') }}" class="dashboard-btn btn btn-outline-warning">
                            الدخول إلى الإعلانات
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection