@extends('user::layouts.master')
@section('breadcrumb_title', trans('backend::translate.Password Change'))

@section('content')

    <div class="flex items-center justify-between mb-6">
        <h2 class="text-2xl font-semibold">Update Password</h2>
    </div>

    <div class="card">
        <form action="{{ route('user.update-password') }}" method="POST">
            @csrf

            <div class="mb-4 input-with-label">
                <label>Current Password <span class="text-red-500">*</span></label>
                <div class="flex relative items-center">
                    {{-- Lock Icon --}}
                    <svg class="absolute left-4" width="20" height="20" viewBox="0 0 20 20" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0_231_3867)">
                            <rect x="1.66669" y="5" width="16.6667" height="13.3333" rx="4" stroke="#667085"
                                stroke-width="1.5"></rect>
                            <ellipse cx="9.99998" cy="11.6667" rx="1.66667" ry="1.66667" stroke="#667085"
                                stroke-width="1.5"></ellipse>
                            <path
                                d="M13.3334 5.00033C13.3334 3.15938 11.841 1.66699 10 1.66699C8.15907 1.66699 6.66669 3.15938 6.66669 5.00033"
                                stroke="#667085" stroke-width="1.5"></path>
                        </g>
                        <defs>
                            <clipPath id="clip0_231_3867">
                                <rect width="20" height="20" fill="white"></rect>
                            </clipPath>
                        </defs>
                    </svg>

                    <input type="password" id="current_password" name="current_password"
                        class="!pl-12 w-full border rounded py-2 px-3" placeholder="Current Password" required>

                    {{-- Toggle Button --}}
                    <button type="button" class="absolute right-4 text-headline text-14 toggle-password"
                        data-target="#current_password">
                        <svg class="eye-show hidden" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path d="M3 3L21 21" stroke="#667085" stroke-width="1.5" stroke-linecap="round"
                                stroke-linejoin="round"></path>
                            <path
                                d="M10.584 10.5869C10.2087 10.9619 9.99775 11.4707 9.99756 12.0012C9.99737 12.5317 10.2079 13.0406 10.583 13.4159C10.958 13.7912 11.4667 14.0021 11.9973 14.0023C12.5278 14.0025 13.0367 13.7919 13.412 13.4169"
                                stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path
                                d="M9.363 5.36506C10.2204 5.11978 11.1082 4.9969 12 5.00006C16 5.00006 19.333 7.33306 22 12.0001C21.222 13.3611 20.388 14.5241 19.497 15.4881M17.357 17.3491C15.726 18.4491 13.942 19.0001 12 19.0001C8 19.0001 4.667 16.6671 2 12.0001C3.369 9.60506 4.913 7.82506 6.632 6.65906"
                                stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                        <svg class="eye-hide" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path d="M1 12C3.5 7 7.5 4 12 4C16.5 4 20.5 7 23 12C20.5 17 16.5 20 12 20C7.5 20 3.5 17 1 12Z"
                                stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            <circle cx="12" cy="12" r="3" stroke="#667085" stroke-width="1.5"
                                stroke-linecap="round" stroke-linejoin="round"></circle>
                        </svg>
                    </button>
                </div>
                @error('current_password')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-4 input-with-label">
                <label>New Password <span class="text-red-500">*</span></label>
                <div class="flex relative items-center">
                    {{-- Lock Icon --}}
                    <svg class="absolute left-4" width="20" height="20" viewBox="0 0 20 20" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0_231_3867)">
                            <rect x="1.66669" y="5" width="16.6667" height="13.3333" rx="4" stroke="#667085"
                                stroke-width="1.5"></rect>
                            <ellipse cx="9.99998" cy="11.6667" rx="1.66667" ry="1.66667" stroke="#667085"
                                stroke-width="1.5"></ellipse>
                            <path
                                d="M13.3334 5.00033C13.3334 3.15938 11.841 1.66699 10 1.66699C8.15907 1.66699 6.66669 3.15938 6.66669 5.00033"
                                stroke="#667085" stroke-width="1.5"></path>
                        </g>
                        <defs>
                            <clipPath id="clip0_231_3867">
                                <rect width="20" height="20" fill="white"></rect>
                            </clipPath>
                        </defs>
                    </svg>

                    <input type="password" id="password" name="password"
                        class="!pl-12 w-full border rounded py-2 px-3" placeholder="New Password" required>

                    {{-- Toggle Button --}}
                    <button type="button" class="absolute right-4 text-headline text-14 toggle-password"
                        data-target="#password">
                        <svg class="eye-show hidden" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path d="M3 3L21 21" stroke="#667085" stroke-width="1.5" stroke-linecap="round"
                                stroke-linejoin="round"></path>
                            <path
                                d="M10.584 10.5869C10.2087 10.9619 9.99775 11.4707 9.99756 12.0012C9.99737 12.5317 10.2079 13.0406 10.583 13.4159C10.958 13.7912 11.4667 14.0021 11.9973 14.0023C12.5278 14.0025 13.0367 13.7919 13.412 13.4169"
                                stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path
                                d="M9.363 5.36506C10.2204 5.11978 11.1082 4.9969 12 5.00006C16 5.00006 19.333 7.33306 22 12.0001C21.222 13.3611 20.388 14.5241 19.497 15.4881M17.357 17.3491C15.726 18.4491 13.942 19.0001 12 19.0001C8 19.0001 4.667 16.6671 2 12.0001C3.369 9.60506 4.913 7.82506 6.632 6.65906"
                                stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                        <svg class="eye-hide" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path d="M1 12C3.5 7 7.5 4 12 4C16.5 4 20.5 7 23 12C20.5 17 16.5 20 12 20C7.5 20 3.5 17 1 12Z"
                                stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            <circle cx="12" cy="12" r="3" stroke="#667085" stroke-width="1.5"
                                stroke-linecap="round" stroke-linejoin="round"></circle>
                        </svg>
                    </button>
                </div>
                @error('password')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-4 input-with-label">
                <label>Re-type New Password <span class="text-red-500">*</span></label>
                <div class="flex relative items-center">
                    {{-- Lock Icon --}}
                    <svg class="absolute left-4" width="20" height="20" viewBox="0 0 20 20" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0_231_3867)">
                            <rect x="1.66669" y="5" width="16.6667" height="13.3333" rx="4" stroke="#667085"
                                stroke-width="1.5"></rect>
                            <ellipse cx="9.99998" cy="11.6667" rx="1.66667" ry="1.66667" stroke="#667085"
                                stroke-width="1.5"></ellipse>
                            <path
                                d="M13.3334 5.00033C13.3334 3.15938 11.841 1.66699 10 1.66699C8.15907 1.66699 6.66669 3.15938 6.66669 5.00033"
                                stroke="#667085" stroke-width="1.5"></path>
                        </g>
                        <defs>
                            <clipPath id="clip0_231_3867">
                                <rect width="20" height="20" fill="white"></rect>
                            </clipPath>
                        </defs>
                    </svg>

                    <input type="password" id="password_confirmation" name="password_confirmation"
                        class="!pl-12 w-full border rounded py-2 px-3" placeholder="Re-type New Password" required>

                    {{-- Toggle Button --}}
                    <button type="button" class="absolute right-4 text-headline text-14 toggle-password"
                        data-target="#password_confirmation">
                        <svg class="eye-show hidden" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path d="M3 3L21 21" stroke="#667085" stroke-width="1.5" stroke-linecap="round"
                                stroke-linejoin="round"></path>
                            <path
                                d="M10.584 10.5869C10.2087 10.9619 9.99775 11.4707 9.99756 12.0012C9.99737 12.5317 10.2079 13.0406 10.583 13.4159C10.958 13.7912 11.4667 14.0021 11.9973 14.0023C12.5278 14.0025 13.0367 13.7919 13.412 13.4169"
                                stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path
                                d="M9.363 5.36506C10.2204 5.11978 11.1082 4.9969 12 5.00006C16 5.00006 19.333 7.33306 22 12.0001C21.222 13.3611 20.388 14.5241 19.497 15.4881M17.357 17.3491C15.726 18.4491 13.942 19.0001 12 19.0001C8 19.0001 4.667 16.6671 2 12.0001C3.369 9.60506 4.913 7.82506 6.632 6.65906"
                                stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                        <svg class="eye-hide" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path d="M1 12C3.5 7 7.5 4 12 4C16.5 4 20.5 7 23 12C20.5 17 16.5 20 12 20C7.5 20 3.5 17 1 12Z"
                                stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            <circle cx="12" cy="12" r="3" stroke="#667085" stroke-width="1.5"
                                stroke-linecap="round" stroke-linejoin="round"></circle>
                        </svg>
                    </button>
                </div>
                @error('password_confirmation')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>


            <button type="submit" class="btn btn-primary">Update password</button>
        </form>
    </div>
@endsection

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function() {
            $('.toggle-password').on('click', function() {
                const input = $($(this).data('target'));
                const type = input.attr('type') === 'password' ? 'text' : 'password';
                input.attr('type', type);

                // toggle icons
                $(this).find('.eye-show').toggleClass('hidden');
                $(this).find('.eye-hide').toggleClass('hidden');
            });
        });
    </script>
@endpush