@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('banner.list') }}">{{ $service == 'ielts' ? "인강" : "어학원" }} 인쿼리 통계</a>
</h1>
<section class="mb-3">
    <main>
        <form action="{{ route('inquiry.static', ['service' => $service]) }}" class="search-form" id="inquiry-form" method="GET">
            <input type="hidden" name="service" value="{{ $service }}" id='service' />
            @csrf

            <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 class="input-group input-group-sm">
                    <label class="input-group-text" for='inflow'>유입경로</label>
                    <select class="form-select" multiple name="inflow" id="inflow">
                        @foreach ( $inflow as $key => $item )
                            <option value="{{ $key }}" @selected(! empty(Request::get("inflow")) && in_array($key, Request::get("inflow")))>{{ $item['name'] }}</option>
                        @endforeach
                    </select>
                </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">
        @for ($i = 0 ; $i < ceil(sizeof(array_keys($dataSets)) / 4) ; $i ++)
            <div class="chart-box">
                <canvas id="chart{{ $i }}"></canvas>
            </div>
        @endfor
        </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>
        @php
            $dayOfWeeks = config("system.day_of_weeks");
            $maxDue = 7;
            $totalPage = floor(sizeof($labels)/ $maxDue) == 0 ? 1 : floor(sizeof($labels)/ $maxDue);
        @endphp
        @for ($i = 0 ; $i < $totalPage  ; $i++)
            @php
                $startIndex = $i  * $maxDue;
                $endIndex = ($i + 1) * $maxDue - 1;

                $endOfDue = isset($labels[$endIndex]) ? $labels[$endIndex] : $labels[(sizeof($labels) - 1)];
            @endphp
            <div class="static-wrap">
                <div class="sub-title">
                    <div>
                        {{ $labels[$startIndex] }} ({{ $dayOfWeeks[date('w', strtotime($labels[$startIndex]))]  }}) ~
                        {{ $endOfDue }} ({{ $dayOfWeeks[date('w', strtotime($endOfDue))]  }})
                    </div>
                    <button class="btn btn-sm btn-warning btn-open" >
                        <i class="bi bi-caret-down-fill"></i>
                    </button>
                </div>
                <div class="static-box" style="display: none">
                    <table class="table table-border table-hover table-static ">
                        <colgroup>
                            <col width="10%">
                            @for ( $j = $startIndex ; $j < $startIndex + $maxDue; $j ++)
                                <col width="9%">
                            @endfor
                        </colgroup>
                        <thead>
                            <tr>
                                <th>유입경로</th>
                                @for ( $j = $startIndex ; $j < $startIndex + $maxDue; $j ++)
                                    <th>{{ isset($labels[$j]) ? $labels[$j] . "(". $dayOfWeeks[date('w', strtotime($labels[$j]))].")" : '-' }}</th>
                                @endfor
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ( $dataSets as $key => $list)
                                <tr>
                                    <td class="sub-header" style="">{{ $inflow[$key]['name'] }}</td>
                                    @for ( $j = $startIndex ; $j < $startIndex + $maxDue; $j ++)
                                        <td class="text-center">{{ isset($labels[$j]) ? ($list[$labels[$j]] == 0 ? "-" :  $list[$labels[$j]])  : '-' }}</td>
                                    @endfor
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        @endfor

    </main>
</section>

@endsection


@push("script")
    <script>
        $(function() {
            const inflowSelector = new MultiSelector("inflow", { isOverall : true });
            $('.btn-open').on("click", function() {
                $(this).closest('.static-wrap').find('.static-box').slideToggle()
                $(this).toggleClass('active')
            })


        })

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


        async function getCharts() {
           const result = await customFetch("{{ route('inquiry.static', ['service' => $service]) }}", {
                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