@extends('layout.maincontant')
@section('page-to-tittle')
    <h6 class="float-start m-0 them-fs-2">My Profile</h6>
@endsection
@section('main-content')
<style>
.btn-outline-secondary {
    --bs-btn-color: #52050a;
    --bs-btn-border-color: #ded9d9;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #f6f6f6;
    --bs-btn-hover-border-color: #f6f6f6;
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #f6f6 f;
    --bs-btn-active-border-color: #f6f6f6;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #f6f6f6;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #f6f6f6;
    --bs-gradient: none;
}
input{
    border: 1px solid  #ded9d9 !important;
}
</style>
    <div class="row">
        <div class="col-md-8 bg-white mb-2">
            <div class="row py-3">
                <div class="col-md-8 d-flex align-items-center">
                    <div class='px-3'>
                        <img style="height:80px;" class=" rounded-circle"
                            src="data:image/jpeg;base64,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"
                            alt="Member 1">
                    </div>
                    <div>
                        <p class="fs-15 fw-6 p-0 pt-1 m-0">Selvakumar</p>
                        <p class="fs-15 p-0 m-0">Selvakumar@gmail.com</p>
                    </div>
                </div>
                <div class="col-md-8 row p-3 px-4">
                    <div class="col-md-6 pb-2">
                        <label for="fname" class="form-label fs-15">First Name</label>
                        <input type="text" class="form-control form-control-sm" id="fname" value="{{ auth()->user()->fname }}">
                    </div>
                    <div class="col-md-6 pb-2">
                        <label for="lname" class="form-label fs-15">Last Name</label>
                        <input type="text" value="{{ auth()->user()->lname }}" class="form-control form-control-sm" id="lname">
                    </div>
                    <div class="col-md-12 pb-2">
                        <label for="gmail" class="form-label fs-15">Gmail</label>
                        <input type="text" value="{{ auth()->user()->email }}" class="form-control form-control-sm" id="gmail">
                    </div>
                    <div class="col-md-6 pb-2">
                        <label for="password" class="form-label fs-15">Password</label>
                        <div class=" input-group px-1">
                            <input type="password" class="form-control form-control-sm" id="password">
                            <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('password')">
                                <i class="fa fa-eye"></i>
                            </button>
                        </div>
                    </div>
                    <div class="col-md-6 pb-2">
                        <label for="confirm-password" class="form-label fs-15">Confirm Password</label>
                        <div class=" input-group px-1">
                            <input type="password" class="form-control form-control-sm" id="confirm-password">
                            <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('confirm-password')">
                                <i class="fa fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- test -->
    <script>
        function togglePassword(id) {
            var input = document.getElementById(id);
            var icon = input.nextElementSibling.querySelector('i');
            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        }
    </script>
@endsection