@extends("board.layout.layout-board")


@section("board-display")
    @php
    use Carbon\Carbon;
    $thumbnail = $post ? $post->getThumbnail() : null
    @endphp

    <li class="mb-3 row mx-0 align-middle">
        <label class="col-2 required">
            이벤트 기간
            <i class="bi bi-info-circle text-danger" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="한국시간 기준"></i>
        </label>
        <span class="col-10">
            <div class=" row mx-0 align-items-center">
                <input type='date' name="event_started_at" class="form-control form-control-sm w-25" id='event_started_at' value="{{ $post?->event_started_at ? Carbon::parse($post?->event_started_at)->format("Y-m-d") : date("Y-m-d") }}">
                <label class="col-1 text-center">~</label>
                <input type='date' name="event_ended_at" class="form-control form-control-sm w-25" id='event_ended_at' value="{{ $post?->event_ended_at ? Carbon::parse($post?->event_ended_at)->format("Y-m-d") : "" }}">
                <label class="form-check-label mx-0 col-3 ">
                    <input type="checkbox" name="is_event_infinite" id='is_event_infinite' value="1" @checked($post?->is_event_infinite) /> 종료일 없음
                </label>
            </div>
            <div class="validation-wrap px-0" style="display: none"><p class='m-0 mt-2'></p></div>
        </span>
    </li>
    <li class="mb-3 row mx-0 align-middle">
        <label class="col-2 required">
            썸네일
        </label>
        <span class="col-10 row mx-0 align-items-start">
            <input type="file" name="thumbnail" id="thumbnail" value="" class="form-control form-control-sm" />
            <div id="preview-box" style="{{ $thumbnail != null ? "" : "display: none;" }}max-width: 500px;" class="mt-3">
                <img
                @if (isset($thumbnail))
                    src="{{ app(\S3Helper::class)->getPublicUrl($thumbnail->s3_key) }}"
                @endif
                id="preview" style="width: 100%">
            </div>
            <div class="validation-wrap px-0" style="display: none"><p class='m-0 mt-2'></p></div>
        </span>
    </li>
@endsection

@section('board-content')
<li class="mb-3 row mx-0 align-middle">
    <label class="col-1">당첨자여부</label>
    <span class="col-11">
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="is_winner" name="is_winner" value="1" @checked($post?->is_winner)>
            <label class="form-check-label" for="is_winner">당첨자 있음</label>
        </div>
    </span>
</li>
<li class="mb-3 row mx-0 align-middle">
    <label class="col-1">댓글 사용여부</label>
    <span class="col-11">
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="is_use_comment" name="is_use_comment" value="1" @checked($post?->is_use_comment)>
            <label class="form-check-label" for="is_use_comment">댓글 사용</label>
        </div>
    </span>
</li>
@endsection

@section("board-script")
<script>
    $(function() {
        if ($('#is_event_infinite').is(":checked"))  {
            $('#event_ended_at').prop("disabled", true);
        }

        $('#is_event_infinite').on("click", function() {
            $('#event_ended_at').prop("disabled", $(this).is(":checked"));
        })


        $('#thumbnail').on("change", function() {
            file = $(this).prop('files')[0];
            if (file) {
                if (file.type.indexOf('image') == -1) {
                    alertify.alert('error', '업로드할 수 없는 확장자입니다. <br>이미지 파일을 업로드해주세요');
                    return false;
                }

                const reader = new FileReader();
                reader.onload = function(e) {
                    $('#preview').attr('src', e.target.result);
                    $('#preview-box').show();
                }
                reader.readAsDataURL(file);
            } else {
                $('#preview').attr('src', "");
                $('#preview-box').hide();
            }
        })
    })

    function checkPostValidation(isValid) {
        if ($.isEmptyObject($('#event_started_at').val())) {
            displayValidationForm($("#event_started_at"), "이벤트 시작일이 입력되지 않았습니다.", "span");
            isValid = false;
        }

        if (! $('#is_event_infinite').is(":checked")) {
            if ($('#event_started_at').val() > $('#event_ended_at').val()) {
                displayValidationForm($("#event_started_at"), "이벤트 시작일이 이벤트 종료일 보다 큽니다.", "span")
                isValid = false;
            }
        }

        if ( $.isEmptyObject($('#thumbnail').prop('files')[0]) && $.isEmptyObject($('#preview').attr("src")) )  {
            displayValidationForm($("#preview-box"), "이벤트 썸네일을 등록하세요", "span")
            isValid = false;
        }

        return isValid;
    }
</script>
@endsection