@extends('layouts.admin.app')

@section('title', 'My Acount')

@push('style')
<style>
    .profile-flash {
        padding: 12px 16px;
        border-radius: 10px;
        font-size: 13px;
        margin-bottom: 18px;
        border: 1px solid transparent;
    }
    .profile-flash.success { background: rgba(16, 185, 129, 0.12); color: #10b981; border-color: rgba(16, 185, 129, 0.3); }
    .profile-flash.error   { background: rgba(239, 68, 68, 0.12); color: #ef4444; border-color: rgba(239, 68, 68, 0.3); }
    #avatar-preview {
        width: 100% !important;
    }
</style>
@endpush

@section('content')
<div class="my_account">
                @if (session('success') || session('error') || $errors->any())
                    <div class="profile-flash {{ session('error') || $errors->any() ? 'error' : 'success' }}">
                        @if (session('success'))
                            {{ session('success') }}
                        @elseif (session('error'))
                            {{ session('error') }}
                        @else
                            {{ $errors->first() }}
                        @endif
                    </div>
                @endif
                <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/admin/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>
                        <form id="logout-form" action="{{ route('admin.logout') }}" method="POST" class="d-none">@csrf</form>
                    </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.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.profile.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

@push('script')
<script>
        // TAB SWITCHING
        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");
            });
        });

        // AVATAR UPLOAD: preview + auto-submit the profile form
        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();
            });
        }

        // TOGGLE PASSWORD VISIBILITY
        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>
@endpush