@php
    use App\Components\Config\Country;

    $countryList = Country::getCodes('Y');
@endphp
@extends('sample.programs.manager.layout-default', [
    'activatedNavItem' => 'sample.program-create',
])

@push('head')
    <link rel="stylesheet" type="text/css" href="/assets/edm.fileUploader/css/fileUploader.css"/>
    <script type="text/javascript" src="/assets/edm.fileUploader/js/fileUploader.js"></script>
@endpush

@section('content')
<div class="container pd40">
    <div class="pd20" style="border:1px solid black;">               
        <ul>
            <li class="height-pd20">
                <div class="display-inline-block" style="width:10%;">
                    <strong>공개상태</strong>
                </div>
                <div class="display-inline-block" style="width:80%;">
                    <div class="display-inline-block pd5">
                        <span class="chk"><input type="checkbox" id="show" checked><label for="show">노출함</label></span>
                    </div>
                </div>
            </li>
            <li class="height-pd20 display-flex-center">
                <div class="display-inline-block" style="width:10%;">
                    <strong>국가</strong>
                </div>
                <div class="display-inline-block" style="width:80%;">
                    @foreach($countryList as $value)
                        <div class="display-inline-block pd5">
                            <span class="chk"><input type="checkbox" id="country_{{ $value->config_uid }}"><label for="country_{{ $value->config_uid }}">{{ $value->config_name }}</label></span>
                        </div>
                    @endforeach
                </div>
            </li>
            <li class="height-pd20 display-flex-center">
                <div class="display-inline-block" style="width:10%;">
                    <strong>타입/테마</strong>
                </div>
                <div class="display-inline-block" style="width:80%;">
                    <div class="display-inline-block pd5">
                        <span class="rdo"><input type="radio" name="thema" id="thema_1"><label for="thema_1">어학연수</label></span>
                    </div>
                    <div class="display-inline-block pd5">
                        <span class="rdo"><input type="radio" name="thema" id="thema_2"><label for="thema_2">해외대학</label></span>
                    </div>
                    <div class="display-inline-block pd5">
                        <span class="rdo"><input type="radio" name="thema" id=""><label for="2">조기유학</label></span>
                    </div>
                    <div class="display-inline-block pd5">
                        <span class="rdo"><input type="radio" name="thema" id=""><label for="2">워킹홀리데이 인턴십</label></span>
                    </div>
                </div>
            </li>
            <li class="height-pd20">
                <div class="display-inline-block" style="width:10%;"></div>
                <div class="display-inline-block pd10 bg-gray" style="width:80%;">   
                    <div class="height-pd10">어학연수 테마</div>
                    <div class="display-inline-block width-r-pd10">
                        <span class="chk"><input type="checkbox" id="2"><label for="2">영어/문화</label></span>
                    </div>
                    <div class="display-inline-block width-r-pd10">
                        <span class="chk"><input type="checkbox" id="2"><label for="2">초특가</label></span>
                    </div>
                    <div class="display-inline-block width-r-pd10">
                        <span class="chk"><input type="checkbox" id="2"><label for="2">2개국 연계연수</label></span>
                    </div>
                </div>
            </li>
            <li class="height-pd20 ">
                <div class="display-inline-block" style="width:10%;"></div>
                <div class="display-inline-block pd10 bg-gray" style="width:80%;">   
                    <div class="height-pd10">해외대학 테마</div>
                    <div class="display-inline-block width-r-pd10">
                        <span class="chk"><input type="checkbox" id="2"><label for="2">학부</label></span>
                    </div>
                    <div class="display-inline-block width-r-pd10">
                        <span class="chk"><input type="checkbox" id="2"><label for="2">석사</label></span>
                    </div>
                    <div class="display-inline-block width-r-pd10">
                        <span class="chk"><input type="checkbox" id="2"><label for="2">편입</label></span>
                    </div>
                </div>
            </li>

            <li class="height-pd20">
                <div class="display-inline-block" style="width:10%;">
                    <strong>프로그램 ID</strong>
                </div>
                <div class="display-inline-block" style="width:70%;">
                    <input type="text" placeholder="">
                </div>
            </li>

            <li class="height-pd20 display-flex-center">
                <div class="display-inline-block" style="width:10%;">
                    <strong>프로그램 명</strong>
                </div>
                <div class="display-inline-block" style="width:70%;">
                    <input type="text" placeholder="">
                    <p>* 메타태그-Tilte로도 사용됩니다.</p>
                    <p>* 인쿼리 버튼 타이틀로도 사용됩니다</p>
                    
                    <div class="height-pd10">
                        <div class="display-inline-block" style="width:10%;">
                            <strong>프로그램 컬러</strong>
                        </div>
                        <div class="display-inline-block" style="width:70%;">
                            # <input type="text" placeholder=""> (예: #FFFFFF)
                        </div>
                    </div>
                </div>
            </li>

            <li class="height-pd20 display-flex-center">
                <div class="display-inline-block" style="width:10%;">
                    <strong>프로그램 설명</strong>
                </div>
                <div class="display-inline-block" style="width:70%;">
                    <input type="text" placeholder="">
                    <p>* 메타태그-Tilte로도 사용됩니다.</p>
                    <p>* 인쿼리 버튼 보조설명으로도 사용됩니다.</p>
                </div>
            </li>    

            <li class="height-pd20 display-flex-center">
                <div class="display-inline-block" style="width:10%;">
                    <strong>태그삽입</strong>
                </div>
                <div class="display-inline-block" style="width:70%;">
                    <select name="tag[]" multiple="multiple" style="width:400px;" class="selectbox">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                    </select>
                </div>
            </li>

            <li class="height-pd20">
                <div class="display-inline-block" style="width:10%;">
                    <strong>썸네일 등록</strong>
                </div>
                <div class="display-inline-block" style="width:70%;">
                    <input type="file" class="file-uploader" name="thumbnail"/>
                </div>
            </li>

            <li class="height-pd20">
                <div class="display-inline-block" style="width:10%;">
                    <strong>메타태그 image 등록</strong>
                </div>
                <div class="display-inline-block" style="width:70%;">
                    <input type="file" class="file-uploader" name="metaThumbnail"/>
                </div>
            </li>

            <li class="height-pd20">
                <div class="display-inline-block" style="width:10%;">
                    <strong>새창여부</strong>
                </div>
                <div class="display-inline-block" style="width:70%;">
                    <select>
                        <option>페이지 이동</option>
                        <option>새창 이동</option>
                    </select>
                </div>
            </li>

            <li class="height-pd20">
                <div class="display-inline-block" style="width:10%;">
                    <strong>관련 프로그램</strong>
                </div>
                <div class="display-inline-block" style="width:70%;">
                    <select name="states[]">
                        <option>사용하지 않음</option>
                        <option>자동(같은 카테고리, 국가 상품 군 중 랜덤으로 4개 노출)</option>
                        <option>수동(4개 상품 직접 적용)</option>
                    </select>
                </div>
            </li>

            <li class="height-pd20">
                <div class="display-inline-block" style="width:10%;">
                    <strong>인기 프로그램</strong>
                </div>
                <div class="display-inline-block" style="width:70%;">
                    <select name="states[]">
                        <option>사용하지 않음</option>
                        <option>자동(같은 카테고리 상관없음, 상담신청이 많은 상품 상위 4개 랜덤 노출)</option>
                        <option>수동(4개 상품 직접 적용)</option>
                    </select>
                </div>
            </li>

        </ul>
    </div>
</div>

<script>
    $('.selectbox').select2();

    $('.file-uploader').fileUploader({
        templates: {
            search: '<div class="fu-file-search">\
                        <button type="button" class="fu-btn">파일 검색</button>\
                        <div class="fu-text">클릭하거나 이 영역에 파일을 끌어오세요.<br/>하나의 파일만 등록 가능합니다.<div>\
                    </div>'
        }
    });
</script>
@endsection