@extends('layouts.main')

@section('pageTitle', '月租群組名單 - 月租群組成員')

@section('content')
<div class="container-fluid">
    <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>
                                @if(auth()->user()->can('monthlyGroupMember.destroyBatch'))
                                    <th class="unsortable"><input type="checkbox" id="checkAll"></th>
                                @endif
                                <th>狀態</th>
                                <th>車號</th>
                                <th>起始日期</th>
                                <th>到期日期</th>
                                <th>姓名</th>
                                <th>連絡電話</th>
                                @if(auth()->user()->can('monthlyGroupMember.edit'))
                                    <th class="unsortable">修改</th>
                                @endif
                                @if(auth()->user()->can('monthlyGroupMember.destroy'))
                                    <th class="unsortable">刪除</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <input type="hidden" id="monthlyGroupId" value="{{ $monthlyGroupId }}">
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>
    @can('monthlyGroupMember.dynamicCreate')
        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#monthlyGroupMemberCreate" id="add">新增成員</button>
    @endcan
    @can('monthlyGroupMember.destroyBatch')
        <span class="btn btn-danger" id="monthlyGroupLishDestroyBatch">批次刪除</span>
    @endcan
    <a class="btn btn-warning" href="{{ route('monthlyGroupList.index') }}">返回</a>
    <!-- /.row -->
</div>
<div class="modal fade" id="monthlyGroupMemberCreate">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">新增月租成員</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="text-align:center;">
                <p>請輸入月租車牌<br>月租車牌請先在月租名單完成新增</p>
                <input type="text" class="form-control" placeholder="車牌號碼" id="token">
                <span id="modalErrorMsg" style="color:red;"></span>
            </div>
            <div class="modal-footer justify-content-between" style="text-align:center;">
                <button type="button" class="btn btn-danger" id="addNewMember">確定</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal" id="modalCancel">返回</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
@endsection

@section('js')
<script>
$(document).ready(function () {
    var url = "{{ route('monthlyGroupMember.datatableList') }}";
    var columns = [
        @if(auth()->user()->can('monthlyGroupMember.destroyBatch'))
            {data: 'destroyBatch', name: 'destroyBatch'},
        @endif
        {data: 'is_enable', name: 'is_enable'},
        {data: 'transaction_token', name: 'transaction_token'},
        {data: 'start_date', name: 'start_date'},
        {data: 'end_date', name: 'end_date'},
        {data: 'name', name: 'name'},
        {data: 'phone', name: 'phone'},
        @if(auth()->user()->can('monthlyGroupMember.edit'))
            {data: 'edit', name: 'edit'},
        @endif
        @if(auth()->user()->can('monthlyGroupMember.destroy'))
            {data: 'delete', name: 'delete'},
        @endif
    ];

    var fieldArr = ['monthlyGroupId'];
    var datatable = createDatatable('datatableList', url, columns, fieldArr);

    $(document).on('click', 'button[behavior=delete]', function(event){
        var deleteUrl = '{{ route("monthlyGroupMember.destroy", ":id") }}';
        datatableDeleteAjax(datatable, deleteUrl.replace(':id', $(this).attr('targetId')));
    });

    $('#monthlyGroupLishDestroyBatch').click(function (e) {
        datatableDeleteBatchAjax(datatable, "{{ route('monthlyGroupMember.destroyBatch') }}");
    });

    $('#addNewMember').click(function (e) {
        var token = $('input#token').val();
        if (token == '') {
            alert('請輸入車牌');
            return false;
        }

        var data = {
            token: token,
            monthlyGroupId: $('#monthlyGroupId').val()
        };

        modalAjax(datatable, "{{ route('monthlyGroupMember.dynamicCreate') }}", data, 'monthlyGroupMemberCreate');
    });

    $('#add').click(function (e) {
        modalClear();
    });

    function modalClear() {
        $('input#token').val('');
        $('span#modalErrorMsg').html('');
    }

  });
</script>
@endsection