@extends('frontend.layout.dash')

@section('title', $title ?? 'Profile')

@section('content')
    <div class="container-header">
        <h2 class="title">{{ $title ?? 'Profile' }}</h2>
    </div>

    <div class="card mp-20 profile-card">
        <div class="profile-image-wrap">
            <img id="profile-image-preview" src="{{ $user->image ? asset($user->image) : 'https://ui-avatars.com/api/?name=' . urlencode($user->fname . ' ' . $user->lname) . '&background=random' }}" alt="Profile">
        </div>
        <p class="profile-name">{{ $user->fname }} {{ $user->lname }}</p>
        <p class="profile-email">{{ $user->email }}</p>
        <form action="{{ route('user.profile.update-image') }}" method="POST" enctype="multipart/form-data" class="profile-image-form">
            @csrf
            <input type="file" name="image" id="profile-image-input" accept="image/*" style="display: none;">
            <button type="button" class="btn btn-primary" id="update-image-btn"><i class="ti ti-photo-up"></i> Update photo</button>
        </form>
    </div>

    <div class="card mp-20">
        <h2 class="title">Account details</h2>
        <form action="{{ route('user.profile.update') }}" method="POST">
            @csrf
            @method('PUT')
            <div class="form-grid">
                <div class="form-group">
                    <label class="form-label">First name</label>
                    <input type="text" name="fname" class="form-control" value="{{ old('fname', $user->fname) }}" placeholder="First name">
                </div>
                <div class="form-group">
                    <label class="form-label">Last name</label>
                    <input type="text" name="lname" class="form-control" value="{{ old('lname', $user->lname) }}" placeholder="Last name">
                </div>
            </div>
            <div class="form-grid">
                <div class="form-group">
                    <label class="form-label">Email <span class="required">*</span></label>
                    <input type="email" name="email" class="form-control" value="{{ old('email', $user->email) }}" required placeholder="Email">
                </div>
                <div class="form-group">
                    <label class="form-label">Phone number</label>
                    <input type="tel" name="phone" class="form-control" value="{{ old('phone', $user->phone) }}" placeholder="Phone number">
                </div>
            </div>
            <div class="form-grid">
                <div class="form-group">
                    <label class="form-label">New password</label>
                    <input type="password" name="password" class="form-control" placeholder="Leave blank to keep current">
                </div>
            </div>
            <button type="submit" class="btn btn-primary"><i class="ti ti-device-floppy"></i> Update</button>
        </form>
    </div>
@endsection

@push('script')
<script>
document.addEventListener('DOMContentLoaded', function() {
    var updateBtn = document.getElementById('update-image-btn');
    var fileInput = document.getElementById('profile-image-input');
    var preview = document.getElementById('profile-image-preview');
    var form = document.querySelector('.profile-image-form');

    if (updateBtn && fileInput) {
        updateBtn.addEventListener('click', function() { fileInput.click(); });
        fileInput.addEventListener('change', function() {
            if (fileInput.files.length) form.submit();
        });
    }
});
</script>
@endpush
