@extends('user.layout.main')
@section('content')
    <div class="main-content">
        <section class="section">
            <div class="section-header">
                <h1>Profile</h1>
            </div>
            <div class="card-body profile-card py-2 d-flex flex-column align-items-center text-center" style="border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); position: relative; background: linear-gradient(45deg, #f3f3f3, #e0e0e0);">
                <i class="bi bi-arrow-right" style="position: absolute; top: 10px; right: 10px; font-size: 24px;"></i>
                <img src="{{asset('assets/img/avatar/ok.jpg')}}" alt="Profile" class="rounded-circle" style="width: 150px; height: 150px;">
                <h2 class="mt-3">Nurul Prima Annisa</h2>
                <h5 class="mb-0">#123udfai90-20udf82</h5>
            </div>

            <div class="card">
                <div class="card-body pt-3">
                    <!-- Bordered Tabs -->
                    <ul class="nav nav-tabs nav-tabs-bordered">

                        <li class="nav-item">
                            <button class="nav-link active" data-bs-toggle="tab"
                                data-bs-target="#profile-overview">Overview</button>
                        </li>

                        <li class="nav-item">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-edit">Edit
                                Profile</button>
                        </li>

                        <li class="nav-item">
                            <button class="nav-link" data-bs-toggle="tab"
                                data-bs-target="#profile-settings">Settings</button>
                        </li>

                        <li class="nav-item">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-change-password">Change
                                Password</button>
                        </li>

                    </ul>
                    <div class="tab-content pt-2">

                        <div class="tab-pane fade show active profile-overview" id="profile-overview">
                            <h5 class="card-title">About</h5>
                            <p class="small fst-italic">Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima
                                annisa
                                Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima
                                annisa Nurul prima annisa
                                Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima
                                annisa Nurul prima annisa
                                Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima
                                annisa Nurul prima annisa
                                Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima
                                annisa Nurul prima annisa
                                Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima
                                annisa Nurul prima annisa
                                Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima
                                annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul
                                prima
                                annisa
                                Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima
                                annisa Nurul prima annisa
                                Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima
                                annisa Nurul prima annisa
                                Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima
                                annisa Nurul prima annisa
                                Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima
                                annisa Nurul prima annisa
                                Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima
                                annisa Nurul prima annisa
                                Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima
                                annisa Nurul prima annisa
                            </p>

                            <h5 class="card-title">Profile Details</h5>

                            <div class="row">
                                <div class="col-lg-3 col-md-4 label ">Full Name</div>
                                <div class="col-lg-9 col-md-8">Nurul Prima Annisa</div>
                            </div>

                            <div class="row">
                                <div class="col-lg-3 col-md-4 label">Company</div>
                                <div class="col-lg-9 col-md-8">Ya apa yak</div>
                            </div>

                            <div class="row">
                                <div class="col-lg-3 col-md-4 label">Job</div>
                                <div class="col-lg-9 col-md-8">Frontend Web </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-3 col-md-4 label">Country</div>
                                <div class="col-lg-9 col-md-8">Indonesia</div>
                            </div>

                            <div class="row">
                                <div class="col-lg-3 col-md-4 label">Address</div>
                                <div class="col-lg-9 col-md-8">Depok city broww</div>
                            </div>

                            <div class="row">
                                <div class="col-lg-3 col-md-4 label">Phone</div>
                                <div class="col-lg-9 col-md-8">(+62) 486-3538 29071</div>
                            </div>

                            <div class="row">
                                <div class="col-lg-3 col-md-4 label">Email</div>
                                <div class="col-lg-9 col-md-8">npannisa23@gmail.com</div>
                            </div>

                        </div>

                        <div class="tab-pane fade profile-edit pt-3" id="profile-edit">

                            <!-- Profile Edit Form -->
                            <form>
                                <div class="row mb-3">
                                    <label for="profileImage" class="col-md-4 col-lg-3 col-form-label">Profile Image</label>
                                    <div class="col-md-8 col-lg-9">
                                        <img id="profileImagePreview" src="{{asset('assets/img/avatar/ok.jpg')}}" alt="Profile"
                                            style="max-width: 100%; max-height: 150px;">
                                        <div class="d-flex justify-content-between align-items-center mt-2">
                                            <label for="profileImageInput" class="btn btn-primary btn-sm"
                                                title="Upload new profile image">
                                                <i class="bi bi-upload"></i> Upload
                                                <input type="file" id="profileImageInput" accept="image/*"
                                                    style="display: none;">
                                            </label>
                                        </div>

                                    </div>

                                </div>

                                <div class="row mb-3">
                                    <label for="fullName" class="col-md-4 col-lg-3 col-form-label">Full Name</label>
                                    <div class="col-md-8 col-lg-9">
                                        <input name="fullName" type="text" class="form-control" id="fullName"
                                            value="Nurul Prima Annisa">
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label for="about" class="col-md-4 col-lg-3 col-form-label">About</label>
                                    <div class="col-md-8 col-lg-9">
                                        <textarea name="about" class="form-control" id="about" style="height: 100px">

                            </textarea>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label for="company" class="col-md-4 col-lg-3 col-form-label">Company</label>
                                    <div class="col-md-8 col-lg-9">
                                        <input name="company" type="text" class="form-control" id="company"
                                            value="Abbauf Mulia Konsultan Teknologi">
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label for="Job" class="col-md-4 col-lg-3 col-form-label">Job</label>
                                    <div class="col-md-8 col-lg-9">
                                        <input name="job" type="text" class="form-control" id="Job"
                                            value="Frontend Web">
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label for="Country" class="col-md-4 col-lg-3 col-form-label">Country</label>
                                    <div class="col-md-8 col-lg-9">
                                        <input name="country" type="text" class="form-control" id="Country"
                                            value="Indonesia">
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label for="Address" class="col-md-4 col-lg-3 col-form-label">Address</label>
                                    <div class="col-md-8 col-lg-9">
                                        <input name="address" type="text" class="form-control" id="Address"
                                            value="Depok city broww">
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label for="Phone" class="col-md-4 col-lg-3 col-form-label">Phone</label>
                                    <div class="col-md-8 col-lg-9">
                                        <input name="phone" type="text" class="form-control" id="Phone"
                                            value="(+62) 486-3538 29071">
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label for="Email" class="col-md-4 col-lg-3 col-form-label">Email</label>
                                    <div class="col-md-8 col-lg-9">
                                        <input name="email" type="email" class="form-control" id="Email"
                                            value="npannisa23@gmail.com">
                                    </div>
                                </div>

                                {{-- <div class="row mb-3">
                                    <label for="Twitter" class="col-md-4 col-lg-3 col-form-label">Twitter Profile</label>
                                    <div class="col-md-8 col-lg-9">
                                        <input name="twitter" type="text" class="form-control" id="Twitter"
                                            value="https://twitter.com/#">
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label for="Facebook" class="col-md-4 col-lg-3 col-form-label">Facebook
                                        Profile</label>
                                    <div class="col-md-8 col-lg-9">
                                        <input name="facebook" type="text" class="form-control" id="Facebook"
                                            value="https://facebook.com/#">
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label for="Instagram" class="col-md-4 col-lg-3 col-form-label">Instagram
                                        Profile</label>
                                    <div class="col-md-8 col-lg-9">
                                        <input name="instagram" type="text" class="form-control" id="Instagram"
                                            value="https://instagram.com/npannisa_?utm_source=qr&igshid=MzNlNGNkZWQ4Mg%3D%3D#">
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label for="Linkedin" class="col-md-4 col-lg-3 col-form-label">Linkedin
                                        Profile</label>
                                    <div class="col-md-8 col-lg-9">
                                        <input name="linkedin" type="text" class="form-control" id="Linkedin"
                                            value="https://github.com/npannisa#">
                                    </div>
                                </div> --}}

                                <div class="text-center">
                                    <a href="profile" type="submit" class="btn btn-primary">Save Changes</a>
                                </div>
                            </form><!-- End Profile Edit Form -->

                        </div>

                        <div class="tab-pane fade pt-3" id="profile-settings">

                            <!-- Settings Form -->
                            <form>

                                <div class="row mb-3">
                                    <label for="fullName" class="col-md-4 col-lg-3 col-form-label">Email
                                        Notifications</label>
                                    <div class="col-md-8 col-lg-9">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="changesMade" checked>
                                            <label class="form-check-label" for="changesMade">
                                                Changes made to your account
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="newProducts" checked>
                                            <label class="form-check-label" for="newProducts">
                                                Information on new products and services
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="proOffers">
                                            <label class="form-check-label" for="proOffers">
                                                Marketing and promo offers
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="securityNotify" checked
                                                disabled>
                                            <label class="form-check-label" for="securityNotify">
                                                Security alerts
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div class="text-center">
                                    <button type="submit" class="btn btn-primary">Save Changes</button>
                                </div>
                            </form><!-- End settings Form -->

                        </div>

                        <div class="tab-pane fade pt-3" id="profile-change-password">
                            <!-- Change Password Form -->
                            <form>

                                <div class="row mb-3">
                                    <label for="currentPassword" class="col-md-4 col-lg-3 col-form-label">Current
                                        Password</label>
                                    <div class="col-md-8 col-lg-9">
                                        <input name="password" type="password" class="form-control"
                                            id="currentPassword">
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label for="newPassword" class="col-md-4 col-lg-3 col-form-label">New Password</label>
                                    <div class="col-md-8 col-lg-9">
                                        <input name="newpassword" type="password" class="form-control" id="newPassword">
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label for="renewPassword" class="col-md-4 col-lg-3 col-form-label">Re-enter New
                                        Password</label>
                                    <div class="col-md-8 col-lg-9">
                                        <input name="renewpassword" type="password" class="form-control"
                                            id="renewPassword">
                                    </div>
                                </div>

                                <div class="text-center">
                                    <button type="submit" class="btn btn-primary">Change Password</button>
                                </div>
                            </form><!-- End Change Password Form -->

                        </div>

                    </div><!-- End Bordered Tabs -->

                </div>
            </div>
        </section>
    </div>
    {{-- profile --}}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Mendapatkan elemen-elemen tombol tab
            const editProfileTab = document.querySelector('[data-bs-target="#profile-edit"]');
            const settingsTab = document.querySelector('[data-bs-target="#profile-settings"]');
            const changePasswordTab = document.querySelector('[data-bs-target="#profile-change-password"]');
            const overviewTab = document.querySelector('[data-bs-target="#profile-overview"]');

            // Menambahkan event listener untuk mengubah tab saat tombol diklik
            editProfileTab.addEventListener("click", function() {
                activateTabAndContent(editProfileTab, "#profile-edit");
            });

            settingsTab.addEventListener("click", function() {
                activateTabAndContent(settingsTab, "#profile-settings");
            });

            changePasswordTab.addEventListener("click", function() {
                activateTabAndContent(changePasswordTab, "#profile-change-password");
            });

            // Menambahkan event listener untuk kembali ke tab "Overview"
            overviewTab.addEventListener("click", function() {
                activateTabAndContent(overviewTab, "#profile-overview");
            });

            // Fungsi untuk mengaktifkan tab dan konten
            function activateTabAndContent(tabButton, tabContentId) {
                // Nonaktifkan tab aktif saat ini
                const activeTabButton = document.querySelector(".nav-link.active");
                const activeTabContent = document.querySelector(".tab-pane.active");

                activeTabButton.classList.remove("active");
                activeTabContent.classList.remove("show", "active");

                // Aktifkan tab yang dipilih
                tabButton.classList.add("active");

                // Tampilkan konten tab yang dipilih
                const selectedTabContent = document.querySelector(tabContentId);
                selectedTabContent.classList.add("show", "active");
            }
        });
    </script>
    {{-- profile --}}
@endsection