@extends("common.layout")

@php
    $page_title = $pageServiceName . ' 교재 ' . ($textbook?->id ? '상세보기 ('.$textbook->id.')' : '등록');
@endphp

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

@section("header")
{!! resource('css/form.css') !!}
{!! resource('js/form.js') !!}
@endsection

@section("content")

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

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

        <div class="fixed-btns btn-group">
            @if ($textbook?->id)
                @if ($User->is->root)
                <button class="btn btn-danger" type="button" onclick="textbookDelete({{ $textbook->id }}, '{{ $service }}')">삭제</button>
                @endif
            @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>

    <div class="layout-3-cols">
        <section>
            <header>
                교재 구분
                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-textbook-{{ $textbook?->id }}-1"><i class="bi bi-chevron-up"></i></button>
            </header>

            <main class="split-form">
                {{--교재 번호--}}
                @if ($textbook?->id)
                <div class="form-group">
                    <label>교재 번호</label>
                    <div>
                        {{ $textbook?->id }}
                    </div>
                </div>
                @endif

                {{--활성 구분--}}
                <div class="form-group">
                    <label>활성 구분</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(!$textbook || $textbook->activated == 1)>
                        </div>

                        @if ($textbook?->activated === 0 && $textbook?->deactivated_at)
                            ({{ explode(" ", $textbook->deactivated_at)[0] }})
                        @endif
                    </div>
                </div>

                {{--모듈--}}
                <div class="form-group">
                    <label class="required">모듈</label>
                    <div class="right-col">
                        @php
                            if (isset($textbook->module)) $modules = explode('|', $textbook->module);
                            else $modules = [];
                        @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>

                {{--과목--}}
                <div class="form-group">
                    <label class="required">과목</label>
                    <div class="right-col">
                        @php
                            $subjectsKeys = !empty($textbook->subjects) ? explode('|', $textbook->subjects):[];
                        @endphp

                        @foreach ($subjects as $subjectKey => $subjectName)
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="checkbox{{ $subjectKey }}" name="subjects[]" value="{{ $subjectKey }}" @checked(in_array($subjectKey, $subjectsKeys))>
                            <label class="form-check-label" for="checkbox{{ $subjectKey }}">{{ $subjectName }}</label>
                        </div>
                        @endforeach
                    </div>
                </div>

                {{--레벨--}}
                <div class="form-group">
                    <label class="required">레벨</label>
                    <div class="right-col">
                        @foreach (App\Domains\Product\Infrastructure\Model\Textbook::LEVEL as $key => $level)
                        <div class="form-check">
                            <input class="form-check-input" type="radio" id="level{{ $key }}" name="level" value="{{ $level }}" @checked($level == $textbook?->level)>
                            <label class="form-check-label" for="level{{ $key }}">{{ $level }}</label>
                        </div>
                        @endforeach
                    </div>
                </div>

                {{--판매 구분--}}
                <div class="form-group">
                    <label class="required">판매 구분</label>
                    <div class="right-col">
                        @foreach (App\Domains\Product\Infrastructure\Model\Textbook::SALES_TYPE as $key => $sales_type)
                        <div class="form-check">
                            <input class="form-check-input" type="radio" id="sales_type{{ $key }}" name="sales_type" value="{{ $sales_type }}" @checked($sales_type == $textbook?->sales_type)>
                            <label class="form-check-label" for="sales_type{{ $key }}">{{ $sales_type }}</label>
                        </div>
                        @endforeach
                    </div>
                </div>
            </main>
        </section>

        <section>
            <header>
                기본 정보
                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-textbook-{{ $textbook?->id }}-basic"><i class="bi bi-chevron-up"></i></button>
            </header>

            <main class="split-form">
                <div class="form-group">
                    <label class="required" for="name">교재명</label>

                    <div class="right-col">
                        <input type="text" class="form-control" name="name" id="name" value="{{ $textbook?->name }}" placeholder="교재명을 입력해 주세요." required>
                    </div>
                </div>

                <div class="form-group">
                    <label class="required" for="description">간략 소개</label>

                    <div class="right-col">
                        <input type="text" class="form-control" id="description" name="description" placeholder="" value="{{ $textbook?->description ?? '' }}">
                    </div>
                </div>

                <div class="form-group">
                    <label class="required" for="content">설명</label>

                    <div class="right-col">
                        <textarea name="content" id="content" class="form-control" cols="30" rows="10">{{ $textbook?->content ?? '' }}</textarea>
                    </div>
                </div>

                <div class="form-group">
                    <label for="audio">오디오 파일</label>

                    <div class="right-col">
                        <div class="input-group upload-group">
                            <input type="file" class="form-control" name="audio" id="audio" accept="audio/*">

                            @if (isset($textbook->audio_s3_key) && !empty($textbook->audio_s3_key))
                                <span class="input-group-text" id="audio-file-name"><a href="{{ app(\S3Helper::class)->getPublicUrl($textbook->audio_s3_key) }}" target="_blank">{{ basename($textbook->audio_s3_key) }}</a></span>
                                <button type="button" class="btn btn-danger" onclick="deleteAsset('audio')" id="audio-file-delete-btn"><i class="bi bi-trash"></i></button>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="required" for="content">소비자가</label>

                    <div class="right-col">
                        <input type="number" class="form-control" id="consumer_price" name="consumer_price" placeholder="소비자가를 입력해 주세요." value="{{ $textbook?->consumer_price }}" min="0">
                    </div>
                </div>

                <div class="form-group">
                    <label class="required" for="content">판매가</label>

                    <div class="right-col">
                        <input type="number" class="form-control" id="sales_price" name="sales_price" placeholder="판매가를 입력해 주세요." value="{{ $textbook?->sales_price }}" min="0">
                    </div>
                </div>
            </main>
        </section>


        <section>
            <header>
                <div class="required">썸네일</div>
                <div class="thumbnail-btn-wrapper">
                    <button type="button" class="btn 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)"/>
                    <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-textbook-{{ $textbook?->id }}-preview"><i class="bi bi-chevron-up"></i></button>
                </div>
            </header>

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

    </div>
</form>

@if($textbook)
<div class="layout-2-cols my-3">
    <section>
        <header>
            포함 강좌
            <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-textbook-{{ $textbook?->id }}-courses"><i class="bi bi-chevron-up"></i></button>
        </header>

        <main>
            <table class="table table-sm table-striped table-hover">
                <colgroup>
                    <col width="30">
                </colgroup>
                <thead>
                    <tr class="text-center">
                        <th>번호</th>
                        <th class="text-start">강좌명</th>
                        <th>모듈</th>
                        <th>활성</th>
                        <th>등록일</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($textbook->courses as $course)
                    <tr class="text-center">
                        <td>{{ $course->id }}</td>
                        <td class="text-start"><a href="{{ route('product.course.detail', ['id' => $course->id]) }}">{{ $course->name }}</a></td>
                        <td>{{ $course->module }}</td>
                        <td>{{ $course->activated ? 'Y':'' }}</td>
                        <td>{{ explode(" ", $course->created_at)[0] }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </main>
    </section>

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

        <main>
            <table class="table table-sm table-striped table-hover">
                <colgroup>
                    <col width="30">
                </colgroup>
                <thead>
                    <tr class="text-center">
                        <th>번호</th>
                        <th class="text-start">상품명</th>
                        <th>모듈</th>
                        <th>판매중</th>
                        <th>등록일</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($textbook->getIncludedProducts()->all() as $product)
                    <tr class="text-center">
                        <td>{{ $product->id }}</td>
                        <td class="text-start"><a href="{{ route('product.detail', ['id' => $product->id, 'service' => $product->service]) }}">{{ $product->name }}</a></td>
                        <td>{{ $product->module }}</td>
                        <td>{{ $product->is_sellable ? 'Y':'' }}</td>
                        <td>{{ explode(" ", $product->created_at)[0] }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </main>
    </section>
</div>

<section>
    <header>
        <div>
            변경 로그
        </div>
        <div>
            <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-textbook-{{ $textbook?->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>레벨</th>
                    <th>판매구분</th>
                    <th>교재명</th>
                    <th>오디오파일</th>
                    <th>썸네일</th>
                    <th>판매가</th>
                    <th>담당자</th>
                    <th>자세히 보기</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($textbook->getParsingLogs() as $log)
                <tr class="text-center">
                    <td>{{ $log->id }}</td>
                    <td>
                        @if (isset($log->created_at))
                            {{ $log->created_at }}
                        @else
                            -
                        @endif
                    </td>
                    <td>
                        @if ($log->activated == 1)
                            활성
                        @else
                            비활성
                        @endif
                    </td>

                    <td>{{ $log->module }}</td>

                    <td>{{ $log->level }}</td>

                    <td>
                        {{ $log->sales_type }}
                    </td>

                    <td>{{ $log->name }}</td>

                    <td>
                        {{ !empty($log->audio_s3_key) ? $log->audio_s3_key:'' }}
                    </td>

                    <td>
                        {{ !empty($log->thumbnail_s3_key) ? $log->thumbnail_s3_key:'' }}
                    </td>

                    <td>
                        {{ $log->sales_price }}
                    </td>

                    <td>{{ $log->created_by }}</td>

                    <td>
                        <x-log id="{{ $log->row_number }}" :log="$log" />
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </main>
</section>
@endif
@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", deleteAsset);

        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 deleteAsset(type) {
        if (typeof type == 'object') {
            $(this).closest('.thumbnail-img-wrapper').remove();
        } else {
            @if($textbook)
            const targetUrl = "{{ route('api.product.textbook.delete-asset', $textbook->id) }}/" + type;

            $.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();

                    if (type == 'thumbnail') {
                        alertify.alert("성공", "썸네일이 삭제되었습니다.");
                        $("#thumbnail-wrapper .thumbnail-img-wrapper").remove();
                    } else {
                        alertify.alert("성공", "오디오 파일이 삭제되었습니다.");
                        $('#audio-file-name, #audio-file-delete-btn').remove();
                    }
                },
                error: function(xhr, status, error) {
                    $("#loading-icon").hide();
                    console.error("Error deleting asset:", error);
                }
            });
            @endif
        }
    }

    @if($textbook)
    function textbookDelete(textbook_id) {
        if (confirm('정말 삭제하시겠습니까?')) {
            $.ajax({
                type: "DELETE",
                url: '/api/products/textbooks/'+textbook_id,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // CSRF 토큰 추가
                },
                success: function() {
                    location.href = '/products/textbooks/list/{{ $service }}';
                },
                error: function(xhr, status, error) {
                    console.error("Error deleting textbook:", error);
                }
            });
        }
    }
    @endif

    function validateForm() {
        var errors = [];

        validateInput('input[name^="module"]', "모듈을 선택하세요.", errors);
        validateInput('input[name^="subjects"]', "과목을 선택하세요.", errors);
        validateInput('input[name^="level"]', "레벨을 선택하세요.", errors);
        validateInput('input[name^="sales_type"]', "판매 구분을 선택하세요.", errors);
        validateInput('input[name="name"]', "교재명을 입력하세요.", errors);
        validateInput('input[name="description"]', "간략 소개를 입력하세요.", errors);
        validateInput('textarea[name="content"]', "설명을 입력하세요.", errors);
        validateInput('input[name="consumer_price"]', "소비자가를 입력하세요.", errors);
        validateInput('input[name="sales_price"]', "판매가를 입력하세요.", errors);

        if ($('img[name^=thumbnail]').length < 1) {
            errors.push({
                message: '썸네일을 선택해 주세요.',
                element: $('#thumbnail-find-btn')
            });
        } else {
            $('.thumbnail-btn-wrapper .validation-error').remove();
            $('.thumbnail-btn-wrapper').removeClass('invalid');
        }

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

            $('html, body').animate({
                scrollTop: errors[0].element.offset().top - 100
            }, 500);

            errors[0].element.focus();

            return false;
        }

        return true;
    }

    $(document).ready(function() {
        $("#textbook-form").on("submit", function(e) {
            if (!validateForm()) {
                e.preventDefault();
                return;
            }

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

            return true;
        });
    });
</script>
@endpush