@extends('layouts.web')

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

@section('content')
<div class="container-fluid pt-3">
    <form action="{{ route('payment.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="drive">ประเภทการเรียน <span class="text-red">*</span></label>
                                    <select id="drive" name="drive" class="selectpicker show-menu-arrow form-control" title="--เลือก--"  required>
                                        <option value="ขับ">มีการขับรถ</option>
                                        <option value="ไม่ขับ" >ไม่มีการขับรถ</option>
                                    </select>
                                    @error('drive')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="type">ประเภทยานพาหนะ <span class="text-red">*</span></label>
                                    <select id="type" name="type" class="selectpicker show-menu-arrow form-control" title="--เลือก--"  required>
                                        <option value="รถยนต์">รถยนต์</option>
                                        <option value="รถจักรยานยนต์" >รถจักรยานยนต์</option>
                                    </select>
                                    @error('type')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="gear">ประเภทเกียร์ <span class="text-red">*</span></label>
                                    <select id="gear" name="gear" class="selectpicker show-menu-arrow form-control" title="--เลือก--"  required>
                                        <option value="ออโต้">ออโต้</option>
                                        <option value="ธรรมดา" >ธรรมดา</option>
                                    </select>
                                    @error('gear')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="cost">ค่าจ้าง / ชม. <span class="text-red">*</span></label>
                                    <input type="number" class="form-control" id="cost" name="cost" placeholder="ค่าจ้าง / ชม. (บาท)" required>
                                    @error('cost')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>  <!-- div card body -->

                </div>
                <div class="row mt-3">
                    <div class="col-12">
                        <div style="float:left">
                            <a href="{{ route('payment.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();
        $('#drive').on('change', function (){
            if( $(this).val() == 'ไม่ขับ' ) {
                $('#type').prop("disabled", true);
                $('#type').selectpicker('refresh');
                $('#gear').prop("disabled", true);
                $('#gear').selectpicker('refresh');
            } else {
                $('#type').prop("disabled", false);
                $('#type').selectpicker('refresh');
                $('#gear').prop("disabled", false);
                $('#gear').selectpicker('refresh');
            }
        });
    });
</script>
@endsection
