@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.update', $payment->id) }}"
            novalidate class="{{ ($errors->any()) ? 'was-validated' : 'needs-validation' }}"
            method="post"
    >
    @csrf
    @method('PUT')
        <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="ขับ" @if($payment->drive == "ขับ") selected @endif>มีการขับรถ</option>
                                        <option value="ไม่ขับ" @if($payment->drive == "ไม่ขับ") selected @endif>ไม่มีการขับรถ</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="รถยนต์" @if($payment->type == "รถยนต์") selected @endif>รถยนต์</option>
                                        <option value="รถจักรยานยนต์" @if($payment->type == "รถจักรยานยนต์") selected @endif>รถจักรยานยนต์</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="ออโต้" @if($payment->gear == "ออโต้") selected @endif>ออโต้</option>
                                        <option value="ธรรมดา" @if($payment->gear == "ธรรมดา") selected @endif>ธรรมดา</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="ค่าจ้าง / ชม. (บาท)" value="{{$payment->cost}}" 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();

        if($('#drive').val()=='ไม่ขับ') {
            $('#type').prop("disabled", true);
            $('#type').selectpicker('refresh');
            $('#gear').prop("disabled", true);
            $('#gear').selectpicker('refresh');
        }

        $('#drive').on('change', function (){
            if( $(this).val() == 'ไม่ขับ' ) {
                $('#type').val('');
                $('#gear').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
