@extends('layouts.seller.app')
@section('title', 'Change Password | Chemical Wholesale')
@section('content')
    <div class="cw-content">
        <div class="container-fluid">
            <div class="cw-content-inner">
                <div class="cw-content-body">
                    <div class="cw-block-head cw-block-head-sm">
                        <div class="cw-block-between d-flex justify-content-between align-items-center">
                            <div class="cw-block-head-content">
                                <h3 class="cw-block-title page-title mb-0 d-flex align-items-center">
                                    Change Password
                                </h3>
                                <div class="cw-block-des text-soft mt-1">
                                    <p>Change your seller Password</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    @include('layouts.seller.flash')
                    <form action="{{ route('seller.password.update', $profile['uuid']) }}" method="POST" id="changePasswordForm" enctype="multipart/form-data">
                        @csrf
                        <div class="add-product">
                            <div class="card">
                                <div class="card-body">
                                    <div class="form-group col-md-6 mb-2 mb-sm-3">
                                        <label class="form-label">Old Password</label>
                                        <div class="input-group">
                                            <input class="form-control password-input" type="password" id="oldpassword" name="oldpassword" placeholder="Old Password" autofocus require>
                                            <span class="password-input-eye" onclick="oldpassword()">
                                                <i class="bi bi-eye"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-6 mb-2 mb-sm-3">
                                        <label class="form-label">New Password</label>
                                        <div class="input-group">
                                            <input class="form-control password-input" type="password" id="password" name="password" placeholder="Password" require>
                                            <span class="password-input-eye" onclick="password()">
                                                <i class="bi bi-eye"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-6 mb-2 mb-sm-3">
                                        <label class="form-label">Confirm New Password</label>
                                        <div class="input-group">
                                            <input class="form-control password-input" type="password" id="password_confirmation" name="password_confirmation" placeholder="Confirm New Password" require>
                                            <span class="password-input-eye" onclick="password_confirmation()">
                                                <i class="bi bi-eye"></i>
                                            </span>
                                        </div>
                                        <div id="password_confirmation-error" class="invalid-feedback"></div>
                                    </div>
                                    <div>
                                        <button type="submit" class="btn-formpage-submit">Save</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
  <!-- Validation js for this page-->
  <script src="{{ asset('assets/dashboard/js/form-validation.js') }}"></script>
  <!-- End Validation js for this page-->
  <script>
        $('form').submit(function(e) {
            var submitBtn = $(this).find('button[type="submit"]');
            submitBtn.html('<span class="spinner me-2"></span>Saving');
            setTimeout(function() {
                submitBtn.removeAttr('disabled');
                submitBtn.html('Save');
            }, 1000);
        });
  </script>

    <script>
        function oldpassword() {
            var passwordField = $('#oldpassword');
            var newType = passwordField.attr('type') === 'password' ? 'text' : 'password';
            passwordField.attr('type', newType);
            passwordField.next('span').find('i').toggleClass('bi-eye bi-eye-slash');
        }
    </script>
    <script>
        function password() {
            var passwordField = $('#password');
            var newType = passwordField.attr('type') === 'password' ? 'text' : 'password';
            passwordField.attr('type', newType);
            passwordField.next('span').find('i').toggleClass('bi-eye bi-eye-slash');
        }
    </script>
    <script>
        function password_confirmation() {
            var passwordField = $('#password_confirmation');
            var newType = passwordField.attr('type') === 'password' ? 'text' : 'password';
            passwordField.attr('type', newType);
            passwordField.next('span').find('i').toggleClass('bi-eye bi-eye-slash');
        }
    </script>
@endpush