@extends("common.layout")


@section("header")
{!! resource('js/components/multiSelect.js') !!}
{!! resource('css/components/multiSelect.css') !!}

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
@endsection

@section("content")

<h1>
    <a href="{{ route('static.user') }}">회원통계</a>
</h1>
<section class="mb-3">
    <main>
        <form action="{{ route('static.user') }}" class="search-form" id="inquiry-form" method="GET">
            <div class="search-input-wrap">
                <div class="input-group input-group-sm">
                    <label class="input-group-text" for='display_at'>기간</label>
                    <input class="form-control form-control-sm" type="date" name="started_at" id='started_at' value="{{ Request::get("started_at", $filters['started_at']) ?: '' }}">
                    <input class="form-control form-control-sm" type="date" name="ended_at" id='ended_at' value="{{ Request::get("ended_at", $filters['ended_at']) ?: '' }}">
                </div>
            </div>

            <button type="submit" class="btn btn-sm btn-outline-dark search-button"><i class="bi bi-search"></i> 조회</button>
        </form>
    </main>
</section>

{{-- <section>
    <header>차트</header>
    <main>
        <div class="chart-wrap">
            <div class="chart-box"></div>
        </div>
    </main>
</section> --}}
<section class="mt-3">
    <header>
        <h6>표</h6>
        {{-- <button onclick="excelDownload('.search-form', '{{ route('api.inquiry.excel.static') }}')" class="btn btn-success" type="button">
            <i class="bi bi-file-earmark-excel-fill"></i>
            엑셀다운로드
        </button> --}}
    </header>
    <main>

        <div class="col-6">
            <table class="table table-border table-hover">
                <thead>
                    <tr>
                        <th>날짜</th>
                        <th>이메일</th>
                        <th>네이버</th>
                        <th>카카오</th>
                        <th>구글</th>
                        <th>총가입자수</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $fields = ['email', 'google', 'naver', 'kakao' ];
                        $typeTotal = [];
                        $total = 0;
                    @endphp
                    @foreach ( $data as $date => $item )
                        @php
                            $dayTotal = 0;
                        @endphp
                        <tr>
                            <th>{{ $date }}</th>
                            @foreach ( $fields as $field )
                                @php
                                    $count = isset($item[$field]) ? $item[$field]  : 0;
                                    $typeTotal[$field] = isset($typeTotal[$field]) ? $typeTotal[$field] + $count : $count;
                                    $dayTotal += $count;
                                @endphp
                                <td>{{ $count }}</td>
                            @endforeach
                            <td>{{ number_format($dayTotal) }}</td>
                        </tr>
                    @endforeach
                </tbody>
                <tfoot>
                    <tr>
                        <th>총</th>
                        @foreach ( $fields as $field )
                            @php
                                $count = isset($typeTotal[$field]) ? $typeTotal[$field]  : 0;
                                $total += $count;
                            @endphp
                            <td>{{ number_format($count) }}</td>
                        @endforeach
                        <td>{{ number_format($total) }}</td>
                    </tr>
                </tfoot>

            </table>
        </div>
    </main>
</section>

@endsection


@push("script")
    <script>
        $(function() {



        })

        // $(async function() {
        //     await getCharts();
        // })


        // async function getCharts() {
        //    const result = await customFetch("", {
        //         method: "post",
        //         body: new FormData(document.getElementById('inquiry-form'))
        //     });

        //     if ( result.status ) {
        //         const charts = result.data;
        //         $.each(charts , function(index) {
        //             initChart(charts[index], index);
        //         })
        //     }
        // }

        // Chart.register(ChartDataLabels);
        // function initChart(data, index) {
        //     const ctx = document.getElementById("chart" + index);
        //     const chart = new Chart(ctx, {
        //         type: 'line',
        //         data: data,
        //         options: {
        //             responsive: true,
        //             plugins: {
        //                 legend: {
        //                     display: true,
        //                     position: 'bottom', // 2. 범주를 차트 아래로 이동
        //                     labels: {
        //                         padding: 30 // 2. 범주 위아래 여백 추가
        //                     }
        //                 }, datalabels: {
        //                     align: 'top',
        //                     anchor: 'end',
        //                     color: 'rgba(64, 64, 78, 1)',
        //                     font: {
        //                         weight: '400',
        //                         size: 12
        //                     },
        //                     formatter: (value) => value // 값 그대로 출력
        //                 }, tooltip: {
        //                     enabled: true,
        //                     mode: 'index',
        //                     intersect: false,
        //                     callbacks: {
        //                         label: function(tooltipItem) {
        //                             return `${tooltipItem.dataset.label}: ${tooltipItem.raw}`; // 툴팁 포맷 지정
        //                         }
        //                     }
        //                 }
        //             },scales: {
        //                 y: {
        //                     beginAtZero: true,
        //                     ticks: {
        //                         display: true,
        //                         stepSize: 1,
        //                         callback: function(value) {
        //                             return Number.isInteger(value) ? value : value.toFixed(1);
        //                         }
        //                     },
        //                     afterDataLimits: (axis) => {
        //                         axis.max += 1;
        //                     }
        //                 },
        //                 x: {
        //                     ticks: {
        //                         padding: 10
        //                     }
        //                 }
        //             }
        //         }
        //     });
        // }

    </script>



@endpush