@extends('layouts.app')
@section('title', 'My Profile')

@section('content')
<style>
    .profile-success-alert {
        background: #ecfdf5;
        color: #065f46;
    }
    .profile-success-alert .btn-close {
        filter: invert(0.3);
    }
    .profile-success-icon {
        color: #059669;
    }

    .profile-card {
        border: 0 !important;
    }

    .profile-card-header {
        background: #f0f4ff;
    }

    .profile-avatar {
        width: 60px;
        height: 60px;
        background: #ffffff;
        border-radius: 14px;
        border: 2px solid #93c5fd;
    }
    .profile-avatar-initials {
        font-weight: bold;
        font-size: 1.5rem;
        color: #2563eb;
    }

    .profile-user-name {
        color: #1e3a8a;
    }
    .profile-user-meta {
        color: #64748b;
    }
    .profile-user-meta-icon {
        color: #94a3b8;
    }

    .profile-edit-btn {
        background: #2563eb;
        color: white;
        font-size: 0.875rem;
        border: 1px solid #2563eb;
        gap: 6px;
        transition: background 0.2s ease, color 0.2s ease;
    }
    .profile-edit-btn:hover {
        background: #ffffff;
        color: #2563eb;
        border-color: #2563eb;
    }
    .profile-edit-btn:hover .profile-edit-btn-icon {
        color: #2563eb;
    }


    .profile-edit-btn-icon {
        font-size: 0.75rem;
    }

    .profile-field {
        background: #f8fafc;
        border: 1px solid #f1f5f9;
    }
    .profile-field-label {
        font-size: 0.7rem;
        letter-spacing: 0.5px;
        color: #94a3b8;
    }
    .profile-field-label-icon {
        color: #6366f1;
    }
    .profile-field-value {
        font-size: 0.95rem;
        color: #1e293b;
        font-weight: 500;
    }

    .profile-status-field {
        background: #ffffff;
        border: 1px solid #f1f5f9;
    }
    .profile-status-label {
        font-size: 0.7rem;
        letter-spacing: 0.5px;
        color: #94a3b8;
    }

    .badge-license-active {
        background: #ecfdf5;
        color: #065f46;
        border: 1px solid #64748b;
        font-weight: 500;
        font-size: 0.8rem;
    }
    .badge-license-active .badge-icon {
        color: #059669;
    }

    .badge-license-inactive {
        background: #f8fafc;
        color: #64748b;
        border: 1px solid #64748b;
        font-weight: 500;
        font-size: 0.8rem;
    }
    .badge-license-inactive .badge-icon {
        color: #94a3b8;
    }

    .badge-account-active {
        background: #ecfdf5;
        color: #065f46;
        border: 1px solid #05c690;
        font-weight: 500;
        font-size: 0.8rem;
    }
    .badge-account-active .badge-icon {
        color: #059669;
    }

    .badge-account-disabled {
        background: #fef2f2;
        color: #991b1b;
        border: 1px solid #dc2626;
        font-weight: 500;
        font-size: 0.8rem;
    }
    .badge-account-disabled .badge-icon {
        color: #dc2626;
    }
</style>

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-12">

            {{-- Success Message --}}
            @if (session('success'))
                <div class="alert profile-success-alert d-flex align-items-center fade show shadow-sm border-0 rounded-3 mb-4">
                    <i class="fas fa-check-circle me-2 profile-success-icon"></i>
                    {{ session('success') }}
                    <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <div class="card profile-card border-0 shadow-sm rounded-4 overflow-hidden">

                {{-- Header --}}
                <div class="card-header profile-card-header border-bottom py-4 px-4">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">

                        <div class="d-flex align-items-center">
                            <div class="d-flex align-items-center justify-content-center shadow-sm profile-avatar">
                                <span class="fw-bold fs-4 profile-avatar-initials">
                                    {{ collect(explode(' ', trim($user->name)))->map(fn($word) => strtoupper(substr($word, 0, 1)))->take(2)->implode('') }}
                                </span>
                            </div>

                            <div class="ms-3">
                                <h5 class="mb-1 fw-semibold profile-user-name">{{ $user->name }}</h5>
                                <p class="mb-0 small profile-user-meta">
                                    <i class="fas fa-at me-1 profile-user-meta-icon"></i>{{ $user->username }}
                                </p>
                            </div>
                        </div>

                        <a href="{{ route('profile.edit') }}" class="btn btn-sm rounded-3 px-4 py-2 fw-medium d-inline-flex align-items-center profile-edit-btn">
                            <i class="fas fa-pen profile-edit-btn-icon"></i>Edit Profile
                        </a>

                    </div>
                </div>

                {{-- Body --}}
                <div class="card-body p-4 pt-3">

                    <div class="row g-3">

                        <div class="col-md-6">
                            <div class="rounded-3 p-3 profile-field">
                                <small class="text-uppercase d-block mb-1 profile-field-label">
                                    <i class="fas fa-user me-1 profile-field-label-icon"></i>Full Name
                                </small>
                                <div class="profile-field-value">
                                    {{ $user->name }}
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="rounded-3 p-3 profile-field">
                                <small class="text-uppercase d-block mb-1 profile-field-label">
                                    <i class="fas fa-id-badge me-1 profile-field-label-icon"></i>Username
                                </small>
                                <div class="profile-field-value">
                                    {{ $user->username }}
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="rounded-3 p-3 profile-field">
                                <small class="text-uppercase d-block mb-1 profile-field-label">
                                    <i class="fas fa-envelope me-1 profile-field-label-icon"></i>Email Address
                                </small>
                                <div class="profile-field-value">
                                    {{ $user->email }}
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="rounded-3 p-3 profile-status-field">
                                <small class="text-uppercase d-block mb-2 profile-status-label">
                                    License Status
                                </small>
                                @if ($user->is_license_key_activated)
                                    <span class="badge rounded-2 px-3 py-2 badge-license-active">
                                        <i class="fas fa-check-circle me-1 badge-icon"></i>Active
                                    </span>
                                @else
                                    <span class="badge rounded-2 px-3 py-2 badge-license-inactive">
                                        <i class="fas fa-minus-circle me-1 badge-icon"></i>Inactive
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="rounded-3 p-3 profile-status-field">
                                <small class="text-uppercase d-block mb-2 profile-status-label">
                                    Account Status
                                </small>
                                @if ($user->is_active)
                                    <span class="badge rounded-2 px-3 py-2 badge-account-active">
                                        <i class="fas fa-check-circle me-1 badge-icon"></i>Active
                                    </span>
                                @else
                                    <span class="badge rounded-2 px-3 py-2 badge-account-disabled">
                                        <i class="fas fa-ban me-1 badge-icon"></i>Disabled
                                    </span>
                                @endif
                            </div>
                        </div>

                    </div>

                </div>

            </div>

        </div>
    </div>
</div>
@endsection