
<?php $__env->startSection('content'); ?>

<div class="container">
    <div class="row header-green text-center">
        <h2>สมัครสมาชิก</h2>        
    </div>
    <form id="formRegister" name="formRegister">
        <div class="row justify-content-md-center">
        <p style="color:red; text-align: center;">**การสมัครสมาชิก​ขอสงวนสิทธิ์​ให้เฉพาะ​ข้าราชการ​ พนักงาน​ราชการ​ และลูกจ้าง​ประจำของกรมทางหลวง​เท่านั้น!!!</p>
            <div class="col-lg-8">
                <div class="mb-3">
                    <label class="form-label">ชื่อ (ภาษาไทย)</label>
                    <input id="fnameTH" name="fnameTH" type="text" class="form-control" placeholder="ชื่อ (ภาษาไทย)"
                        maxlength="255">
                </div>
                <div class="mb-3">
                    <label class="form-label">นามสกุล (ภาษาไทย)</label>
                    <input id="lnameTH" name="lnameTH" type="text" class="form-control" placeholder="นามสกุล (ภาษาไทย)"
                        maxlength="255">
                </div>
                <div class="mb-3">
                    <label class="form-label">ชื่อ (ภาษาอังกฤษ)</label>
                    <input id="fnameENG" name="fnameENG" type="text" class="form-control" maxlength="255"
                        placeholder="ชื่อ (ภาษาอังกฤษ)">
                </div>
                <div class="mb-3">
                    <label class="form-label">นามสกุล (ภาษาอังกฤษ)</label>
                    <input id="lnameENG" name="lnameENG" type="text" class="form-control" maxlength="255"
                        placeholder="นามสกุล (ภาษาอังกฤษ)">
                </div>
                <div class="mb-3">
                    <label class="form-label">เลขบัตรประจำตัวประชาชน</label>
                    <input id="idcard" name="idcard" type="text" class="form-control" placeholder="บัตรประชาชน"
                        minlength="13" maxlength="13" onkeypress="return isNumberKey(event)">
                </div>
            </div>
            <div class="col-lg-4 text-center mb-3">
                <div class="mb-3">
                    <p>รูปประจำตัว</p>
                </div>
                <div class="mb-3">
                    <img id="pic" name="pic" alt="avatar" class="rounded-circle img-fluid"
                        src="<?php echo e(asset('image/personal01.png')); ?>" style="width:300px; height:300px; object-fit:cover;">
                </div>
                <div class="mb-3">
                    <input id="profile" name="profile" class="form-control" type="file">
                    <small style="font-size: 12px;">*** รองรับไฟล์ภาพ(.jpg/.png) ขนาดไม่เกิน 1080x1080 px<br>และน้อยกว่า
                        3 MB</small>
                </div>
            </div>
        </div>
        <div class="row justify-content-md-center">
            <div class="col">
                <div class="mb-3">                    
                    <?php 
                        $lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
                    ?>

                    <?php if($lang == 'th'): ?>
                    <label class="form-label">วันเกิด (วัน/เดือน/ปี ค.ศ.)</label>
                    <?php elseif($lang == 'en'): ?>
                    <label class="form-label">วันเกิด (เดือน/วัน/ปี ค.ศ.)</label>
                    <?php else: ?>
                    <label class="form-label">วันเกิด</label>
                    <?php endif; ?>

                    <input id="birthday" name="birthday" type="date" data-date-format="dd/mm/yyyy" 
                    class="form-control" placeholder="วัน/เดือน/ปี ค.ศ."
                    max="<?php echo e(now()->toDateString('Y-m-d')); ?>" data-date="">
                </div>
            </div>
            <div class="col">
                <div class="mb-3">
                    <label class="form-label">เพศ</label>
                    <select id="sex" name="sex" class="form-select">
                        <option value="" selected disabled>เลือกเพศ</option>
                        <option value="2">ชาย</option>
                        <option value="1">หญิง</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row justify-content-md-center">
            <div class="col">
                <div class="mb-3">
                    <label class="form-label">หน่วยงาน</label>
                    <select id="org" name="org" class="form-select">
                        <option value="" selected disabled>เลือกหน่วยงาน</option>
                        <?php if($organization['status'] == true): ?>
                        <?php $__currentLoopData = $organization['data']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $organ): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <option value="<?php echo e($organ['id']); ?>"><?php echo e($organ['name']); ?></option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        <?php endif; ?>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">ตำแหน่งงาน</label>
                    <input id="position" name="position" type="text" class="form-control" placeholder="ตำแหน่งงาน"
                        maxlength="255">
                </div>
                <div class="mb-3">
                    <label class="form-label">เบอร์โทรศัพท์มือถือ</label>
                    <input id="mobile" name="mobile" type="text" class="form-control" placeholder="เบอร์โทรศัพท์มือถือ"
                        minlength="10" maxlength="10" onkeypress="return isNumberKey(event)">
                </div>
                <div class="mb-3">
                    <label class="form-label">เบอร์ภายใน</label>
                    <input id="phone" name="phone" type="text" class="form-control phone"
                        placeholder="xxxxx,xxxxx หรือ xxxxx-xxxxx" maxlength="255"
                        onkeypress="return isNumberPhone(event)">
                </div>
                <div class="mb-3">
                    <label class="form-label">Line ID</label>
                    <input id="line" name="line" type="text" class="form-control" placeholder="Line ID" maxlength="255">
                </div>
                <div class="mb-3">
                    <label class="form-label">อีเมล</label>
                    <input id="email" name="email" type="email" class="form-control" placeholder="name@example.com">
                </div>
                <div class="mb-3">
                    <label class="form-label">ชื่อผู้ใช้งาน</label>
                    <input id="username" name="username" type="text" class="form-control" placeholder="ชื่อผู้ใช้งาน"
                        readonly>
                </div>
                <div class="mb-3">
                    <input id="AgreeTerms" name="AgreeTerms" type="checkbox" class="form-check-input">
                    <label style="color: #0f6870;" class="form-check-label" for="exampleCheck1">
                        ข้าพเจ้าได้อ่านนโยบายการคุ้มครองข้อมูลส่วนบุคคล ข้อตกลง และเงื่อนไขการใช้งานเว็บไซต์ข้างต้นครบถ้วนทุกประเด็นแล้ว ข้าพเจ้ารับทราบและยินยอมให้ดำเนินการใดๆ
                        <br>
                        ตามข้อตกลงและเงื่อนไขทุกประการ
                        <!-- <a href="http://www.doh.go.th/content/page/page/82341" target="_blank"
                            style="color: #fc7f02">อ่านเพิ่มเติมได้ที่นี่</a> -->
                        <button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#agreementModal">
                            อ่านเพิ่มเติมได้ที่นี่
                        </button>
                    </label>
                </div>
                <div class="mb-3">
                    <div class="row justify-content-md-center">
                        <div class="col-lg-10"></div>
                        <div class="d-grid gap-2 col-lg-2 mx-auto">
                            <button class="btn btn-warning" type="submit">ลงทะเบียน <i
                                    class="fas fa-paper-plane"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Modal -->
<div class="modal fade" id="agreementModal" tabindex="-1" aria-labelledby="agreementModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">        
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <h4 class="modal-title text-center" id="agreementModalLabel">
            นโยบายคุ้มครองข้อมูลส่วนบุคคล ข้อตกลงและเงื่อนไขการใช้งานเว็บไซต์
            <br>
            ระบบสารสนเทศเพื่อการบริหารจัดการความรู้กรมทางหลวง (KM DOH website)
        </h4>
        <br><br>
        <h5>นโยบายคุ้มครองข้อมูลส่วนบุคคล</h5>
        <br>
        <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            กรมทางหลวง ได้จัดทำนโยบายการคุ้มครองข้อมูลส่วนบุคคลฉบับนี้ขึ้น 
            เพื่อคุ้มครองข้อมูลส่วนบุคคลของผู้ใช้บริการทุกท่าน (Personal Information) ที่ติดต่อเข้ามายังเว็บไซต์ของกรมทางหลวง ดังนี้
        </p>
        <h6>การเก็บรวบรวมข้อมูลส่วนบุคคล</h6>
        <p>
            &nbsp;&nbsp;
            1. เพื่อความสะดวกในการให้บริการแก่ผู้ใช้บริการทุกท่านที่เข้ามาใช้บริการเว็บไซต์ของกรมทางหลวง ทางเว็บไซต์จึงได้จัดเก็บรวบรวมข้อมูลส่วนบุคคลของท่านไว้ เช่น อีเมล์แอดเดรส (Email Address) ชื่อ (Name) ที่อยู่หรือที่ทำงาน (Home or Work Address) เขตไปรษณีย์ (ZIP Code) หรือหมายเลขโทรศัพท์ (Telephone Number) เป็นต้น
            <br>
            &nbsp;&nbsp;
            2. ในกรณีที่ท่านสมัคร (Sign Up) เพื่อสมัครสมาชิกหรือเพื่อใช้บริการอย่างใดอย่างหนึ่ง กรมทางหลวงจะเก็บรวบรวมข้อมูลส่วนบุคคลของท่านเพิ่มเติม ได้แก่ ชื่อ-สกุล (Name-Surname) อีเมล์ (Email)
            <br>
            &nbsp;&nbsp; 
            3. นอกจากนั้น เพื่อสำรวจความนิยมในการใช้บริการ อันจะเป็นประโยชน์ในการนำสถิติไปใช้ในการปรับปรุงคุณภาพในการให้บริการของเว็บไซต์ จึงจำเป็นต้องจัดเก็บรวบรวมข้อมูลของท่านบางอย่างเพิ่มเติม ได้แก่ หมายเลขไอพี (IP Address) ชนิดของโปรแกรม ค้นดูเว็บ (Browser Type) โดเมนเนม (Domain Name) บันทึกหน้าเว็บ (web page) ของเว็บไซต์ที่ผู้ใช้เยี่ยมชม เวลาที่เยี่ยมชมเว็บไซต์ (Access Times) และเว็บไซต์ที่ผู้ใช้บริการเข้าถึงก่อนหน้านั้น (Referring Website Addresses)
            <br>
            &nbsp;&nbsp;
            4. กรมทางหลวง ขอแนะนำให้ท่านตรวจสอบนโยบายการคุ้มครองข้อมูลส่วนบุคคล (Privacy Policy) ของเว็บไซต์อื่นที่เชื่อมโยงจากเว็บไซต์นี้ เพื่อจะได้ทราบและเข้าใจว่าเว็บไซต์ดังกล่าวเก็บรวบรวม ใช้ หรือดำเนินการเกี่ยวกับข้อมูลส่วนบุคคลของท่านอย่างไร ทั้งนี้ กรมทางหลวงไม่สามารถรับรองข้อความหรือรับรองการดำเนินการใด ๆ ตามที่ได้มีการประกาศไว้ในเว็บไซต์ดังกล่าวได้ และไม่ขอรับผิดชอบใด ๆ หากเว็บไซต์เหล่านั้นไม่ได้ปฏิบัติการหรือดำเนินการใด ๆ ตามนโยบายการคุ้มครองข้อมูลส่วนบุคคลที่ เว็บไซต์ดังกล่าวได้ประกาศไว้
        </p>
        <h6>การใช้ข้อมูลส่วนบุคคล</h6>
        <p>
            &nbsp;&nbsp;
            1. กรมทางหลวงจะใช้ข้อมูลส่วนบุคคลของท่านเพียงเท่าที่จำเป็น เช่น ชื่อ และ ที่อยู่ เพื่อใช้ในการติดต่อ ให้บริการประชาสัมพันธ์ หรือให้ข้อมูลข่าวสารต่าง ๆ รวมทั้งสำรวจความคิดเห็นของท่านในกิจการหรือกิจกรรมของเว็บไซต์เท่านั้น
            <br>
            &nbsp;&nbsp;
            2. กรมทางหลวงขอรับรองว่าจะไม่นำข้อมูลส่วนบุคคลของท่านที่เว็บไซต์ได้เก็บรวบรวมไว้ ไปขายหรือเผยแพร่ให้กับบุคคลภายนอกโดยเด็ดขาด เว้นแต่จะได้รับอนุญาตจากท่านเท่านั้น
            <br>
            &nbsp;&nbsp;
            3. ในกรณีที่กรมทางหลวงได้ว่าจ้างหน่วยงานอื่นเพื่อให้ดำเนินการเกี่ยวกับข้อมูลส่วนบุคคลของท่าน เช่น การจัดส่งพัสดุไปรษณีย์ การวิเคราะห์เชิงสถิติในกิจการหรือกิจกรรมของเว็บไซต์ เป็นต้น ในกรณีที่กรมทางหลวงจะกำหนดให้หน่วยงานที่ได้ว่าจ้างให้ดำเนินการดังกล่าว เก็บรักษาความลับ และความปลอดภัยของข้อมูล ส่วนบุคคลของท่าน และกำหนดข้อห้ามมิให้มีการนำข้อมูลส่วนบุคคลดังกล่าว ไปใช้นอกเหนือจากกิจกรรมหรือกิจการของกรมทางหลวง
        </p>
        <h6>สิทธิในการควบคุมข้อมูลส่วนบุคคลของท่าน</h6>
        <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            เพื่อประโยชน์ในการรักษาความเป็นส่วนตัวของท่านๆ มีสิทธิเลือกที่จะให้มีการใช้หรือแชร์ข้อมูลส่วนบุคคลของท่าน หรืออาจเลือกที่จะไม่รับข้อมูลหรือสื่อทางการตลาดใด ๆ จากกรมทางหลวง ก็ได้ โดยเพียงแต่ท่านกรอกความจำนงดังกล่าวเพื่อแจ้งให้ กรมทางหลวงทราบ
        </p>
        <h6>การรักษาความปลอดภัยสำหรับข้อมูลส่วนบุคคล</h6>
        <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            เพื่อประโยชน์ในการรักษาความลับและความปลอดภัยสำหรับข้อมูลส่วนบุคคลของท่าน กรมทางหลวงจึงได้กำหนดระเบียบภายในหน่วยงานเพื่อกำหนดสิทธิในการเข้าถึงหรือใช้ข้อมูลส่วนบุคคลของท่าน
        </p>
        <h6>การใช้คุกกี้ (Cookies)</h6>
        <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            “คุกกี้” คือ ข้อมูลที่ กรมทางหลวงส่งไปยังโปรแกรมค้นผ่านเว็บไซต์ (Web browser) ของผู้ใช้บริการ และเมื่อมีการติดตั้งข้อมูลดังกล่าวไว้ในระบบของท่านแล้ว หากมีการใช้ “คุกกี้” ก็จะทำให้เว็บไซต์ http://www.doh.go.th สามารถบันทึกหรือจดจำข้อมูลของผู้ใช้บริการไว้ จนกว่าผู้ใช้บริการจะออกจากโปรแกรมค้นผ่านเว็บไซต์ หรือจนกว่าผู้ใช้บริการจะทำการลบ “คุกกี้” นั้นเสีย หรือไม่อนุญาตให้ “คุกกี้” นั้น ทำงานอีกต่อไป
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            หากท่านเลือกใช้ “คุกกี้” แล้ว ท่านจะได้รับความสะดวกสบายในการท่องเว็บไซต์มากขึ้น เพราะ “คุกกี้” จะช่วยจดจำเว็บไซต์ที่ท่านแวะหรือเยี่ยมชม ทั้งนี้ กรมทางหลวง จะนำข้อมูลที่ “คุกกี้” ได้บันทึกหรือเก็บรวบรวมไว้ ไปใช้ในการวิเคราะห์เชิงสถิติ หรือในกิจกรรมอื่นของกรมทางหลวง เพื่อ ปรับปรุงคุณภาพการให้บริการของกรมทางหลวงต่อไป
        </p>
        <h6>การปรับปรุงนโยบายการคุ้มครองข้อมูลส่วนบุคคล</h6>
        <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            กรมทางหลวงอาจทำการปรับปรุงหรือแก้ไขนโยบายการคุ้มครองข้อมูลส่วนบุคคลโดยมิได้แจ้งให้ท่านทราบล่วงหน้า ทั้งนี้ เพื่อความเหมาะสมและมีประสิทธิภาพในการให้บริการ ดังนั้นกรมทางหลวงจึงขอแนะนำให้ผู้ใช้บริการอ่านนโยบายการคุ้มครองข้อมูลส่วนบุคคลทุกครั้งที่เยี่ยมชม หรือมีการใช้บริการจากเว็บไซต์ของกรมทางหลวง
        </p>

        <br>
        <h5>ข้อตกลงในการใช้งานเว็บไซต์</h5>
        <br>
        <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            เว็บไซต์ระบบสารสนเทศเพื่อการบริหารจัดการความรู้กรมทางหลวง (KM DOH website) มีวัตถุประสงค์ในการพัฒนาเทคโนโลยี สนับสนุนการจัดการความรู้ เพื่อให้บุคลากรกรมทางหลวงและประชาชนผู้ใช้บริการสามารถเข้าถึงองค์ความรู้ได้อย่างสะดวกและรวดเร็ว เนื้อหาความรู้ หัวข้อกระทู้ และการแสดงความคิดเห็นในกระทู้ต่าง ๆ ที่ได้นำเข้ามาเผยแพร่ในเว็บไซต์นี้ให้ถือเป็นสิทธิ์ของกรมทางหลวงในการเผยแพร่ จัดเก็บ และนำออกจากระบบ ซึ่งจะดำเนินการโดยแอดมินกลางเท่านั้น
        </p>
        
        <br>
        <h5>เงื่อนไขการใช้งานเว็บไซต์</h5>
        <br>
        <h6>1. เงื่อนไขการใช้งานในเมนู Knowledge Q&A</h6>
        <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            "Knowledge Q&A" เป็นการให้บริการพื้นที่สนทนา กระดานข้อความให้สมาชิกสามารถทำการแลกเปลี่ยนข้อมูลความรู้ต่าง ๆ ผ่านทางเว็บไซต์ โดยสามารถตั้งกระทู้คำถามเกี่ยวกับปัญหา ความรู้ ประสบการณ์ทำงาน และแสดงความคิดเห็นเกี่ยวกับกระทู้ในลักษณะให้ข้อมูลเพิ่มเติมหรือการให้ความรู้และประสบการณ์ที่เกี่ยวข้องกับกระทู้นั้น ๆ
        </p>
        <p>
            ข้อห้ามปฏิบัติ มีดังนี้
            <br>
            1)	ห้ามเขียนข้อความที่เป็นการเหยียดเชื้อชาติ สร้างความเกลียดชัง หรือคลั่งศาสนา สร้างความเสื่อมเสีย ล่วงละเมิด ก่อกวน หรือขู่คุกคามบุคคลอื่น
            <br>
            2)	ห้ามทำการใด ๆ ที่เป็นการละเมิดลิขสิทธิ์ และ/หรือละเมิดสิทธิใด ๆ ของบุคคลอื่นหรือฝ่าฝืนกฎหมายใด ๆ
            <br>
            3)	ห้ามเผยแพร่คำพูดหรือรูปภาพที่หยาบคาย ลามกอนาจาร ไม่สุภาพ หรือไม่เหมาะสมใด ๆ
        </p>
            <p>
                รับผิดชอบและชดใช้ความผิดตามกฎหมายหรือมีการดำเนินการทางกฎหมาย กรมฯขอสงวนสิทธิ์ในการแก้ไขหรือลบเนื้อหาจากกระทู้ได้ทุกเมื่อไม่ว่าด้วยเหตุผลใดก็ตาม โดยไม่มีการแจ้งให้ทราบล่วงหน้า
            </p>
            <h6>2. เงื่อนไขการใช้งานเมนู คลังความรู้และ K-Sharing</h6>
            <p>
                2.1. สมาชิกยินยอมให้กรมทางหลวง ทำการตรวจสอบและควบคุมเนื้อหาของข้อมูลบนเว็บไซต์ทั้งหมด รวมทั้งการลบ และ/หรือ แก้ไขสิ่งใด ๆ ที่สมาชิกได้ทำให้มีขึ้นบนเว็บไซต์ โดยไม่ต้องแจ้งให้ทราบล่วงหน้า
                <br>
                2.2. กรณีที่สมาชิกเกษียณราชการหรือขอยกเลิกการเป็นสมาชิกของเว็บไซต์ เนื้อหาที่สมาชิกเคยทำการเพิ่มลงในเว็บไซต์ยังคงถือเป็นกรรมสิทธิ์ในการดูแลเนื้อหาของกรมทางหลวงต่อไป ไม่สามารถเรียกร้องให้เพิกถอนเนื้อหาใด ๆ ได้
                <br>
                2.3. สมาชิกตกลงรับผิดชอบต่อเนื้อหา ข้อความ รูปภาพ เสียง คลิปวิดีโอ หรือข้อมูลอิเล็กทรอนิกส์อื่น ๆ ที่ได้นำเข้าในเว็บไซต์ ไม่ว่าด้วยวิธีการใดก็ตาม ซึ่งต้องไม่ละเมิดสิทธิ์ของสมาชิกหรือบุคคลอื่นที่ไม่ใช่สมาชิก และ/หรือแสดงเนื้อหา ข้อความ รูปภาพ เสียง คลิปวิดีโอ หรือข้อมูลอิเล็กทรอนิกส์อื่น ๆ ที่ผิดหลักศีลธรรมอันดีงามของประชาชน หรือขัดต่อกฎหมาย ขัดต่อความสงบเรียบร้อย
            </p>
            <p>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                ทั้งนี้ หากพบการกระทำดังกล่าว กรมจะงดการให้บริการ ลบข้อมูล โดยไม่ต้องบอกกล่าวล่วงหน้าได้ และจะดำเนินการทางกฎหมาย เพื่อเรียกร้องให้สมาชิกที่กระทำผิดชดใช้ค่าเสียหายทั้งทางแพ่งและทางอาญาต่อไป
            </p>
      </div>
      <div class="modal-footer">
        <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> -->
        <button type="button" class="btn btn-primary" onclick="approve()">ยอมรับข้อตกลง</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function() {
    $("select").select2({
        theme: "bootstrap-5",
    }).change(function() {
        $(this).valid();
    });

    $("#fnameENG").blur(function() {
        var lname = $("#lnameENG").val().trim();
        if (lname != "") {
            var fname = $("#fnameENG").val().trim();
            var f = fname.toLowerCase().substr(0, 5);
            var l = lname.toLowerCase().substr(0, 3);
            $("#username").val(f + "." + l);
        }
    });
    $("#lnameENG").blur(function() {
        var fname = $("#fnameENG").val().trim();
        if (fname != "") {
            var lname = $("#lnameENG").val().trim();
            var f = fname.toLowerCase().substr(0, 5);
            var l = lname.toLowerCase().substr(0, 3);
            $("#username").val(f + "." + l);
        }
    });

    jQuery.validator.addMethod('thai_charactor', function(value, element) {
        var reg = new RegExp(
            "^([ๅภถุึคตจขชๆไำพะัีรนยบลฃฟหกดเ้่าสวงผปแอิืทมใฝ๑๒๓๔ู฿๕๖๗๘๙๐ฎฑธํ๊ณฯญฐฅฤฆฏโฌ็๋ษศซฉฮฺ์ฒฬฦ])+$",
            "g");
        return reg.test(value);
    });

    jQuery.validator.addMethod('eng_charactor', function(value, element) {
        var reg = new RegExp("^([A-Z]|[a-z])+$", "g");
        return reg.test(value);
    });

    jQuery.validator.addMethod('charactor', function(value, element) {
        var reg = new RegExp(
            "^([A-Z]|[a-z]|[ๅภถุึคตจขชๆไำพะัีรนยบลฃฟหกดเ้่าสวงผปแอิืทมใฝ๑๒๓๔ู฿๕๖๗๘๙๐ฎฑธํ๊ณฯญฐฅฤฆฏโฌ็๋ษศซฉฮฺ์ฒฬฦ])+$",
            "g");
        return reg.test(value);
    });

    var $summaryForm = $("#formRegister");
    $summaryForm.validate({
        rules: {
            fnameTH: {
                required: true,
                thai_charactor: true,
            },
            lnameTH: {
                required: true,
                thai_charactor: true,
            },
            fnameENG: {
                required: true,
                eng_charactor: true,
                // minlength: 5,
            },
            lnameENG: {
                required: true,
                eng_charactor: true,
                // minlength: 3,
            },
            idcard: {
                required: true,
                number: true,
                minlength: 13,
                maxlength: 13,
            },
            birthday: {
                required: true,
            },
            sex: {
                required: true,
            },
            org: {
                required: true,
            },
            position: {
                required: true,
                charactor: true,
            },
            mobile: {
                required: true,
                minlength: 10,
                maxlength: 10,
            },
            phone: {
                required: true,
            },
            // line: {
            //     required: true,
            // },
            email: {
                required: true,
                email: true,
            },
            username: {
                required: true,
            },
            AgreeTerms: {
                required: true,
            },
            profile: {
                required: true,
            }
        },
        messages: {
            fnameTH: {
                required: "กรุณากรอกชื่อ (ภาษาไทย)",
                thai_charactor: "กรุณากรอกอักษรภาษาไทยเท่านั้น",
            },
            lnameTH: {
                required: "กรุณากรอกนามสกุล (ภาษาไทย)",
                thai_charactor: "กรุณากรอกอักษรภาษาไทยเท่านั้น",
            },
            fnameENG: {
                required: "กรุณากรอกชื่อ (ภาษาอังกฤษ)",
                eng_charactor: "กรุณากรอกอักษรภาษาอังกฤษเท่านั้น",
                // minlength: "ข้อมูลไม่ต่ำกว่า 5 ตัวอักษร กรุณาเติมตัวเลขให้ครบ"
            },
            lnameENG: {
                required: "กรุณากรอกนามสกุล (ภาษาอังกฤษ)",
                eng_charactor: "กรุณากรอกอักษรภาษาอังกฤษเท่านั้น",
                // minlength: "ข้อมูลไม่ต่ำกว่า 3 ตัวอักษร กรุณาเติมตัวเลขให้ครบ"
            },
            idcard: {
                required: "กรุณากรอกบัตรประชาชน",
                number: "กรุณากรอกตัวเลขเท่านั้น",
                minlength: "กรุณากรอกตัวเลข 13 หลัก",
                maxlength: "กรุณากรอกตัวเลข 13 หลัก",
            },
            birthday: {
                required: "กรุณากรอกวันเกิด",
            },
            sex: {
                required: "กรุณาเลือกเพศ",
            },
            org: {
                required: "กรุณาเลือกหน่วยงาน",
            },
            position: {
                required: "กรุณากรอกตำแหน่ง",
                charactor: "กรุณากรอกตัวอักษรเท่านั้น",
            },
            mobile: {
                required: "กรุณากรอกเบอร์โทรศัพท์มือถือ",
                minlength: "กรุณากรอกตัวเลข 10 หลัก",
                maxlength: "กรุณากรอกตัวเลข 10 หลัก",
            },
            phone: {
                required: "กรุณากรอกเบอร์ภายใน",
            },
            // line: {
            //     required: "กรุณากรอก Line id",
            // },
            email: {
                required: "กรุณากรอกอีเมล",
                email: "กรุณากรอกรูปแบบอีเมลให้ถูกต้อง",
            },
            username: {
                required: "กรุณากรอกชื่อ-นามสกุล (ภาษาอังกฤษ)",
            },
            AgreeTerms: {
                required: "กรุณาอ่านและยอมรับนโยบายข้อมูลส่วนบุคคล",
            },
            profile: {
                required: "กรุณากรอกข้อมูล",
            }
        },
        submitHandler: function() {
            var fnameTH = $("#fnameTH").val();
            var lnameTH = $("#lnameTH").val();
            var fnameENG = $("#fnameENG").val();
            var lnameENG = $("#lnameENG").val();
            var idcard = $("#idcard").val();
            var birthday = $("#birthday").val();
            var sex = $("#sex").val();
            var org = $("#org").val();
            var position = $("#position").val();
            var mobile = $("#mobile").val();
            var phone = $("#phone").val();
            var line = $("#line").val();
            var email = $("#email").val();
            var username = $("#username").val();
            var AgreeTerms = $("#AgreeTerms").val();
            var profile = $('#profile').prop('files')[0];

            var form_data = new FormData();
            form_data.append('fname_th', fnameTH);
            form_data.append('lname_th', lnameTH);
            form_data.append('fname_eng', fnameENG);
            form_data.append('lname_eng', lnameENG);
            form_data.append('idcard', idcard);
            form_data.append('birthdate', birthday);
            form_data.append('gender', sex);
            form_data.append('idorg', org);
            form_data.append('position', position);
            form_data.append('cellphone', mobile);
            form_data.append('telephone', phone);
            form_data.append('lineid', line);
            form_data.append('email', email);
            form_data.append('username', username);
            form_data.append('profile', profile);
            // console.log(form_data);
            $(".loader").show();
            $.ajax({
                type: "post",
                url: 'register/auth',
                data: form_data,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                processData: false,
                contentType: false,
                cache: false,
                success: function(data) {
                    // console.log("post login. [ " + data.status + "/" + data.message + " ]");
                    // window.location = "login";
                    if (data.status == true) {
                        $(".loader").hide();
                        Swal.fire({
                            icon: 'success',
                            title: 'ขอบคุณสำหรับการสมัครสมาชิก',
                            text: 'เราจะดำเนินการตรวจสอบข้อมูลการสมัครสมาชิกของท่านภายใน 2 วันทำการ และแจ้งผลการสมัครสมาชิกทางอีเมล',
                            allowOutsideClick: false,
                            focusConfirm: true,
                            confirmButtonText: 'ตกลง',
                        }).then((result) => {
                            if (result.value) {
                                window.location = "home";
                            }
                        })
                    } else {
                        $(".loader").hide();
                        Swal.fire({
                            icon: 'warning',
                            title: 'คำเตือน',
                            text: JSON.stringify(data.message),
                        });
                    }
                },
            });
        },
        errorElement: "div",
        errorPlacement: function(error, element) {
            error.addClass("invalid-feedback");

            if (element.prop("type") === "checkbox") {
                error.insertAfter(element).addClass("invalid-feedback");
            } else {
                error.insertAfter(element);
            }

            var elem = $(element);
            if (elem.hasClass("select2-hidden-accessible")) {
                element = $("#select2-" + elem.attr("id") + "-container").parent();
                error.insertAfter(element).addClass("invalid-feedback");
            } else {
                error.insertAfter(element);
            }

            if (!element.next("span")[0]) {
                $("<span class='glyphicon glyphicon-remove form-control-feedback'></span>")
                    .insertAfter(element);
            }

            if (element.parent().hasClass('input-group')) {
                error.insertAfter(element.parent()).addClass("invalid-feedback");
            } else {
                error.insertAfter(element).addClass("invalid-feedback");
            }
        },
        success: function(label, element) {
            // $(element).addClass("is-valid");
            // if (!$(element).next("span")[0]) {
            //     $("<span class='glyphicon glyphicon-ok form-control-feedback'></span>").insertAfter(
            //         $(element));
            // }
            var elem = $(element);
            elem.removeClass("is-invalid");
            elem.addClass("is-valid");
        },
        highlight: function(element, errorClass, validClass) {
            // $(element).parents(".col-sm-5").addClass("has-error").removeClass("has-success");
            // $(element).next("span").addClass("glyphicon-remove").removeClass("glyphicon-ok");

            var elem = $(element);
            elem.addClass("is-invalid");

            // if (elem.hasClass("select2-hidden-accessible")) {                
            //     $(elem.attr("id")).next().addClass("is-invalid");
            // } else {
            //     elem.addClass("is-invalid");
            // }
        },
        unhighlight: function(element, errorClass, validClass) {
            // $(element).parents(".col-sm-5").addClass("has-success").removeClass("has-error");
            // $(element).next("span").addClass("glyphicon-ok").removeClass("glyphicon-remove");

            var elem = $(element);
            elem.removeClass("is-invalid");

            // if (elem.hasClass("select2-hidden-accessible")) {                
            //     $(elem.attr("id")).next().removeClass("is-invalid");
            // } else {
            //     elem.removeClass("is-invalid");
            // }
        }
    });

    $("#org").change(function() {
        $tex = $("#org").val();
        if ($tex != null) {
            $('#org-error').remove();
        }
    });

    $("#sex").change(function() {
        $tex = $("#sex").val();
        if ($tex != null) {
            $('#sex-error').remove();
        }
    });

    var forms = document.querySelectorAll('.needs-validation')
    Array.prototype.slice.call(forms)
        .forEach(function(form) {
            form.addEventListener('submit', function(event) {
                if (!form.checkValidity()) {
                    event.preventDefault()
                    event.stopPropagation()
                }
                form.classList.add('was-validated')
            }, false)
        })
});

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#pic').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

var _URL = window.URL || window.webkitURL;
$("#profile").change(function() {
    var file, img, fileType, fsize;
    file = this.files[0];
    fileType = file['type'];
    validImageTypes = ['image/jpeg', 'image/png'];
    fsize = file.size;
    size = Math.round((fsize / 1024));
    console.log(fsize);

    if (validImageTypes.includes(fileType)) {
        img = new Image();
        img.onload = function() {
            // alert((this.width == 2500) && (this.height == 730));
            if ((this.width > 1080) && (this.height > 1080)) {
                Swal.fire({
                    icon: 'warning',
                    title: 'คำเตือน',
                    text: 'กรุณาใช้ภาพขนาดไม่เกิน 1080 x 1080 px',
                });
                $("#profile").val("");
                $('#pic').attr("src", "<?php echo e(asset('image/personal01.png')); ?>");
                return false;
            } else if ((this.width < 300) && (this.height < 300)) {
                Swal.fire({
                    icon: 'warning',
                    title: 'คำเตือน',
                    text: 'กรุณาใช้ภาพขนาดมากกว่า 300 x 300 px',
                });
                $("#profile").val("");
                $('#pic').attr("src", "<?php echo e(asset('image/personal01.png')); ?>");
                return false;
            } else {
                if (size > 3072) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'คำเตือน',
                        text: 'กรุณาใช้ภาพขนาดไม่เกิน 3 MB',
                    });
                    $("#profile").val("");
                    $('#pic').attr("src", "<?php echo e(asset('image/personal01.png')); ?>");
                    return false;
                }
            }
        };
        img.onerror = function() {
            $("#profile").val("");
            Swal.fire({
                icon: 'warning',
                title: 'คำเตือน',
                text: "กรุณาอัพโหลดไฟล์ภาพ (jpg, png) เนื่องจากเป็นไฟล์ประเภท" + file.type,
            });
        };
        img.src = _URL.createObjectURL(file);
        readURL(this);
    } else {
        $("#profile").val("");
        Swal.fire({
            icon: 'warning',
            title: 'คำเตือน',
            text: "กรุณาอัพโหลดไฟล์ภาพ (jpg, png)",
        });
    }

});

function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    else
        return true;
}

function isNumberPhone(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode != 44 && charCode != 45 && charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    else
        return true;
}

function isNumericKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode != 46 && charCode > 31 &&
        (charCode < 48 || charCode > 57))
        return true;
    return false;
}

function approve() {
    $('#AgreeTerms').prop('checked', true);
    $('.btn-close').click();
}
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.front.mastermem', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /var/www/html/km-web/resources/views/auth/register.blade.php ENDPATH**/ ?>