<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>บัตรคิวนัดพบทันตแพทย์</title>
    <!-- เรียกใช้CSS -->
    <link rel="stylesheet" href="allCss.css">

    <!-- เรียกใช้bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

    <!-- datePicker -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
    <link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />

</head>

<body>
    <!-- แถบบาร์ข้างบน -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <img src="images/dentist.svg" width="30" height="30" class="d-inline-block align-top" alt="">&nbsp;
        <a class="navbar-brand" href="#">หมอฟัน</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
            <li class="nav-item active">
                    <a class="nav-link" href="<?php echo url('/main') ?>">หน้าหลัก
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="<?php echo url('/appointment') ?>">ขอนัดพบแพทย์</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="<?php echo url('/aboutMe') ?>">เกี่ยวกับเรา</a>
                </li>
               
            </ul>
        </div>
    </nav>
<!-- แถบบาร์ข้างบน -->



    <!-- แบบฟอร์ม -->
    <br>
    <div class="container">
        <div class="row">

            <div class="col-md-2"></div>
            <div class="col-md-8">
                <div class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-7">
                        <h3>
                            <span class="badge badge-pill badge-warning">แบบฟอร์มขอนัดพบแพทย์</span>
                        </h3>
                    </div>
                    <div class="col-md-1"></div>
                </div>
                <br>


                <!-- อาการเบื้องต้น -->
                <hr width="730">
                <h5>
                    <span class="badge badge-pill badge-info">อาการเบื้องต้นที่ต้องการพบ</span>
                </h5>
                <hr width="730" color="lightblue">
                <div class="form-group">

                    <label for="service">กรุณาเลือกบริการที่ท่านต้องการนัดพบแพทย์ :</label>
                    <select class="form-control" id="service">
                        <option>ตรวจสุขภาพช่องปาก</option>
                        <option>ถอนฟัน</option>
                        <option>อุดฟัน</option>
                        <option>จัดฟัน</option>
                        <option>ขูดหินปูน</option>
                        <option>รักษารากฟัน</option>
                        <option>คิดถึงหมอฟัน</option>
                    </select>

                </div>
                <div class="form-group">
                    <label for="detail">กรุณาระบุรายละเอียดอาการเพิ่มเติม เช่น (มีอาการปวดมามากกว่า 3 เดือนแล้ว , มีเลือดไหล เป็นต้น)</label>
                    <textarea class="form-control" id="detail" rows="3"></textarea>
                </div>
                </form>




                <!-- วันนัดหมาย -->
                <hr width="730">
                <h5>
                    <span class="badge badge-pill badge-info">วันนัดหมาย</span>
                </h5>
                <hr width="730" color="lightblue">
                <div class="row">
                    <div class="col-md-3">
                        <label for="date">กรุณาเลือกวัน :</label>
                        <input id="datepicker" width="170" />
                        <script>
                            $('#datepicker').datepicker({
                                uiLibrary: 'bootstrap4'
                            });
                        </script>
                    </div>
                    <div class="col-md-3">
                        <label for="time">กรุณาเลือกเวลา :</label>
                        <input id="timepicker" width="170" />
                        <script>
                            $('#timepicker').timepicker({
                                uiLibrary: 'bootstrap4'
                            });
                        </script>
                    </div>
                    <div class="col-md-3"></div>

                </div>
                <br>



                <!-- รายละเอียดติดต่อกลับ -->
                <hr width="730">
                <h5>
                    <span class="badge badge-pill badge-info">รายละเอียดติดต่อกลับ</span>
                </h5>
                <hr width="730" color="lightblue">

                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">ชื่อ</span>
                    </div>
                    <input type="text" class="form-control" id="Name">
                </div>
                <br>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">นามสกุล</span>
                    </div>
                    <input type="text" class="form-control" id="Lastname">
                </div>
                <br>


                <div class="row">
                    <div class="col-md-6">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">เบอร์โทรติดต่อ</span>
                            </div>
                            <input type="text" class="form-control" id="phoneNumber">
                        </div>
                    </div>
                    <br>

                    <div class="col-md-3">
                        <select class="custom-select mr-sm-2" id="sex">
                            <option selected>เพศ</option>
                            <option value="1">ชาย</option>
                            <option value="2">หญิง</option>
                            <option value="3">ไม่ระบุ</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">อายุ</span>
                            </div>
                            <input type="text" class="form-control" id="age">
                        </div>
                    </div>

                </div>




                <!-- หมายเหตุ -->
                <hr width="730">
                <h5>
                    <span class="badge badge-pill badge-danger">หมายเหตุ</span>
                </h5>
                <hr width="730" color="red">
                <div class="alert alert-danger" role="alert">
                    <p>1. การนัดหมายแพทย์ออนไลน์จะสมบูรณ์เมื่อได้รับการโทรติดต่อกลับจากทางคลินิกภายในเวลา 1 ชั่วโมงหลังจากท่านส่งแบบฟอร์มเท่านั้น
                    </p>
                    <p>2. ขอความกรุณานัดหมายเป็นวันถัดไปเท่านั้น </p>
                    <p>3. หากต้องการนัดหมายแพทย์ภายในวันเดียวนี้ หรือกรณีฉุกเฉิน ติดต่อทางโทรศัพท์ กรุณาโทร. 0-1234</p>
                    <p>4. ขออภัยเป็นอย่างสูงหากท่านไม่รับการติดต่อกลับ เนื่องจากคลินิกสามารถรับแบบฟอร์มได้เพียงวันละ 10 ท่านเท่านั้น</p>
                    <p>5. กรุณาตรวจสอบข้อมูลของท่านให้ครบถ้วนก่อนทำการส่ง เนื่องจากหากเกิดข้อผิดพลาด ทางเราจะไม่รับผิดชอบใดๆทั้งสิ้น
                </div>



                <!-- ยอมรับหมายเหตุ -->
                <div class="row">
                    <div class="col-md-3"></div>
                    <div class="col-md-7">
                        <div class="col-10 border border-danger rounded ">
                            <br>

                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="yes" id="accept">
                                <label class="form-check-label" for="defaultCheck1">
                                    ฉันได้อ่านและทำตามหมายเหตุเรียบร้อยแล้ว
                                </label>
                            </div>
                            <br>
                        </div>
                    </div>
                    <div class="col-md-2"></div>
                </div>
                <br>
                <div class="row">
                    <div class="col-md-5"></div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-primary" id="send">ส่งแบบฟอร์ม</button>
                    </div>
                    <div class="col-md-5"></div>
                </div>
                <br>
            </div>
            <div class="col-md-2"></div>

        </div>
    </div>


    <!--เชื่อมกับไฟร์เบส-->
    <script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-database.js"></script>

    <script src="js/appointment.js"></script>


</body>

</html>