@extends("common.layout")

@php
    $page_title = $pageServiceName . ' 강좌 ' . ($course?->id ? '상세보기 ('.$course->id.')' : '등록');
@endphp

@section('page-title', $page_title)

@section("header")
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
{!! resource('js/common/tomSelectAllCheck.js') !!}

{!! resource('css/form.css') !!}
{!! resource('js/form.js') !!}

{!! setResources([ 'toast-calendar']) !!}
{!! resource("js/schedule/schedule.js") !!}
@endsection

@section("content")

<form id="course-form" action="{{ $course?->id ? route('product.course.set', ['id'=>$course->id]) : route('product.course.set') }}" method="post" class="default" enctype="multipart/form-data">
    @csrf
    <input type="hidden" name="service" value="{{ $service }}">

    <h1>
        <div>
            <a href="{{ route('product.course.list', $service) }}"><i class="bi bi-arrow-left-circle"></i></a>
            {{ $page_title }}
        </div>

        <div class="fixed-btns btn-group">
            @if ($course?->id)
                @if ($User->is->root)
                <button class="btn btn-danger" type="button" onclick="courseDelete({{ $course->id }}, '{{ $service }}')">삭제</button>
                @endif
                <button class="btn btn-success" type="button" onclick="copyCourse()">복제</button>
            @endif
            <button type="submit" class="btn btn-primary">저장</button>
            <button class="btn btn-warning" type="button" onclick="toggleOptions(this)"><i class="bi bi-chevron-up"></i></button>
        </div>
    </h1>

    @if ($service == 'academy')
    <div class="layout-2-cols">
    @endif

        <section>
            <header>
                @if ($service == 'ielts')
                강좌 정보
                @else
                강좌 구분
                @endif
                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-course-{{ $course?->id }}-1"><i class="bi bi-chevron-up"></i></button>
            </header>

            <main class="split-form">
                {{--강좌 번호--}}
                @if ($course?->id)
                <div class="form-group">
                    <label>강좌 번호</label>
                    <div>
                        <input type="hidden" name="course_id" id="course_id" value="{{ $course?->id }}" />
                        {{ $course?->id }}
                    </div>
                </div>
                @endif

                {{--활성 구분--}}
                <div class="form-group">
                    <label class="required">활성 구분</label>

                    <div class="right-col">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" id="activated" name="activated" value="1" @checked(!$course || $course->activated == 1 || old('activated') == 1)>
                        </div>
                    </div>
                </div>

                {{--모듈--}}
                <div class="form-group">
                    <label class="required">모듈</label>
                    <div class="right-col">
                        @php
                            if (isset($course->module) && ! empty($course->module)) {
                                $modules = explode('|', $course->module);
                            } else {
                                $modules = old('module') ? old('module') : [];

                            }
                        @endphp
                        @foreach (config('system.modules') as $key => $module)
                        <div class="form-check">
                            <input type="checkbox" id="moduleId{{ $key }}" name="module[]" class="form-check-input" value="{{ $module }}" @checked(in_array($module, $modules))>
                            <label class="form-check-label" for="moduleId{{ $key }}">{{ $module }}</label>
                        </div>
                        @endforeach
                    </div>
                </div>

                {{--강좌명--}}
                @if ($service == 'ielts')
                <div class="form-group">
                    <label class="required">강좌명</label>
                    <div class="right-col">
                        <input type="text" class="form-control" id="name" name="name" value="{{ $course?->name ? $course?->name : old('name')}}">
                    </div>
                </div>
                @endif

                {{--썸네일--}}
                @if ($service == 'academy')
                <div class="form-group">
                    <label>썸네일</label>
                    <div class="right-col flex-column align-items-start">
                        <button type="button" class="btn btn-sm btn-info" onclick="$('#thumbnail').click();" id="thumbnail-find-btn">이미지 찾기</button>
                        <input class="d-none" type="file" id="thumbnail" name="thumbnail" accept="image/*" onchange="changeImage(event)"/>

                        <div id="thumbnail-wrapper">
                            @if ($course?->s3_key)
                                <div class="thumbnail-img-wrapper">
                                    <button class="btn-delete" type="button" onclick="deleteImage({{ $course->id }})"><i class="bi bi-x-circle-fill"></i></button>
                                    <img name="thumbnail" data-id="{{ $course->id }}" alt="" src="{{ app(\S3Helper::class)->getPublicUrl($course->s3_key) }}">
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
                @endif
            </main>
        </section>

    @if ($service == 'academy')
        <section>
            <header>
                기본 정보
                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-course-{{ $course?->id }}-info"><i class="bi bi-chevron-up"></i></button>
            </header>

            <main class="split-form">
                {{--강좌명--}}
                <div class="form-group">
                    <label class="required">강좌명</label>
                    <div class="right-col">
                        <input type="text" class="form-control" id="name" name="name" value="{{ $course?->name }}">
                    </div>
                </div>

                {{--간략 소개--}}
                <div class="form-group">
                    <label>간략 소개</label>
                    <div class="right-col">
                        <input type="text" class="form-control" id="description" name="description" value="{{ $course?->description }}">
                    </div>
                </div>

                {{--강좌 대상--}}
                <div class="form-group">
                    <label>강좌 대상</label>
                    <div class="right-col">
                        <textarea class="form-control" name="target" id="target" cols="30" rows="4">{{ $course?->target }}</textarea>
                    </div>
                </div>

                {{--강좌 가이드--}}
                <div class="form-group">
                    <label>강좌 가이드</label>
                    <div class="right-col">
                        <textarea class="form-control" name="guide" id="guide" cols="30" rows="8">{{ $course?->guide }}</textarea>
                    </div>
                </div>
            </main>
        </section>

        {{--과목별 강사 및 커리큘럼--}}
        <section>
            <header>
                과목별 강사 및 커리큘럼
                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-course-{{ $course?->id }}-teachers"><i class="bi bi-chevron-up"></i></button>
            </header>

            <main>
                <div class="course-teacher-wrapper">
                    @php
                        $courseTeachers = $course ? json_decode($course?->teachers, true) : [];
                    @endphp

                    @foreach ($subjects as $subjectKey => $subjectName)
                    <div>
                        <div class="input-group input-group-sm mb-2">
                            <span class="input-group-text fw-bold text-primary">{{ $subjectName }}</span>

                            <select name="teacher_ids[{{ $subjectKey }}][]" multiple>
                                <option value="">강사선택</option>
                                @foreach ($teachers as $teacher)
                                    <option value="{{ $teacher->id }}" @selected(isset($courseTeachers[$subjectKey]) && in_array($teacher->id, $courseTeachers[$subjectKey]['teachers']))>
                                        {{ $teacher->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <textarea class="form-control" rows="3" name="content[{{ $subjectKey }}]" placeholder="한 줄에 공백 포함 40자, 최대 3줄까지 입력해 주세요.">{{ old("content[$subjectKey]", $courseTeachers[$subjectKey]['content'] ?? '') }}</textarea>
                    </div>
                    @endforeach
                </div>
            </main>
        </section>
    </div>
    @endif

    @if ($course )
    <div class="layout-2-cols mt-3">
        {{-- @if ($service == "ielts" ) --}}
        {{--구성 강의--}}
        <section>
            <header>
                <div>
                    구성 강의 <span class="text-info fw-bold">{{ $course ? count($course->lectures) : '0' }}</span>건
                    <span class="ms-4">총 영상 길이 <span class="text-info fw-bold">{{ gmdate('G:i:s', $course?->getLectureTotalDuration()) }}</span></span>
                </div>
                <div>
                    <button type="button" class="btn btn-sm btn-info" onclick="popupSelector('course-lecture', {
                        service: '{{ $service }}', targetId: {{ $course->id }}, gridType: 'course-lecture',
                        removeIds: $('input[name^=lectures]').map(function() { return $(this).val(); }).get()
                        })">강의추가</button>

                    <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-course-{{ $course?->id }}-lecture"><i class="bi bi-chevron-up"></i></button>
                </div>
            </header>

            <main>
                <table class="table table-striped table-hover table-sm">
                    <colgroup>
                        <col width="30">
                        <col width="30">
                    </colgroup>
                    <thead>
                        <tr class="text-center">
                            <th data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="드래그로 정렬순서 조절"><i class="bi bi-info-circle"></i></th>
                            <th>번호</th>
                            <th>강의명</th>
                            <th>모듈</th>
                            <th>과목</th>
                            <th>강사</th>
                            <th>특강</th>
                            <th>영상 길이</th>
                            <th>등록일</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody class="sortable" id="course-lecture-grid{{ $course?->id }}">
                        @php
                            $subjects = config('system.subjects');
                        @endphp
                        @foreach ($course->lectures as $lecture)
                        <tr class="text-center">
                            <td class="handle"><i class="bi bi-list"></i></td>
                            <td>{{ $lecture->id }} <input type="hidden" name="lectures[]" value="{{ $lecture->id }}"></td>
                            <td class="text-start">
                                <a href="{{ route('product.lecture.detail', ['service' => $lecture->service, 'id' => $lecture->video?->id]) }}">
                                {{ $lecture->name }}
                                </a>
                            </td>
                            <td>{{ $lecture->module }}</td>
                            <td>{{ isset($subjects[$lecture->video?->subject]) ? $subjects[$lecture->video?->subject]  : "" }}</td>
                            <td>{{ $lecture->video?->teacher?->name }}</td>
                            <td>{{ $lecture->special_type ?? "-" }}</td>
                            <td>{{ $lecture->video ? gmdate('G:i:s', $lecture->video?->duration) : "00:00:00" }}</td>
                            <td>{{ explode(" ", $lecture->created_at)[0] }}</td>
                            <td>
                                <a href="javascript:void(0);" class="delete px-2" onclick="$(this).closest('tr').remove()"><i class="bi bi-trash"></i></a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </main>
        </section>
        {{-- @endif --}}

        {{--구성 교재--}}
        <section>
            <header>
                <div>
                    구성 교재 <span class="text-info fw-bold">{{ $course ? count($course->textbooks):0 }}</span>건
                </div>
                <div>
                    <button type="button" class="btn btn-sm btn-info" onclick="popupSelector('course-textbook', {
                        service: '{{ $service }}', targetId: {{ $course->id }}, gridType: 'course-textbook',
                        removeIds: $('input[name^=textbooks]').map(function() { return $(this).val(); }).get()
                        })">교재추가</button>

                    <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-course-{{ $course?->id }}-textbook"><i class="bi bi-chevron-up"></i></button>
                </div>
            </header>

            <main>
                <table class="table table-striped table-hover table-sm">
                    <colgroup>
                        <col width="30">
                        <col width="30">
                    </colgroup>
                    <thead>
                        <tr class="text-center">
                            <th data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="드래그로 정렬순서 조절"><i class="bi bi-info-circle"></i></th>
                            <th>번호</th>
                            <th class="text-start">교재명</th>
                            <th>모듈</th>
                            <th class="text-start">과목</th>
                            <th>판매 구분</th>
                            <th>교재난이도</th>
                            <th>오디오 파일</th>
                            <th class="price">판매가</th>
                            <th>등록일</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody class="sortable" id="course-textbook-grid{{ $course?->id }}">
                        @foreach ($course->textbooks as $textbook)
                        <tr class="text-center">
                            <td class="handle"><i class="bi bi-list"></i></td>
                            <td>{{ $textbook->id }} <input type="hidden" name="textbooks[]" value="{{ $textbook->id }}"></td>
                            <td class="text-start">{{ $textbook->name }}</td>
                            <td>{{ $textbook->module }}</td>
                            <td class="text-start">{{ $textbook->subjects }}</td>
                            <td>{{ $textbook->sales_type }}</td>
                            <td>{{ $textbook->level }}</td>
                            <td>{{ last(explode('/', $textbook->audio_s3_key ?? '')) ?? '-' }}</td>
                            <td class="number price">{{ number_format($textbook->sales_price) }}</td>
                            <td>{{ explode(" ", $textbook->created_at)[0] }}</td>
                            <td>
                                <a href="javascript:void(0);" class="delete px-2" onclick="$(this).closest('tr').remove()"><i class="bi bi-trash"></i></a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </main>
        </section>

        <section>
            <header>
                <div>
                    포함 상품
                </div>
                <div>
                    <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-course-{{ $course?->id }}-products"><i class="bi bi-chevron-up"></i></button>
                </div>
            </header>

            <main>
                <table class="table table-sm table-striped table-hover">
                    <colgroup>
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                    </colgroup>
                    <thead>
                        <tr>
                            <th>번호</th>
                            <th>등록 일시</th>
                            <th>상품 구분</th>
                            <th>모듈</th>
                            <th>상품명</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($course->getIncludedProducts() as $product)
                        <tr>
                            <td>{{ $product->id }}</td>
                            <td>{{ explode(" ", $product->created_at)[0] }}</td>
                            <td>{{ $product->sales_type }}</td>
                            <td>{{ $product->module }}</td>
                            <td class="text-left">
                                <a href="{{ route('product.detail', ['service' => $product->service, 'id' => $product->id]) }}">{{ $product->name }}</a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </main>
        </section>

        <section>
            <header>
                <div>
                    변경 로그
                </div>
                <div>
                    <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-course-{{ $course?->id }}-log"><i class="bi bi-chevron-up"></i></button>
                </div>
            </header>

            <main>
                <table class="table table-sm table-striped table-hover">
                    <thead>
                        <tr class="text-center">
                            <th>번호</th>
                            <th>일시</th>
                            <th>활성 구분</th>
                            <th>썸네일</th>
                            <th class="text-start">강좌명</th>
                            <th>강좌 일정</th>
                            <th>과목별 강사</th>
                            <th>담당자</th>
                            <th>자세히 보기</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($course->getParsingLogs() as $productLog)
                        <tr class="text-center">
                            <td>{{ $productLog->id }}</td>
                            <td>
                                @if (isset($productLog->created_at))
                                    {{ $productLog->created_at }}
                                @else
                                    -
                                @endif
                            </td>
                            <td>
                                @if ($productLog->activated == 1)
                                    활성
                                @else
                                    비활성
                                @endif
                            </td>
                            <td>{{ last(explode('/', $productLog?->s3_key ?? '')) ?? '-' }}</td>
                            <td class="text-start">{{ $productLog->name }}</td>
                            <td>변경/삭제</td>
                            <td>
                                @forelse ($productLog?->courseTeachers ?? [] as $courseTeacher)
                                {{ $courseTeacher->subject->name }} - {{ $courseTeacher->user->name }}<br>
                                @empty
                                -
                                @endforelse
                            </td>
                            <td>{{ $productLog->created_by }}</td>
                            <td>
                                <x-log id="{{ $productLog->row_number }}" :log="$productLog" />
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </main>
        </section>
    </div>
    @endif
</form>
@endsection

@push("script")
<script>

    function changeImage(e) {
        let file = e.target.files[0];

        // 새로운 DataTransfer 객체 생성
        const dataTransfer = new DataTransfer();

        // 파일을 DataTransfer에 추가
        dataTransfer.items.add(file);

        // 이미지를 추가하는 함수 호출
        addImageElement(file);

        // Input의 파일 목록을 새롭게 설정
        e.target.files = dataTransfer.files;
    }

    function addImageElement(file) {
        const $thumbnailDiv = $("<div>").addClass("thumbnail-img-wrapper");

        const $deleteBtn = $("<button>")
            .addClass("btn-delete")
            .attr("type", "button")
            .html('<i class="bi bi-x-circle-fill"></i>')
            .on("click", deleteImage);

        const imageSource = URL.createObjectURL(file);
        const $thumbnailImg = $("<img>")
            .attr("src", imageSource)
            .attr("name", "thumbnail")
            .data("file", file);


        // 요소들을 썸네일 래퍼에 추가
        $thumbnailDiv.append($deleteBtn, $thumbnailImg);

        const $parent = $("#thumbnail-wrapper");
        $parent.html($thumbnailDiv);

        URL.revokeObjectURL(file);
    }

    function deleteImage(courseId) {
        if (typeof courseId === 'number') {
            const $image = $('img[data-id="'+courseId+'"]');
            const targetUrl = '/api/products/courses/delete-thumbnail/'+courseId;

            $.ajax({
                type: "DELETE",
                url: targetUrl,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // CSRF 토큰 추가
                },
                beforeSend: function() {
                    $("#loading-icon").show();
                },
                success: function(response) {
                    //location.reload();
                    $("#loading-icon").hide();
                    $image.closest('.thumbnail-img-wrapper').remove();
                },
                error: function(xhr, status, error) {
                    $("#loading-icon").hide();
                    console.error("Error deleting image:", error);
                }
            });
        } else {
            $(courseId.target).parent().closest('.thumbnail-img-wrapper').remove();
        }
    }

    function copyCourse()
    {
        if (confirm("썸네일을 제외한 모든 내용이 복제됩니다. 진행하시겠습니까?")) {
            $('#course-form').append('<input type="hidden" name="copy" value="1">');
            var currentName = $('#name').val();
            var newName = '[복제] '+currentName;
            $('#name').val(newName);
            $('#course-form').submit();
        }
    }

    function courseDelete(course_id, service) {
        if (confirm('정말 삭제하시겠습니까?')) {
            $.ajax({
                type: "DELETE",
                url: '/api/products/courses/'+course_id,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // CSRF 토큰 추가
                },
                beforeSend: function() {
                    $("#loading-icon").show();
                },
                success: function(response) {
                    $("#loading-icon").hide();
                    location.href = '/products/courses/list/'+service;
                },
                error: function(xhr, status, error) {
                    $("#loading-icon").hide();
                    console.error("Error deleting course:", error);
                }
            });
        }
    }

    function validateForm()
    {
        var errors = [];

        validateInput('input[name^="module"]', "모듈을 선택하세요.", errors);
        validateInput('input[name^="name"]', "강좌명을 입력하세요.", errors);

        @if ($service == 'academy')
        var hasValidInput = false;

        $('select[name^="teacher_ids"]').each(function () {
            var teacherElement = $(this);
            var subjectKey = teacherElement.attr('name').match(/\[([^\]]+)\]/)[1]; // Extract subject key
            var contentElement = $('textarea[name="content[' + subjectKey + ']"]');

            var teacherSelected = teacherElement.val() !== "";
            var contentEntered = contentElement.val().trim() !== "";

            if (teacherSelected && contentEntered) {
                hasValidInput = true; // If any teacher is selected or content entered, form is valid
                return false; // Break out of the loop
            }
        });

        if (!hasValidInput) {
            errors.push({
                message: '최소 하나 이상의 강사 선택 및 커리큘럼을 입력하세요.',
                element: $('select[name^="teacher_ids"]').first()
            });
        }
        @endif

        $('.tooltip').remove();

        if (errors.length > 0) {
            generateErrors(errors, 1);

            if (errors[0].element) {
                const $element = $(errors[0].element);

                if ($element.length > 0) {
                    $('html, body').animate({
                        scrollTop: $element.offset().top - 100
                    }, 500);

                    $element.focus();
                }
            }

            return false;
        }

        return true;
    }

    $(document).ready(function(){
        @if ($service == 'academy')
        $("select[name^='teacher_ids']").each(function () {
            new TomSelect(this, {
                plugins: {
                    "checkbox_options": {},
                    "input_autogrow": {},
                    'dropdown_header': {
                        title: '전체 선택',
                        html: tomSelectAllCheckRender,
                    },
                },
            });
        });
        @endif

        // switch value = 0 일때, 해당 데이터도 전송하기 위함
        $('#course-form').submit(function(e){
            e.preventDefault();

            if (!validateForm()) return;

            // $("#loading-icon").show();

            $(this).find('input[role="switch"]').each( function () {
                var checkbox = $(this);
                if( checkbox.is(':checked')) {
                    checkbox.attr('value','1');
                } else {
                    checkbox.after().append(checkbox.clone().attr({type:'hidden', value:0}));
                    checkbox.prop('disabled', true);
                }
            });

            // 폼 제출
            this.submit();
        });

        $(".sortable").sortable({
            handle: ".handle",
            axis: "y",
            placeholder: "ui-state-highlight",
            helper: function(e, ui) {
                ui.children().each(function() {
                    $(this).width($(this).width());
                });
                return ui;
            }
        });
    });

    @if ($course && $service == 'academy')
        $(async function() {
            setPageType("course-detail");
            await calendarInit()
        })
    @endif

</script>
@endpush