@extends('layouts.web')

@section('css')
<link rel="stylesheet" href="{{ asset('css/bootstrap-select.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/icheck-bootstrap.min.css') }}">
@endsection

@section('content')
<div class="container-fluid pt-3">
    <form action="{{ route('course.store') }}"
            novalidate class="{{ ($errors->any()) ? 'was-validated' : 'needs-validation' }}"
            method="post"
    >
    @csrf
        <div class="row">
            <div class="col-12">
                <div class="card card-outline card-success">
                    <div class="card-header">
                        <h3 class="card-title">ข้อมูลคอร์ส</h3>
                    </div>

                    <div class="card-body">
                        <div class="row">
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="type">ประเภทหลักสูตร <span class="text-red">*</span></label>
                                    <select id="type" name="type" class="form-control selectpicker show-menu-arrow" title="--เลือกประเภท--" required>
                                      <option value="รถยนต์" >หลักสูตรรถยนต์</option>
                                      <option value="รถจักรยานยนต์" >หลักสูตรรถจักรยานยนต์</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="form-group">
                                    <label for="gear">เกียร์ <span class="text-red">*</span></label>
                                    <select id="gear" name="gear" class="form-control selectpicker show-menu-arrow" title="--เลือกเกียร์--" required>
                                      <option value="ธรรมดา" >ธรรมดา</option>
                                      <option value="ออโต้" >ออโต้</option>
                                      <option value="ธรรมดา-ออโต้" >ธรรมดา-ออโต้</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-7">
                                <div class="form-group">
                                    <label for="name">ชื่อหลักสูตร <span class="text-red">*</span></label>
                                    <input type="text" class="form-control" id="name" name="name" placeholder="ชื่อหลักสูตร" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-2">
                                <div class="form-group">
                                    <label for="noOfModule">จำนวนวิชา <span class="text-red">*</span></label>
                                    <select id="noOfModule" name="noOfModule" class="form-control selectpicker show-menu-arrow" title="--เลือกประเภท--" required>
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                        <option value="6">6</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="form-group">
                                    <label for="hour">จำนวนชั่วโมงที่เรียน <span class="text-red">*</span></label>
                                    <input type="number" class="form-control" id="hour" name="hour" placeholder="ชั่วโมงเรียน" required>
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="form-group">
                                    <label for="hourTraning">จำนวนชั่วโมงที่อบรม <span class="text-red">*</span></label>
                                    <input type="number" class="form-control" id="hourTraning" name="hourTraning" placeholder="ชั่วโมงอบรม" required>
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="form-group">
                                    <label for="price">อัตราค่าเรียน <span class="text-red">*</span></label>
                                    <input type="number" class="form-control" id="price" name="price" placeholder="อัตราค่าเรียน" required>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <label>สอบใบขับขี่กับโรงเรียน <span class="text-red">*</span></label>
                                    <div>
                                        <div class="icheck-nephritis icheck-inline">
                                            <input type="radio" id="test" name="test" value="มี" required>
                                            <label for="test">มีสอบกับโรงเรียน</label>
                                        </div>
                                        <div class="icheck-nephritis icheck-inline">
                                            <input type="radio" id="noTest" name="test" value="ไม่มี">
                                            <label for="noTest">ไม่มีสอบกับโรงเรียน</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="moduleDiv">

                        </div>
                        <div class="row mt-3">
                            <div class="col-8">
                                <div class="form-group">
                                    <label for="option">ค่าบริการอื่นๆ</label>
                                    <input type="text" class="form-control" id="optional" name="optional" placeholder="ค่าบริการอื่นๆ">
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <label for="oPrice">จำนวนเงิน</label>
                                    <input type="number" class="form-control" id="oPrice" name="oPrice" placeholder="จำนวนเงิน">
                                </div>
                            </div>
                        </div>

                    </div>  <!-- div card body -->


                </div>
                <div class="row mt-3 mb-3">
                    <div class="col-12">
                        <div style="float:left">
                            <a href="{{ route('course.index') }}" class="btn btn-outline-secondary"><i class="fas fa-chevron-left"></i> ย้อนกลับ</a>
                        </div>
                        <div style="float: right">
                            <button type="reset" class="btn btn-outline-secondary" value="reset">ล้างข้อความ</button>
                            <button type="submit" class="btn btn-success ml-2" value="add-course">เพิ่มคอร์ส</button>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@section('footerscript')
<script src="{{ asset('js/bootstrap-select.min.js') }}"></script>
<script>
    $(document).ready(function(){
        $('.selectpicker').selectpicker();

        $('#noOfModule').on('change', function() {
            $('#moduleDiv').empty();
            var i;
            var no = $('#noOfModule').val();
            for(i=0; i < no; i++) {
                var j = i + 1;
                $('#moduleDiv').append('<div class="row mt-2 border-bottom "><div class="col-6 d-flexd-flex justify-content-center mt-2 mb-1"><div class="form-group"><label for="module'+j+'">วิชาที่ '+j+' : <span class="text-red">*</span></label><input type="text" class="form-control" id="module'+j+'" name="module'+j+'" placeholder="วิชาที่ '+j+'" required></div></div><div class="col-2 d-flex justify-content-center mt-2 mb-1"><div class="form-group"><label for="mHour'+j+'">จำนวนชั่วโมง <span class="text-red">*</span></label><input type="number" class="form-control" id="mHour'+j+'" name="mHour'+j+'" placeholder="ชั่วโมงเรียนวิชาที่ '+j+'" required></div></div><div class="col-2 text-center mt-2 mb-1"><div class="form-group"><label for="mDrive'+j+'">มีการขับรถหรือไม่ <span class="text-red">*</span></label><div><div class="icheck-nephritis icheck-inline"><input type="radio" id="mDrive'+j+'" name="mDrive'+j+'" value="ขับ" required><label for="mDrive'+j+'">มีขับรถ</label></div><div class="icheck-nephritis icheck-inline"><input type="radio" id="mNoDrive'+j+'" name="mDrive'+j+'" value="ไม่ขับ"><label for="mNoDrive'+j+'">ไม่มีขับรถ</label></div></div></div></div><div class="col-2 text-center mt-2 mb-1"><div class="form-group"><label for="significance'+j+'">วิชา 3/1</label><div class="icheck-nephritis pt-2"><input type="checkbox" id="significance'+j+'" name="significance'+j+'" value="1"><label for="significance'+j+'">ใช่</label></div></div></div>');
            }
        });
    });
</script>
@endsection
