@extends('../admin/admin_layout.app')

@section('content')
<div class="page_right">
    <!-- Beardcrumbs -->
    <div class="breadcrumbs">
        <a href="{{ route('management.index') }}">Dashboard</a><span>/{{ ucfirst(Route::current()->getName()) }}</span>
    </div>
    <section class="settings mt-2">
        <div class="row w-100 mb-4 mx-0">
            <div class="col-12 p-0">
                <h4>Settings</h4>
            </div>
        </div>
        <div class="row w-100 mb-3 mx-0 pe-sm-3 pe-0">
            <div class="col-md-5 col-12 setting_menu_parent">
                <div class="account_setting_menu row mx-0 active w-100 pt-4 m-0">
                    <div class="col-md-3 col-auto text-end align-self-center">
                        <span><i class="fa-solid fa-user"></i></span>
                    </div>
                    <div class="col-md-6 col-auto">
                        <h6 class="mb-0">Account Settings</h6>
                        <p>Personal Information, Email</p>
                    </div>
                    <div class="col-md-3 col-auto text-center align-self-center">
                        <span><i class="fa-solid fa-chevron-right"></i></span>
                    </div>
                </div>
                <div class="password_setting_menu row mx-0 w-100 pt-4 m-0">
                    <div class="col-md-3 col-auto text-end align-self-center">
                        <span><i class="fa-solid fa-lock"></i></span>
                    </div>
                    <div class="col-md-6 col-auto">
                        <h6 class="mb-0">Password & Security</h6>
                        <p>Change Password 2FA</p>
                    </div>
                    <div class="col-md-3 col-auto text-center align-self-center">
                        <span><i class="fa-solid fa-chevron-right"></i></span>
                    </div>
                </div>
                <div class="marketplace_menu row mx-0 w-100 pt-4 m-0">
                    <div class="col-md-3 col-auto text-end align-self-center">
                        <span><i class="fa-solid fa-store"></i></span>
                    </div>
                    <div class="col-md-6 col-auto">
                        <h6 class="mb-0">Marketplace</h6>
                        <p>Early Access Time</p>
                    </div>
                    <div class="col-md-3 col-auto text-center align-self-center">
                        <span><i class="fa-solid fa-chevron-right"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-md-7 account_menu_result col-12 mt-md-0 mt-4">
                <form action="" method="post" class="account_form overflow-hidden">
                    <div class="row mx-0 w-100 account_settings_label px-sm-3 px-0">
                        <div class="col-12 px-sm-3 px-0">
                            <h3>Account Settings</h3>
                            <p>Personal Information</p>
                            <p>Lorem ipsum dolor sit amet consectetur.</p>
                        </div>
                    </div>
                    <div class="row mx-0 w-100 mt-md-5 mt-3 account_setting_avatar px-sm-3 px-0">
                        <div class="col-12 px-sm-3 px-0">
                            <h5>Avatar</h5>
                        </div>
                    </div>
                    <div class="row mx-0 w-100 account_setting_form">
                        <div class="row mx-0 w-100 px-sm-3 px-0">
                            <div class="col-6 col-sm-3 col-xl-auto px-sm-3 px-0">
                                <img src="https://picsum.photos/50/50" alt="Profile Picture" class="image-fluid rounded-circle">
                            </div>
                            <div class="col-6 col-sm-3 col-xl-auto align-self-center px-sm-3 px-0">
                                <button type="button" class="border-0 bg-light">Remove</button>
                            </div>
                            <div class="col-6 col-sm-12 col-xl-auto align-self-center mt-xl-0 mt-3 px-sm-3 px-0">
                                <input type="file" value="Upload">
                            </div>
                        </div>
                        <div class="row mx-0 w-100 mt-5 px-sm-3 px-0">
                            <div class="col-sm-6 col-12 px-sm-3 px-0">
                                <label for="first_name" class="form-label">First Name</label>
                                <input type="text" name="first_name" class="form-control w-md-50 w-100" placeholder="Enter the first Name" value="Jon">
                            </div>
                            <div class="col-sm-6 col-12 mt-sm-0 mt-2 px-sm-3 px-0">
                                <label for="last_name" class="form-label">Last Name</label>
                                <input type="text" name="last_name" class="form-control w-md-50 w-100" placeholder="Enter the first Name" value="Doe">
                            </div>
                        </div>
                        <div class="row mx-0 w-100 mt-2 px-sm-3 px-0">
                            <div class="col-12 px-sm-3 px-0">
                                <label for="email" class="form-label">Email</label>
                                <input type="email" name="email" class="form-control w-md-50 w-100" placeholder="Enter the first Name" value="John@gmail.com">
                            </div>
                        </div>
                        <div class="row mx-0 w-100 mb-3 px-sm-3 px-0">
                            <div class="col-12 text-md-end text-center">
                                <span class="me-3">Discard Changes</span>
                                <button type="submit" class="border-0 me-md-5 me-0 mt-3 mb-mt-0">Save Changes</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
</div>
@endsection