@extends('layouts.main')

@section('pageTitle', '訂單管理 - 新增')

@section('content')
<!-- /.card-header -->
<div class="card-body">
<form action="{{ route('monthlypayOrders.store') }}" method="post">
    @csrf
    <div class="col-sm-6">
        <div class="form-group">
            <label for="token">車號</label>
            <input type="text" class="form-control" placeholder="車號" name="token" value="{{ old('token') }}">
            @error('token')
                <span id="token-error" class="validateError">{{ $message }}</span>
            @enderror
        </div>
        <div class="form-group">
            <label for="user_name">使用者名稱</label>
            <input type="text" class="form-control" placeholder="使用者名稱" name="user_name" value="{{ old('user_name') }}">
            @error('user_name')
                <span id="user_name-error" class="validateError">{{ $message }}</span>
            @enderror
        </div>
        <div class="form-group">
            <label>車種</label>
            <select class="form-control" name="vehicle_type" id="vehicleType">
                @inject('vehicleTypesRepository', 'App\Repositories\VehicleTypesRepository')
                @foreach($vehicleTypesRepository->getListByPluck('id', 'name', [['id', '<', 3]]) as $id => $name)
                    <option value="{{ $id }}"  @if($id == old('vehicle_type')) selected @endif>{{ $name }}</option>
                @endforeach
            </select>
            @error('vehicle_type')
                <span id="vehicle_type-error" class="validateError">{{ $message }}</span>
            @enderror
        </div>
        <div class="form-group">
            <label for="phone">聯絡電話</label>
            <input type="text" class="form-control" placeholder="聯絡電話" name="phone" value="{{ old('phone') }}">
            @error('phone')
                <span id="phone-error" class="validateError">{{ $message }}</span>
            @enderror
        </div>
        <div class="form-group">
            <label for="email">Email (訂單繳費提醒用)</label>
            <input type="text" class="form-control" placeholder="Email (訂單繳費提醒用)" name="email" value="{{ old('email') }}">
            @error('email')
                <span id="email-error" class="validateError">{{ $message }}</span>
            @enderror
        </div>
        <div class="form-group">
            <label for="order_start_date">租賃起始日期</label>
            <input type="text" class="form-control" placeholder="租賃起始日期" name="order_start_date" value="{{ old('order_start_date', date('Y-m-d')) }}" id="orderStartDate" readonly>
            @error('order_start_date')
                <span id="order_start_date-error" class="validateError">{{ $message }}</span>
            @enderror
        </div>
        <div class="form-group">
            <label for="order_end_date">租賃到期日期</label>
            <input type="text" class="form-control" placeholder="租賃到期日期" name="order_end_date" value="{{ old('order_end_date', date('Y-m-d', strtotime("+1 month", time()))) }}" id="orderEndDate" readonly>
            @error('order_end_date')
                <span id="order_end_date-error" class="validateError">{{ $message }}</span>
            @enderror
        </div>
        <div class="form-group">
            <label for="pay_start_date">繳費起始日期</label>
            <input type="text" class="form-control" placeholder="繳費起始日期" name="pay_start_date" value="{{ old('pay_start_date', date('Y-m-d')) }}" id="payStartDate" readonly>
            @error('pay_start_date')
                <span id="pay_start_date-error" class="validateError">{{ $message }}</span>
            @enderror
        </div>
        <div class="form-group">
            <label for="pay_end_date">繳費到期日期(超商繳費的到期日會提早4天)</label>
            <input type="text" class="form-control" placeholder="繳費到期日期" name="pay_end_date" value="{{ old('pay_end_date', date('Y-m-d', strtotime("+1 month", time()))) }}" id="payEndDate" readonly>
            @error('pay_end_date')
                <span id="pay_end_date-error" class="validateError">{{ $message }}</span>
            @enderror
        </div>
        <div class="form-group">
            <label for="amount">繳費金額</label>
            <select class="form-control" id="amountType" style="margin-bottom:10px;">
                @foreach(config('webCommonData.monthlypayOrderAmountDropdown') as $value => $name)
                    <option value="{{ $value }}">{{ $name }}</option>
                @endforeach
            </select>
            <input type="text" class="form-control" placeholder="繳費金額" name="amount" value="{{ old('amount') }}">
            @error('amount')
                <span id="amount-error" class="validateError">{{ $message }}</span>
            @enderror
        </div>
        <div class="form-group">
            <label for="mail_display_station_name">提醒的信件是否顯示場站名稱</label>
            <select class="form-control" id="mail_display_station_name" name="mail_display_station_name" style="margin-bottom:10px;">
                <option value="1" @if(old('mail_display_station_name')) selected @endif>是</option>
                <option value="0" @if(old('mail_display_station_name')) selected @endif>否</option>
            </select>
            @error('mail_display_station_name')
                <span id="mail_display_station_name-error" class="validateError">{{ $message }}</span>
            @enderror
        </div>
    </div>
    <button type="submit" class="btn btn-primary">新增</button>
    <a class="btn btn-warning" href="{{ route('monthlypayOrders.index') }}">返回</a>
</form>
</div>
<!-- /.card-body -->
@endsection

@section('js')
@include('include.datePickerAndMask')
<script>
$(document).ready(function () {
    var normalUrl = "{{ route('monthlypayAmountDynamic') }}";
    $('#orderStartDate, #orderEndDate, #payStartDate, #payEndDate').daterangepicker(datePickerSetting);

    $('#vehicleType').change(function (e) {
        $('#amountType').val(0);
        $('input[name=amount]').attr('readonly', false).val('');
    });

    $('#amountType').change(function (e) {
        var amountType = $(this).val();

        if (amountType == 0) {
            $('input[name=amount]').attr('readonly', false);
        } else {
            normalAjax(normalUrl, ['vehicleType', 'amountType'], afterAmountTypeChange);
            $('input[name=amount]').attr('readonly', true);
        }
    });

    function afterAmountTypeChange(amount) {
        $('input[name=amount]').val(amount);
    }
});
</script>
@endsection