@extends('admin.lyoute.masterpage2')

@section('page_title', 'جزئیات کاربر')
@section('page_description', 'مشاهده کامل اطلاعات کاربر')

@section('main_section')
    <div class="container-fluid">
        <!-- هدر اطلاعات کاربر -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-body p-0">
                        <div class="row no-gutters">
                            <div class="col-md-3 bg-primary text-white d-flex align-items-center justify-content-center py-4">
                                <div class="text-center">
                                    <div class="avatar-xxl mb-3 mx-auto">
                                        <div class="rounded-circle d-flex align-items-center justify-content-center border border-4 border-white"
                                             style="width: 120px; height: 120px; background: rgba(255,255,255,0.2);">
                                            <span class="display-4">{{ strtoupper(substr($user->name, 0, 1)) }}</span>
                                        </div>
                                    </div>
                                    <h4 class="mb-1">{{ $user->name }}</h4>
                                    <span class="badge bg-light text-dark badge-pill px-3 py-1">
                                        @if($user->role == 'admin')
                                            <i class="fas fa-crown ml-1"></i> مدیر سیستم
                                        @else
                                            <i class="fas fa-user ml-1"></i> کاربر عادی
                                        @endif
                                    </span>
                                </div>
                            </div>

                            <div class="col-md-9">
                                <div class="p-4">
                                    <div class="d-flex justify-content-between align-items-start mb-4">
                                        <div>
                                            <h3 class="mb-0">
                                                <i class="fas fa-user-circle ml-2 text-primary"></i>
                                                اطلاعات کاربر
                                            </h3>
                                            <small class="text-muted">شناسه کاربری: {{ $user->id }}</small>
                                        </div>
                                        <div class="btn-group">
                                            <a href="{{ route('admin.users.edit', $user->id) }}"
                                               class="btn btn-warning btn-sm">
                                                <i class="fas fa-edit ml-1"></i> ویرایش
                                            </a>

                                            <form action="{{ route('admin.users.destroy', $user) }}"
                                                  method="POST"
                                                  class="d-inline"
                                                  onsubmit="return confirm('آیا از حذف این کاربر مطمئن هستید؟')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit"
                                                        class="btn btn-danger btn-sm mx-1"
                                                        title="حذف">
                                                    <i class="fas fa-trash ml-1"></i> حذف
                                                </button>
                                            </form>
                                            <a href="{{ route('admin.users.index') }}"
                                               class="btn btn-secondary btn-sm">
                                                <i class="fas fa-arrow-right ml-1"></i> بازگشت
                                            </a>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="info-item mb-3">
                                                <label class="text-muted small mb-1">
                                                    <i class="fas fa-user-tag ml-1"></i> نام کاربری
                                                </label>
                                                <p class="mb-0 font-weight-bold">{{ $user->username }}</p>
                                            </div>


                                            <div class="col-md-6">
                                                <div class="info-item mb-3">
                                                    <label class="text-muted small mb-1">
                                                        <i class="fas fa-phone ml-1"></i> شماره موبایل
                                                    </label>
                                                    <p class="mb-0 font-weight-bold">{{ $user->phone ?? 'ثبت نشده' }}</p>
                                                </div>
                                            </div>


                                        </div>
                                        <div class="col-md-6">
                                            <div class="info-item mb-3">
                                                <label class="text-muted small mb-1">
                                                    <i class="fas fa-shield-alt ml-1"></i> نقش کاربری
                                                </label>
                                                <p class="mb-0 font-weight-bold">
                                                    @if($user->role === 'admin')
                                                        <span class="text-danger">مدیر سیستم</span>
                                                    @else
                                                        <span class="text-secondary">کاربر عادی</span>
                                                    @endif
                                                </p>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="info-item mb-3">
                                                <label class="text-muted small mb-1">
                                                    <i class="fas fa-calendar-alt ml-1"></i> تاریخ عضویت
                                                </label>
                                                <p class="mb-0 font-weight-bold">
                                                    {{ \Carbon\Carbon::parse($user->created_at)->format('Y/m/d H:i') }}
                                                </p>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="info-item mb-3">
                                                <label class="text-muted small mb-1">
                                                    <i class="fas fa-clock ml-1"></i> آخرین بروزرسانی
                                                </label>
                                                <p class="mb-0 font-weight-bold">
                                                    {{ \Carbon\Carbon::parse($user->updated_at)->format('Y/m/d H:i') }}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- آمار ساده -->
            <div class="col-md-4">
                <div class="card shadow mb-4">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">
                            <i class="fas fa-info-circle ml-2 text-primary"></i>
                            وضعیت حساب
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="status-list">
                            <div class="status-item d-flex justify-content-between align-items-center mb-3">
                                <span class="status-label">
                                    <i class="fas fa-user-check ml-1"></i> وضعیت کلی
                                </span>
                                <span class="badge bg-success badge-pill">
                                    <i class="fas fa-check ml-1"></i> فعال
                                </span>
                            </div>

                            <div class="alert alert-info small mb-0">
                                <i class="fas fa-info-circle ml-1"></i>
                                این کاربر دسترسی {{ $user->role === 'admin' ? 'کامل مدیریتی' : 'محدود کاربری' }} دارد.
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- لاگ‌های سیستمی (اختیاری) -->
            <div class="col-md-8">
                <div class="card shadow">
                    <div class="card-header bg-light d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="fas fa-history ml-2 text-primary"></i>
                            اطلاعات تکمیلی
                        </h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted">
                            در حال حاضر اطلاعات تکمیلی دیگری برای این کاربر ثبت نشده است.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .bg-primary {
            background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%) !important;
        }
        .avatar-xxl {
            width: 120px;
            height: 120px;
        }
        .info-item {
            padding: 10px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .status-item {
            padding: 10px 15px;
            background: #f8f9fa;
            border-radius: 8px;
            margin-bottom: 10px;
        }
        .badge-pill {
            padding: 0.5em 1em;
            font-size: 0.85em;
        }
    </style>
@endsection