@extends('new_layouts.app')
@section('content')
<style>

   .main-head input {
        background: unset;
        color: #fff;
        border: none;
        border-bottom: 1px solid #fff;
        border-radius: 0;
        width: 100%;
         padding: 14px 42px 3px 3px;

    }

    .main-head  .input-wrap {
        position: relative;
        margin-bottom: 10px;
    }

    input:focus {
        outline: 0px;
    }

    .main-head   .input-wrap label {
        bottom: 5px;

        position: absolute;
        font-size: 14px;
        color: #FFF;
        z-index: 2;
        padding: 0 5px;
        -webkit-transition: all 300ms ease;
        -moz-transition: all 300ms ease;
        -ms-transition: all 300ms ease;
        -o-transition: all 300ms ease;
        transition: all 300ms ease;
    }

    .main-head .input-wrap label.active {
        top: 0px;
        font-size: 10px;
    }

    .main-head  .input-wrap label.active.hidden {
        opacity: 1;
        z-index: 2;
    }

    .main-head .input-wrap label.hidden {
        opacity: 0;
        z-index: -1;
    }
    .profile{
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
        height: 100vh;
    overflow: auto;
    }
    .profile-icon{
        width: 100px;
    height: 100px;
    }
    .form__input-group label{
        color: #6c757d;
    }
    .profile  input[type="date"]::-webkit-inner-spin-button,
    .profile input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}
.edit-icn{
    position: absolute;
    right: 30%;
    bottom: 25px;
    background: #ffc107;
    border-radius: 50%;
    padding: 4px;
    text-align: center;
    height: 30px;
    width: 29px;
}
.file-label {
    display: inline-block;
    cursor: pointer;
}

.file-label img {
    width: 100px; /* Adjust the width of the icon */
    height: 100px; /* Adjust the height of the icon */
    /* Additional styles for the icon */
}

/* Hide the default file input */


    .yellow-box{
        background-color: red;
        background-image:unset;
    }
   header  .osahan-header{
        display:none!important;
    }

    input.custom-date{
            background: unset;
          
              box-sizing: border-box;

    }
    .border-unset{
             background-color: rgb(39 39 39);
    border: unset;
    border-bottom: 1px solid #fff;
    outline: unset;
    border-radius: 0;
        color: #fff;
            padding: 14px 42px 3px 3px;
    }
    @media only screen and (min-width:768px){
    .edit-icn {
    right: 42%;
}
}
</style>

    <div class="notification d-flex flex-column vh-100">
<div class="d-flex  main-head align-items-center justify-content-between mb-auto p-3  shadow-lg osahan-header">
            <a href="javascript: history.go(-1)" class="text-white icon back-arrow">
            <img width="12" height="12" src="https://img.icons8.com/ios-filled/50/FFFFFF/back.png" alt="back"></a>
            <h6 class=" w-100 text-center fw-bold text-white">My Account</h6>
          
         </div>
            <form action="{{ route('storeprofile') }}" method="POST" autocomplete="off" enctype='multipart/form-data' >
                @csrf
                    <div class="sign-in  p-3">
                            <div class="profile p-3 pb-4 rounded-3">
                       <div class="justify-content-between mb-3">
                    <div style="text-align: center" class="position-relative">
                        <label for="fileInput" class="file-label">
                            <img src="{{ asset(Auth::user()->image) }}" alt="User Icon" class="img-fluid rounded-circle icon m-auto profile-icon" id="previewImage">
                        </label>
                        <i class="edit-icn ">
                               <img width="20" height="20" src="https://img.icons8.com/ios/50/737373/create-new.png" alt="create-new"/>
                        <input type="file"  name="image" id="fileInput" style="opacity:0  ;  position: absolute;
    left: -53px;
    width: 81px;">
                        </i>
                        </div>
                    </div>

                <div class=" main-head ">
                    <div class="d-flex">
                    <img width="20" height="20" src="https://img.icons8.com/ios/50/737373/create-new.png" alt="create-new"/>
                    <h6 class="mb-0 ms-2 me-auto fw-bold text-white">Profile Details</h6>
                    </div>
                     <div class="d-flex justify-content-between align-items-center">
                    <div><i class="mdi icon-profile mdi-account"></i></div>
                    <div class="form__input-group position-relative w-100">
                        <input class="form__input" type="text" data-placeholder=" Name"  value="{{ Auth::user()->name }}" name="name">
                        <label for="">Name</label>
                        <i class="eye-icon" style="z-index: 1000;">
                            <img width="15" height="15" src="https://img.icons8.com/ios-filled/50/FAB005/checkmark--v1.png" alt="checkmark--v1" />
                        </i>
                    </div>
                    
                      </div>
                      <div class="d-flex justify-content-between align-items-center">
                    <div><i class="mdi icon-profile mdi-email"></i></div>
                    <div class="form__input-group position-relative w-100">
                        <input class="form__input" type="text" value="{{ Auth::user()->email }}" name="email">
                        <label for="">Email Address</label>
                        <i class="eye-icon" style="z-index: 1000;">
                            <img width="15" height="15" src="https://img.icons8.com/ios-filled/50/FAB005/checkmark--v1.png" alt="checkmark--v1" />
                        </i>
                    </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                    <div><i class="mdi icon-profile icon-profile mdi-cellphone"></i></div>
                    <div class="form__input-group position-relative w-100">
                        <input class="form__input" type="text" value="{{ Auth::user()->phone }}" name="phone" readonly>
                        <label for="">Enter Your Phone Number</label>
                        <i class="eye-icon" style="z-index: 1000;">
                            <img width="15" height="15" src="https://img.icons8.com/ios-filled/50/FAB005/checkmark--v1.png" alt="checkmark--v1" />
                        </i>
                    </div>
                    </div>
                      <div class="d-flex justify-content-between align-items-center">
                    <div><i class="mdi icon-profile mdi-account"></i></div>
                    <div class="form__input-group position-relative w-100">
                       <select class="form-select select-width border-unset" name="gender" required aria-label="Default select example">
    <option value="">--- Select Gender ---</option>
    <option value="Male" {{ Auth::user()->gender === 'Male' ? 'selected' : '' }}>Male</option>
    <option value="Female" {{ Auth::user()->gender === 'Female' ? 'selected' : '' }}>Female</option>
</select>

                        <label for="">Gender</label>
                      
                    </div>
                    </div>
                    @php
    $userDob = \Carbon\Carbon::parse(Auth::user()->dob)->format('Y-m-d');
@endphp
  <div class="d-flex justify-content-between align-items-center">
                    <div><i class="mdi icon-profile  mdi-calendar"></i></div>
                    <div class="form__input-group position-relative w-100">
    <!--                    <input type="date" id="date" placeholder="123-45-678" -->
    <!--                    class="text-light-grey float-end d-block rounded-3 custom-date mb-3 p-2" style="    background: url(https://img.icons8.com/material-sharp/24/737373/calendar--v1.png) no-repeat;-->
    <!--background-position: right;">-->
                        
                        <input type="date" id="date" name="dob" placeholder="123-45-678" value="{{ $userDob }}"
                        class="border-unset text-light-grey float-end d-block  custom-date">

                        <label for="">Date Of Birth</label>
                       
                    </div>
                    </div>
                    <!--<div class="form__input-group position-relative">-->
                    <!--    <input class="form__input" type="text" value="Bank Name" name="Bank Name">-->
                    <!--    <label for="">Bank Name</label>-->
                    <!--    <i class="eye-icon" style="z-index: 1000;">-->
                    <!--        <img width="15" height="15" src="https://img.icons8.com/ios-filled/50/FAB005/checkmark--v1.png" alt="checkmark--v1" />-->
                    <!--    </i>-->
                    <!--</div>-->
                   
                    <!--<div class="form__input-group position-relative">-->
                    <!--    <input class="form__input" type="text" value="Branch Name" name="Branch Name">-->
                    <!--    <label for="">Branch Name</label>-->
                    <!--    <i class="eye-icon" style="z-index: 1000;">-->
                    <!--        <img width="15" height="15" src="https://img.icons8.com/ios-filled/50/FAB005/checkmark--v1.png" alt="checkmark--v1" />-->
                    <!--    </i>-->
                    <!--</div>-->
                    <!--<div class="form__input-group position-relative">-->
                    <!--    <input class="form__input" type="text" value="IFSC" name="IFSC">-->
                    <!--    <label for="IFSC">IFSC</label>-->
                    <!--    <i class="eye-icon" style="z-index: 1000;">-->
                    <!--        <img width="15" height="15" src="https://img.icons8.com/ios-filled/50/FAB005/checkmark--v1.png" alt="checkmark--v1" />-->
                    <!--    </i>-->
                    <!--</div>-->
                    <!--<div class="form__input-group position-relative">-->
                    <!--    <input class="form__input" type="text" value="UPI" name="UPI">-->
                    <!--    <label for="UPI">UPI</label>-->
                    <!--    <i class="eye-icon" style="z-index: 1000;">-->
                    <!--        <img width="15" height="15" src="https://img.icons8.com/ios-filled/50/FAB005/checkmark--v1.png" alt="checkmark--v1" />-->
                    <!--    </i>-->
                    <!--</div>-->
                     <div class="d-flex justify-content-center mt-2  w-100 mb-5 mt-3">
                        <p class="text-muted text-end mb-5  w-100 btn btn-sm yellow-common-btn text-dark w-100 rounded-4 mb-2">
                            <input type="submit" class="p-0" value="Update Profile" style="border:unset">
                        </p>

                    </div>
                </div>


           
            </form>
         
                    </div>
                  
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

        <script>
            $('.number').keyup(function(e) {
                if (/\D/g.test(this.value)) {
                    this.value = this.value.replace(/\D/g, '');
                }
            });


// Get references to the file input and image tag
const fileInput = document.getElementById('fileInput');
const previewImage = document.getElementById('previewImage');

// Add an event listener to the file input to detect changes
fileInput.addEventListener('change', function() {
  const file = this.files[0]; // Get the selected file

  if (file) {
    const reader = new FileReader(); // Create a FileReader object

    // Set up the FileReader onload function
    reader.onload = function(event) {
      previewImage.src = event.target.result; // Set the image source to the selected file
    };

    reader.readAsDataURL(file); // Read the file as a data URL
  }
});



        </script>



        <!-- </body autocomplete="off"> -->



        <script src="https://siddhimantra.com/webtheme/vender/bootstrap/js/bootstrap.bundle.min.js"></script>
        <script src="https://siddhimantra.com/webtheme/vender/sidebar/hc-offcanvas-nav.js"></script>
        <script src="https://siddhimantra.com/webtheme/vender/slick/slick/slick.min.js"></script>
        <script src="https://siddhimantra.com/webtheme/js/script.js"></script>
        <script>
            $('.number').keyup(function(e) {
                if (/\D/g.test(this.value)) {
                    this.value = this.value.replace(/\D/g, '');
                }
            });
        </script>
        <script src="https://siddhimantra.com/webtheme/js/displayAds.js"></script>
        
@endsection