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

@endsection

@section("main-content")
    <div class="container-fluid detail">

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <h1>교재 관리</h1>
                    <ul class="page-wayfinding">
                        <li onclick="window.location.href='{{ route('product.textbook.list') }}'">교재 관리</li>
                        <li>
                            @if ($textbook?->id)
                            상세
                            @else
                            등록
                            @endif
                        </li>
                    </ul>
                    <div class="page-btn-wrap">
                        <button class="button btn-style-2" onclick="window.location.href='{{ route('product.textbook.list') }}'">목록</button>
                        <button class="button btn-style-1" onclick="handleSubmit()">
                            @if ($textbook?->id)
                            저장
                            @else
                            등록
                            @endif
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- end page title -->


        <div class="row detail-con-wrap">
            <div class="detail-con card">
                <form id="textbookForm" class="set-user-form" >
                    <input id="id" name="id" type="hidden" value="{{ $textbook?->id ?? '' }}">
                    <input type="file" id="thumbnail" name="thumbnail" accept="image/*" style="display: none;" onchange="thumbnailChange(event)"/>
                    <div class="card-body">
                        <div class="flex-box">
                            <div class="w50">
                                <h2 class="detail-title">교재 구분</h2>
                                <div class="detail-input">
                                    <dl class="input-wrapper">
                                        <dt>교재 번호</dt>
                                        <dd><span>{{ $textbook?->id ?? "-" }}</span></dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">활성 구분</dt>
                                        <dd>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="customRadio1" name="activated" class="form-check-input" value="1" @checked($textbook?->activated == 1)>
                                                <label class="form-check-label" for="customRadio1">활성</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="customRadio2" name="activated" class="form-check-input" value="0" @checked($textbook?->activated === 0)>
                                                <label class="form-check-label" for="customRadio2">비활성</label>
                                            </div>
                                            @if ($textbook?->activated === 0 && $textbook?->deactivated_at)
                                            <div>
                                                ({{ explode(" ", $textbook->deactivated_at)[0] }})
                                            </div>
                                            @endif
                                        </dd>
                                        <dd class="validation-wrap">
                                            <p></p>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">서비스 구분</dt>
                                        <dd>
                                            @foreach ($services as $key => $service)
                                            <div class="form-check form-check-inline">
                                                <input type="radio" id="service{{ $key }}" name="service_id" class="form-check-input" value={{ $service->id }} @checked($textbook?->service_id == $service->id)>
                                                <label class="form-check-label" for="service{{ $key }}">{{ $service->name }}</label>
                                            </div>
                                            @endforeach
                                        </dd>
                                        <dd class="validation-wrap">
                                            <p></p>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">모듈</dt>
                                        <dd>
                                            @foreach ($modules as $key => $module)
                                            <div class="form-check form-check-inline">
                                                <input type="radio" id="module{{ $key }}" name="module_id" class="form-check-input" value={{ $module->id }} @checked($textbook?->module_id == $module->id)>
                                                <label class="form-check-label" for="module{{ $key }}">{{ $module->name }}</label>
                                            </div>
                                            @endforeach
                                        </dd>
                                        <dd class="validation-wrap">
                                            <p></p>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">과목</dt>
                                        <dd>
                                            @foreach ($subjects as $key => $subject)
                                            <div class="form-check form-check-inline">
                                                <input type="checkbox" id="subject{{ $key }}" name="subjects[]" class="form-check-input" value="{{ $subject->id }}" @checked(in_array($subject->id, $textbook?->subjects->pluck("id")->toArray() ?? []))>
                                                <label class="form-check-label" for="subject{{ $key }}">{{ $subject->name }}</label>
                                            </div>
                                            @endforeach
                                        </dd>
                                        <dd class="validation-wrap">
                                            <p></p>
                                        </dd>
                                    </dl>

                                    <dl class="input-wrapper">
                                        <dt class="req">레벨</dt>
                                        <dd>
                                            @foreach (App\Domains\Product\Infrastructure\Model\Textbook::LEVEL as $key => $level)
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="level{{ $key }}" name="level" class="form-check-input" value="{{ $level }}" @checked($level == $textbook?->level)>
                                                <label class="form-check-label" for="level{{ $key }}">{{ $level }}</label>
                                            </div>
                                            @endforeach
                                        </dd>
                                        <dd class="validation-wrap">
                                            <p></p>
                                        </dd>
                                    </dl>


                                    <dl class="input-wrapper">
                                        <dt class="req">판매 구분</dt>
                                        <dd>
                                            @foreach (App\Domains\Product\Infrastructure\Model\Textbook::SALES_TYPE as $key => $salesType)
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="salesType{{ $key }}" name="sales_type" class="form-check-input" value="{{ $salesType }}" @checked($salesType == $textbook?->sales_type)>
                                                <label class="form-check-label" for="salesType{{ $key }}">{{ $salesType }}</label>
                                            </div>
                                            @endforeach
                                        </dd>
                                        <dd class="validation-wrap">
                                            <p></p>
                                        </dd>
                                    </dl>
                                </div>
                             </div>
                            <div class="w50">
                                <h2 class="detail-title">기본 정보</h2>
                                <div class="detail-input">
                                    <dl class="input-wrapper">
                                        <dt class="req">교재명</dt>
                                        <dd>
                                            <div class="flex-1">
                                                <input type="text" class="form-control" id="name" name="name" placeholder="교재명을 입력해 주세요." value="{{ $textbook?->name ?? '' }}">
                                            </div>
                                        </dd>
                                        <dd class="validation-wrap">
                                            <p></p>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt>간략 소개</dt>
                                        <dd>
                                            <div class="flex-1">
                                                <input type="text" class="form-control" id="description" name="description" placeholder="" value="{{ $textbook?->description ?? '' }}">
                                            </div>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt>설명</dt>
                                        <dd>
                                            <div class="flex-1">
                                                <textarea name="content" id="content" cols="30" rows="10">{{ $textbook?->content ?? '' }}</textarea>
                                            </div>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt>오디오 파일</dt>
                                        <dd>
                                            <input type="text" class="form-control" id="audioFileName" name="audioFileName" placeholder="파일명" readonly value="{{ last(explode('/', $textbook?->audio_s3_key ?? '')) ?? '' }}">
                                            <button type="button" class="button btn-style-6" onclick="deleteAsset('audio')">삭제</button>
                                            <button type="button" class="button btn-style-8" onclick="document.getElementById('audio').click()">찾기</button>
                                            <input type="file" value="" id="audio" hidden onchage="audio" name="audio" accept="audio/*" onchange="audioChange(event)">
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">소비자가</dt>
                                        <dd>
                                            <div class="flex-1">
                                                <input type="number" class="form-control" id="consumer_price" name="consumer_price" placeholder="소비자가를 입력해 주세요." value="{{ $textbook?->consumer_price }}">
                                            </div>
                                        </dd>
                                        <dd class="validation-wrap">
                                            <p></p>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">판매가</dt>
                                        <dd>
                                            <div class="flex-1">
                                                <input type="number" class="form-control" id="sales_price" name="sales_price" placeholder="판매가를 입력해 주세요." value="{{ $textbook?->sales_price }}">
                                            </div>
                                        </dd>
                                        <dd class="validation-wrap">
                                            <p></p>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <div class="detail-con card">
                <div class="card-body">
                    <h2 class="detail-title">
                        썸네일
                        <div class="button-wrap">
                            <button class="button btn-style-1" type="button" onclick="document.getElementById('thumbnail').click()">찾기</button>
                        </div>
                    </h2>
                    <div class="detail-input">
                        <dl class="input-wrapper">
                            <dd class="thumbnail-img-wrap">
                                <div class="thumbnail-img mb-1">
                                    <button class="btn-delete" type="button" onclick="deleteAsset('thumbnail')">이미지 삭제</button>
                                    <img id="thumbnail_image" alt=""
                                    @if ($textbook?->thumbnail_s3_key)
                                    src="{{ app(\S3Helper::class)->getDownloadPresignedUrl($textbook?->thumbnail_s3_key) }}"
                                    @endif
                                    >
                                </div>
                                <div class="thumbnail-img-notice">
                                    * 파일 형식 : jpg, jpeg, png / 권장 이미지 사이즈 : 512*344
                                </div>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        @if ($textbook?->id)
        <div class="row">
            <div class="card">
                <div class="card-body">
                    <h2 class="detail-title">포함 강좌</h2>
                    <table class="default-table">
                        <colgroup>
                            <col width="70">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                            <col width="120">
                            <col width="auto">
                        </colgroup>
                        <thead>
                            <tr>
                                <th scope="col" class="th_nm">번호</th>
                                <th scope="col">등록 일시</th>
                                <th scope="col">강좌 번호</th>
                                <th scope="col">활성 구분</th>
                                <th scope="col">서비스 구분</th>
                                <th scope="col">모듈</th>
                                <th scope="col">강좌명</th>
                            </tr>
                        </thead>
                        <tbody style="text-align: center">
                            @forelse ($textbook->courses as $course)
                            <tr>
                                <td>{{ $course->id }}</td>
                                <td>
                                    @if (isset($course->created_at))
                                    {{ explode(" ", $course->created_at)[0] }} <br>
                                    {{ explode(" ", $course->created_at)[1] }}
                                    @else
                                        -
                                    @endif
                                </td>
                                <td>{{ $course->id }}</td>
                                <td>{{ $course->activated == 1 ? "활성" : "비활성" }}</td>
                                <td>{{ $course->service->name }}</td>
                                <td>{{ $course->module->name }}</td>
                                <td class="text-left">
                                    <a href="#none">{{ $course->name }}</a>
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="7">No data.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="card">
                <div class="card-body">
                    <h2 class="detail-title">포함 상품</h2>
                    <table class="default-table">
                        <colgroup>
                            <col width="70">
                            <col width="100">
                            <col width="120">
                            <col width="100">
                            <col width="100">
                            <col width="auto">
                        </colgroup>
                        <thead>
                            <tr>
                                <th scope="col" class="th_nm">번호</th>
                                <th scope="col">등록 일시</th>
                                <th scope="col">서비스 구분</th>
                                <th scope="col">상품 구분</th>
                                <th scope="col">모듈</th>
                                <th scope="col">상품명</th>
                            </tr>
                        </thead>
                        <tbody style="text-align: center">
                            @forelse ($textbook->products as $product)
                            <tr>
                                <td>{{ $product->id }}</td>
                                <td>
                                    @if (isset($product->created_at))
                                    {{ explode(" ", $product->created_at)[0] }} <br>
                                    {{ explode(" ", $product->created_at)[1] }}
                                    @else
                                        -
                                    @endif
                                </td>
                                <td>{{ $product->service->name }}</td>
                                <td>{{ $product->productType->name }}</td>
                                <td>{{ $product->module->name }}</td>
                                <td class="text-left">
                                    <a href="#none">{{ $product->name }}</a>
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="6">No data.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="card">
                <div class="card-body">
                    <h2 class="detail-title">변경 히스토리</h2>
                    <table class="default-table">
                        <colgroup>
                            <col width="70">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                            <col width="auto">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                        </colgroup>
                        <thead>
                            <tr>
                                <th scope="col" class="th_nm">번호</th>
                                <th scope="col">일시</th>
                                <th scope="col">활성 구분</th>
                                <th scope="col">레벨</th>
                                <th scope="col">판매 구분</th>
                                <th scope="col">교재명</th>
                                <th scope="col">오디오 파일</th>
                                <th scope="col">판매가</th>
                                <th scope="col">담당자</th>
                            </tr>
                        </thead>
                        <tbody style="text-align: center">
                            @forelse ($textbook->getParsingLogs() as $productLog)
                            <tr>
                                <td>{{ $productLog->row_number }}</td>
                                <td>
                                    @if (isset($productLog->created_at))
                                    {{ explode(" ", $productLog->created_at)[0] }} <br>
                                    {{ explode(" ", $productLog->created_at)[1] }}
                                    @else
                                        -
                                    @endif
                                </td>
                                <td>{{ $productLog->activated == 1 ? "활성" : "비활성" }}</td>
                                <td>{{ $productLog->level }}</td>
                                <td>{{ $productLog->sales_type }}</td>
                                <td>{{ $productLog->name }}</td>
                                <td>{{ last(explode('/', $productLog?->audio_s3_key ?? '')) ?? '-' }}</td>
                                <td class="text-right">{{ $productLog->sales_price }}</td>
                                <td>{{ $productLog->created_by }}</td>
                            </tr>
                            @empty
                            <tr><td colspan="9">No data.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        @endif
        <!-- end row -->
    </div>

@endsection

@push("script")
<script>
    const textbookId = {{ Js::from($textbook?->id) }};
    const textbook = {{ Js::from($textbook) }};

    async function handleSubmit() {
        if (!(await validate()))
            return;

        let message = "변경 내용을 저장하시겠습니까?";
        if (textbookId && textbook?.products && textbook.products.length > 0) {
            const allProducts = textbook.products;
            const displayedProducts = allProducts.map(e => e.activated == 1);

            message = `교재가 총 ${allProducts.length}건의 상품에 포함되어 있습니다.<br>(전시: ${displayedProducts.length}건, 비전시: ${allProducts.length - displayedProducts.length}건)<br><br>`;
            if (displayedProducts.length > 0) {
                const $activatedElem = document.querySelector('input[name="activated"]:checked');
                const activated = $activatedElem?.value;

                if (textbook.activated && (!activated || activated == "0"))
                    message += `비활성 처리 시 해당 교재가 포함된 모든 상품에서 제외 처리 됩니다. (전시중인 상품 포함) 비활성 처리 하시겠습니까?<br><br>해당 교재가 포한된 전시 상품명: ${displayedProducts.map(e => e.name).join(", ")}`;
                else
                    message += `저장 시 해당 교재가 포함된 모든 상품에서도 변경 적용 됩니다. (전시중인 상품 포함) 변경 저장 하시겠습니까?<br><br>해당 교재가 포한된 전시 상품명: ${displayedProducts.map(e => e.name).join(", ")}`;
            } else
                message = `저장 시 해당 교재가 포함된 모든 상품에서도 변경 적용 됩니다. 변경 저장하시겠습니까?`;
        }

        alertify.confirm("알림", message, () => execSubmit(), () => {});
    }

    async function execSubmit() {
        const $formElem = document.getElementById("textbookForm");
        const $idElem = document.getElementById("id");
        const formData = new FormData($formElem);

        const listUrl = "{{ route('product.textbook.list') }}";
        const callback = (response) => {
            if (response.status == 200 || response.status == 201)
                alertify.alert("알림", "완료되었습니다.", () => {
                    @if ($textbook?->id)
                    location.reload();
                    @else
                    window.location.href = listUrl;
                    @endif
                });
            else
                alertify.alert('Error', '오류가 발생했습니다.');

        };

        let setUrl = "{{ route('product.textbook.set') }}";
        if ($idElem.value)
            setUrl += "/" + $idElem.value;

        edmAjax({
            method: "POST",
            url: setUrl,
            data: formData,
            callback: callback
        });
    }

    async function validate() {
        document.querySelectorAll("dd.validation-wrap").forEach((item) => item.style.display = "none");
        let validationWrap = null;

        // 활성 구분
        const $activatedElem = document.querySelector('input[name="activated"]:checked');
        const activated = $activatedElem?.value;
        if (!activated)
            validationWrap = displayValidationForm(document.querySelector('input[name="activated"]'), "선택된 항목이 없습니다.");

        // 서비스 구분
        const $serviceIdElem = document.querySelector('input[name="service_id"]:checked');
        const serviceId = $serviceIdElem?.value;
        if (!serviceId)
            validationWrap = displayValidationForm(document.querySelector('input[name="service_id"]'), "선택된 항목이 없습니다.");

        // 모듈
        const $moduleIdElem = document.querySelector('input[name="module_id"]:checked');
        const moduleId = $moduleIdElem?.value;
        if (!moduleId)
            validationWrap = displayValidationForm(document.querySelector('input[name="module_id"]'), "선택된 항목이 없습니다.");

        // 과목
        const $subjectIdElem = document.querySelector('input[name="subjects[]"]:checked');
        const subjectId = $subjectIdElem?.value;
        if (!subjectId)
            validationWrap = displayValidationForm(document.querySelector('input[name="subjects[]"]'), "선택된 항목이 없습니다.");

        // 레벨
        const $levelElem = document.querySelector('input[name="level"]:checked');
        const level = $levelElem?.value;
        if (!level)
            validationWrap = displayValidationForm(document.querySelector('input[name="level"]'), "선택된 항목이 없습니다.");

        // 판매 구분
        const $salesTypeElem = document.querySelector('input[name="sales_type"]:checked');
        const salesType = $salesTypeElem?.value;
        if (!salesType)
            validationWrap = displayValidationForm(document.querySelector('input[name="sales_type"]'), "선택된 항목이 없습니다.");

        // 교재명
        const $nameElem = document.getElementById('name');
        const name = $nameElem?.value;
        if (!name)
            validationWrap = displayValidationForm($nameElem, "입력된 내용이 없습니다.");
        else if (!(await validateName(name)))
            validationWrap = displayValidationForm($nameElem, "동일한 교재명이 존재합니다.");

        // 소비자가
        const $consumerPriceElem = document.getElementById('consumer_price');
        const consumerPrice = $consumerPriceElem?.value;
        if (!consumerPrice || consumerPrice == "")
            validationWrap = displayValidationForm($consumerPriceElem, "입력된 내용이 없습니다.");
        else if (consumerPrice < 1000)
            validationWrap = displayValidationForm($consumerPriceElem, "1,000원 이상만 입력 가능합니다.");

        // 판매가
        const $salesPriceElem = document.getElementById('sales_price');
        const salesPrice = $salesPriceElem?.value;
        if (!salesPrice || salesPrice == "")
            validationWrap = displayValidationForm($salesPriceElem, "입력된 내용이 없습니다.");
        else if (salesPrice < 1000)
            validationWrap = displayValidationForm($salesPriceElem, "1,000원 이상만 입력 가능합니다.");

        if (validationWrap)
            return false;
        else
            return true;
    }

    async function validateName(name) {
        const url = "{{ route('api.product.textbook.detail-by-name') }}";
        const params = {
            "id": textbookId,
            "name": name,
        };

        let result = false;
        await edmAjax({
            method: "GET",
            url: url,
            data: params,
            isBlock: false,
            callback: response => {
                if (response.status == 200 && !response.data)
                    result = true;
            }
        });

        return result;
    }

    function thumbnailChange(e) {
        const $thumbnailImageElem = document.getElementById("thumbnail_image");
        const imageSource = URL.createObjectURL(e.target.files[0]);
        $thumbnailImageElem.src = imageSource;
        URL.revokeObjectURL(e.target.files[0]);
    }

    function audioChange(e) {
        const $fileNameElem = document.getElementById("audioFileName");
        $fileNameElem.value = e.target.files[0].name;
    }

    function deleteAsset(targetElementId) {
        if (!textbookId) {
            const $targetElem = document.getElementById(targetElementId);
            if ($targetElem)
                $targetElem.value = null;

            if (targetElementId == "thumbnail") {
                const $imageElem = document.getElementById("thumbnail_image");
                if ($imageElem)
                    $imageElem.src = "";
            } else if (targetElementId == "audio") {
                const $audioNameElem = document.getElementById("audioFileName");
                if ($audioNameElem)
                    $audioNameElem.value = "";
            }
        } else {
            alertify.confirm("알림", "정말 삭제하시겠습니까?", () => {
                const url = "{{ route('api.product.textbook.delete-asset', $textbook?->id) }}/" + targetElementId;
                edmAjax({
                    method: "DELETE",
                    url: url,
                    data: {
                        id: textbookId,
                        type: targetElementId,
                    },
                    callback: (response) => {
                        if (response.data)
                            alertify.alert("알림", "완료되었습니다.", () => location.reload());
                        else
                            alertify.alert("알림", "오류가 발생했습니다.");
                    },
                    errorCallback: (error) => {
                        alertify.alert("알림", "오류가 발생했습니다.");
                    }
                });
            }, () => 1);
        }
    }
</script>
@endpush