@extends('layouts.app')

@section('title', __('general.dashboard') . ' - ' . __('general.company_name'))

@section('content')
    <section style="padding: 2rem 0; min-height: 80vh;">
        <div class="container">
            <div class="glass-morphism" style="padding: 3rem; margin-bottom: 2rem;">
                <div class="text-center">
                    <h1
                        style="font-family: 'Playfair Display', serif; font-size: 2.5rem; color: var(--primary-gold); margin-bottom: 1rem;">
                        {{ __('Welcome back') }}, {{ auth()->user()->first_name }}!
                    </h1>
                    <p style="font-size: 1.1rem; opacity: 0.8;">
                        {{ __('Manage your bookings and profile from your personal dashboard') }}
                    </p>
                </div>
            </div>

            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;">
                <!-- Profile Card -->
                <div class="glass-card">
                    <div style="display: flex; align-items: center; margin-bottom: 1.5rem;">
                        <i class="fas fa-user-circle"
                            style="font-size: 2rem; color: var(--primary-gold); margin-right: 1rem;"></i>
                        <h3 style="color: var(--primary-gold);">{{ __('general.profile') }}</h3>
                    </div>
                    <p style="opacity: 0.8; margin-bottom: 1rem;">
                        {{ __('Manage your personal information and preferences') }}</p>
                    <div style="margin-bottom: 1rem;">
                        <strong style="color: var(--primary-gold);">{{ __('general.full_name') }}:</strong>
                        <span style="margin-left: 0.5rem;">{{ auth()->user()->full_name }}</span>
                    </div>
                    <div style="margin-bottom: 1rem;">
                        <strong style="color: var(--primary-gold);">{{ __('general.email') }}:</strong>
                        <span style="margin-left: 0.5rem;">{{ auth()->user()->email }}</span>
                    </div>
                    <div style="margin-bottom: 1.5rem;">
                        <strong style="color: var(--primary-gold);">{{ __('general.language') }}:</strong>
                        <span style="margin-left: 0.5rem;">
                            {{ auth()->user()->preferred_language === 'ar' ? __('general.arabic') : __('general.english') }}
                        </span>
                    </div>
                    <a href="#" class="btn-secondary" style="padding: 8px 20px; font-size: 0.9rem;">
                        {{ __('general.edit') }} {{ __('general.profile') }}
                    </a>
                </div>

                <!-- Bookings Card -->
                <div class="glass-card">
                    <div style="display: flex; align-items: center; margin-bottom: 1.5rem;">
                        <i class="fas fa-calendar-alt"
                            style="font-size: 2rem; color: var(--primary-gold); margin-right: 1rem;"></i>
                        <h3 style="color: var(--primary-gold);">{{ __('general.bookings') }}</h3>
                    </div>
                    <p style="opacity: 0.8; margin-bottom: 1.5rem;">{{ __('View and manage your car rental bookings') }}</p>
                    <div style="text-align: center; padding: 2rem 0;">
                        <i class="fas fa-car"
                            style="font-size: 3rem; color: var(--primary-gold); opacity: 0.5; margin-bottom: 1rem;"></i>
                        <p style="opacity: 0.6;">{{ __('No bookings yet') }}</p>
                        <p style="opacity: 0.6; font-size: 0.9rem; margin-bottom: 1.5rem;">
                            {{ __('Start by booking your first luxury vehicle') }}</p>
                    </div>
                    <div style="display: flex; gap: 1rem;">
                        <a href="{{ route('bookings.create') }}" class="btn-primary"
                            style="padding: 8px 20px; font-size: 0.9rem; flex: 1; text-align: center;">
                            {{ __('general.book_now') }}
                        </a>
                        <a href="{{ route('bookings.index') }}" class="btn-secondary"
                            style="padding: 8px 20px; font-size: 0.9rem; flex: 1; text-align: center;">
                            {{ __('View Bookings') }}
                        </a>
                    </div>
                </div>

                <!-- Quick Actions Card -->
                <div class="glass-card">
                    <div style="display: flex; align-items: center; margin-bottom: 1.5rem;">
                        <i class="fas fa-bolt" style="font-size: 2rem; color: var(--primary-gold); margin-right: 1rem;"></i>
                        <h3 style="color: var(--primary-gold);">{{ __('Quick Actions') }}</h3>
                    </div>
                    <div style="display: flex; flex-direction: column; gap: 1rem;">
                        <a href="{{ route('home') }}#vehicles" class="btn-secondary"
                            style="text-align: center; padding: 12px;">
                            <i class="fas fa-car" style="margin-right: 0.5rem;"></i>
                            {{ __('Browse Vehicles') }}
                        </a>
                        <a href="#" class="btn-secondary" style="text-align: center; padding: 12px;">
                            <i class="fas fa-phone" style="margin-right: 0.5rem;"></i>
                            {{ __('general.contact') }} {{ __('Support') }}
                        </a>
                        <a href="#" class="btn-secondary" style="text-align: center; padding: 12px;">
                            <i class="fas fa-file-alt" style="margin-right: 0.5rem;"></i>
                            {{ __('View Terms') }}
                        </a>
                    </div>
                </div>
            </div>

            <!-- Recent Activity Section -->
            <div class="glass-morphism" style="padding: 3rem; margin-top: 3rem;">
                <h2
                    style="font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--primary-gold); margin-bottom: 2rem; text-align: center;">
                    {{ __('Recent Activity') }}
                </h2>
                <div style="text-align: center; padding: 2rem 0;">
                    <i class="fas fa-history"
                        style="font-size: 3rem; color: var(--primary-gold); opacity: 0.5; margin-bottom: 1rem;"></i>
                    <p style="opacity: 0.6;">{{ __('No recent activity') }}</p>
                    <p style="opacity: 0.6; font-size: 0.9rem;">
                        {{ __('Your booking history and activities will appear here') }}</p>
                </div>
            </div>
        </div>
    </section>

    @push('styles')
        <style>
            .glass-card a {
                text-decoration: none;
            }

            .glass-card a:hover {
                text-decoration: none;
            }

            @media (max-width: 768px) {
                .glass-morphism {
                    padding: 2rem !important;
                }

                .glass-card {
                    padding: 1.5rem !important;
                }
            }
        </style>
    @endpush
@endsection