@extends('user.layout.main')
@section('content')
    <div class="main-content">
        <section class="section">
            <div class="section-header">
                <h1>Profile</h1>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <!-- Profil -->
                    <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="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">@npannisa</h5>
                    </div>
                </div>
                <div class="col-md-8">
                    <!-- Tab Menu -->
                    <div class="card">
                        <div class="card-body pt-3">
                            <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="big fst-italic">"Saya adalah seorang Frontend Developer dengan lebih dari 3
                                        pengalaman dalam dunia pengembangan web.
                                        Saya memiliki dedikasi yang kuat untuk menciptakan pengalaman pengguna yang luar
                                        biasa melalui desain web yang menarik dan fungsional.
                                        Pekerjaan saya melibatkan mengubah desain grafis dan konsep menjadi kode HTML, CSS,
                                        dan JavaScript yang dapat diakses oleh pengguna di berbagai perangkat.
                                        Saya memiliki pemahaman mendalam tentang HTML5, CSS3, dan JavaScript serta kerangka
                                        kerja laravel frontend seperti React, Vue.js, atau Angular.
                                        Kemampuan saya dalam memahami desain dan mengimplementasikannya secara responsif
                                        memungkinkan saya untuk menciptakan situs web yang dapat diakses
                                        dengan baik di perangkat seluler, tablet, dan desktop.
                                        Selain itu, saya terbiasa bekerja sama dengan tim pengembang backend untuk
                                        memastikan integrasi yang mulus antara frontend dan backend.
                                        Saya juga senang mempelajari teknologi-teknologi baru dan mengikuti tren terkini
                                        dalam desain web dan pengembangan frontend.
                                        Kemampuan komunikasi dan kolaborasi saya yang baik memungkinkan saya untuk bekerja
                                        sama dengan desainer UX/UI, manajer produk, dan tim lainnya
                                        dalam proyek-proyek pengembangan web. Saya juga percaya bahwa tes dan pemeliharaan
                                        adalah bagian integral dari pengembangan web, sehingga saya
                                        selalu berusaha untuk memastikan kualitas dan keamanan kode saya.
                                        Saya sangat antusias dalam menciptakan pengalaman pengguna yang menarik dan berfokus
                                        pada performa yang baik. Saya siap untuk menghadapi
                                        tantangan baru dalam dunia pengembangan web dan berkontribusi dalam menciptakan
                                        produk-produk yang menginspirasi dan memenuhi kebutuhan pengguna."
                                    </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="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>

                                </div>

                            </div>

                        </div>
                    </div>
        </section>
    </div>
@endsection