@extends("domains.common.layouts.layout")

@section("header")
@vite([
    "resources/js/domains/product/singlePageIntegrationControl.js"
])
<style>
    tbody tr td select {
        width: auto !important;
    }
    div.ts-wrapper div.ts-control input {
        height: auto;
    }
</style>
@endsection

@section("main-content")
<div class="container-fluid">
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <h1>첨삭 토픽 관리</h1>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row">
        <div class="col-xl-12 col-lg-12 order-lg-2 order-xl-1">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('product.correction-topic.list') }}" class="search-form" method="GET">
                        <div class="search-input-wrap">
                            <div class="search-input">
                                <label for="register_start_date">등록일</label>
                                <input type="date" id="register_start_date" name="register_start_date"
                                @if (Request::get("register_start_date"))
                                    value="{{ Request::get("register_start_date") }}"
                                @endif
                                > - <input  type="date" name="register_end_date"
                                @if (Request::get("register_end_date"))
                                    value="{{ Request::get("register_end_date") }}"
                                @endif
                                >
                            </div>
                            <div class="search-input">
                                <label for="activated">전시 구분</label>
                                <select name="activated" id="activated">
                                    <option value="">전체</option>
                                    <option value="0" @selected(Request::get("activated") === "0")>비전시</option>
                                    <option value="1" @selected(Request::get("activated") === "1")>전시</option>
                                </select>
                            </div>
                            <div class="search-input">
                                <label for="correction_pattern_id">패턴 번호</label>
                                <input id="correction_pattern_id" name="correction_pattern_id" type="text" class="long-input" value="{{ Request::get("correction_pattern_id") }}">
                            </div>
                            <div class="search-input">
                                <label for="subject">과목</label>
                                <select name="subject" id="subject">
                                    <option value="">선택</option>
                                    <option value="W" @selected(Request::get("subject") == "W")>W</option>
                                    <option value="S" @selected(Request::get("subject") == "S")>S</option>
                                </select>
                            </div>
                            <div class="search-input">
                                <label for="module_id">모듈 구분</label>
                                <select name="module_id" id="module_id">
                                    <option value="" >전체</option>
                                    @foreach ($modules as $module)
                                        <option value={{ $module->id }} @selected(Request::get("module_id", null) == $module->id)>{{ $module->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="search-input">
                                <label for="type">첨삭 타입</label>
                                <select name="type" id="type">
                                    <option value="">전체</option>
                                    <option value="TASK 1" @selected(Request::get("type") == "TASK 1")>TASK 1</option>
                                    <option value="TASK 2" @selected(Request::get("type") == "TASK 2")>TASK 2</option>
                                    <option value="Part 2&3" @selected(Request::get("type") == "Part 2&3")>Part 2&3</option>
                                </select>
                            </div>
                            <div class="search-input">
                                <label for="correction_chart_type_id">차트 유형</label>
                                <select name="correction_chart_type_id" id="correction_chart_type_id">
                                    <option value="">전체</option>
                                    @foreach ($correctionChartTypes as $correctionChartType)
                                    <option value="{{ $correctionChartType->id }}" @selected(Request::get("correction_chart_type_id") === "1")>{{ $correctionChartType->name }} Chart</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="search-input">
                                <label for="id">토픽 번호</label>
                                <input id="id" name="id" type="text" class="long-input" value="{{ Request::get("id") }}">
                            </div>
                        </div>
                        <button type="submit" class="search-button">조회</button>
                    </form>

                </div> <!-- end card-body-->
            </div> <!-- end card-->
        </div> <!-- end col-->
    </div>
    <!-- end row -->

    <div class="row">
        <div class="col-xl-12 col-lg-12 order-lg-2 order-xl-1">
            <div class="card">
                <div class="card-body">
                    <div class="user-btn-wrap">
                        <div class="pagination-result">
                            <span>총 <strong class="point-color">{{ $correctionTopics->total() }}</strong>건</span>
                        </div>
                        <div class="pagination-helper">
                            <div class="pagination-wrapper">
                                {{ $correctionTopics->links("vendor.pagination.default") }}
                            </div>
                            <select id='paginate-control' class='form-select-sm data-length-select' onchange="copyValue('.data-length-select', 'input[name=paginate]', '.search-form')">
                                <option value="10" @selected(Request::get("paginate") == null || Request::get("paginate") == 10)>10개씩 보기</option>
                                <option value="30" @selected(Request::get("paginate") == 30)>30개씩 보기</option>
                                <option value="50" @selected(Request::get("paginate") == 50)>50개씩 보기</option>
                                <option value="100" @selected(Request::get("paginate") == 100)>100개씩 보기</option>
                            </select>
                            <button type="button" class="button btn-style-2" onclick="excelDownload('.search-form', '{{ route('api.product.correction-topic.excel') }}')">엑셀다운로드</button>
                            <a class="button btn-style-8" onclick="validation('new')">추가</a>
                            <a class="button btn-style-1" onclick="validation('existing')">저장</a>
                        </div>
                    </div>
                    <table class="default-table">
                        <colgroup>
                            <col width="70">
                            <col width="100">
                            <col width="120">
                            <col width="120">
                            <col width="160">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                            <col>
                            <col width="120">
                            <col width="140">
                        </colgroup>
                        <thead>
                            <tr>
                                <th>번호</th>
                                <th>등록일시</th>
                                <th>토픽 번호</th>
                                <th class="editable req">
                                    전시 구분
                                    <div class="info">
                                        <i class="ico-info">i</i>
                                         <div class="tooltip-con">
                                            연결된 패턴이 비전시 중이면,<br>토픽도 선택 값과 상관없이<br>비전시 처리됩니다.
                                        </div>
                                    </div>
                                </th>
                                <th class="editable req">패턴 번호</th>
                                <th>과목</th>
                                <th>모듈</th>
                                <th>첨삭 타입</th>
                                <th class="editable req">내용</th>
                                <th>차트 유형</th>
                                <th class="editable">차트명</th>
                            </tr>
                        </thead>
                        <tbody style="text-align: center">
                            <form class="new-row">
                                <tr>
                                    <td class="table-alert" colspan="3">
                                        <p>
                                            해당 행에 항목을 선택한 후 상단의 추가 버튼을 누르면 패턴이 추가됩니다.
                                        </p>
                                    </td>
                                    <td>
                                        <select name="activated">
                                            <option value="">선택</option>
                                            <option value="0">비전시</option>
                                            <option value="1">전시</option>
                                        </select>
                                    </td>
                                    <td>
                                        <select name="correction_pattern_id" style="min-width: 140px;">
                                            <option value="">선택</option>
                                        </select>
                                    </td>
                                    <td data-name="subject"></td>
                                    <td data-name="module"></td>
                                    <td data-name="type"></td>
                                    <td>
                                        <input type="text" class="w100p" name="content">
                                    </td>
                                    <td data-name="chartType"></td>
                                    <td>
                                        <select name="correction_chart_id" style="min-width: 140px" disabled>
                                            <option value="">선택</option>
                                        </select>
                                    </td>
                                </tr>
                            </form>
                            @foreach ($correctionTopics as $correctionTopic)
                            <form class="existing-row">
                                <input type="hidden" name="id" value="{{ $correctionTopic->id }}">
                                <tr>
                                    <td>{{ $correctionTopic->id }}</td>
                                    <td>
                                        @if (isset($correctionTopic->created_at))
                                        {{ explode(" ", $correctionTopic->created_at)[0] }} <br>
                                        {{ explode(" ", $correctionTopic->created_at)[1] }}
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td>{{ $correctionTopic->id }}</td>
                                    <td>
                                        <select name="activated">
                                            <option value="0" @selected($correctionTopic->activated === 0)>비전시</option>
                                            <option value="1" @selected($correctionTopic->activated === 1)>전시</option>
                                        </select>
                                    </td>
                                    <td>
                                        <select name="correction_pattern_id" style="min-width:140px">
                                            <option value="{{ $correctionTopic->correction_pattern_id }}">{{ "[{$correctionTopic->correction_pattern_id}] {$correctionTopic->correctionPattern->content}" }}</option>
                                        </select>
                                    </td>
                                    <td data-name="subject">{{ $correctionTopic->correctionPattern->subject }}</td>
                                    <td data-name="module">{{ $correctionTopic->correctionPattern->module->name }}</td>
                                    <td data-name="type">{{ $correctionTopic->correctionPattern->type }}</td>
                                    <td>
                                        <input type="text" class="w100p" name="content" value="{{ $correctionTopic->content }}">
                                    </td>
                                    <td data-name="chartType">{{ $correctionTopic->correctionPattern->correctionChartType->name }}</td>
                                    <td>
                                        <select name="correction_chart_id" style="min-width: 140px">
                                            <option value="{{ $correctionTopic->correction_chart_id }}">{{ ($correctionTopic->correctionChart) ? "[{$correctionTopic->correctionChart->id}] {$correctionTopic->correctionChart->name}" : '' }}</option>
                                        </select>
                                    </td>
                                </tr>
                            </form>
                            @endforeach
                        </tbody>
                    </table>
                </div> <!-- end card-body-->
            </div> <!-- end card-->
        </div> <!-- end col-->
    </div>
    <!-- end row -->
</div>
@endsection

@push("script")
<script>
    let patternData = null;
    let chartTypeId = null;
    window.addEventListener("load", () => {
        const patternOnChangeCallback = function(value) {
            const $parent = this.activeOption.closest("tr");
            $parent.querySelector("td[data-name=subject]").innerHTML = patternData.find(item => item.id == value)?.subject ?? "";
            $parent.querySelector("td[data-name=module]").innerHTML = patternData.find(item => item.id == value)?.module.name ?? "";
            $parent.querySelector("td[data-name=type]").innerHTML = patternData.find(item => item.id == value)?.type ?? "";
            $parent.querySelector("td[data-name=chartType]").innerHTML = patternData.find(item => item.id == value)?.correction_chart_type.name ?? "";
            chartTypeId = patternData.find(item => item.id == value)?.correction_chart_type.id;

            $parent.querySelector("select[name=correction_chart_id]").tomselect.setValue(value);
            if (value)
                $parent.querySelector("select[name=correction_chart_id]").tomselect.enable();
            else
                $parent.querySelector("select[name=correction_chart_id]").tomselect.disable();
        };
        const patternOption = getTomSelectAjaxOption({{ Js::from(route('api.product.correction-pattern.by-query')) }}, data => patternData = data, patternOnChangeCallback);
        tomSelectInit("select[name=correction_pattern_id]", patternOption);

        const chartPreProcess = () => {return {correction_chart_type_id: chartTypeId};}
        const chartOption = getTomSelectAjaxOption({{ Js::from(route('api.product.correction-chart.by-query')) }}, data => data, value => value, chartPreProcess);
        tomSelectInit("select[name=correction_chart_id]", chartOption);
    });

    function validation(type) {
        if (type == "new") {
            const form = new FormData(document.querySelector("form.new-row"));
            const bodyData = Object.fromEntries(form.entries());

            let isValid = true;
            if (!bodyData["activated"])
                isValid = false;
            if (!bodyData["correction_pattern_id"])
                isValid = false;
            if (!bodyData["content"])
                isValid = false;

            if (!isValid)
                alertify.alert("알림", "비어있는 항목을 채워주세요.");
            else
                save('form.new-row', {{ Js::from(route('product.correction-topic.set')) }});
        } else if (type= "existing") {
            const $formElems = document.querySelectorAll("form.existing-row");

            let isValid = true;
            $formElems.forEach(item => {
                const form = new FormData(item);
                const bodyData = Object.fromEntries(form.entries());

                if (!bodyData["content"])
                    isValid = false;
            });

            if (!isValid)
                alertify.alert("알림", "내용을 채워주세요.");
            else
                bulkSave('form.existing-row', {{ Js::from(route('product.correction-topic.set')) }});
        }
    }
</script>
@endpush