@extends('admin.layouts.app')
@section('styles')
    
@endsection

@section('content')
@include('admin.layouts.alert')
<div class="my_account">
    <div class="wrapper">
        <!-- LEFT -->
        <div class="profile-card">
            <div class="avatar">
                <img id="avatar-preview"
                    src="{{ $admin->profile_image ? env('FILE_URL').'users/'.$admin->profile_image : asset('assets/images/admin.png') }}"
                    alt="Profile">
                <label class="edit-icon" for="profile_image" style="cursor:pointer;">
                    <svg width="11" height="11" viewBox="0 0 11 11" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M1.16667 9.33333H1.99792L7.7 3.63125L6.86875 2.8L1.16667 8.50208V9.33333ZM0 10.5V8.02083L7.7 0.335417C7.81667 0.228472 7.94549 0.145833 8.08646 0.0875C8.22743 0.0291667 8.37569 0 8.53125 0C8.68681 0 8.8375 0.0291667 8.98333 0.0875C9.12917 0.145833 9.25556 0.233333 9.3625 0.35L10.1646 1.16667C10.2812 1.27361 10.3663 1.4 10.4198 1.54583C10.4733 1.69167 10.5 1.8375 10.5 1.98333C10.5 2.13889 10.4733 2.28715 10.4198 2.42812C10.3663 2.5691 10.2812 2.69792 10.1646 2.81458L2.47917 10.5H0ZM9.33333 1.98333L8.51667 1.16667L9.33333 1.98333ZM7.27708 3.22292L6.86875 2.8L7.7 3.63125L7.27708 3.22292Z"
                            fill="white" />
                    </svg>
                </label>
                <!-- associated with the profile form below via the `form` attribute -->
                <input type="file" name="profile_image" id="profile_image" form="profile-form" accept="image/*" hidden>
            </div>

            <h3>{{ $admin->full_name }}</h3>
            <p>{{ $admin->email }}</p>
            <p class="role">{{ $admin->role->name ?? 'Admin' }}</p>

            <a href="#" class="logout" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Logout</a>
        </div>
        <!-- RIGHT -->
        <div class="right">
            <!-- TABS -->
            <div class="tabs">
                <button class="active" data-tab="profile">Edit Profile</button>
                <button data-tab="password">Change Password</button>
                <button data-tab="notify">Notifications</button>
            </div>
            <!-- PROFILE -->
            <div class="tab-content active" id="profile">
                <form action="{{ route('admin.my_account.profile.update') }}" method="POST" enctype="multipart/form-data" id="profile-form">
                    @csrf
                    <div class="card">
                        <h3>Profile</h3>
                        <div class="grid">
                            <div>
                                <label>Full Name</label>
                                <input name="full_name" value="{{ old('full_name', $admin->full_name) }}">
                            </div>
                            <div>
                                <label>User Name</label>
                                <input name="user_name" value="{{ old('user_name', $admin->user_name) }}">
                            </div>
                            <div>
                                <label>Email</label>
                                <input name="email" type="email" value="{{ old('email', $admin->email) }}">
                            </div>
                            <div>
                                <label>Mobile</label>
                                <input name="mobile" value="{{ old('mobile', $admin->mobile) }}">
                            </div>
                            <div class="full">
                                <label>Location</label>
                                <input name="location" value="{{ old('location', $admin->location) }}">
                            </div>
                        </div>
                        <div class="save">
                            <button type="submit">Save</button>
                        </div>
                    </div>
                </form>
            </div>
            <!-- PASSWORD -->
            <div class="tab-content" id="password">
                <form action="{{ route('admin.my_account.password.update') }}" method="POST">
                    @csrf
                <div class="card">
                    <h3>Change Password</h3>
                    <div class="form">

                        <!-- OLD PASSWORD -->
                        <div class="field">
                            <label>Old Password</label>
                            <div class="input-box">
                                <input type="password" name="old_password">

                                <span class="eye">
                                    <!-- HIDE (default) -->
                                    <svg class="icon-hide" viewBox="0 0 24 24">
                                        <path d="M3 3l18 18" />
                                        <path d="M10.5 10.5a3 3 0 004.24 4.24" />
                                        <path
                                            d="M9.88 5.09A10.94 10.94 0 0112 5c7 0 11 7 11 7a21.91 21.91 0 01-5.17 5.94" />
                                        <path
                                            d="M6.1 6.1A21.8 21.8 0 001 12s4 7 11 7a10.94 10.94 0 005.91-1.61" />
                                    </svg>

                                    <!-- SHOW -->
                                    <svg class="icon-show" viewBox="0 0 24 24" style="display:none;">
                                        <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z" />
                                        <circle cx="12" cy="12" r="3" />
                                    </svg>
                                </span>
                            </div>
                        </div>

                        <!-- NEW PASSWORD -->
                        <div class="field">
                            <label>New Password</label>
                            <div class="input-box">
                                <input type="password" name="new_password">

                                <span class="eye">
                                    <svg class="icon-hide" viewBox="0 0 24 24">
                                        <path d="M3 3l18 18" />
                                        <path d="M10.5 10.5a3 3 0 004.24 4.24" />
                                        <path
                                            d="M9.88 5.09A10.94 10.94 0 0112 5c7 0 11 7 11 7a21.91 21.91 0 01-5.17 5.94" />
                                        <path
                                            d="M6.1 6.1A21.8 21.8 0 001 12s4 7 11 7a10.94 10.94 0 005.91-1.61" />
                                    </svg>

                                    <svg class="icon-show" viewBox="0 0 24 24" style="display:none;">
                                        <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z" />
                                        <circle cx="12" cy="12" r="3" />
                                    </svg>
                                </span>
                            </div>
                        </div>

                        <!-- CONFIRM PASSWORD -->
                        <div class="field">
                            <label>Confirm Password</label>
                            <div class="input-box">
                                <input type="password" name="confirm_password">

                                <span class="eye">
                                    <svg class="icon-hide" viewBox="0 0 24 24">
                                        <path d="M3 3l18 18" />
                                        <path d="M10.5 10.5a3 3 0 004.24 4.24" />
                                        <path
                                            d="M9.88 5.09A10.94 10.94 0 0112 5c7 0 11 7 11 7a21.91 21.91 0 01-5.17 5.94" />
                                        <path
                                            d="M6.1 6.1A21.8 21.8 0 001 12s4 7 11 7a10.94 10.94 0 005.91-1.61" />
                                    </svg>

                                    <svg class="icon-show" viewBox="0 0 24 24" style="display:none;">
                                        <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z" />
                                        <circle cx="12" cy="12" r="3" />
                                    </svg>
                                </span>
                            </div>
                        </div>

                    </div>

                    <div class="save">
                        <button type="submit">Update</button>
                    </div>
                </div>
                </form>
            </div>

            <!-- NOTIFICATIONS -->
            <div class="tab-content" id="notify">
                <div class="card">
                    <h3>Notifications</h3>
                    <div class="notifications">

                        <!-- ITEM -->
                        <div class="row_noti">
                            <div class="text">
                                <h4>Email Notifications</h4>
                                <p>Receive updates and alerts via email</p>
                            </div>

                            <div class="right_noti">
                                <span class="status">Enable</span>
                                <label class="switch">
                                    <input type="checkbox" checked>
                                    <span class="slider"></span>
                                </label>
                            </div>
                        </div>

                        <!-- ITEM -->
                        <div class="row_noti">
                            <div class="text">
                                <h4>Push Notifications</h4>
                                <p>In-app alerts for events and activity</p>
                            </div>

                            <div class="right_noti">
                                <span class="status">Enable</span>
                                <label class="switch">
                                    <input type="checkbox">
                                    <span class="slider"></span>
                                </label>
                                </label>
                            </div>
                        </div>

                    </div>

                    <div class="save">
                        <button>Save</button>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
@endsection

@section('scripts')

{{-- 0. AVATAR UPLOAD: preview + auto-submit --}}
<script>
const profileImageInput = document.getElementById("profile_image");
if (profileImageInput) {
    profileImageInput.addEventListener("change", function () {
        if (!this.files || !this.files[0]) return;

        const preview = document.getElementById("avatar-preview");
        if (preview) {
            preview.src = URL.createObjectURL(this.files[0]);
        }
        document.getElementById("profile-form").submit();
    });
}
</script>

{{-- 1. TOGGLE PASSWORD VISIBILITY --}}
<script>
document.querySelectorAll(".eye").forEach(eye => {
    eye.addEventListener("click", function () {
        const input = this.closest(".input-box").querySelector("input");
        const showIcon = this.querySelector(".icon-show");
        const hideIcon = this.querySelector(".icon-hide");

        if (input.type === "password") {
            input.type = "text";
            showIcon.style.display = "block";
            hideIcon.style.display = "none";
        } else {
            input.type = "password";
            showIcon.style.display = "none";
            hideIcon.style.display = "block";
        }
    });
});
</script>

{{-- 2. TAB SWITCHING --}}
<script>
const tabs = document.querySelectorAll(".tabs button");
const contents = document.querySelectorAll(".tab-content");

tabs.forEach(tab => {
    tab.addEventListener("click", () => {
        tabs.forEach(t => t.classList.remove("active"));
        tab.classList.add("active");

        contents.forEach(c => c.classList.remove("active"));
        document.getElementById(tab.dataset.tab).classList.add("active");
    });
});
</script>

{{-- 3. NOTIFICATION TOGGLE TEXT --}}
<script>
document.querySelectorAll(".switch input").forEach(toggle => {
    // Fixed: was ".right", should be ".right_noti"
    const status = toggle.closest(".right_noti").querySelector(".status");

    // Set initial state
    if (!toggle.checked) {
        status.textContent = "Disable";
        status.classList.add("off");
    }

    toggle.addEventListener("change", () => {
        if (toggle.checked) {
            status.textContent = "Enable";
            status.classList.remove("off");
        } else {
            status.textContent = "Disable";
            status.classList.add("off");
        }
    });
});
</script>
@endsection