@push('styles')
<style>
    .right-4 {
        right: 4%;
    }
</style>
@endpush
<div>
    <section class="profileview">
        <div class="container py-2">
            <div class="row">
                <div class="col-xl-3">
                    <div class="profilesticky">
                        <ul class="nav nav-pills flex-column" id="pills-tab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <a class="nav-link {{ $page === 'profile' ? 'active' : '' }}" title="Profile"
                                    href="{{ route('profile') }}">
                                    Profile
                                </a>
                            </li>

                            <li class="nav-item" role="presentation">
                                <a class="nav-link {{ $page === 'change-password' ? 'active' : '' }}" title="Change Password"
                                    href="{{ route('change.password') }}">
                                    Change Password
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="col-xl-9">
                    <div class="tab-content border-web rounded-3 p-3 w-100" id="pills-tabContent">
                        <div class="tab-pane fade {{ $page === 'profile' ? 'show active' : '' }}" id="pills-profile">
                            <div class="col-xl-12 border-bottom pb-2 mb-2">
                                <span class="text-center d-block h4 fw-bold">User Profile</span>
                            </div>

                            @if (session('success'))
                            <div x-data="{ show: true }" x-init="setTimeout(() => show = false, 3000)" x-show="show"
                                x-transition class="fixed top-5 alert alert-success text-center z-30 bg-green-100 text-success px-4 py-3 rounded-lg shadow-lg w-fit mx-auto">
                                {{ session('success') }}
                            </div>
                            @endif

                            @if (session('error'))
                            <div x-data="{ show: true }" x-init="setTimeout(() => show = false, 3000)" x-show="show"
                                x-transition class="fixed alert alert-danger text-center top-5 z-50 bg-red-500 text-danger px-4 py-3 rounded-lg shadow-lg w-fit mx-auto">
                                {{ session('error') }}
                            </div>
                            @endif


                            <form class="mt-3">
                                <x-user-details-card
                                    :countries=$countries :states=$states
                                    :shareUrl=$shareUrl
                                    :url="Url('/sign-up/' . ($user['referral_code'] ?? ''))"
                                    :page=$page
                                    :isVerified="$isVerified"
                                    :showOtpField="$showOtpField"
                                    :otpMessage="$otpMessage"
                                    :isChangingEmail="$isChangingEmail"
                                    :editingEmail="$editingEmail" />

                                {{-- Success and Error Messages --}}
                                @if (session()->has('success'))
                                <div x-data="{ show: true }" x-init="setTimeout(() => show = false, 3000)" x-show="show"
                                    x-transition class="fixed top-5 alert alert-success text-center z-30 bg-green-100 text-success px-4 py-3 rounded-lg shadow-lg w-fit mx-auto">
                                    {{ session('success') }}
                                </div>
                                @endif

                                @if (session()->has('error'))
                                <div x-data="{ show: true }" x-init="setTimeout(() => show = false, 30000)" x-show="show"
                                    x-transition class="fixed alert alert-danger text-center top-5 z-50 bg-red-500 text-danger px-4 py-3 rounded-lg shadow-lg w-fit mx-auto">
                                    {{ session('error') }}
                                </div>
                                @endif

                                <div class="d-flex gap-2 justify-content-center">
                                    <button type="button" wire:click="update"
                                        class="btn btn-primary"
                                        title="Update Profile">Update Profile</button>
                                </div>
                            </form>
                        </div>

                        <div class="tab-pane fade {{ $page === 'change-password' ? 'show active' : '' }}" id="pills-change">
                            <div class="col-12 position-relative">
                                @if (session()->has('success'))
                                <div x-data="{ show: true }" x-init="setTimeout(() => show = false, 10000)" x-show="show" x-transition
                                    class="alert alert-success text-center bg-green-500 text-white px-4 py-3 rounded-lg shadow-lg">
                                    {{ session('success') }}
                                </div>

                                @endif

                                @if (session()->has('error'))
                                <div x-data="{ show: true }" x-init="setTimeout(() => show = false, 10000)" x-show="show" x-transition
                                    class="alert alert-danger text-center bg-red-500 text-white px-4 py-3 rounded-lg shadow-lg">
                                    {{ session('error') }}
                                </div>
                                @endif
                            </div>
                            <form id="loginForm" wire:submit.prevent='resetPassword'>
                                <div class="row">
                                    <div class="col-xl-12 text-center mb-4">
                                        <h1 class="h3 fw-bold mb-0 text-black">Forgot Password</h1>
                                        <h2 class="fs-15 fw-regular text-muted my-1">Enter your email address below to reset your password.</h2>
                                    </div>

                                    <div id="loginError" class="col-12 text-center text-danger mb-2"></div>
                                    <div class="col-xl-12 mb-3 position-relative">
                                        <label class="fw-bold">Password</label>
                                        <div class="input-group">
                                            <input
                                                type="password"
                                                class="form-control @error('password') is-invalid @enderror"
                                                placeholder="Enter your Old Password"
                                                name="password"
                                                wire:model.defer="password"
                                                id="passwordInput_old" />
                                            <button type="button" class="btn btn-outline-secondary toggle-btn" data-target="passwordInput_old">
                                                <i class="fa-solid fa-eye"></i>
                                            </button>
                                        </div>
                                        @error('password')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-xl-12 mb-3 position-relative">
                                        <label class="fw-bold">New Password</label>
                                        <div class="input-group">
                                            <input
                                                type="password"
                                                class="form-control @error('newPassword') is-invalid @enderror"
                                                placeholder="Enter New Password"
                                                name="New Password"
                                                wire:model.defer="newPassword"
                                                id="passwordInput_new" />
                                            <button type="button" class="btn btn-outline-secondary toggle-btn" data-target="passwordInput_new">
                                                <i class="fa-solid fa-eye"></i>
                                            </button>
                                            @error('newPassword') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                        </div>
                                    </div>
                                    <div class="col-xl-12 mb-3 position-relative">
                                        <label class="fw-bold">confirmed Password</label>
                                        <div class="input-group">
                                            <input
                                                type="password"
                                                class="form-control @error('newPassword_confirmation') is-invalid @enderror"
                                                placeholder="Enter your Confirmed Password"
                                                name="Password Confirmation"
                                                wire:model.defer="newPassword_confirmation"
                                                id="passwordInput_confirm" />
                                            <button type="button" class="btn btn-outline-secondary toggle-btn" data-target="passwordInput_confirm">
                                                <i class="fa-solid fa-eye"></i>
                                            </button>
                                            @error('newPassword_confirmation') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                        </div>
                                    </div>

                                    <div class="col-xl-12 mb-1 w-fit mx-auto">
                                        <button type="submit" class="btn btn-primary text-center fw-bold shadow-sm">Change Password</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            document.querySelectorAll(".toggle-btn").forEach(button => {
                button.addEventListener("click", function() {
                    const targetId = this.dataset.target;
                    const input = document.getElementById(targetId);
                    const icon = this.querySelector("i");

                    if (input.type === "password") {
                        input.type = "text";
                        icon.classList.remove("fa-eye");
                        icon.classList.add("fa-eye-slash");
                    } else {
                        input.type = "password";
                        icon.classList.remove("fa-eye-slash");
                        icon.classList.add("fa-eye");
                    }
                });
            });
        });
    </script>
    @endpush

</div>