<?= $this->extend('layout/template'); ?>
<?= $this->section('content'); ?>

<?php if (session()->getFlashdata('success')): ?>
    <div class="alert alert-success">
        <?= session()->getFlashdata('success') ?>
    </div>
<?php endif; ?>


<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
    <div>
        <h4 class="mb-3 mb-md-0">Profil Admin</h4>
    </div>

</div>
<div class="row profile-body">
    <!-- left wrapper start -->
    <div class="d-none d-md-block col-md-4 col-xl-3 left-wrapper">
        <div class="card rounded">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <h6 class="card-title mb-0">About</h6>
                </div>
                <div class="mt-3">
                    <label class="tx-11 fw-bolder mb-0 text-uppercase">Nama</label>
                    <p class="text-muted"></p>
                </div>
                <div class="mt-3">
                    <label class="tx-11 fw-bolder mb-0 text-uppercase">No Hape:</label>
                    <p class="text-muted"></p>
                </div>
                <div class="mt-3">
                    <label class="tx-11 fw-bolder mb-0 text-uppercase">Email:</label>
                    <p class="text-muted"></p>
                </div>
                <div class="mt-3">
                    <label class="tx-11 fw-bolder mb-0 text-uppercase">Website:</label>
                    <p class="text-muted">Jagodigital.web.id</p>
                </div>
                <div class="mt-3 d-flex social-links">
                    <a href="javascript:;" class="btn btn-icon border btn-xs me-2">
                        <i data-feather="github"></i>
                    </a>
                    <a href="javascript:;" class="btn btn-icon border btn-xs me-2">
                        <i data-feather="twitter"></i>
                    </a>
                    <a href="javascript:;" class="btn btn-icon border btn-xs me-2">
                        <i data-feather="instagram"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">

                <h6 class="card-title">Update Profil</h6>

                <form class="forms-sample">
                    <div class="row mb-3">
                        <label for="exampleInputUsername2" class="col-sm-3 col-form-label">Username</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="exampleInputUsername2" placeholder="Username">
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="exampleInputEmail2" class="col-sm-3 col-form-label">Email</label>
                        <div class="col-sm-9">
                            <input type="email" class="form-control" id="exampleInputEmail2" autocomplete="off" placeholder="Email">
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="exampleInputMobile" class="col-sm-3 col-form-label">No Hape</label>
                        <div class="col-sm-9">
                            <input type="number" class="form-control" id="exampleInputMobile" placeholder="No hape">
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="exampleInputPassword2" class="col-sm-3 col-form-label">Password</label>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" id="exampleInputPassword2" autocomplete="off" placeholder="Password">
                        </div>
                    </div>
                    <div class="form-check mb-3">
                        <input type="checkbox" class="form-check-input" id="exampleCheck1">
                        <label class="form-check-label" for="exampleCheck1">
                            Remember me
                        </label>
                    </div>
                    <button type="submit" class="btn btn-primary me-2">Update</button>
                    <button class="btn btn-secondary">Cancel</button>
                </form>

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


<script>
    $(document).ready(function() {
        // AJAX untuk mengambil data profil
        $.ajax({
            url: '<?= base_url('Users/getProfile') ?>', // Sesuaikan dengan URL controller
            method: 'GET',
            success: function(response) {
                if (response.status === 'success') {
                    // Menampilkan data di dalam elemen dengan class 'text-muted'
                    $('.left-wrapper .text-muted').eq(0).text(response.data.firstname + ' ' + response.data.lastname); // Nama
                    $('.left-wrapper .text-muted').eq(1).text(response.data.nohape); // No Hape
                    $('.left-wrapper .text-muted').eq(2).text(response.data.email); // Email
                    $('.left-wrapper .text-muted').eq(3).text(response.data.website); // Website
                } else {
                    alert('User not found');
                }
            },
            error: function() {
                alert('Error fetching profile data');
            }
        });
    });
</script>

<?= $this->endSection(); ?>