@extends('layouts.app')

@section('title', 'Profile')

@section('page-wrapper')
    <div class="page-header d-print-none">
        <div class="container-fluid">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <h2 class="page-title">
                        Profile
                    </h2>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body">
        <div class="container-fluid">
            <div class="card">
                <div class="row">
                    @include('profile.general-setting-items')
                    <div class="col-12 col-md-9 d-flex flex-column ps-0">
                        <form method="post" class="border-start" action="{{ route('password.update') }}">
                            @csrf
                            @method('put')
                            <div class="card-body">
                                <h2 class="mb-4">Change Password</h2>
                                @if (session('status'))
                                    <script>
                                        // Ensure this code runs after the page is loaded
                                        document.addEventListener('DOMContentLoaded', function() {
                                            showSuccessMessage("Password updated successfully!");
                                        });
                                    </script>
                                @endif
                                <div class="row">
                                    <div class="col-12 col-md-4">
                                        <label class="form-label required">Current Password</label>
                                        <div class="input-group shadow-none input-group-flat">
                                            <input id="update_password_current_password" name="current_password"
                                                type="password"
                                                class="form-control @error('current_password', 'updatePassword') is-invalid @enderror"
                                                placeholder="Enter current password" value="" required autofocus
                                                autocomplete="off">
                                            <span class="input-group-text">
                                                <a href="#" class="link-secondary show-pass"
                                                    onclick="togglePass('#update_password_current_password','show')"
                                                    data-bs-toggle="tooltip" aria-label="Show Password"
                                                    data-bs-original-title="Show password">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                        height="24" viewBox="0 0 24 24" stroke-width="2"
                                                        stroke="currentColor" fill="none" stroke-linecap="round"
                                                        stroke-linejoin="round">
                                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                        <circle cx="12" cy="12" r="2"></circle>
                                                        <path
                                                            d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7">
                                                        </path>
                                                    </svg>
                                                </a>
                                                <a href="#" class="link-secondary hide-pass d-none"
                                                    onclick="togglePass('#update_password_current_password','hide')"
                                                    data-bs-toggle="tooltip" aria-label="Hide Password"
                                                    data-bs-original-title="Hide password">
                                                    <svg xmlns="http://www.w3.org/2000/svg"
                                                        class="icon icon-tabler icon-tabler-eye-off" width="32"
                                                        height="32" viewBox="0 0 24 24" stroke-width="2"
                                                        stroke="currentColor" fill="none" stroke-linecap="round"
                                                        stroke-linejoin="round">
                                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                        <line x1="3" y1="3" x2="21" y2="21">
                                                        </line>
                                                        <path d="M10.584 10.587a2 2 0 0 0 2.828 2.83"></path>
                                                        <path
                                                            d="M9.363 5.365a9.466 9.466 0 0 1 2.637 -.365c4 0 7.333 2.333 10 7c-.778 1.361 -1.612 2.524 -2.503 3.488m-2.14 1.861c-1.631 1.1 -3.415 1.651 -5.357 1.651c-4 0 -7.333 -2.333 -10 -7c1.369 -2.395 2.913 -4.175 4.632 -5.341">
                                                        </path>
                                                    </svg>
                                                </a>
                                            </span>
                                            @if ($errors->updatePassword->has('current_password'))
                                                <div class="invalid-feedback">
                                                    {{ $errors->updatePassword->first('current_password') }}
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label class="form-label required">New Password</label>
                                        <div class="input-group shadow-none input-group-flat">
                                            <input id="update_password_password" name="password" type="password"
                                                class="form-control @error('password', 'updatePassword') is-invalid @enderror"
                                                placeholder="Enter new password" required autocomplete="off" value="">
                                            <span class="input-group-text">
                                                <a href="#" class="link-secondary show-pass"
                                                    onclick="togglePass('#update_password_password','show')"
                                                    data-bs-toggle="tooltip" aria-label="Show Password"
                                                    data-bs-original-title="Show password">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                        height="24" viewBox="0 0 24 24" stroke-width="2"
                                                        stroke="currentColor" fill="none" stroke-linecap="round"
                                                        stroke-linejoin="round">
                                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                        <circle cx="12" cy="12" r="2"></circle>
                                                        <path
                                                            d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7">
                                                        </path>
                                                    </svg>
                                                </a>
                                                <a href="#" class="link-secondary hide-pass d-none"
                                                    onclick="togglePass('#update_password_password','hide')"
                                                    data-bs-toggle="tooltip" aria-label="Hide Password"
                                                    data-bs-original-title="Hide password">
                                                    <svg xmlns="http://www.w3.org/2000/svg"
                                                        class="icon icon-tabler icon-tabler-eye-off" width="32"
                                                        height="32" viewBox="0 0 24 24" stroke-width="2"
                                                        stroke="currentColor" fill="none" stroke-linecap="round"
                                                        stroke-linejoin="round">
                                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                        <line x1="3" y1="3" x2="21"
                                                            y2="21">
                                                        </line>
                                                        <path d="M10.584 10.587a2 2 0 0 0 2.828 2.83"></path>
                                                        <path
                                                            d="M9.363 5.365a9.466 9.466 0 0 1 2.637 -.365c4 0 7.333 2.333 10 7c-.778 1.361 -1.612 2.524 -2.503 3.488m-2.14 1.861c-1.631 1.1 -3.415 1.651 -5.357 1.651c-4 0 -7.333 -2.333 -10 -7c1.369 -2.395 2.913 -4.175 4.632 -5.341">
                                                        </path>
                                                    </svg>
                                                </a>
                                            </span>
                                            @error('password', 'updatePassword')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label class="form-label required">Confirm New Password</label>
                                        <div class="input-group shadow-none input-group-flat">
                                            <input id="update_password_password_confirmation" name="password_confirmation"
                                                type="password"
                                                class="form-control @error('password_confirmation', 'updatePassword') is-invalid @enderror"
                                                placeholder="Enter confirm new password" required autocomplete="off"
                                                value="">
                                            <span class="input-group-text">
                                                <a href="#" class="link-secondary show-pass"
                                                    onclick="togglePass('#update_password_password_confirmation','show')"
                                                    data-bs-toggle="tooltip" aria-label="Show Password"
                                                    data-bs-original-title="Show password">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                        height="24" viewBox="0 0 24 24" stroke-width="2"
                                                        stroke="currentColor" fill="none" stroke-linecap="round"
                                                        stroke-linejoin="round">
                                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                        <circle cx="12" cy="12" r="2"></circle>
                                                        <path
                                                            d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7">
                                                        </path>
                                                    </svg>
                                                </a>
                                                <a href="#" class="link-secondary hide-pass d-none"
                                                    onclick="togglePass('#update_password_password_confirmation','hide')"
                                                    data-bs-toggle="tooltip" aria-label="Hide Password"
                                                    data-bs-original-title="Hide password">
                                                    <svg xmlns="http://www.w3.org/2000/svg"
                                                        class="icon icon-tabler icon-tabler-eye-off" width="32"
                                                        height="32" viewBox="0 0 24 24" stroke-width="2"
                                                        stroke="currentColor" fill="none" stroke-linecap="round"
                                                        stroke-linejoin="round">
                                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                        <line x1="3" y1="3" x2="21"
                                                            y2="21">
                                                        </line>
                                                        <path d="M10.584 10.587a2 2 0 0 0 2.828 2.83"></path>
                                                        <path
                                                            d="M9.363 5.365a9.466 9.466 0 0 1 2.637 -.365c4 0 7.333 2.333 10 7c-.778 1.361 -1.612 2.524 -2.503 3.488m-2.14 1.861c-1.631 1.1 -3.415 1.651 -5.357 1.651c-4 0 -7.333 -2.333 -10 -7c1.369 -2.395 2.913 -4.175 4.632 -5.341">
                                                        </path>
                                                    </svg>
                                                </a>
                                            </span>
                                            @if ($errors->updatePassword->has('password_confirmation'))
                                                <div class="invalid-feedback">
                                                    {{ $errors->updatePassword->first('password_confirmation') }}
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button type="submit" class="btn btn-primary me-3">Save</button>
                                <a href="{{ url()->previous() }}" class="btn">Cancel</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // console.log('Dashboard page-specific script is running!');
        });
    </script>
@endsection