@extends('main')
@section('title', $data['title'])
@section('content')


<style type="text/css">


    input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}


.card-2 {

  padding: 10px;
  width: 350px;
  height: 100px;
  bottom: -50px;
  left: 20px;
  position: absolute;
  border-radius: 5px;
}
.card-2 .content {
  margin-top: 50px;
}
</style>
<div class="page-content ">
    <div class="" style="justify-items: center;">
        <!-- Page Title -->
        <div class="row">
          
        </div>
        <!-- End Page Title -->

        @if(Auth::user()->is_changed_password == 0)
        <div class="col-5">
        @if(isset($data['subscription_error']))
        <div class="alert alert-danger" role="alert">
            <i class="fa fa-exclamation-triangle me-2"></i> {{ $data['subscription_error'] }}
        </div>
        @else
        <div class="alert alert-warning" role="alert">
            <i class="fa fa-exclamation-circle me-2"></i> Please change your password to access the website for security reasons.
        </div>
        @endif
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <form method="POST" id="formPassword"  action="{{route('do.changepassword')}}"  class="p-4 border rounded shadow-sm bg-light" @if(isset($data['subscription_error'])) style="pointer-events: none; opacity: 0.6;" @endif>
                            @csrf
                            <!-- Information Alert -->
                           

                            <!-- Old Password Field -->
                            @if(Auth::user()->is_changed_password == 1)
                            <div class="mb-3">
                                <label for="old_password" class="form-label">Old Password</label>
                                <div class="input-group">
                                    <input type="password" class="form-control" placeholder="Enter Old Password"  name="old_password" id="old_password" required>
                                    <span class="input-group-text toggle-password-change"><i class="bx bxs-hide" style="font-size: 17px;"></i></span>

                                </div>
                            </div>
                            @endif

                            <!-- New Password Field -->
                            <div class="mb-3">
                                <label for="new_password" class="form-label">New Password</label>
                                <div class="input-group">
                                    <input type="password" class="form-control" placeholder="Enter New Password"  name="new_password" id="new_password" required>
                                    <span class="input-group-text toggle-password-change"><i class="bx bxs-hide" style="font-size: 17px;"></i></span>

                                </div>
                            </div>

                            <!-- Confirm New Password Field -->
                            <div class="mb-3">
                                <label for="confirm_password" class="form-label">Confirm Password</label>
                                <div class="input-group">
                                    <input type="password" class="form-control" placeholder="Confirm New Password"  name="confirm_password" id="confirm_password" required>
                                    <span class="input-group-text toggle-password-change"><i class="bx bxs-hide" style="font-size: 17px;"></i></span>

                                </div>
                            </div>

                            <!-- Submit and Reset Buttons -->
                            <div class="gap-2">
                                <button type="submit" class="btn btn-primary" id="changepass">
                                    <i class="fa fa-save me-2"></i> Update
                                </button>
                                <button type="reset" class="btn btn-secondary">
                                    <i class="fa fa-refresh me-2"></i> Reset
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        </div>
        @endif

      
    </div>
</div>

                <!-- End Page-content -->







@endsection('content')
@section('custom-scripts')
<script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>
<script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>
<script>

    
$(document).ready(function () {
            $(".toggle-password-change").on("click", function () {
                let inputField = $(this).siblings("input");
                let icon = $(this).find("i");
                if (inputField.attr("type") === "password") {
                    inputField.attr("type", "text");
                    icon.removeClass("bxs-hide").addClass("bxs-show");
                } else {
                    inputField.attr("type", "password");
                    icon.removeClass("bxs-show").addClass("bxs-hide");
                }
            });

        });
     $(document).ready(function() {
           var options = {
                beforeSubmit: showRequest, 
                success: showResponse 
            };

            $('#formPassword').ajaxForm(options);
        });
    
    
        function showRequest(formData, jqForm, options) {
            var queryString = $.param(formData);

            $("#changepass").html("Processing...");
            $("#changepass").prop('disabled', true); 

            return true;
        }

        function showResponse(responseText, statusText, xhr, $form) {
           
            if ($form[0]['id'] == "formPassword") {
                if (responseText['status'] == 1) {
                    flasher.success(responseText['msg'], { timeout: 2000 });
                    if (responseText.redirect) {
                        setTimeout(function() {
                            window.location.href = responseText.redirect;
                        }, 2000);  
                    }
                    
                   
                } else {
                    flasher.error(responseText['msg'], { timeout: 5000 });
                    $("#changepass").html("Save");
                        $("#changepass").prop('disabled', false);
                }
            } 
        }



</script>
@endsection