@props([
    'paging' => true,
    'sortable' => false,
    'tableHeaders',
    'items',
    'actionKey',
    'createLink',
    'backLink',
    'acceptImage' => false,
    'thumbnailId' => null,
])

@if ($paging)
    <div class="tbl-head">
        @if ($items->total() > 0)
            <p class="tbl-head-result">全{{ $items->total() }}件中 {{ $items->firstItem() }}件〜{{ $items->lastItem() }}件を表示</p>
        @endif
        @switch($actionKey)
            @case('create')
                <div class="tbl-head-btn">
                    <a class="create" href="{{ $createLink }}">新規追加</a>
                </div>
            @break

            @case('back-create')
                <div class="tbl-head-btn">
                    <a class="back bc-d-gry" href="{{ $backLink }}">一覧へ戻る</a>
                    <a class="create" href="{{ $createLink }}">新規追加</a>
                </div>
            @break
        @endswitch
    </div>
@endif
@if ($acceptImage)
    <input id="js-add-images" type="file" accept=".jpg,.png,.gif" multiple />
@endif
<div class="tbl__wrap mb-x2">
    <table id="table">
        <thead>
            <tr>
                @foreach ($tableHeaders as $header)
                    @if ($header['head'] === 'check_box')
                        <th scope="col">
                            <div class="tbl-check">
                                <label>
                                    <input type="checkbox" name="{{ $header['head'] }}">
                                    <span class="tbl-check-mark"></span>
                                </label>
                            </div>
                        </th>
                    @else
                        <th scope="col">{{ $header['head'] }}</th>
                    @endif
                @endforeach
            </tr>
        </thead>
        <tbody {{ $sortable ? 'class=sortable' : '' }}>
            @foreach ($items as $item)
                <tr>
                    @foreach ($tableHeaders as $header)
                        @if ($header['key'] === 'action')
                            <td>
                                <div class="tbl-btn">
                                    @isset($item['manage_link'])
                                        <a href="{{ $item['manage_link'] }}">エピソード一覧</a>
                                    @endisset
                                    @isset($item['detail_link'])
                                        <a href="{{ $item['detail_link'] }}">詳細</a>
                                    @endisset
                                    @isset($item['edit_link'])
                                        <a href="{{ $item['edit_link'] }}">編集</a>
                                    @endisset
                                    @if ($is_admin && isset($item['delete_link']))
                                        <form action="{{ $item['delete_link'] }}" method="POST">
                                            @csrf
                                            @method('delete')
                                            <button type="submit" class="js-btn-confirm delete_btn bc-red">削除</button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                        @elseif($header['key'] === 'file')
                            @if($loop->parent->first)
                                <style>
                                    /* dropzone.js(画像をD&Dでアップロードするライブラリ)用のスタイル */
                                    .h1 {
                                        letter-spacing: -0.02em;
                                    }
                                    .dropzone {
                                        overflow-y: auto;
                                        border: 0;
                                        background: transparent;
                                    }
                                    .dz-preview {
                                        width: 100%;
                                        margin: 0 !important;
                                        height: 100%;
                                        padding: 8px;
                                        position: absolute !important;
                                        top: 0;
                                    }
                                    .dz-photo {
                                        height: 100%;
                                        width: 100%;
                                        overflow: hidden;
                                        border-radius: 4px;
                                        background: #eae7e2;
                                    }
                                    .dz-thumbnail {
                                        width: 100%;
                                        height: 100%;
                                        object-fit: cover;
                                    }
                                    .dz-image {
                                        width: 90px !important;
                                        height: 90px !important;
                                        border-radius: 6px !important;
                                    }
                                    .dz-remove {
                                        display: none !important;
                                    }
                                    .dz-delete {
                                        width: 24px;
                                        height: 24px;
                                        background: rgba(0, 0, 0, 0.57);
                                        position: absolute;
                                        opacity: 0;
                                        transition: all 0.2s ease;
                                        top: 20px;
                                        right: 20px;
                                        border-radius: 100px;
                                        z-index: 9999;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                    }
                                    .dz-delete > svg {
                                        transform: scale(0.75);
                                        cursor: pointer;
                                    }
                                    .dz-preview:hover .dz-delete,
                                    .dz-preview:hover .dz-remove-image {
                                        opacity: 1;
                                    }
                                    .dz-message {
                                        height: 100%;
                                        margin: 0 !important;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                    }
                                    .dz-clickable {
                                        height: 300px;
                                        aspect-ratio: 16/9;
                                    }
                                    .dropzone-drag-area {
                                        height: 100%;
                                        position: relative;
                                        padding: 0 !important;
                                        border-radius: 6px;
                                        border: 3px dashed #dbdeea;
                                        cursor: pointer;
                                    }
                                    .dz-event {
                                        margin-top: 8px;
                                        font-size: 1.2rem;
                                        font-weight: bold;
                                    }
                                    .dz-event.--default {
                                        color: #286da0;
                                    }
                                    .dz-event.--error {
                                        color: #d93f3f;
                                    }
                                    .was-validated .form-control:valid {
                                        border-color: #dee2e6 !important;
                                        background-image: none;
                                    }
                                    .d-none {
                                        display: none;
                                    }
                                </style>
                            @endif
                            <td>
                                <div>
                                    <div class="field-radio">
                                        <label class="mb-x1">
                                            <input type="radio" name="thumbnail_id" id="thumbnail_radio{{ $item['no'] }}" value="{{ $item['no'] }}" {{ $item['no'] == @$thumbnailId ? 'checked' : '' }} {{ !empty($item['url']) ? '' : 'disabled' }}>
                                            <span class="radio-label">アイキャッチ画像に設定する</span>
                                        </label>
                                    </div>
                                    <form id="formDropzone{{ $item['no'] }}">
                                        @csrf
                                        <div class="dropzone-drag-area form-control" id="previews{{ $item['no'] }}">
                                            <div class="dz-message text-muted opacity-50" data-dz-message>
                                                <span>画像をドラッグ・アンド・ドロップしてください</span>
                                            </div>
                                            <div class="{{ !empty($item['url']) ? '' : 'd-none' }}" id="dzPreviewContainer{{ $item['no'] }}">
                                                <div class="dz-preview dz-file-preview">
                                                    <div class="dz-photo">
                                                        <img class="dz-thumbnail" id="dz-thumbnail{{ $item['no'] }}" src="{{ !empty($item['url']) ? '/storage/manga/episode/' . $item['url'] : ''}}?t={{ now()->format('Ymdhis') }}" data-dz-thumbnail>
                                                    </div>
                                                    <button class="dz-delete border-0 p-0" type="button" id="image-delete{{ $item['no'] }}" data-dz-remove>
                                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="times"><path fill="#FFFFFF" d="M13.41,12l4.3-4.29a1,1,0,1,0-1.42-1.42L12,10.59,7.71,6.29A1,1,0,0,0,6.29,7.71L10.59,12l-4.3,4.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L12,13.41l4.29,4.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Z"></path></svg>
                                                    </button>
                                                </div>
                                            </div>
                                            @if($actionKey == 'edit')
                                                <input id="js-img{{ $item['no'] }}-delete-flg" name="img{{ $item['no'] }}_is_deleted" type="hidden" value="{{ !empty($filename) ? '0' : '1' }}">
                                            @endif
                                        </div>
                                    </form>
                                    <p class="dz-event" id="dz-event{{ $item['no'] }}"></p>
                                </span>
                            </td>
                        @elseif ($header['key'] === 'thumbnail')
                            <td>
                                <img class="tbl-thumb" src="{{ $item['thumbnail_path'] }}?t={{ now()->format('Ymdhis') }}" {{ $sortable? 'id=js-thumbnail' . $item['no'] . '-path' : '' }}>
                            </td>
                        @elseif ($header['key'] === 'no')
                            <td class="js-number">{{ $item["{$header['key']}"] }}</td>
                        @elseif ($header['key'] === '')
                            <td class="js-number">{{ $item["{$header['key']}"] }}</td>
                        @elseif($header['key'] === 'updated_at')
                            <td>{{ \Carbon\CarbonImmutable::parse($item["{$header['key']}"])->timezone('Asia/Tokyo')->format('Y/m/d H:i') }}</td>
                        @elseif($header['key'] === 'manga_title')
                            <td><p class="tbl-ttl">{{ $item["{$header['key']}"] }}</p></td>
                        @else
                            <td>{{ $item["{$header['key']}"] }}</td>
                        @endif
                    @endforeach
                </tr>
            @endforeach
        </tbody>
    </table>
</div>
@if ($paging)
    <div class="tbl-foot">
        <div class="pager">
            <a class="pager-prev" href="{{ $items->appends(request()->input())->previousPageUrl() }}">前へ</a>
            @for ($i = 1; $i <= $items->lastPage(); $i++)
                @if ($i === $items->currentPage())
                    <a class="pager-num {{ $items->currentPage()==$i ? 'is-active' : '' }}">{{ $i }}</a>
                @else
                    <a class="pager-num" href="{{ $items->appends(request()->input())->url($i) }}">{{ $i }}</a>
                @endif
            @endfor
            <a class="pager-next" href="{{ $items->appends(request()->input())->nextPageUrl() }}">次へ</a>
        </div>
    </div>
@endif

@push('scripts')
    @for ($j=1; $j<=count($items); $j++)
        <script>
            // Dropzone.js(画像のD&Dアップロードライブラリ)の設定
            Dropzone.autoDiscover = false;

            $('#formDropzone{{ $j }}').dropzone({
                previewTemplate: $('#dzPreviewContainer{{ $j }}').html(),
                url: '/manga-upload',
                paramName: 'images',
                addRemoveLinks: true,
                autoProcessQueue: true,
                uploadMultiple: false,
                parallelUploads: 1,
                maxFiles: 1,
                acceptedFiles: '.jpeg, .jpg, .png, .gif',
                thumbnailWidth: 900,
                thumbnailHeight: 600,
                previewsContainer: "#previews{{ $j }}",
                timeout: 0,
                // テキスト設定
                dictCancelUploadConfirmation:'画像のアップロードをキャンセルしてよろしいですか。',

                // 初期化
                init: function()
                {
                    myDropzone = this;

                    this.on('addedfile', function(file) {
                        $('.dropzone-drag-area').removeClass('is-invalid').next('.invalid-feedback').hide();
                    });
                },
                // 画像アップロード中の処理
                uploadprogress(file, progress, bytesSent) {
                    // アップロードの進捗を%で表示
                    let dz_event = document.getElementById('dz-event{{ $j }}');
                    dz_event.textContent = 'アップロード中: ' + progress.toFixed(1) + '%';
                    dz_event.classList.remove('--error');
                    dz_event.classList.add('--default');
                    // アップロード中は「登録/更新」ボタンをdisabledにする
                    let submit_btns = document.getElementsByClassName('js-submit-btn');
                    submit_btns.forEach(submit_btn => {
                        submit_btn.disabled = true;
                    });

                },
                // 画像アップロード成功時の処理
                success: function(file, response)
                {
                    setTimeout(function() {
                        $('#successMessage').removeClass('d-none');
                    }, 600);

                    // /manga/upload からの返り値を取得
                    obj = JSON.parse(response);
                    // 画像のファイル名をhiddenのinput要素にセット
                    let input = document.getElementById('img{{ $j }}');
                    input.value = obj;
                    // ラジオボタンのdisabledをとる
                    let radio = document.getElementById('thumbnail_radio{{ $j }}');
                    radio.disabled = false;
                    // アップロード完了のテキストを表示
                    let dz_event = document.getElementById('dz-event{{ $j }}');
                    dz_event.classList.remove('--error');
                    dz_event.classList.add('--default');
                    dz_event.textContent = 'アップロード完了';
                    // 「登録/更新」ボタンのdisabledを外す
                    let submit_btns = document.getElementsByClassName('js-submit-btn');
                    submit_btns.forEach(submit_btn => {
                        submit_btn.disabled = false;
                    });

                },
                // 画像アップロード失敗時の処理
                error: function(file, message)
                {
                    if (file.previewElement) {
                        file.previewElement.classList.add("dz-error");
                        if (typeof message !== "string" && message.error) {
                            message = message.error;
                        }
                        for (let node of file.previewElement.querySelectorAll(
                            "[data-dz-errormessage]"
                        )) {
                            node.textContent = message;
                        }
                    }
                    // エラーメッセージを表示
                    let dz_event = document.getElementById('dz-event{{ $j }}');
                    dz_event.textContent = '画像アップロードに失敗しました。再度お試しください。';
                    dz_event.classList.remove('--default');
                    dz_event.classList.add('--error');

                    // 「登録/更新」ボタンのdisabledを外す
                    let submit_btns = document.getElementsByClassName('js-submit-btn');
                    submit_btns.forEach(submit_btn => {
                        submit_btn.disabled = false;
                    });

                    // プレビュー表示を削除
                    if (file.previewElement != null && file.previewElement.parentNode != null) {
                        file.previewElement.parentNode.removeChild(file.previewElement);
                    }
                },
                // 画像削除時の処理
                removedfile: function(file)
                {
                    // プレビュー表示を削除
                    if (file.previewElement != null && file.previewElement.parentNode != null) {
                        file.previewElement.parentNode.removeChild(file.previewElement);
                    }
                    // hiddenのinput要素にセットしたvalueを削除
                    let input = document.getElementById('img{{ $j }}');
                    input.value = '';
                    // ラジオボタンにdisabledをつける
                    let radio = document.getElementById('thumbnail_radio{{ $j }}');
                    radio.disabled = true;
                    // ステータス表示を削除
                    document.querySelector('#dz-event{{ $j }}').textContent = '';

                    // アイキャッチ画像として設定されていた場合はチェックを外し、
                    // 有効なラジオボタンのうち一番上のものにチェックを移動させる
                    let radio_input = $('#thumbnail_id'); // アイキャッチ画像ラジオボタン用のhiddenのinputタグ
                    if($(radio).is(':checked')) {
                        $(radio).prop('checked', false); // チェックを外す
                        radio_input.val(''); // hiddenのinputを削除
                        let radios = $('input[name="thumbnail_id"]:radio');
                        radios.each(function(index, val) {
                            if(!$(val).is(':checked') && !$(val).is(':disabled')) {
                                let radio_value = $(val).val();
                                $(val).prop('checked', true); // チェックを入れる
                                radio_input.val(radio_value); // hiddenのinputに新しい値をセット
                                return false;
                            }
                        });
                    }
                }
            });
            // 登録済の画像を×ボタンで削除した時の処理
            $(function() {
                let delete_btn = $('#image-delete{{ $j }}'); // 削除ボタン
                let thumbnail_area = $('#dzPreviewContainer{{ $j }}'); // サムネイルエリア
                let thumbnail_img = $('#dz-thumbnail{{ $j }}'); // サムネイル画像のimgタグ
                let img_input = $('#img{{ $j }}'); // サムネイル画像用のhiddenのinputタグ
                let radio = $('#thumbnail_radio{{ $j }}'); // アイキャッチ画像のラジオボタン
                let radio_input = $('#thumbnail_id'); // アイキャッチ画像ラジオボタン用のhiddenのinputタグ
                delete_btn.on('click', function() {
                    // サムネイル画像を削除
                    thumbnail_img.removeAttr('src');
                    // サムネイルエリアを非表示
                    thumbnail_area.addClass('d-none');
                    // hiddenのinputのvalueを削除
                    img_input.val('');
                    // アイキャッチ画像のラジオボタンをdisabledに変更
                    radio.prop('disabled', true);
                    // ステータス表示を削除
                    document.querySelector('#dz-event{{ $j }}').textContent = '';

                    // アイキャッチ画像としてせっていされていた場合はチェックを外し、
                    // 有効なラジオボタンのうち一番上のものにチェックを移動させる
                    if(radio.is(':checked')) {
                        radio.prop('checked', false); // チェックを外す
                        radio_input.val(''); // hiddenのinputを削除
                        let radios = $('input[name="thumbnail_id"]:radio');
                        radios.each(function(index, val) {
                            console.log($(val));
                            if(!$(val).is(':checked') && !$(val).is(':disabled')) {
                                let radio_value = $(val).val();
                                $(val).prop('checked', true); // チェックを入れる
                                radio_input.val(radio_value); // hiddenのinputに新しい値をセット
                                return false;
                            }
                        });
                    }
                });
            });
        </script>
    @endfor
    <script>
        // 「アイキャッチ画像を設定する」ラジオボタンが選択された時に、hiddenのinputタグにvalueを設定する
        $(function() {
            // hiddenのinput要素を取得
            let hidden_input = $('input[id="thumbnail_id"]');
            $('input[name="thumbnail_id"]:radio').change(function() {
                // 選択されたラジオボタンのvalueを取得
                let selected_value = $(this).val();
                // hiddenのinput要素にvalueを設定
                hidden_input.val(selected_value);
            });
        });
    </script>
@endpush