@extends('layouts.main')

@section('pageTitle', '合約管理')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="input-group col-12 col-sm-4 col-md-3 col-lg-3 col-xl-2 searchConditionString">
            <div class="input-group-prepend">
                <span class="input-group-text">車號</span>
            </div>
            <input type="text" class="form-control" placeholder="車號" id="token">
        </div>
        <div class="input-group col-12 col-sm-4 col-md-3 col-lg-3 col-xl-2 searchConditionString">
            <div class="input-group-prepend">
                <span class="input-group-text">電話號碼</span>
            </div>
            <input type="text" class="form-control" placeholder="電話號碼" id="phoneNumber">
        </div>
        <div class="input-group col-12 col-sm-4 col-md-3 col-lg-3 col-xl-2 searchConditionString">
            <div class="input-group-prepend">
                <span class="input-group-text">合約狀態</span>
            </div>
            <select class="form-control" id="status">
                <option value="NotIncluded">全部(不含作廢)</option>
                <option value="">全部</option>
                @foreach(config('webCommonData.monthlypayContractStatusDropdown') as $value => $name)
                    <option value="{{ $value }}">{{ $name }}</option>
                @endforeach
            </select>
        </div>
        <div class="input-group col-12 col-sm-4 col-md-3 col-lg-3 col-xl-2 searchConditionString">
            <div class="input-group-prepend">
                <span class="input-group-text">車種</span>
            </div>
            <select class="form-control" id="vehicleType">
                @inject('vehicleTypesRepository', 'App\Repositories\VehicleTypesRepository')
                <option value="">全部</option>
                @foreach($vehicleTypesRepository->getListByPluck('id', 'name', [['id', '<', 3]]) as $id => $name)
                    <option value="{{ $id }}">{{ $name }}</option>
                @endforeach
            </select>
        </div>
        <div class="input-group col-12 col-sm-4 col-md-3 col-lg-3 col-xl-2 searchConditionString">
            <div class="input-group-prepend">
                <span class="input-group-text">使用者名稱</span>
            </div>
            <input type="text" class="form-control" placeholder="使用者名稱" id="userName">
        </div>
        <div class="input-group col-12 col-sm-4 col-md-3 col-lg-3 col-xl-2 searchConditionString">
            <div class="input-group-prepend">
                <span class="input-group-text">繳費週期</span>
            </div>
            <select class="form-control" id="paymentPeriod">
                <option value="">全部</option>
                @foreach(config('webCommonData.monthlypayContractPeriodDropdown') as $value => $name)
                    <option value="{{ $value }}">{{ $name }}</option>
                @endforeach
            </select>
        </div>
        <div class="input-group col-12 col-sm-4 col-md-3 col-lg-3 col-xl-2 searchConditionString">
            <div class="input-group-prepend">
                <span class="input-group-text">合約起始日期</span>
            </div>
            {{-- @inject('monthlyListRepository', 'App\Repositories\MonthlyListRepository') --}}
            @if(is_null($startDate))
                <input type="text" class="form-control" placeholder="合約起始日期" id="startDate" value="{{ date('Y-m-d', strtotime('-1 day')) }}" readonly>
            @else
                <input type="text" class="form-control" placeholder="合約起始日期" id="startDate" value="{{ $startDate }}" readonly>
            @endif
        </div>
        <div class="input-group col-12 col-sm-4 col-md-3 col-lg-3 col-xl-2 searchConditionString">
            <div class="input-group-prepend">
                <span class="input-group-text">合約到期日期</span>
            </div>
            @if(is_null($startDate))
                <input type="text" class="form-control" placeholder="合約到期日期" id="endDate" value="{{ date('Y-m-d') }}" readonly>
            @else
                <input type="text" class="form-control" placeholder="合約到期日期" id="endDate" value="{{ $endDate }}" readonly>
            @endif
        </div>
    </div>

    <button type='button' class='btn btn-danger' style="margin-bottom:10px;" id="monthlypayContractsListSearch">查詢紀錄</button>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body table-responsive p-3">
                    <table id="datatableList" class="table table-bordered table-striped table-hover text-nowrap">
                        <thead>
                            <tr>
                                <th>車號</th>
                                <th>合約起始日期</th>
                                <th>合約到期日期</th>
                                <th>繳費週期</th>
                                <th class="unsortable">金額</th>
                                <th>車種</th>
                                <th>使用者名稱</th>
                                <th>電話</th>
                                <th>Email</th>
                                <th>合約狀態</th>
                                <th>建立時間</th>
                                @if(auth()->user()->can('monthlypayContracts.edit'))
                                    <th class="unsortable">修改</th>
                                @endif
                                @if(auth()->user()->can('monthlypayContracts.nullify'))
                                    <th class="unsortable">作廢</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>
    @if ($monthlypaySettings['monthlypay_pls_enable'] == 1)
        @can('monthlypayContracts.create')
            <a class="btn btn-danger" href="{{ route('monthlypayContracts.create') }}">新增合約</a>
        @endcan
    @endif
    <!-- /.row -->
</div>

<div class="modal fade" id="nullifyNoticeModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">合約作廢</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="closeModal">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="text-align:left;font-size: 18px;">
                <p>合約作廢後，不會再自動生成後續的訂單。</p>
                <p>已生成的訂單，需管理員人工處理，作廢訂單或是讓使用者繳費。</p>
                <p>合約作廢後，無法還原，請確認後再執行。</p>
            </div>
            <div class="modal-footer justify-content-between" style="text-align:center;">
                <button type="button" class="btn btn-danger" id="contractNullifyCheck">確認作廢</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
            </div>
            <input type="hidden" id="nullifyContractId">
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

@endsection

@section('js')
@include('include.datePickerAndMask')
<script>
$(document).ready(function () {
    var url = "{{ route('monthlypayContracts.datatableList') }}";
    var columns = [
        {data: 'token', name: 'token'},
        {data: 'start_date', name: 'start_date'},
        {data: 'end_date', name: 'end_date'},
        {data: 'payment_period', name: 'payment_period'},
        {data: 'amount', name: 'amount'},
        {data: 'vehicle_type', name: 'vehicle_type'},
        {data: 'user_name', name: 'user_name'},
        {data: 'phone', name: 'phone'},
        {data: 'email', name: 'email'},
        {data: 'status', name: 'status'},
        {data: 'created_time', name: 'created_time'},
        @if(auth()->user()->can('monthlypayContracts.edit'))
            {data: 'edit', name: 'edit'},
        @endif
        @if(auth()->user()->can('monthlypayContracts.nullify'))
            {data: 'nullify', name: 'nullify'},
        @endif
    ];

    var fieldArr = ['token','phoneNumber','status','vehicleType','userName','paymentPeriod','startDate','endDate'];
    var datatable = createDatatable('datatableList', url, columns, fieldArr, 0);

    $('#monthlypayContractsListSearch').click(function (e) {
        dataTableReload(datatable);
    });

    $('#startDate, #endDate').daterangepicker(datePickerSetting);

    $(document).on('click', 'button[behavior=nullify]', function(event){
        var targetId = $(this).attr('targetid');
        $('#nullifyContractId').val(targetId);
    });

    $('#contractNullifyCheck').click(function (e) {
        $('#closeModal').click();
        var url = "{{ route('monthlypayContracts.nullify') }}";
        var data = {
            id: $('#nullifyContractId').val()
        };

        modalOperationAjax(datatable, url, data, 'closeModal');
    });

  });
</script>
@endsection