@extends('layouts.user')

@section('content')

<div class="app-container">
    <header>
        
        <div class="logo">Edit Profile</div>
    </header>

    <section class="edit-profile-section">
        <div class="profile-avatar-edit">
             @if ($user->profile_pic)
        <img src="{{ asset('storage/app/public/' . $user->profile_pic) }}" alt="{{ $user->name }}" id="profile-preview" class="imaged w100 rounded">
    @else
        <img src="{{ asset('storage/user_default.png') }}" id="profile-preview" alt="{{ $user->name }}" class="imaged w100 rounded">
    @endif
            <button class="btn-change-avatar">
                <i class="fas fa-camera"></i>
            </button>
        </div>

        <form class="edit-profile-form" action="{{ route('profilesave') }}" method="POST" enctype="multipart/form-data"  >
                            @csrf
            
            <div class="input-group">
                <label>Upload Image</label>
                <input type="file" name="profile_pic"  accept="jpg, png" id="profile_pic">
            </div>                
            <div class="input-group">
                <label>Full Name</label>
                <input type="text" name="name" value="{{$user->name}}" placeholder="{{$user->name}}" required>
            </div>
            <div class="input-group">
                <label>Username</label>
                <input type="text" name="username" id="display-name" value="{{$user->username}}" placeholder="{{$user->username}}" required>
            </div>
            <div class="input-group">
                <label>Email</label>
                <input type="email" name="email" readonly id="display-email" value="{{$user->email}}" placeholder="{{$user->username}}" required>
            </div>
            <div class="input-group">
                <label>Phone Number</label>
                <input type="tel" name="phone_number" id="phone-no" value="{{$user->phone_number}}" placeholder="{{$user->phone_number}}">
            </div>
            <div class="input-group">
                <label>Address</label>
                <input type="text" name="address"   id="address-l1" value="{{$user->address}}">
            </div>
            <div class="input-group">
                <label>City</label>
                <input type="text" name="city"   value="{{$user->city}}">
            </div>
            <div class="input-group">
                <label>State</label>
                <input type="text" name="state"   value="{{$user->state}}">
            </div>
            <div class="input-group">
                <label>Country</label>
                <input type="text" name="country" id="address-st" value="{{$user->country}}">
            </div>
            
             

            <button type="submit" class="btn-save-profile">Save Changes</button>
        </form>
    </section>


<script>
    document.addEventListener("DOMContentLoaded", function() {
        document.getElementById('profile_pic').addEventListener('change', function() {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('profile-preview').setAttribute('src', e.target.result);
                };
                reader.readAsDataURL(file);
            }
        });
    });
</script>
@endsection