<div class="row">
    <!-- [ sample-page ] start -->
    <div class="col-sm-12">
        <div class="card">
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <div class="sticky-md-top product-sticky">
                            <div id="carouselExampleCaptions" class="carousel slide ecomm-prod-slider"
                                data-bs-ride="carousel">
                                <div class="carousel-inner bg-light rounded position-relative">
                                    <div class="card-body position-absolute end-0 top-0">
                                        <div class="form-check prod-likes">
                                            <input type="checkbox" class="form-check-input">
                                            <i data-feather="heart" class="prod-likes-icon"></i>
                                        </div>
                                    </div>
                                    <div class="card-body position-absolute bottom-0 end-0">
                                        <ul class="list-inline ms-auto mb-0 prod-likes">
                                            <li class="list-inline-item m-0">
                                                <a href="#" class="avtar avtar-xs text-white text-hover-primary">
                                                    <i class="ti ti-zoom-in f-18"></i>
                                                </a>
                                            </li>
                                            <li class="list-inline-item m-0">
                                                <a href="#" class="avtar avtar-xs text-white text-hover-primary">
                                                    <i class="ti ti-zoom-out f-18"></i>
                                                </a>
                                            </li>
                                            <li class="list-inline-item m-0">
                                                <a href="#" class="avtar avtar-xs text-white text-hover-primary">
                                                    <i class="ti ti-rotate-clockwise f-18"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="carousel-item active">
                                        <img src="<?= base_url() ?>assets/images/childpanel/1.jpg" class="d-block w-100"
                                            alt="Product images">
                                    </div>
                                    <div class="carousel-item">
                                        <img src="<?= base_url() ?>assets/images/childpanel/2.jpg" class="d-block w-100"
                                            alt="Product images">
                                    </div>
                                    <div class="carousel-item">
                                        <img src="<?= base_url() ?>assets/images/childpanel/3.jpg" class="d-block w-100"
                                            alt="Product images">
                                    </div>
                                </div>
                                <ol
                                    class="list-inline carousel-indicators position-relative product-carousel-indicators my-sm-3 mx-0">
                                    <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0"
                                        class="list-inline-item w-25 h-auto active">
                                        <img src="<?= base_url() ?>assets/images/childpanel/1.jpg"
                                            class="d-block wid-50 rounded" alt="Product images">
                                    </li>
                                    <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
                                        class="list-inline-item w-25 h-auto">
                                        <img src="<?= base_url() ?>assets/images/childpanel/2.jpg"
                                            class="d-block wid-50 rounded" alt="Product images">
                                    </li>
                                    <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
                                        class="list-inline-item w-25 h-auto">
                                        <img src="<?= base_url() ?>assets/images/childpanel/3.jpg"
                                            class="d-block wid-50 rounded" alt="Product images">
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <span class="badge bg-success f-14 align-items-center"><i
                                class="ph-duotone ph-rocket me-1"></i>Child Panel</span>
                        <h2 class="my-3 text-primary">SMM PANEL INDONESIA</h2>
                        <h5 class="mt-4 mb-sm-3 mb-1 f-w-500">Description</h5>
                        <ul>
                            <li class="mb-1">10 Primary Theme Color</li>
                            <li class="mb-1">Customized Footer / Copyright</li>
                            <li class="mb-1">Customized Permissions For Admin</li>
                            <li class="mb-1">Customized Favicon</li>
                            <li class="mb-1">Customized Open Graph Image</li>
                            <li class="mb-1">Customized Meta Tags</li>
                            <li class="mb-1">Customized Additional Tags</li>
                            <li class="mb-1">Customized Statistic System</li>
                            <li class="mb-1">Light & Dark Mode Available</li>
                            <li class="mb-1">Support Refill System</li>
                            <li class="mb-1">Support Level System</li>
                            <li class="mb-1">Support Point System</li>
                            <li class="mb-1">Support Referral System</li>
                            <li class="mb-1">Support Payment Gateway (Paydisini & Tripay)</li>
                            <li class="mb-1">Support Whatsapp Gateway</li>
                            <li class="mb-1">Support Bot Telegram</li>
                        </ul>
                        <div class="mb-3 row">
                            <label class="col-form-label col-lg-3 col-sm-12">Primary Color</label>
                            <div class="col-lg-6 col-md-12 col-sm-12 d-flex align-items-center">

                                <div class="theme-color preset-color">
                                    <a href="#!" class="<?= (user('layout') == 'preset-1') ? 'active' : '' ?>"
                                        data-value="preset-1" onclick="layout_preset2('preset-1');"><i
                                            class="ti ti-check"></i></a>
                                    <a href="#!" class="<?= (user('layout') == 'preset-2') ? 'active' : '' ?>"
                                        data-value="preset-2" onclick="layout_preset2('preset-2');"><i
                                            class="ti ti-check"></i></a>
                                    <a href="#!" class="<?= (user('layout') == 'preset-3') ? 'active' : '' ?>"
                                        data-value="preset-3" onclick="layout_preset2('preset-3');"><i
                                            class="ti ti-check"></i></a>
                                    <a href="#!" class="<?= (user('layout') == 'preset-4') ? 'active' : '' ?>"
                                        data-value="preset-4" onclick="layout_preset2('preset-4');"><i
                                            class="ti ti-check"></i></a>
                                    <a href="#!" class="<?= (user('layout') == 'preset-5') ? 'active' : '' ?>"
                                        data-value="preset-5" onclick="layout_preset2('preset-5');"><i
                                            class="ti ti-check"></i></a>
                                    <a href="#!" class="<?= (user('layout') == 'preset-6') ? 'active' : '' ?>"
                                        data-value="preset-6" onclick="layout_preset2('preset-6');"><i
                                            class="ti ti-check"></i></a>
                                    <a href="#!" class="<?= (user('layout') == 'preset-7') ? 'active' : '' ?>"
                                        data-value="preset-7" onclick="layout_preset2('preset-7');"><i
                                            class="ti ti-check"></i></a>
                                    <a href="#!" class="<?= (user('layout') == 'preset-8') ? 'active' : '' ?>"
                                        data-value="preset-8" onclick="layout_preset2('preset-8');"><i
                                            class="ti ti-check"></i></a>
                                    <a href="#!" class="<?= (user('layout') == 'preset-9') ? 'active' : '' ?>"
                                        data-value="preset-9" onclick="layout_preset2('preset-9');"><i
                                            class="ti ti-check"></i></a>
                                    <a href="#!" class="<?= (user('layout') == 'preset-10') ? 'active' : '' ?>"
                                        data-value="preset-10" onclick="layout_preset2('preset-10');"><i
                                            class="ti ti-check"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-12">
                        <div class="card pc-user-card"
                            style="background: rgba(var(--bs-primary-rgb), 0.2); border-color: var(--bs-primary) !important">
                            <div class="card-body py-3 pe-3">
                                <ul class="p-0 m-0">
                                    <li>Anda harus memiliki <b><em>Domain</em></b> yang masih aktif.</li>
                                    <li><b><em>Nameserver (NS) Domain</em></b> akan diinformasikan setelah pemesanan.
                                    </li>
                                    <li><b><em>Child Panel</em></b> akan otomatis terintegrasi ke akun
                                        <b><em><?= website_config('title') ?></em></b> Anda.</li>
                                    <li><b><em>Child Panel</em></b> akan diproses dalam waktu 1x24 jam setelah
                                        pemesanan.</li>
                                    <li>Anda dapat membuat akun admin baru setelah <b><em>Child Panel</em></b> aktif.
                                    </li>
                                    <li>Setelah melakukan pemesanan, Anda diharapkan melakukan konfirmasi ke
                                        <b><em>Admin.</em></b></li>
                                </ul>
                            </div>
                        </div>
                        <form method="POST">
                            <input type="hidden" class="txt_csrfname"
                                name="<?= $this->security->get_csrf_token_name(); ?>"
                                value="<?= $this->security->get_csrf_hash(); ?>">
                            <div class="form-group">
                                <label class="form-label">Domain <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="domain">
                            </div>
                            <div class="form-group">
                                <label class="form-label">Pilih Paket <span class="text-danger">*</span></label>
                                <div class="payment-group form-group">
                                    <div class="row gy-2 gx-2">
                                        <div class="col-12">
                                            <div class="payment-menu h-100">
                                                <input type="radio" name="plan" id="plan_1" value="1">
                                                <label for="plan_1" class="payment-item h-100"
                                                    style="text-align: start;">
                                                    <div class="d-flex align-items-center">
                                                        <div class="flex-shrink-0 me-3">
                                                            <div class="avatar">
                                                                <div
                                                                    class="avatar-title rounded bg-primary bg-gradient">
                                                                    <i class="fas fa-rocket fs-2 p-2 text-white"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="flex-grow-1">
                                                            <p class="mb-1 fw-bold">Paket Bulanan</p>
                                                            <p class="small m-0">Tanpa batasan pesanan</p>
                                                        </div>
                                                        <div class="flex-shrink-0 align-self-end ms-2">
                                                            <p class="mb-0">Rp 100.000<small
                                                                    class="small">/bulan</small></p>
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="payment-menu h-100">
                                                <input type="radio" name="plan" id="plan_2" value="2">
                                                <label for="plan_2" class="payment-item h-100"
                                                    style="text-align: start;">
                                                    <div class="d-flex align-items-center">
                                                        <div class="flex-shrink-0 me-3">
                                                            <div class="avatar">
                                                                <div
                                                                    class="avatar-title rounded bg-primary bg-gradient">
                                                                    <i class="fas fa-rocket fs-2 p-2 text-white"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="flex-grow-1">
                                                            <p class="mb-1 fw-bold">Paket Tahunan</p>
                                                            <p class="small m-0">Tanpa batasan pesanan</p>
                                                        </div>
                                                        <div class="flex-shrink-0 align-self-end ms-2">
                                                            <p class="mb-0">
                                                                <span class="text-decoration-line-through text-muted">Rp
                                                                    1.200.000</span>
                                                                <br>
                                                                Rp 1.000.000<small class="small">/tahun</small>
                                                            </p>
                                                            <span class="badge bg-success">Hemat Rp 200.000</span>
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-0">
                                <button type="submit" class="btn btn-primary float-end"><i
                                        class="fas fa-rocket fs-6 me-2"></i>Pesan</button>
                            </div>
                        </form>
                    </div>
                </div>
                <hr>
                <?php
                $childpanel_orders = $this->db->where('user_id', user('id'))->get('childpanel')->result();
                if (!empty($childpanel_orders)): ?>
                <div class="row">
                    <div class="col-md-12">
                        <h4 class="mb-3">Riwayat Pesanan Child Panel</h4>
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Domain</th>
                                        <th>Status</th>
                                        <th>Tanggal Pesan</th>
                                        <th>Tanggal Expired</th>
                                        <th>Aksi</th> <!-- Kolom untuk aksi perpanjang -->
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php foreach ($childpanel_orders as $index => $order): ?>
                                    <tr>
                                        <td><?= $index + 1 ?></td>
                                        <td><?= auto_link($order->domain, 'both', TRUE) ?></td>
                                        <td><?= $order->status ?></td>
                                        <td><?= $this->lib->format_date($order->order_date) ?></td>
                                        <td><?= $this->lib->format_date($order->expired_date) ?></td>
                                        <td>
                                            <?php if ($order->status == 'Active'): ?>
                                            <a href="<?= site_url('childpanel/perpanjang/' . $order->id) ?>"
                                                class="btn btn-sm btn-success">Perpanjang</a>
                                            <?php else: ?>
                                            <button class="btn btn-sm btn-secondary" disabled>Perpanjang</button>
                                            <?php endif; ?>
                                        </td>
                                    </tr>
                                    <?php endforeach; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
    <!-- [ sample-page ] end -->
</div>