@extends('admin.layouts.app')
@section('title', 'My Profile')
@section('breadcrumb') <span>/</span> Profile @endsection

@section('content')
<div class="page-header">
    <h1>My Profile</h1>
</div>
<div class="row g-4">
    <div class="col-lg-4">
        <div class="card text-center">
            <div class="card-body py-4">
                <form method="POST" action="{{ route('admin.profile.update') }}" enctype="multipart/form-data">
                    @csrf @method('PUT')
                    <label for="photoInput" style="cursor:pointer;">
                        <img id="photoPreview" src="{{ $user->profile_image_url }}" width="100" height="100"
                            style="border-radius:50%;object-fit:cover;border:3px solid #3b82f6;" class="mb-2">
                        <div style="font-size:12px;color:#64748b;"><i class="fas fa-camera me-1"></i>Change Photo</div>
                    </label>
                    <input type="file" id="photoInput" name="profile_image" class="d-none" accept=".jpg,.jpeg,.png"
                        onchange="previewPhoto(this)">

                    <h5 class="mt-3 mb-1 fw-700">{{ $user->name }}</h5>
                    <p style="font-size:13px;color:#64748b;">{{ $user->role->name }}</p>

                    <div class="text-start mt-3">
                        <div class="mb-2">
                            <label class="form-label">Full Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control" value="{{ old('name',$user->name) }}" required>
                            @error('name') <div class="text-danger" style="font-size:12px;">{{ $message }}</div> @enderror
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Mobile <span class="text-danger">*</span></label>
                            <input type="text" name="mobile" class="form-control" value="{{ old('mobile',$user->mobile) }}" required>
                            @error('mobile') <div class="text-danger" style="font-size:12px;">{{ $message }}</div> @enderror
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Designation</label>
                            <input type="text" name="designation" class="form-control" value="{{ old('designation',$user->designation) }}">
                        </div>
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-save me-2"></i>Update Profile
                        </button>
                    </div>
                </form>
                <hr>
                <a href="{{ route('admin.profile.password') }}" class="btn btn-outline-warning w-100">
                    <i class="fas fa-lock me-2"></i>Change Password
                </a>
            </div>
        </div>
    </div>
    <div class="col-lg-8">
        <div class="card mb-3">
            <div class="card-header">
                <h6 class="mb-0 fw-700"><i class="fas fa-info-circle text-info me-2"></i>Account Details</h6>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6"><strong style="font-size:12px;color:#94a3b8;">USER ID</strong><div>{{ $user->user_id }}</div></div>
                    <div class="col-md-6"><strong style="font-size:12px;color:#94a3b8;">EMAIL</strong><div>{{ $user->email }}</div></div>
                    <div class="col-md-6"><strong style="font-size:12px;color:#94a3b8;">DEPARTMENT</strong><div>{{ $user->department->name ?? '—' }}</div></div>
                    <div class="col-md-6"><strong style="font-size:12px;color:#94a3b8;">STATUS</strong><div>{!! $user->status_badge !!}</div></div>
                    <div class="col-md-6"><strong style="font-size:12px;color:#94a3b8;">LAST LOGIN</strong><div style="font-size:13px;">{{ $user->last_login_at?->format('d M Y H:i') ?? 'Never' }}</div></div>
                    <div class="col-md-6"><strong style="font-size:12px;color:#94a3b8;">MEMBER SINCE</strong><div style="font-size:13px;">{{ $user->created_at->format('d M Y') }}</div></div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0 fw-700"><i class="fas fa-history text-secondary me-2"></i>Recent Activity</h6>
            </div>
            <div class="card-body p-0">
                <table class="table mb-0">
                    <thead style="background:#f8fafc;"><tr><th class="ps-3">Action</th><th>Module</th><th>Time</th><th>IP</th></tr></thead>
                    <tbody>
                        @forelse($recentLogs as $log)
                        <tr>
                            <td class="ps-3"><span class="badge bg-light text-dark border">{{ $log->action }}</span></td>
                            <td style="font-size:12px;">{{ $log->module }}</td>
                            <td style="font-size:12px;color:#64748b;">{{ $log->created_at->diffForHumans() }}</td>
                            <td style="font-size:12px;color:#94a3b8;">{{ $log->ip_address }}</td>
                        </tr>
                        @empty
                        <tr><td colspan="4" class="text-center py-3 text-muted">No recent activity</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
function previewPhoto(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = e => document.getElementById('photoPreview').src = e.target.result;
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@endpush