@extends('layouts.web')

@section('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<link href="{{ asset('css/bootstrap-datepicker.min.css') }}" rel="stylesheet" />
@endsection

@section('content')
<div class="container-fluid pt-3">
    <form action="{{ route('vehicle.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-sm-12 col-md-2">
                                <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>
                                    @error('type')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-2">
                                <div class="form-group gear">
                                    <label for="gear">ประเภทเกียร์ <span class="text-red">*</span></label>
                                    <select id="gear" name="gear" class="form-control dan selectpicker show-menu-arrow" title="--เลือกเกียร์--" required >
                                      <option value="ธรรมดา" >ธรรมดา</option>
                                      <option value="ออโต้" >ออโต้</option>
                                    </select>
                                    @error('gear')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-1">
                                <div class="form-group">
                                    <label for="vehicleNo">คันที่ <span class="text-red">*</span></label>
                                    <input type="text" class="form-control" id="vehicleNo" name="vehicleNo" placeholder="คันที่" required>
                                    @error('vehicleNo')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-3">
                                <div class="form-group">
                                    <label for="brand">ยี่ห้อ <span class="text-red">*</span></label>
                                    <input type="text" class="form-control" id="brand" name="brand" placeholder="ชื่อยี่ห้อ" required>
                                    @error('brand')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-4">
                                <div class="form-group">
                                    <label for="model">รุ่น <span class="text-red">*</span></label>
                                    <input type="text" class="form-control" id="model" name="model" placeholder="ชื่อรุ่น" required>
                                    @error('model')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-4 col-md-3">
                                <div class="form-group">
                                    <label for="bodySerial">เลขตัวถัง <span class="text-red">*</span></label>
                                    <input type="text" class="form-control" id="bodySerial" name="bodySerial" placeholder="เลขตัวถัง" required>
                                    @error('bodySerial')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-8 col-md-3">
                                <div class="form-group">
                                    <label for="engineSerial">เลขเครื่องยนต์ <span class="text-red">*</span></label>
                                    <input type="text" class="form-control" id="engineSerial" name="engineSerial" placeholder="เลขเครื่องยนต์" required>
                                    @error('engineSerial')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-6">
                                <div class="form-group">
                                    <label for="characteristic">ลักษณะ / มาตรฐานรถ</label>
                                    <input type="text" class="form-control" id="characteristic" name="characteristic" placeholder="ลักษณะ / มาตรฐานรถ">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12 col-md-4">
                                <div class="form-group">
                                    <label for="registration">เลขทะเบียน <span class="text-red">*</span></label>
                                    <div class="row">
                                        <div class="col-sm-12 col-md-4">
                                            <input type="text" class="form-control" id="registrationClass" name="registrationClass" placeholder="หมวด" required>
                                            @error('registrationClass')
                                            <div class="text-danger">{{  $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-sm-12 col-md-6">
                                            <input type="number" class="form-control" id="registrationNum" name="registrationNum" placeholder="เลขทะเบียน" required>
                                            @error('registrationNum')
                                            <div class="text-danger">{{  $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-4">
                                <div class="form-group">
                                    <label for="province">จังหวัด <span class="text-red">*</span></label>
                                    <select class="form-control selectpicker show-menu-arrow" id="province" name="province" data-live-search="true" title="--เลือกจังหวัด--" required>
                                        @foreach ($provinces as $indexKey => $province)
                                        <option value="{{ $province->name }}">{{ $province->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('province')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-4">
                                <div class="form-group">
                                    <label for="taxExpire">วันหมดอายุภาษี <span class="text-red">*</span></label>
                                    <div class="input-group mb-3">
                                        <input type="text" class="form-control" id="taxExpire" name="taxExpire" placeholder="วันหมดอายุภาษี" autocomplete="off"  required>
                                        <div class="input-group-append">
                                            <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                                        </div>
                                    </div>
                                    @error('taxExpire')
                                    <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('vehicle.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="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
<script src="{{ asset('js/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('js/bootstrap-datepicker.th.min.js') }}"></script>
<script src="{{ asset('js/custom.js') }}"></script>
<script>
    $(document).ready(function(){
        $('.selectpicker').selectpicker();

        $('#taxExpire').datepicker({
            format: 'dd/mm/yyyy',
            autoclose: true,
            language: 'th',
            orientation: 'bottom',
        });

        $('#type').on('change', function () {  
            if( $('#type').val() == 'รถยนต์' ) {
                $('#vehicleNo').val('{!! $car_no !!}');
            }
            if( $('#type').val() == 'รถจักรยานยนต์' ) {
                $('#vehicleNo').val('{!! $motobike_no !!}');
            }
        });
    });
</script>
@endsection
