@extends('admin.layouts.app')

@section('content')
<div class="container-fluid">
    <h2>팝업 @if($popupID) 수정 @else 등록 @endif</h2>
    <hr/>
    @include('admin.messages')

    <form name="f_admin_write" id="fAdminWrite" method="post" action="{{ $actionURL }}" enctype="multipart/form-data">
        @csrf
        @if($popupID)
            <input type="hidden" name="popup_id" value="{{ $popupID }}" />
            @method('PUT')
        @endif
        <div class="row mb-3">
            <label for="subject" class="col-sm-2 col-form-label">제목</label>
            <div class="col-sm-10">
                <input type="text" name="subject" id="subject" class="form-control" value="{{ $popupData->subject ?? old('subject') }}" />
            </div>
        </div>
        <div class="row mb-3">
            <label for="startDate" class="col-sm-2 col-form-label">노출기간</label>
            <div class="col-sm-10">
                <input type="date" name="start_date" id="startDate" class="form-control date-picker w-auto" value="{{ $popupData->start_date ?? old('start_date') }}" />
            </div>
        </div>
        <div class="row mb-3">
            <label for="endDate" class="col-sm-2 col-form-label">종료일</label>
            <div class="col-sm-10">
                <input type="date" name="end_date" id="endDate" class="form-control date-picker w-auto" value="{{ $popupData->end_date ?? old('end_date') }}" />
            </div>
        </div>
        <div class="row mb-3">
            <label for="isCenter_1" class="col-sm-2">정렬</label>
            <div class="col-sm-10">
                <div class="form-check form-check-inline">
                    <input type="radio" name="is_center" id="isCenter_1" class="form-check-input" value="1" @if(($popupData->is_center ?? old('is_center')) == '1') checked @endif />
                    <label for="isCenter_1" class="form-check-label">
                        가운데 정렬
                    </label>
                </div>
                <div class="form-check form-check-inline">
                    <input type="radio" name="is_center" id="isCenter_2" class="form-check-input" value="2" @if(($popupData->is_center ?? old('is_center')) == '2') checked @endif />
                    <label for="isCenter_2" class="form-check-label">
                        좌측 정렬
                    </label>
                </div>
            </div>
        </div>
        <div class="row mb-3 position" @if(($popupData->is_center ?? old('is_center')) == 1) hidden @endif>
            <label for="left" class="col-sm-2 col-form-label">좌/우 위치</label>
            <div class="col-sm-10">
                <div class="row">
                    <div class="col-auto">
                        <label for="left" class="form-label">좌측</label>
                        <div class="input-group">
                            <input type="number" name="left" id="left" class="form-control" value="{{ $popupData->left ?? old('left') }}" />
                            <span class="input-group-text">px</span>
                        </div>
                    </div>
                    <div class="col-auto">
                        <label for="top" class="form-label">상단</label>
                        <div class="input-group">
                            <input type="number" name="top" id="top" class="form-control" value="{{ $popupData->top ?? old('top') }}" />
                            <span class="input-group-text">px</span>
                        </div>
                    </div>
                </div>
                <div class="form-text text-muted">좌측 정렬시만 해당</div>
            </div>
        </div>
        <div class="row mb-3">
            <label for="width" class="col-sm-2 col-form-label">크기</label>
            <div class="col-sm-10">
                <div class="row">
                    <div class="col-auto">
                        <label for="width" class="form-label">가로</label>
                        <div class="input-group">
                            <input type="number" name="width" id="width" class="form-control" value="{{ $popupData->width ?? old('width') }}" />
                            <span class="input-group-text">px</span>
                        </div>
                    </div>
                    <div class="col-auto">
                        <label for="height" class="form-label">세로</label>
                        <div class="input-group">
                            <input type="number" name="height" id="height" class="form-control" value="{{ $popupData->height ?? old('height') }}" />
                            <span class="input-group-text">px</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mb-3">
            <label for="device" class="col-sm-2 col-form-label">표시기기</label>
            <div class="col-sm-10">
                <select name="device" id="device" class="form-select w-auto">
                    <option value="0" @if($popupData->device ?? old('device') == '0') selected @endif>모든기기</option>
                    <option value="1" @if($popupData->device ?? old('device') == '1') selected @endif>PC</option>
                    <option value="2" @if($popupData->device ?? old('device') == '2') selected @endif>모바일</option>
                </select>
            </div>
        </div>
        <div class="row mb-3">
            <label for="disableHours" class="col-sm-2 col-form-label">닫기 유효시간</label>
            <div class="col-sm-10">
                <div class="row">
                    <div class="col-auto">
                        <div class="input-group">
                            <input type="number" name="disable_hours" id="disableHours" class="form-control" value="{{ $popupData->disable_hours ?? old('disable_hours') }}" />
                            <span class="input-group-text">초</span>
                        </div>
                    </div>
                </div>
                <div class="form-text text-muted">시간, 닫기 버튼 클릭시 쿠키적용시간, 해당 시간동안 팝업이 더이상 보이지 않습니다.</div>
            </div>
        </div>
        <div class="row mb-3">
            <label for="activated_1" class="col-sm-2 col-form-label">활성화 여부</label>
            <div class="col-sm-10">
                <div class="form-check form-check-inline">
                    <input type="radio" name="activated" id="activated_1" class="form-check-input" value="1" @if(($popupData->activated ?? old('activated')) == '1') checked @endif />
                    <label for="activated_1" class="form-check-label">
                        활성
                    </label>
                </div>
                <div class="form-check form-check-inline">
                    <input type="radio" name="activated" id="activated_0" class="form-check-input" value="0" @if(($popupData->activated ?? old('activated')) == '0') checked @endif />
                    <label for="activated_0" class="form-check-label">
                        비활성
                    </label>
                </div>
            </div>
        </div>
        <div class="row mb-3">
            <label for="content" class="col-sm-2 col-form-label">내용</label>
            <div class="col-sm-10">
                <?php echo htmlEditor('content', ($popupData->content ?? old('content')), 'form-control dhtml-editor', true, false, '', 8, 'popContent'); ?>
            </div>
        </div>
        @isset($popupData->updated_at)
        <div class="row mb-3">
            <label class="col-sm-2">수정일시</label>
            <div class="col-sm-10">
                {{ $popupData->updated_at }}
            </div>
        </div>
        @endisset
        @isset($popupData->created_at)
        <div class="row">
            <label class="col-sm-2">등록일시</label>
            <div class="col-sm-10">
                {{ $popupData->created_at }}
            </div>
        </div>
        @endisset
        <hr/>
        <div class="text-end">
            <button type="submit" class="btn btn-success">저장하기</button>
            <button type="button" class="btn btn-light btn-write-cancel" value="{{ route('admin.page.popup.index') }}">취소하기</button>
        </div>
    </form>
</div>

<script type="module">
$("#fAdminWrite").validate({
    rules: {
        subject: {required: true, maxlength: 255},
        start_date: {required: true, date: true},
        end_date: {required: true, date: true},
        is_center: {required: true, number: true},
        left: {required: "#isCenter_2:checked", number: true},
        top: {required: "#isCenter_2:checked", number: true},
        width: {required: true, number: true},
        height: {required: true, number: true},
        device: {required: true},
        disable_hours: {required: true, number: true},
        activated: {required: true},
        content: {"required_tinymce": false}
    }
});
$(document).on("click", "input:radio[name='is_center']", function() {
   if(this.checked) {
       if(this.value == '1') {
           $(".position").prop("hidden", true);
       }else{
           $(".position").prop("hidden", false);
       }
   }
});
</script>
@endsection
