<main role="main">
    <div class="container">
        <div class="container pt-1">
            <div class="row">
                <div class="col-lg-4 offset-lg-4 text-center px-3 mb-0">
                    <img src="<?= $logo; ?>" class="w-50 mt-2">
                </div>
            </div>
        </div>
    </div>
    <div class="container mb-10">
        <div class="row justify-content-center">
            <div class="col-lg-9">
                <div class="card shadow rounded-4">
                    <div class="card-body">
                        <h4>API for Business</h4>
                        <div class="separator mb-1">
                            <div class="line"></div>
                        </div>

                        <h4>เลือก API ที่ต้องการขอใช้งาน</h4>
                        <div class="row g-1 mb-3">
                            <div class="col-6">
                                <select id="apiname" class="form-control form-control-lg custom-select mediuminput"
                                    placeholder="option" required>
                                    <option value="" disabled="" hidden="" selected="">API for you ▼</option>
                                    <option value="1">CM API Lotto</option>
                                    <option value="2" disabled>CM BonusTime (Update)</option>
                                </select>
                            </div>
                            <div class="col-6">
                                <select id="package" class="form-control form-control-lg custom-select mediuminput"
                                    placeholder="datatime" required disabled>
                                    <option value="" disabled="" hidden="" selected="">เลือกแพคเกจ ▼</option>
                                    <option value="1">1 เดือน</option>
                                    <option value="2">3 เดือน</option>
                                    <option value="3">6 เดือน🔥</option>
                                    <option value="4">12 เดือน🔥</option>
                                </select>
                            </div>

                        </div>


                        <div class="row g-1 mb-2">
                            <div class="col-12 mb-2">
                                <input type="tel" id="phone" inputmode="numeric" class="form-control form-control-lg"
                                    placeholder="เบอร์โทรศัพท์" required>
                            </div>
                            <div class="col-12 mb-2">
                                <input type="e-mail" id="email" class="form-control form-control-lg" placeholder="อีเมล"
                                    required>
                            </div>
                        </div>

                        <h4>ค่าบริการ <span id="service_fee">0.00</span> บาท ส่วนลด <span id="discount">0</span>
                            บาท</h4>
                        <h4>สรุปค่าบริการวันนี้ <span id="final_price">0.00</span> บาท</h4>

                        <button type="button" id="signup" class="btn btn-primary btn-lg w-100 mb-3"
                            disabled>ชำระค่าบริการ</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<script src="assets/js/welcome.js"></script>