@extends('layouts.app')

@section('title', 'Profile')
@section('kicker', 'Account details and password')

@section('content')
    <div id="profile-fragment" data-fragment>
        <div class="row g-4">
            <div class="col-xl-4">
                <div class="content-card profile-card">
                    <div class="profile-avatar">{{ strtoupper(substr($user->first_name ?: $user->name, 0, 1).substr($user->last_name ?: '', 0, 1)) }}</div>
                    <h2>{{ $user->full_name }}</h2>
                    <p>{{ $user->email }}</p>
                    <span class="badge badge-soft">{{ $user->position?->name ?? $user->role?->name ?? 'System User' }}</span>
                    <div class="d-grid gap-2 mt-4">
                        <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#editProfileModal">
                            <i data-lucide="pencil"></i><span>Edit Profile</span>
                        </button>
                        <button class="btn btn-outline-primary" type="button" data-bs-toggle="modal" data-bs-target="#passwordModal">
                            <i data-lucide="lock-keyhole"></i><span>Change Password</span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-xl-8">
                <div class="table-card">
                    <div class="section-title mb-3">Account Information</div>
                    <div class="row g-3">
                        <div class="col-md-6"><span class="text-muted small">First Name</span><div class="fw-bold">{{ $user->first_name ?? '-' }}</div></div>
                        <div class="col-md-6"><span class="text-muted small">Middle Name</span><div class="fw-bold">{{ $user->middle_name ?? '-' }}</div></div>
                        <div class="col-md-6"><span class="text-muted small">Last Name</span><div class="fw-bold">{{ $user->last_name ?? '-' }}</div></div>
                        <div class="col-md-6"><span class="text-muted small">Username</span><div class="fw-bold">{{ $user->username ?? '-' }}</div></div>
                        <div class="col-md-6"><span class="text-muted small">Phone</span><div class="fw-bold">{{ $user->phone ?? '-' }}</div></div>
                        <div class="col-md-6"><span class="text-muted small">Role</span><div class="fw-bold">{{ $user->role?->name ?? '-' }}</div></div>
                        <div class="col-md-6"><span class="text-muted small">Status</span><div><span class="badge badge-soft">{{ ucfirst($user->status ?? 'active') }}</span></div></div>
                        <div class="col-md-6"><span class="text-muted small">Last Login</span><div class="fw-bold">{{ $user->last_login_at?->format('d M Y H:i') ?? '-' }}</div></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="editProfileModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <div>
                            <p class="modal-kicker mb-1">Account</p>
                            <h5 class="modal-title">Edit Profile</h5>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form method="POST" action="{{ route('profile.update') }}" data-ajax-form data-refresh-target="#profile-fragment">
                            @csrf
                            @method('PUT')
                            <div class="row g-3">
                                <div class="col-md-4"><label class="form-label">First Name</label><input type="text" name="first_name" value="{{ $user->first_name }}" class="form-control" required></div>
                                <div class="col-md-4"><label class="form-label">Middle Name</label><input type="text" name="middle_name" value="{{ $user->middle_name }}" class="form-control"></div>
                                <div class="col-md-4"><label class="form-label">Last Name</label><input type="text" name="last_name" value="{{ $user->last_name }}" class="form-control" required></div>
                                <div class="col-md-6"><label class="form-label">Email</label><input type="email" name="email" value="{{ $user->email }}" class="form-control" required></div>
                                <div class="col-md-6"><label class="form-label">Username</label><input type="text" name="username" value="{{ $user->username }}" class="form-control"></div>
                                <div class="col-md-6">
                                    <label class="form-label">Phone</label>
                                    <div class="input-icon">
                                        <i data-lucide="phone"></i>
                                        <input type="text" name="phone" value="{{ $user->phone }}" class="form-control" data-phone-input placeholder="+255 700 000 000">
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer px-0 pb-0">
                                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"><i data-lucide="x"></i><span>Cancel</span></button>
                                <button class="btn btn-primary"><i data-lucide="save"></i><span>Save Changes</span></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="passwordModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-md">
                <div class="modal-content">
                    <div class="modal-header">
                        <div>
                            <p class="modal-kicker mb-1">Security</p>
                            <h5 class="modal-title">Change Password</h5>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form method="POST" action="{{ route('profile.password') }}" data-ajax-form data-refresh-target="#profile-fragment">
                            @csrf
                            @method('PUT')
                            <div class="d-grid gap-3">
                                <div>
                                    <label class="form-label">Current Password</label>
                                    <div class="input-icon">
                                        <i data-lucide="lock-keyhole"></i>
                                        <input id="profile-current-password" type="password" name="current_password" class="form-control" required>
                                        <button class="password-toggle" type="button" data-password-toggle="#profile-current-password" aria-label="Show password">
                                            <i data-lucide="eye"></i>
                                        </button>
                                    </div>
                                </div>
                                <div>
                                    <label class="form-label">New Password</label>
                                    <div class="input-icon">
                                        <i data-lucide="lock"></i>
                                        <input id="profile-new-password" type="password" name="password" class="form-control" required>
                                        <button class="password-toggle" type="button" data-password-toggle="#profile-new-password" aria-label="Show password">
                                            <i data-lucide="eye"></i>
                                        </button>
                                    </div>
                                </div>
                                <div>
                                    <label class="form-label">Confirm Password</label>
                                    <div class="input-icon">
                                        <i data-lucide="shield-check"></i>
                                        <input id="profile-confirm-password" type="password" name="password_confirmation" class="form-control" required>
                                        <button class="password-toggle" type="button" data-password-toggle="#profile-confirm-password" aria-label="Show password">
                                            <i data-lucide="eye"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer px-0 pb-0">
                                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"><i data-lucide="x"></i><span>Cancel</span></button>
                                <button class="btn btn-primary"><i data-lucide="save"></i><span>Update Password</span></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
