use App\Models\Activity;
@extends('admin.layouts.contentLayoutMaster')

@section('title','對帳資料')

@section('vendor-styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('plugins/vue-good-table/vue-good-table.css') }}">
@endsection

@section('page-styles')
    <style>
        .good-table-selection-info {
            font-size: 18px;
        }

        .vgt-checkbox-col {
            cursor: pointer;
        }

        .dropdown-toggle::after {
            display: none;
        }
    </style>
@endsection

@section('content')
    <div id="app">
        <section>
            <form action="">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">搜尋</h4>
                                <a class="heading-elements-toggle"><i class="bx bx-dots-vertical font-medium-3"></i></a>
                                <div class="heading-elements">
                                    <ul class="list-inline mb-0">
                                        <li>
                                            <a data-action="collapse"><i class="bx bx-chevron-down"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card-content collapse show">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <h6>團媽</h6>
                                            <fieldset class="form-group">
                                                <select
                                                        class="form-control "
                                                        id="administrator_id"
                                                        name="administrator_id"
                                                        v-model="search.administrator_id">
                                                    <option value=""></option>
                                                    <option v-for="(item, index) in config.administrators"
                                                            :value="index">@{{ item }}
                                                    </option>
                                                </select>
                                            </fieldset>
                                        </div>
                                        <div class="col-md-3">
                                            <h6>活動</h6>
                                            <fieldset class="form-group">
                                                <select
                                                        class="form-control "
                                                        id="activity_id"
                                                        name="activity_id"
                                                        v-model="search.activity_id">
                                                    <option value=""></option>
                                                    <option v-for="(item, index) in config.activities" :value="index">
                                                        @{{ item }}
                                                    </option>
                                                </select>
                                            </fieldset>
                                        </div>
                                        <div class="col-md-3">
                                            <fieldset class="form-group">
                                                <label for="keyword">關鍵字</label>
                                                <input
                                                        class="form-control"
                                                        id="keyword"
                                                        name="keyword"
                                                        placeholder="活動名稱, 團媽名稱"
                                                        title="活動名稱, 團媽名稱"
                                                        type="text"
                                                        v-model="search.keyword">
                                            </fieldset>
                                        </div>

                                        <div class="col-md-3">
                                            <h6>開團時間</h6>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <input
                                                            class="form-control flatpickr2"
                                                            id="publish_start_at_start"
                                                            name="publish_start_at_start"
                                                            placeholder="起"
                                                            type="text"
                                                            v-model="search.publish_start_at_start">
                                                </div>
                                                <div class="col-md-6">
                                                    <input
                                                            class="form-control flatpickr2"
                                                            id="publish_start_at_end"
                                                            name="publish_start_at_end"
                                                            placeholder="迄"
                                                            type="text"
                                                            v-model="search.publish_start_at_end">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-content collapse show">
                                <div class="card-footer">
                                    <div class="d-flex justify-content-end">
                                        <div class="col-md-6 d-flex justify-content-end">
                                            <button class="btn btn-primary glow mr-1 mb-1" type="button"
                                                    @click="getList">搜尋
                                            </button>
                                            <button class="btn btn-light glow mr-1 mb-1" type="reset"
                                                    @click="clearSearch">清空
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </section>
        <section>
            <div class="row" id="table-hover-row">
                <div class="col-12">


                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h4 class="card-title">列表</h4>
                        </div>
                        <div class="card-content">
                            <div class="card-body">

                                @can('對帳管理-團媽對帳-編輯')
                                    <div class="row align-middle">
                                        <div class="col-md-8 d-flex">
                                            <div class="col-md-3">
                                                <fieldset class="form-group">
                                                    <label for="action_reconciliation_status">對帳狀態</label>
                                                    <select
                                                            class="form-control "
                                                            id="action_reconciliation_status"
                                                            name="action_reconciliation_status"
                                                            v-model="actions.reconciliation_status">
                                                        <option value=""></option>
                                                        <option v-for="(item, index) in config.allReconciliationStatus" :value="index">
                                                            @{{ item }}
                                                        </option>
                                                    </select>
                                                </fieldset>
                                            </div>
                                            <div class="col-md-3">
                                                <button type="button"
                                                        class="btn btn-primary glow mr-1"
                                                        style="margin-top:25px;"
                                                        @click="action">
                                                    確認
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                @endcan

                                <vue-good-table
                                        ref="commissions-good-table"
                                        :columns="goodTableHeaderColumns"
                                        :rows="goodTableRows"
                                        :pagination-options="{
                                                    enabled: true,
                                                    perPage: 50,
                                                    perPageDropdown: [10, 30, 50],
                                                    dropdownAllowAll: false,
                                                    mode: 'records'
                                        }"
                                        :select-options="{
                                            enabled: true,
                                            selectOnCheckboxOnly: true, // only select when checkbox is clicked instead of the row
                                            selectionInfoClass: 'good-table-selection-info',
                                            selectionText: '列，已選取',
                                            clearSelectionText: '清除',
                                            selectAllByGroup: true,
                                        }"
                                        :line-numbers="true">
                                    <template slot="table-row" slot-scope="props">


                                        <span v-if="props.column.field == 'actionsHtml'"
                                              class="d-flex justify-content-center">
                                            <a :href="props.row.other.showUrl" title="查看" class="mr-1">
                                                <i class="badge-circle badge-circle-light-secondary bx bx-detail font-medium-1" title="查看"></i>
                                            </a>
                                        </span>
                                        <span v-else-if="props.column.field == 'mommyName'"
                                              class="d-flex justify-content-center">
                                            <a href="javascript:;" @click="showMommyInfo(props.row.other.mommyProfile)">
                                                @{{ props.row.mommyName }}
                                            </a>
                                        </span>
                                    </template>
                                </vue-good-table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

@endsection

@section('vendor-scripts')
    <script src="{{ asset('plugins/vue-good-table/vue-good-table.js') }}"></script>
@endsection

@section('page-scripts')
    <script>
        const api = {
            'index': "{{ route('ajax.admin.commission.index') }}",
            'action': "{{ route('ajax.admin.commission.action') }}",
        }
        const administrators = {!! app('json')->encode($administrators) !!};
        const activities = {!! app('json')->encode($activities) !!};
        const allReconciliationStatus = {!! app('json')->encode($allReconciliationStatus) !!};

    </script>
    <script src="{{ mix('assets/js/admin/commission/index.js') }}"></script>
@endsection