@section('new_members_trough-table')
    <table class="table table-striped table-hover table-bordered">
        <thead>
        <tr>
            <th>排名</th>
            <th>管道</th>
            <th>加入會員數量</th>
        </tr>
        </thead>
        <tbody>
        <template v-for="(trough, index) in  troughs">
            <tr>
                <td>@{{ index + 1 }}</td>
                <td>@{{ trough.name }}</td>
                <td>@{{ trough.newMembers }}</td>
            </tr>
        </template>
        </tbody>
    </table>
@endsection

@section('new_members_trough-content')
    <div class="card" id="firmService">
        <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 container-fluid show">
            <div class="row">
                <div class="col-2">
                    <label for="basic-url" class="form-label">開始時間</label>
                    <div class="input-group mb-3">
                        <input type="text" class="form-control publish_flatpickr flatpickr-input" v-model="startTime">
                    </div>
                </div>
                <div class="col-2">
                    <label for="basic-url" class="form-label">結束時間</label>
                    <div class="input-group mb-3">
                        <input type="text" class="form-control publish_flatpickr flatpickr-input" v-model="endTime">
                    </div>
                </div>
            </div>

            @yield('new_members_trough-table')
        </div>
    </div>
@endsection

@section('new_members_trough-script')
    <script>
        const fs = new Vue({
            el: '#firmService',
            data: {
                troughs: {}, // 管道列表

                startTime: "{{ $start_date }}",
                endTime: "{{ $end_date }}",
            },
            beforeMount: function() {
                this.getTroughData();
            },
            watch: {
                startTime: {
                    handler: function() {
                        this.getTroughData();
                    },
                },
                endTime: {
                    handler: function() {
                        this.getTroughData();
                    },
                },
            },
            methods: {
                getTroughData: function() {
                    let self = this;

                    $.ajax({
                        type:"get",
                        url: '{{ route("ajax.admin.arg.get.troughData") }}',
                        dataType: 'json',
                        data:{
                            "startTime": self.startTime,
                            "endTime": self.endTime,
                        },
                        success: function(response) {
                            if (response.status !== true) {
                                return '';
                            }

                            self.troughs = response.data;
                        },
                        error: function (error) {
                            console.log(error);
                        }
                    });
                },
            },
        });
    </script>
@endsection