@extends("common.layout")

{{-- @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') !!}
@endsection

@section("content")
<h1>
    <a href="{{ route('product.compare.list') }}">수강상품 비교</a>
</h1>

<section class="mb-3">
    <header>
        <h6>조회결과 {{ $data->count() }}건</h6>
        <a class="btn btn-primary text-white" type="button" href='{{ route('product.compare.detail') }}' target="_blank">등록</a>
    </header>
    <main>
        <table class="table table-hover">
            <colgroup>
                <col width="3%" data-title="id">
                <col width="7%" data-title="상품명">
                <col width="7%" data-title="옵션구성">
                <col width="12%" data-title="강좌정보">
                <col width="5%" data-title="강의수">
                <col width="7%" data-title="첨삭">
                <col width="7%" data-title="CDT">
                <col width="12%" data-title="학습자료">
                <col width="5%" data-title="수강기간">
                <col width="12%" data-title="수강대상">
                <col width="7%" data-title="수강료">
                <col width="5%" data-title="관리">
            </colgroup>
            <thead>
                <tr>
                    <th>id</th>
                    <th>상품명</th>
                    <th>옵션구성</th>
                    <th>강좌정보</th>
                    <th>강의수</th>
                    <th>첨삭</th>
                    <th>CDT</th>
                    <th>학습자료</th>
                    <th>수강기간</th>
                    <th>수강대상</th>
                    <th>수강료</th>
                    <th>관리</th>
                </tr>
            </thead>
            <tbody>
                @foreach ( $data as $item )
                    <tr>
                        <td>{{ $item->id }}</td>
                        <td>
                            @php
                                $icon = $item->icon ? json_decode($item->icon, 1) : [];
                            @endphp
                            @if ( ! empty($icon))
                            <div class="icon-wrap">
                                @foreach ( $icon as $i )
                                    <span @class(['icon', $i])></span>
                                @endforeach
                            </div>
                            @endif
                            {{ $item->title }}
                        </td>
                        <td>{!! nl2br($item->options) !!}</td>
                        <td class="font-sm">{!! nl2br($item->courses) !!}</td>
                        <td><span class="font-weight-600">(A)</span> {{ $item->academic_lecture }}강 <br>
                            <span class="font-weight-600">(G)</span> {{ $item->general_lecture }}강</td>
                        <td>{!! nl2br($item->feedback) !!}</td>
                        <td>{{ $item->cdt }}</td>
                        <td>{{ $item->textbooks }}</td>
                        <td>{{ $item->period }}</td>
                        <td>{!! nl2br($item->target) !!}</td>
                        <td>{{ $item->price }}</td>
                        <td>
                            <a class="btn btn-sm btn-primary text-white" href="{{ route('product.compare.detail', [ 'id' => $item->id]) }}" target="_blank">
                                <i class="bi bi-pencil-square"></i>
                            </a>
                            <button class="btn btn-sm btn-danger" onclick="onDelete('{{ $item->id }}')">
                                <i class="bi bi-trash"></i>
                            </button>
                            <a class="btn btn-sm btn-link" type="button" href='{{ route('product.detail', [ 'service' => 'ielts', 'id' => $item->product_id]) }}#{{ $item->product_option_ids }}' target="_blank"><i class="bi bi-link-45deg"></i></a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </main>
</section>

@endsection

@push("script")
<script>
    function onDelete(id) {
        alertify.confirm("확인", "삭제하시겠습니까? 삭제시 복구할 수 없습니다.", async () => {
            const href = "{{ route('api.product.compare.remove', ['id' => ':id']) }}";
            const result = await customFetch(href.replace(":id", id), {
                method: "POST",
                headers: { "Content-Type" : "application/json"}
            });

            if ( result.status ) {
                alertify.alert("완료", "삭제되었습니다.", () => {
                    location.reload()
                });
            }
        }, () => {})
    }
</script>
@endpush