@extends('user_dashboard.layouts.app')
@section('content')
    <div class="content-page">
        <div class="content">

            <!-- Start Content-->
            <div class="container-fluid">
                <div class="py-3 d-flex align-items-sm-center flex-sm-row flex-column">
                    <div class="flex-grow-1">
                        <h4 class="fs-18 fw-semibold m-0">Profile</h4>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <img src="{{ asset('user_dashboard/assets/images/user-image.jpg') }}"
                                class="rounded-top-2 img-fluid" alt="image data">
                            <div class="card-body">
                                <div class="align-items-center">
                                    <div class="hando-main-sections">
                                        <div class="hando-profile-main">
                                            <img src="{{ asset('user_dashboard/assets/images/user.jpg') }}"
                                                class="rounded-circle img-fluid avatar-xxl img-thumbnail float-start"
                                                alt="image profile">
                                        </div>
                                        <div class="overflow-hidden ms-md-4 ms-0">
                                            <h4 class="m-0 text-dark fs-20 mt-2 mt-md-0">Shailesh Gupta</h4>
                                            <p class="my-1 text-muted fs-16">Web Developer</p>
                                            <span class="fs-15"><i class="mdi mdi-message me-2 align-middle"></i>Varanasi,
                                                India</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body pt-0">
                                <ul class="nav nav-underline border-bottom pt-2" id="pills-tab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link active p-2" id="profile_about_tab" data-bs-toggle="tab"
                                            href="#profile_about" role="tab">
                                            <span class="d-block d-sm-none"><i class="mdi mdi-information"></i></span>
                                            <span class="d-none d-sm-block">About User</span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link p-2" id="setting_tab" data-bs-toggle="tab"
                                            href="#profile_setting" role="tab">
                                            <span class="d-block d-sm-none"><i class="mdi mdi-information"></i></span>
                                            <span class="d-none d-sm-block">Edit Profile</span>
                                        </a>
                                    </li>
                                </ul>

                                <div class="tab-content text-muted">
                                    <div class="tab-pane active show pt-4" id="profile_about" role="tabpanel">

                                        <div class="row">
                                            <div class="col-md-8 m-auto">
                                                <div class="card border">
                                                    <div class="card-header">
                                                        <h5 class="card-title mb-0">User Details</h5>
                                                    </div>
                                                    <div class="card-body">
                                                        <dl class="row mb-0">
                                                            <dt class="col-sm-4">First Name</dt>
                                                            <dd class="col-sm-8">- Shailesh</dd>

                                                            <dt class="col-sm-4">Last Name</dt>
                                                            <dd class="col-sm-8">- Gupta</dd>

                                                            <dt class="col-sm-4">Email</dt>
                                                            <dd class="col-sm-8">- sgupta8200@gmail.com</dd>

                                                            <dt class="col-sm-4">Phone</dt>
                                                            <dd class="col-sm-8">- 9454528015</dd>

                                                            <dt class="col-sm-4">City</dt>
                                                            <dd class="col-sm-8">- Varanasi</dd>

                                                            <dt class="col-sm-4">Address</dt>
                                                            <dd class="col-sm-8">- Varanasi, India</dd>
                                                        </dl>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div><!-- end Experience -->

                                    <div class="tab-pane pt-4" id="profile_setting" role="tabpanel">
                                        <div class="row">

                                            <div class="row">
                                                <div class="col-lg-6 col-xl-6">
                                                    <div class="card border">

                                                        <div class="card-header">
                                                            <div class="row align-items-center">
                                                                <div class="col">
                                                                    <h4 class="card-title mb-0">Personal Information</h4>
                                                                </div><!--end col-->
                                                            </div>
                                                        </div>

                                                        <div class="card-body">
                                                            <div class="form-group mb-3 row">
                                                                <label class="form-label">First Name</label>
                                                                <div class="col-lg-12 col-xl-12">
                                                                    <input class="form-control" type="text"
                                                                        value="Charles">
                                                                </div>
                                                            </div>

                                                            <div class="form-group mb-3 row">
                                                                <label class="form-label">Last Name</label>
                                                                <div class="col-lg-12 col-xl-12">
                                                                    <input class="form-control" type="text"
                                                                        value="Buncle">
                                                                </div>
                                                            </div>

                                                            <div class="form-group mb-3 row">
                                                                <label class="form-label">Contact Phone</label>
                                                                <div class="col-lg-12 col-xl-12">
                                                                    <div class="input-group">
                                                                        <span class="input-group-text"><i
                                                                                class="mdi mdi-phone-outline"></i></span>
                                                                        <input class="form-control" type="text"
                                                                            placeholder="Phone"
                                                                            aria-describedby="basic-addon1"
                                                                            value="+61 399615">
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="form-group mb-3 row">
                                                                <label class="form-label">Email Address</label>
                                                                <div class="col-lg-12 col-xl-12">
                                                                    <div class="input-group">
                                                                        <span class="input-group-text"><i
                                                                                class="mdi mdi-email"></i></span>
                                                                        <input type="text" class="form-control"
                                                                            value="CharlesBuncle@dayrep.com"
                                                                            placeholder="Email"
                                                                            aria-describedby="basic-addon1">
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="form-group mb-3 row">
                                                                <label class="form-label">City</label>
                                                                <div class="col-lg-12 col-xl-12">
                                                                    <input class="form-control" type="text"
                                                                        value="Adelaide">
                                                                </div>
                                                            </div>

                                                            <div class="form-group mb-3 row">
                                                                <label class="form-label">Address</label>
                                                                <div class="col-lg-12 col-xl-12">
                                                                    <input class="form-control" type="text"
                                                                        value="Australia">
                                                                </div>
                                                            </div>

                                                            <div class="form-group row">
                                                                <div class="col-lg-12 col-xl-12">
                                                                    <button type="submit"
                                                                        class="btn btn-primary mb-2 mb-md-0">Change
                                                                        Password</button>
                                                                </div>
                                                            </div>
                                                        </div><!--end card-body-->
                                                    </div>
                                                </div>

                                                <div class="col-lg-6 col-xl-6">
                                                    <div class="card border mb-0">

                                                        <div class="card-header">
                                                            <div class="row align-items-center">
                                                                <div class="col">
                                                                    <h4 class="card-title mb-0">Change Password</h4>
                                                                </div><!--end col-->
                                                            </div>
                                                        </div>

                                                        <div class="card-body mb-0">
                                                            <div class="form-group mb-3 row">
                                                                <label class="form-label">Old Password</label>
                                                                <div class="col-lg-12 col-xl-12">
                                                                    <input class="form-control" type="password"
                                                                        placeholder="Old Password">
                                                                </div>
                                                            </div>
                                                            <div class="form-group mb-3 row">
                                                                <label class="form-label">New Password</label>
                                                                <div class="col-lg-12 col-xl-12">
                                                                    <input class="form-control" type="password"
                                                                        placeholder="New Password">
                                                                </div>
                                                            </div>
                                                            <div class="form-group mb-3 row">
                                                                <label class="form-label">Confirm Password</label>
                                                                <div class="col-lg-12 col-xl-12">
                                                                    <input class="form-control" type="password"
                                                                        placeholder="Confirm Password">
                                                                </div>
                                                            </div>

                                                            <div class="form-group row">
                                                                <div class="col-lg-12 col-xl-12">
                                                                    <button type="submit"
                                                                        class="btn btn-primary mb-2 mb-md-0">Change
                                                                        Password</button>
                                                                    <button type="button"
                                                                        class="btn btn-danger">Cancel</button>
                                                                </div>
                                                            </div>

                                                        </div><!--end card-body-->
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div> <!-- end education -->

                                </div> <!-- Tab panes -->
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!-- container-fluid -->
        </div>
        <!-- content -->

    </div>
@endsection