@extends('layouts.auth')

@section('content')
    <!-- header starts -->
    <header class="main-header">
        <div class="custom-container">
            <div class="header-panel">
                <a href="profile.html">
                    <i class="iconsax icon-btn" data-icon="chevron-left"> </i>
                </a>
                <h3>Profile Setting</h3>
            </div>
        </div>
    </header>
    <!-- header end -->

    <!-- profile section starts -->
    <section class="section-b-space section-lg-t-space">
        <div class="custom-container">
            <div class="profile-background">
                <img class="img-fluid profile-bg" src="../../assets/images/background/profile-bg.png" alt="profile-bg">
                <div class="profile-part mt-3">
                    <div class="profile-image">
                        <img id="output" class="img-fluid profile-pic" src="../../assets/images/profile/p11.png"
                            alt="11">
                        <i class="iconsax edit-icon" data-icon="edit-2"></i>
                        <input id="file" type="file" onchange="loadFile(event)">
                    </div>
                </div>
            </div>

            <form class="auth-form mt-0 rounded-top-0">
                <div class="form-group mt-0">
                    <label class="form-label mb-2" for="Inputname">User Name</label>
                    <div class="form-input">
                        <input type="text" class="form-control" id="Inputname" value="Smitha Williams"
                            placeholder="Enter your username">
                        <i class="iconsax" data-icon="user-2"></i>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label mb-2" for="Inputemail">Email</label>
                    <div class="form-input">
                        <input type="email" class="form-control" id="Inputemail" value="smithwilliams452@gmail.com"
                            placeholder="Enter your email">
                        <i class="iconsax" data-icon="mail"></i>

                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label" for="validationDefault01">Mobile Number</label>
                    <div class="d-flex gap-2">
                        <select class="form-select">
                            <option selected>+1-212</option>
                            <option value="1">+1-213</option>
                            <option value="2">+1-702</option>
                            <option value="3">+1-312</option>
                            <option value="3">+1-617</option>
                        </select>
                        <div class="form-input w-100">
                            <input type="number" class="form-control without-icon" id="validationDefault01"
                                value="3425671296" placeholder="Enter your number" required>
                        </div>
                    </div>
                </div>
            </form>
            <a href="profile.html" class="btn theme-btn w-100 auth-btn">Update</a>
        </div>
    </section>
    <!-- profile section end -->
@endsection