@extends('layouts.main')

@section('pageTitle', '合約管理 - 修改')

@section('content')
<!-- /.card-header -->
<div class="card-body">
<form action="{{ route('monthlypayContracts.update', $monthlypayContract->id) }}" method="post" id="monthlypayContractsForm">
    @csrf
    @method('PUT')
    <div class="col-sm-6">
        <div class="form-group">
            <label for="token">車號</label>
            <input type="text" class="form-control" value="{{ $monthlypayContract->token }}" readonly>
        </div>
        <div class="form-group">
            <label for="user_name">使用者名稱</label>
            <input type="text" class="form-control" value="{{ $monthlypayContract->user_name }}" readonly>
        </div>
        <div class="form-group">
            <label>車種</label>
            <select class="form-control" id="vehicleType" disabled>
                @inject('vehicleTypesRepository', 'App\Repositories\VehicleTypesRepository')
                @foreach($vehicleTypesRepository->getListByPluck('id', 'name', [['id', '<', 3]]) as $id => $name)
                    <option value="{{ $id }}"  @if($id == $monthlypayContract->vehicle_type) selected @endif>{{ $name }}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group">
            <label for="contract_start_date">合約起始日期</label>
            <input type="text" class="form-control" value="{{ $monthlypayContract->start_date }}" readonly>
        </div>
        <div class="form-group">
            <label for="contract_end_date">合約到期日期</label>
            <input type="text" class="form-control" value="{{ $monthlypayContract->end_date }}" readonly>
        </div>
        <div class="form-group">
            <label>繳費週期</label>
            <select class="form-control" id="paymentPeriod" disabled>
                @foreach(config('webCommonData.monthlypayContractPeriodDropdown') as $value => $title)
                    <option value="{{ $value }}" @if($value == $monthlypayContract->payment_period) selected @endif>{{ $title }}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group">
            <label for="payment_period_amount">繳費週期金額</label>
            <select class="form-control" name="payment_period_amount_type" id="paymentPeriodAmountType" style="margin-bottom:10px;">
                @foreach(config('webCommonData.monthlypayCategoryAmountDropdown') as $value => $name)
                    <option value="{{ $value }}" @if($value == $monthlypayContract->payment_period_amount_type) selected @endif>{{ $name }}</option>
                @endforeach
            </select>
            <input type="text" class="form-control" placeholder="繳費週期金額" name="payment_period_amount" value="{{ $monthlypayContract->payment_period_amount }}">
            @error('payment_period_amount')
                <span id="payment_period_amount-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="{{ $monthlypayContract->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="{{ $monthlypayContract->email }}">
            @error('email')
                <span id="email-error" class="validateError">{{ $message }}</span>
            @enderror
        </div>
    </div>
    <span id="formSubmit" class="btn btn-info" data-toggle="modal" data-target="">修改</span>
    <a class="btn btn-warning" href="{{ route('monthlypayContracts.index') }}">返回</a>
</form>
</div>
<!-- /.card-body -->
@endsection
@section('js')
<script>
$(document).ready(function () {
    var normalUrl = "{{ route('monthlypayAmountDynamic') }}";
    var old_amount = $('input[name=payment_period_amount]').val();
    $(document).ready(function () {
        $('#paymentPeriodAmountType').trigger('change');
    });
    $('#paymentPeriodAmountType').change(function (e) {
        var paymentPeriodAmountType = $(this).val();
        if (paymentPeriodAmountType == 0) {
            $('input[name=payment_period_amount]').attr('readonly', true);
            normalAjax(normalUrl, ['vehicleType', 'paymentPeriod'], afterPaymentPeriodAmountTypeChange);
        } else {
            $('input[name=payment_period_amount]').attr('readonly', false);
            $('input[name=payment_period_amount]').val(old_amount);
        }
    });

    function afterPaymentPeriodAmountTypeChange(amount) {
        $('input[name=payment_period_amount]').val(amount);
    }
    $('span#formSubmit').click(function (e) {
        if(!confirm('已產生的訂單請自行修正，後續的訂單將使用修改後的合約資料產生。')) {
            return false;
        }
        $('#monthlypayContractsForm').submit();
    });
});
</script>
@endsection