@extends('layouts.app')
@section('title', 'New Submission')
@section('content')
<div class="col-md-8 m-auto text-center mb-3 mobile-space">
   <p class=" text-22 pt-2"><b>Account Setting</b></p>
</div>
@include('includes.alerts')
<div class="container p-0">
    <div class="d-flex align-items-center flex-wrap mb-3">
        <div class="col-md-8 col-sm-12">
        <p class=" text-18"><strong>Change Password</strong></p>
        </div>
        <div class="col-md-4 col-sm-12">
        <button type="button" class="btn btn-block shadow border-0 py-2 text-uppercase col-md-8 m-auto  border-radius" data-toggle="modal" data-target="#change-password-modal">
            <span class="link button text-18">Generate Password</span>
        </button>
        </div>
    </div>
    <div class="d-flex align-items-center flex-wrap mb-3">
        <div class="col-md-8 mb-5 col-sm-12 margin-off ">
        <p class="text-white text-18 "><strong>Are You Sure You Want To Logout ?</strong></p>
        </div>
        <div class="col-md-4 col-sm-12">
        <button type="button" class="btn btn-block shadow border-0 py-2 text-uppercase col-md-8 m-auto  border-radius" data-toggle="modal" data-target="#modal-11">
            <span class="link button text-18">Log out</span>
        </button>
        </div>
    </div>
</div>

<!-- change password Modal -->
<div class="modal fade" id="change-password-modal" tabindex="-1" role="dialog" aria-labelledby="change-password-modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <form id="change-password-form" action="{{ route('password.update') }}" method="POST">
                @csrf
                <div class="form-group position-relative mb-5 col-md-12">
                   <label for="new_password">New Password <span class="text-danger">*</span></label>
                   <input type="password" class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none pb-3 text-white" id="new_password" name="new_password" placeholder="Enter New Password">
                </div>
                <div class="form-group position-relative mb-5 col-md-12">
                   <label for="confirm_password">Confirm Password <span class="text-danger">*</span></label>
                   <input type="password" class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none pb-3 text-white" id="confirm_password" name="confirm_password" placeholder="Enter Confirm Password">
                </div>
                <div class="col-md-12">
                   <button type="submit" class="btn-block shadow border-0 text-uppercase col-md-4 m-auto pt-2 pb-2 back-red-button border-radius-7">
                      <strong class="text-18 text-white">Save</strong>
                   </button>
                </div>
             </form>
        </div>
    </div>
  </div>
</div>

<!-- logout Modal -->
<div class="modal fade" id="modal-11" tabindex="-1" role="dialog" aria-labelledby="modal-11Label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <h3 class="text-white text-16 pb-3 text-center">Are You Sure You Want To LogOut?</h3>
            <div class="d-flex col-md-12">
                <div class="col-md-6">
                   <form action="{{ route('front.logout') }}" method="POST" id="logout-form">
                      @csrf
                      <button type="submit" class="btn-block shadow border-0 text-uppercase col-md-12 m-auto pt-2 pb-2 back-red-button border-radius-7">
                      <strong class="text-18 text-white">Yes</strong>
                      </button>
                   </form>
                </div>
                <div class="col-md-6">
                   <button class="btn-block shadow border-0 text-uppercase col-md-12 m-auto pt-2 pb-2 back-red-button border-radius-7" data-dismiss="modal">
                   <strong class="text-18 text-white">No</strong>
                   </button>
                </div>
             </div>
        </div>
    </div>
  </div>
</div>
@endsection
@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script  src="{{ asset('assets/frontend/js/my-profile.js') }}"></script>
<script>
    function previewImage(event) {
        const profilePic = document.getElementById("profilePic");
        const file = event.target.files[0];

        if (file) {
            const reader = new FileReader();
            reader.onload = function (e) {
                profilePic.style.backgroundImage = `url(${e.target.result})`;
            };
            reader.readAsDataURL(file);
        }
    }
</script>
@endsection