@extends('layouts.app')

@section('title', 'My Account - Additional Design')

@section('styles')
<style>
    h1 {
        font-family: 'Abril Fatface', cursive;
        font-size: 2.5rem;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
    }

    .page-intro {
        margin-bottom: var(--spacing-lg);
    }

    .page-intro p {
        color: var(--text-secondary);
        font-size: 1.1rem;
    }

    .account-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
    }

    .card {
        border-radius: 20px;
    }

    .card h2 {
        font-family: 'Abril Fatface', cursive;
        font-size: 1.8rem;
        color: var(--text-primary);
        margin-bottom: var(--spacing-md);
    }

    .card h3 {
        font-family: var(--font-sans);
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: var(--spacing-md);
    }

    .form-group {
        margin-bottom: var(--spacing-md);
    }

    .form-group label {
        display: block;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
    }

    .form-group input,
    .form-group textarea {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        font-size: 1rem;
        font-family: inherit;
        background-color: var(--bg-primary);
    }

    .form-group input:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: var(--text-primary);
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
    }

    .account-type {
        padding: var(--spacing-sm) 0;
    }

    .badge {
        display: inline-block;
        padding: 0.4rem 1rem;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .badge-admin {
        background-color: var(--accent-pink);
        color: white;
    }

    .badge-customer {
        background-color: var(--accent-light);
        color: var(--text-primary);
    }

    .sidebar-card {
        margin-bottom: var(--spacing-lg);
    }

    .sidebar-card ul {
        list-style: none;
        padding: 0;
    }

    .sidebar-card li {
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--border-color);
    }

    .sidebar-card li:last-child {
        border-bottom: none;
    }

    .sidebar-card a {
        color: var(--text-primary);
        font-weight: 500;
        transition: var(--transition);
    }

    .sidebar-card a:hover {
        color: var(--accent-dark);
    }

    .help-box {
        border-radius: 20px;
    }

    .help-box h3 {
        margin-bottom: 0.5rem;
    }

    .help-box p {
        font-size: 0.95rem;
        margin-bottom: var(--spacing-sm);
    }

    .help-box a {
        font-weight: 600;
        color: var(--accent-dark);
    }

    .alert {
        padding: var(--spacing-sm);
        border-radius: 4px;
        margin-bottom: var(--spacing-lg);
        font-size: 0.9rem;
    }

    .alert-success {
        background-color: #e8f5e9;
        border: 1px solid #c8e6c9;
        color: #2e7d32;
    }

    .btn-logout {
        color: #c53030;
        font-weight: 600;
        cursor: pointer;
        padding: 0;
        border: none;
        background: none;
        transition: var(--transition);
    }

    .btn-logout:hover {
        color: #a02424;
    }

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

        h1 {
            font-size: 2rem;
        }

        .card h2 {
            font-size: 1.5rem;
        }
    }
</style>
@endsection

@section('content')
<div class="container">
    <div class="page-intro">
        <h1>My Account</h1>
        <p>Manage your profile and view your orders</p>
    </div>

    @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    <div class="account-grid">
        <!-- Profile Section -->
        <div>
            <div class="card">
                <h2>Profile Information</h2>

                <form action="{{ route('my-account.update') }}" method="POST">
                    @csrf

                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" id="name" name="name" value="{{ auth()->user()->name }}" required>
                        @error('name')
                            <p style="color: #c53030; font-size: 0.9rem; margin-top: 0.25rem;">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" id="email" name="email" value="{{ auth()->user()->email }}" required>
                        @error('email')
                            <p style="color: #c53030; font-size: 0.9rem; margin-top: 0.25rem;">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="form-group account-type">
                        <label>Account Type</label>
                        @if (auth()->user()->is_admin)
                            <span class="badge badge-admin">Admin</span>
                        @else
                            <span class="badge badge-customer">Customer</span>
                        @endif
                    </div>

                    <button type="submit" class="btn">Update Profile</button>
                </form>
            </div>
        </div>

        <!-- Sidebar -->
        <div>
            <div class="card sidebar-card">
                <h3>Quick Links</h3>
                <ul>
                    <li>
                        <a href="{{ route('my-orders') }}">📦 My Orders</a>
                    </li>
                    <li>
                        <a href="{{ route('custom-orders.create') }}">➕ New Custom Order</a>
                    </li>
                </ul>
            </div>

            <div class="card--pink help-box">
                <h3>Need Help?</h3>
                <p>Contact us for assistance with your account or orders.</p>
                <a href="mailto:support@example.com">support@example.com</a>
            </div>
        </div>
    </div>

    <div style="text-align: center; padding: var(--spacing-lg) 0; border-top: 1px solid var(--border-color);">
        <form action="{{ route('logout') }}" method="POST" style="display: inline;">
            @csrf
            <button type="submit" class="btn-logout">Sign Out</button>
        </form>
    </div>
</div>
@endsection