@extends('admin.layouts.app')
@section('title', 'Admin Profile')
@section('heading', 'Admin Profile')

@section('content')
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 900px;">
    {{-- Profile Settings --}}
    <div class="card">
        <h3 style="margin-bottom: 1.25rem;">
            <i class="fa-solid fa-user"></i> Profile Information
        </h3>

        @if(session('success'))
            <div class="alert alert-success" style="margin-bottom: 1rem;">
                <i class="fa-solid fa-circle-check"></i> {{ session('success') }}
            </div>
        @endif

        <form method="POST" action="{{ route('admin.profile.update') }}">
            @csrf

            <div class="form-field">
                <label>Admin Name</label>
                <input type="text" name="name" value="{{ old('name', $admin->name) }}" required>
            </div>

            <div class="form-field" style="margin-top: 1rem;">
                <label>Email Address</label>
                <input type="email" name="email" value="{{ old('email', $admin->email) }}" required>
            </div>

            <div class="form-field" style="margin-top: 1rem;">
                <label>Account Type</label>
                <div style="padding: 0.7rem 1rem; background: #f1f5f9; border-radius: 10px; color: #6366f1; font-weight: 600;">
                    <i class="fa-solid fa-shield-halved"></i> Administrator
                </div>
            </div>

            <div class="form-field" style="margin-top: 1rem;">
                <label>Member Since</label>
                <div style="padding: 0.7rem 1rem; background: #f1f5f9; border-radius: 10px; color: #64748b;">
                    {{ $admin->created_at->format('F d, Y') }}
                </div>
            </div>

            <button type="submit" class="adm-btn adm-btn-primary" style="margin-top: 1.25rem; width: 100%; justify-content: center;">
                <i class="fa-solid fa-floppy-disk"></i> Save Changes
            </button>
        </form>
    </div>

    {{-- Change Password --}}
    <div class="card">
        <h3 style="margin-bottom: 1.25rem;">
            <i class="fa-solid fa-lock"></i> Change Password
        </h3>

        <form method="POST" action="{{ route('admin.profile.update') }}">
            @csrf

            <div class="form-field">
                <label>Current Password <span class="req">*</span></label>
                <input type="password" name="current_password" required placeholder="Enter current password">
            </div>

            <div class="form-field" style="margin-top: 1rem;">
                <label>New Password <span class="req">*</span></label>
                <input type="password" name="new_password" required minlength="6" placeholder="Enter new password (min 6 chars)">
            </div>

            <div class="form-field" style="margin-top: 1rem;">
                <label>Confirm New Password <span class="req">*</span></label>
                <input type="password" name="new_password_confirmation" required minlength="6" placeholder="Confirm new password">
            </div>

            @if($errors->any())
                <div class="alert alert-error" style="margin-top: 1rem;">
                    <i class="fa-solid fa-triangle-exclamation"></i>
                    {{ $errors->first() }}
                </div>
            @endif

            <button type="submit" class="adm-btn adm-btn-primary" style="margin-top: 1.25rem; width: 100%; justify-content: center;">
                <i class="fa-solid fa-key"></i> Update Password
            </button>
        </form>
    </div>
</div>

{{-- Admin Suggestions --}}
<div class="card" style="max-width: 900px;">
    <h3 style="margin-bottom: 1rem;">
        <i class="fa-solid fa-lightbulb"></i> Suggested Admin Features
    </h3>

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;">
        <div style="padding: 1rem; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0;">
            <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem;">
                <div style="width: 36px; height: 36px; background: #dbeafe; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #2563eb;">
                    <i class="fa-solid fa-chart-line"></i>
                </div>
                <strong style="color: #1e293b;">Sales Analytics</strong>
            </div>
            <p style="font-size: 0.85rem; color: #64748b;">Track daily/weekly/monthly sales, revenue reports, and growth trends.</p>
        </div>

        <div style="padding: 1rem; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0;">
            <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem;">
                <div style="width: 36px; height: 36px; background: #d1fae5; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #059669;">
                    <i class="fa-solid fa-boxes-packing"></i>
                </div>
                <strong style="color: #1e293b;">Inventory Management</strong>
            </div>
            <p style="font-size: 0.85rem; color: #64748b;">Track stock levels, low stock alerts, and automatic inventory updates.</p>
        </div>

        <div style="padding: 1rem; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0;">
            <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem;">
                <div style="width: 36px; height: 36px; background: #fef3c7; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #d97706;">
                    <i class="fa-solid fa-percentage"></i>
                </div>
                <strong style="color: #1e293b;">Discount Coupons</strong>
            </div>
            <p style="font-size: 0.85rem; color: #64748b;">Create and manage promotional codes, percentage/fixed discounts.</p>
        </div>

        <div style="padding: 1rem; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0;">
            <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem;">
                <div style="width: 36px; height: 36px; background: #e0e7ff; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #4f46e5;">
                    <i class="fa-solid fa-envelope"></i>
                </div>
                <strong style="color: #1e293b;">Email Campaigns</strong>
            </div>
            <p style="font-size: 0.85rem; color: #64748b;">Send newsletters, promotional emails to subscribers.</p>
        </div>

        <div style="padding: 1rem; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0;">
            <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem;">
                <div style="width: 36px; height: 36px; background: #fce7f3; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #db2777;">
                    <i class="fa-solid fa-comments"></i>
                </div>
                <strong style="color: #1e293b;">Live Chat Support</strong>
            </div>
            <p style="font-size: 0.85rem; color: #64748b;">Real-time chat with customers for support.</p>
        </div>

        <div style="padding: 1rem; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0;">
            <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem;">
                <div style="width: 36px; height: 36px; background: #fed7aa; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #ea580c;">
                    <i class="fa-solid fa-file-invoice"></i>
                </div>
                <strong style="color: #1e293b;">Order Reports</strong>
            </div>
            <p style="font-size: 0.85rem; color: #64748b;">Export orders to CSV/PDF, detailed order history.</p>
        </div>
    </div>
</div>
@endsection