@extends('admin.layouts.contentLayoutMaster')
@include('admin.chart.characteristic')
@include('admin.chart.trough')

@section('title','會員累計管理')

@section('vendor-styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('plugins/flatpickr/flatpickr.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/admin/chart/chart.css') }}">
@endsection

@section('page-styles')
    <style>
        .checkbox {
            margin-left: 10px;
        }

        .search_block {
            margin: 10px 0px 0px 0px;
        }
    </style>
@endsection

@section('content')
    <section>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-content collapse show">
                        <div class="card-body">
                            <div class="row text-center">
                                <div class="col-md-12">
                                    <fieldset class="form-group">
                                        <a href="javascript:void(0)" class="widget widget-hover-effect2">
                                            <div class="widget-extra themed-background-dark">
                                                <h4 class="widget-content-light"><strong>總會員數</strong></h4>
                                            </div>
                                            <div class="widget-extra-full"
                                                 data-toggle="tooltip"
                                                 data-placement="bottom"
                                                 title="">
                                            <span class="h2 animation-expandOpen">
                                                {{ $user_total }}
                                            </span>
                                            </div>
                                        </a>
                                    </fieldset>
                                </div>
                                <div class="col-md-3">
                                    <fieldset class="form-group">
                                        <a href="javascript:void(0)" class="widget widget-hover-effect2">
                                            <div class="widget-extra themed-background-dark">
                                                <h4 class="widget-content-light">
                                                    <strong>
                                                        渠道會員數
                                                    </strong>
                                                </h4>
                                            </div>
                                            <div class="widget-extra-full"
                                                 data-toggle="tooltip"
                                                 data-placement="bottom"
                                                 title="透過渠道篩選後總累積的會員數量">
                                            <span class="h2 animation-expandOpen">
                                                {{ $source_firm_member1 }}
                                            </span>
                                            </div>
                                        </a>
                                    </fieldset>
                                </div>
                                <div class="col-md-3">
                                    <fieldset class="form-group">
                                        <a href="javascript:void(0)" class="widget widget-hover-effect2">
                                            <div class="widget-extra themed-background-dark">
                                                <h4 class="widget-content-light">
                                                    <strong>
                                                        全渠道新會員數
                                                    </strong>
                                                </h4>
                                            </div>
                                            <div class="widget-extra-full"
                                                 data-toggle="tooltip"
                                                 data-placement="bottom"
                                                 title="所有線上線下的新會員">
                                            <span class="h2 animation-expandOpen">
                                                {{ $member_total }}
                                            </span>
                                            </div>
                                        </a>
                                    </fieldset>
                                </div>
                                <div class="col-md-3">
                                    <fieldset class="form-group">
                                        <a href="javascript:void(0)" class="widget widget-hover-effect2">
                                            <div class="widget-extra themed-background-dark">
                                                <h4 class="widget-content-light">
                                                    <strong>
                                                        渠道新會員數
                                                    </strong>
                                                </h4>
                                            </div>
                                            <div class="widget-extra-full"
                                                 data-toggle="tooltip"
                                                 data-placement="bottom"
                                                 title="透過渠道篩選後的新會員">
                                            <span class="h2 animation-expandOpen">
                                                {{ $source_firm_member2 }}
                                            </span>
                                            </div>
                                        </a>
                                    </fieldset>
                                </div>
                                <div class="col-md-3">
                                    <fieldset class="form-group">
                                        <a href="javascript:void(0)" class="widget widget-hover-effect2">
                                            <div class="widget-extra themed-background-dark">
                                                <h4 class="widget-content-light"><strong>消費數</strong></h4>
                                            </div>
                                            <div class="widget-extra-full"
                                                 data-toggle="tooltip"
                                                 data-placement="bottom"
                                                 title="計算當天內會員消費的交易筆數(會員不可重複計算)">
                                            <span class="h2 themed-color-dark animation-expandOpen">
                                                {{ $purchases_count }}
                                            </span>
                                            </div>
                                        </a>
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <form action="">
            <div class="row" id="table-hover-row">
                <div class="col-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="justify-content-start">
                                <div class="col-lg-2 col-md-4 col-sm-5 d-sm-inline-block d-md-inline-block">
                                    <input class="form-control publish_flatpickr flatpickr-input" name="start_date"
                                           placeholder="起" type="text" value="{{  $start_date }}">
                                    @if ($errors->has('publish_start_at'))
                                        @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('publish_start_at') ])
                                    @endif
                                </div>
                                <div class="col-lg-2 col-md-4 col-sm-5 d-sm-inline-block d-md-inline-block">
                                    <input class="form-control publish_flatpickr flatpickr-input" name="end_date"
                                           placeholder="訖" type="text" value="{{  $end_date }}">
                                    @if ($errors->has('publish_end_at'))
                                        @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('publish_end_at') ])
                                    @endif
                                </div>
                                <div class="col-lg-7 col-md-12 col-sm-12 d-md-inline-block" style="margin-top: 10px">
                                    <table class="table table-hover mb-0">
                                        <thead>
                                        @foreach ($firm_services as $item)
                                            <tr>
                                                <div class="checkbox" style="margin:5px">
                                                    <input
                                                        type="checkbox"
                                                        id="checkbox_{{ $item->id }}"
                                                        class="checkbox-input"
                                                        value="{{ $item->id }}"
                                                    >
                                                    <label for="checkbox_{{ $item->id }}">{{ $item->name }}</label>
                                                </div>
                                            </tr>
                                        @endforeach
                                        </thead>
                                    </table>
                                </div>
                                <div class="search_block row">
                                    <div class="col-md-12">
                                        <input type="hidden" name="checkbox_service" value="{{ $checkbox_str }}">
                                        <button type="submit" class="btn btn-primary glow mr-1 mb-1">查詢</button>
                                    </div>
                                </div>
                            </div>

                            <canvas id="myChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        @yield('characteristic-content')
        @yield('new_members_trough-content')
    </section>

@endsection

@section('vendor-scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="{{ asset('plugins/flatpickr/flatpickr.min.js') }}"></script>
    <script src="{{ asset('plugins/vue/vue.js') }}"></script>
@endsection

@section('page-scripts')
    <script src="{{mix('assets/js/admin/chart/form.js')}}"></script>
    <script>
        $(document).ready(function () {
            let checkbox_str = $("input[name='checkbox_service']").val();
            checkbox_str = checkbox_str.split(",");

            checkbox_str.forEach(e => {
                $('#checkbox_' + e).prop('checked', true);
            });
        });

        $(".checkbox").on("click", function () {
            let valuelist = "";

            $('input:checked').each(function () {
                valuelist += $(this).val() + ",";
            });

            if (valuelist.length > 0) {
                valuelist = valuelist.substring(0, valuelist.length - 1);
                $("input[name='checkbox_service']").val(valuelist);
            } else {
                $("input[name='checkbox_service']").val('');
            }
        });

        let labels = {!! $json_date !!};
        let datasets = {!! $json_chart_datas !!};
        Chart.defaults.font.size = parseInt($(window).width() / 60);
        const data = {
            labels: labels,
            datasets: datasets,
        };


        const config = {
            type: 'line',
            data: data,
            options: {
                scales: {
            y: {
                ticks: {
                    stepSize: 1, // 設定刻度步進值為 1，確保顯示整數
                    callback: function(value) {
                        return Number.isInteger(value) ? value : ''; // 格式化為整數顯示
                    }
                },
                beginAtZero: true // 從 0 開始
            }
        }
            }
        };

        const myChart = new Chart(document.getElementById('myChart'), config);
    </script>

    @yield('characteristic-script')
    @yield('new_members_trough-script')
@endsection