@extends('layouts.app')

@section('title', 'Account Status - United Motors')

@section('styles')
<link rel="stylesheet" href="{{ asset('assets/css/check-status.css') }}">
@endsection

@section('content')
    <div class="container py-5">
        <!-- Header Section -->
        <div class="text-center mb-4 mt-1">
            <h2 class="fw-bold text-dark mb-1" style="font-size: 1.75rem;">Welcome, John</h2>
            <p class="text-muted" style="font-size: 0.95rem;">Account Status Dashboard</p>
        </div>

        <!-- Dashboard Main Card -->
        <div class="status-card border-0 overflow-hidden">
            <div class="row g-0">
                <!-- Left Sidebar: Status Summary -->
                <div class="col-lg-4 status-sidebar">
                    <div class="sidebar-content text-white">
                        <div class="status-icon-wrapper">
                            <i class="bi bi-clock"></i>
                        </div>
                        <h2 class="mb-2">Under Review</h2>
                        <p class="opacity-75 mb-4 text-center" style="font-size: 0.85rem;">We are reviewing your profile.<br>This usually takes a short while.</p>
                        <span class="status-badge-yellow">PENDING</span>
                    </div>
                </div>

                <!-- Right Section: Details & Actions -->
                <div class="col-lg-8 status-main p-4 p-md-5">
                    <!-- Warning Banner -->
                    <div class="alert-warning-custom d-flex gap-3 mb-5">
                        <div class="flex-shrink-0">
                            <i class="bi bi-exclamation-circle-fill fs-5" style="color: #b45309;"></i>
                        </div>
                        <div>
                            <h6 class="fw-bold mb-1" style="color: #92400e; font-size: 0.95rem;">Under Review</h6>
                            <p class="mb-0" style="color: #92400e; opacity: 0.9; font-size: 0.82rem;">Your application is being reviewed. This typically takes 24-48 hours. Please check back later or contact support if you have questions.</p>
                        </div>
                    </div>

                    <!-- Account Details Grid -->
                    <div class="info-section">
                        <h6 class="fw-bold mb-4" style="font-size: 1rem;">Account Information</h6>
                        
                        <div class="row g-3">
                            <!-- Email -->
                            <div class="col-md-7">
                                <div class="info-box">
                                    <label>Email</label>
                                    <div class="value">john.doe@example.com</div>
                                </div>
                            </div>
                            
                            <!-- Company -->
                            <div class="col-md-5">
                                <div class="info-box">
                                    <label>Company</label>
                                    <div class="value">John Enterprises</div>
                                </div>
                            </div>
                            
                            <!-- Mobile -->
                            <div class="col-md-7">
                                <div class="info-box">
                                    <label>Mobile</label>
                                    <div class="value">+91 98765 43210</div>
                                </div>
                            </div>
                            
                            <!-- Internal Status -->
                            <div class="col-md-5">
                                <div class="info-box">
                                    <label>Status</label>
                                    <div class="value">
                                        <span class="badge" style="background-color: #fef3c7; color: #92400e; padding: 0.5rem 1rem; font-size: 0.75rem;">PENDING</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="action-grid">
                        <button class="btn btn-dark-custom">Refresh Status</button>
                        <a href="{{ url('/logout') }}" class="btn btn-outline-custom">Sign Out</a>
                        <button class="btn btn-outline-custom">Contact Support</button>
                        <a href="{{ url('/dashboard') }}" class="btn btn-primary-custom">Go to Home</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Footer Note -->
        <div class="text-center mt-5 text-muted small opacity-50">
            <p>© 2026 UNITED MOTORS. All rights reserved.</p>
        </div>
    </div>
@endsection