@extends('layouts.mainlayout')
@section('title', 'Edit Profile')
@section('main')
<!-- Form validation -->
<div class="card">
    <div class="card-header header-elements-inline">
        <h5 class="card-title icon-users4 font-weight-bold"> Edit Profile</h5>
    </div>
    <div class="card-body">
       
        <form class="form-validate-jquery" action="{{ route('edit-profile.update',$user_id) }}" method="POST" enctype="multipart/form-data">
            <input type="hidden" name="_method" value="PATCH"/>
            @csrf
            <fieldset class="mb-3">
                <legend class="text-uppercase font-size-sm font-weight-bold">{{$name}}</legend>
                <!-- Basic text input -->
                <div class="form-group row">
                    <label class="col-form-label col-lg-3">Old Password</label>
                    <div class="col-lg-9">
                        <input type="password" name="old_password" id="old_password" class="form-control @error('old_password') is-invalid @enderror"
                            placeholder="*****" @if(isset($old_password))  autofocus @endif />
                        @error('old_password')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-form-label col-lg-3">New Password</label>
                    <div class="col-lg-9">
                        <input type="password" name="new_password" id="new_password" class="form-control @error('new_password') is-invalid @enderror"
                            placeholder="*****" @if(isset($new_password))  autofocus @endif  minlength=6 />
                        @error('new_password')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-form-label col-lg-3">Confirm Password</label>
                    <div class="col-lg-9">
                        <input type="password" name="confirm_password" id="confirm_password" class="form-control @error('confirm_password') is-invalid @enderror"
                            placeholder="*****" @if(isset($confirm_password))  autofocus @endif minlength=6 onkeyup="enableChangeButton()" />
                        @error('confirm_password')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                </div>
                <input type="checkbox" onclick="myFunction()"> Show Password
                <!-- /basic text input -->
                <div class="form-group row">
                    <label for="profile_pic" class="col-form-label col-lg-3">Profile Picture:</label>
                    
                    <div class="col-lg-3">
                        <img id="blah" src="{{url('storage/'. $profilePic)}}" height="90px" width="90px" alt="" />
                        <input type="hidden" id="inp-profile-pic" name="profilePic" value="1">
                        @if($profilePic)
                        <button class="btn btn-danger icon-bin btn-sm" onclick="deletePic();"></button>
                        @endif
                        <input type="file" onchange="readURL(this); enableChangeButton();" name="profile_pic"/>
                        <div id="error-message" style="color: red;"></div>

                    </div>
                </div>

            </fieldset>
            <div class="d-flex justify-content-end align-items-center">
                <button id="changeButton" type="submit" class="btn btn-primary ml-3" disabled>Change<i class="icon-paperplane ml-2"></i></button>
                <a class="btn btn-default btn-close btn-danger ml-3" href="{{ route('edit-profile.index') }}">Cancel</a>
            </div>
        </form>
    </div>
</div>
<!-- /form validation -->
<script>
    let profilePic = {{ $profilePic ? 'true' : 'false' }};
  
    function enableChangeButton() {
        const changeButton = document.getElementById("changeButton");
        const confirmPassInput = document.getElementById("confirm_password");
        const profilePicInput = document.querySelector("input[name='profile_pic']");
        
        if (confirmPassInput.value !== "" || profilePicInput.value !== "") {
            changeButton.disabled = false;
        } else {
            changeButton.disabled = true;
        }
    }
  
    function myFunction() {
        var old_password = document.getElementById("old_password");
        var new_password = document.getElementById("new_password");
        var confirm_password = document.getElementById("confirm_password");

        if (old_password.type === "password") {
            old_password.type = "text";
        } else {
            old_password.type = "password";
        }

        if (new_password.type === "password") {
            new_password.type = "text";
        } else {
            new_password.type = "password";
        }

        if (confirm_password.type === "password") {
            confirm_password.type = "text";
        } else {
            confirm_password.type = "password";
        }
    }

    function readURL(input) {
        if (input.files && input.files[0]) {
            var file = input.files[0];
            var fileSize = file.size; 
            if (fileSize > 1024 * 1024) {
                $('#error-message').text("Image size must be 1 MB or less.");
                input.value = ''; 
                return; 
            }
            else{
                $('#error-message').text('');

            
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah')
                    .attr('src', e.target.result)
                    .width(150)
                    .height(100);
            };
            reader.readAsDataURL(input.files[0]);
            $("#inp-profile-pic").val('1');
           }
        }
    }

    function deletePic() {
        $("#inp-profile-pic").val('0');
    }
</script>
@endsection