@extends('front.layouts.app')

@section('content')
<style>
    .form-group {
        margin-bottom: 10px;
        /* color: white; */
    }
</style>
<div class="container-fluid profile-page">
    <div class="row">
        <div class="col-md-3">
            @include('front.partials.sidebar')
        </div>

        <div class="col-md-9">
            <div class="container py-5">
                
                <div class="py-12">
                    <div class="bg-light p-5 m-auto my-3 rounded shadow">
                        <h2 class="text-center">Edit Profile</h2>
                        <form method="post" action="{{ route('profile.update') }}" class="mt-6 space-y-6" enctype="multipart/form-data">
                            @csrf
                            @method('patch')

                            <div class="form-group text-center">
                                <img class="mb-3" style="border-radius: 50%; width: 150px; height: 150px; object-fit: cover;" 
                                src="{{ $user->profile_img ? asset('assets/' . $user->profile_img) : asset('assets/front/dummy.jpg') }}" alt="">
                                <input class="form-control w-25 m-auto" type="file" name="profile_img" id="profile_img">
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="name">Name</label>
                                <input class="form-control" id="name" name="name" type="text" value="{{ $user->name }}" required autofocus autocomplete="name">
                                <x-input-error class="mt-2" :messages="$errors->get('name')" />
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="email">Email</label>
                                <input class="form-control" id="email" name="email" type="email" value="{{ $user->email }}" required>
                                <x-input-error class="mt-2" :messages="$errors->get('email')" />
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="username">Username</label>
                                <input class="form-control" id="username" name="username" type="text" value="{{ $user->username }}" required autofocus autocomplete="username">
                                <x-input-error class="mt-2" :messages="$errors->get('username')" />
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="bio">Bio</label>
                                <textarea class="form-control" id="bio" name="bio" type="text">{{ $user->bio }}</textarea>
                                <x-input-error class="mt-2" :messages="$errors->get('bio')" />
                            </div>

                            <div class="flex items-center mt-4">
                                <button class="btn btn-primary">Save</button>
                            </div>
                        </form>

                    </div>
                    <!--<div class="bg-light p-5 m-auto my-3 rounded shadow">-->
                    <!--    <h2>Upate Password</h2>-->
                    <!--    <p>Ensure your account is using a long, random password to stay secure.</p>-->
                    <!--    <form method="post" action="{{ route('password.update') }}" class="mt-6 space-y-6">-->
                    <!--        @csrf-->
                    <!--        @method('put')-->
    
                    <!--        <div>-->
                    <!--            <label class="form-label" for="update_password_current_password">Current Password</label>-->
                    <!--            <input class="form-control" id="update_password_current_password" name="current_password" type="password" class="mt-1 block w-full" autocomplete="current-password" />-->
                    <!--            <x-input-error :messages="$errors->updatePassword->get('current_password')" class="mt-2" />-->
                    <!--        </div>-->
    
                    <!--        <div>-->
                    <!--            <label class="form-label" for="update_password_password">New Password'</label>-->
                    <!--            <input class="form-control" id="update_password_password" name="password" type="password" class="mt-1 block w-full" autocomplete="new-password" />-->
                    <!--            <x-input-error :messages="$errors->updatePassword->get('password')" class="mt-2" />-->
                    <!--        </div>-->
    
                    <!--        <div>-->
                    <!--            <label class="form-label" for="update_password_password_confirmation">Confirm Password</label>-->
                    <!--            <input class="form-control" id="update_password_password_confirmation" name="password_confirmation" type="password" class="mt-1 block w-full" autocomplete="new-password" />-->
                    <!--            <x-input-error :messages="$errors->updatePassword->get('password_confirmation')" class="mt-2" />-->
                    <!--        </div>-->
    
                    <!--        <div class="flex items-center gap-4 mt-4">-->
                    <!--            <button class="btn btn-primary" type="submit">{{ __('Save') }}</button>-->
                    <!--        </div>-->
                    <!--    </form>-->
                    <!--</div>-->
                </div>
            </div>
        </div>
    </div>
</div>
</div>
@endsection