@php
    use App\Components\Config\Country;

    $countryList = Country::getCodes('Y');
@endphp
@extends('sample.programs.manager.layout-default', [
    'activatedNavItem' => 'sample.program-editAll',
])
@push('head')
    <script type="text/javascript" src="/assets/sortable/js/Sortable.min.js"></script>
    <style>
        table tbody tr:hover {background:#f6f6f6;}
        table tbody.dragging tr:hover {background:#fff;}
        table tbody.dragging tr.sortable-ghost {background:#f6f6f6;}
        table tbody tr.no-data td {padding:6rem 1rem;}
        table tr td .sortable-handle {position:relative;margin:0 auto;width:2.5rem;height:2.5rem;cursor:move;}
        table tr td .sortable-line {position:absolute;left:.75rem;right:.75rem;border-style:solid;border-color:#999;border-width:0 0 1px 0;top:.95rem;}
        table tr td .sortable-line:last-child {border-width:1px 0 0 0;top:auto;bottom:.95rem;}
    </style>
@endpush

@section('content')
<div class="container pd40">
    <div class="pd20" style="border:1px solid black;">               
        <ul>
            <li class="height-pd10">
                <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"><label for="show">노출함</label></span>
                    </div>
                    <div class="display-inline-block pd5">
                        <span class="chk"><input type="checkbox" id="hide"><label for="hide">노출안함</label></span>
                    </div>
                </div>
            </li>
            <li class="height-pd10 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-pd10 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="chk"><input type="checkbox" id="1"><label for="1">노출함</label></span>
                    </div>
                    <div class="display-inline-block pd5">
                        <span class="chk"><input type="checkbox" id="2"><label for="2">노출안함</label></span>
                    </div>
                </div>
            </li>
            <li class="height-pd5 ">
                <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-pd5 ">
                <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-pd10">
                <div class="display-inline-block" style="width:10%;">
                    <strong>프로그램</strong>
                </div>
                <div class="display-inline-block" style="width:70%;">
                    <input type="text" placeholder="유학프로그램 검색">
                </div>
                <div class="display-inline-block" style="width:10%;">
                    <a class="button mix">검색하기</a>
                </div>
            </li>
        </ul>
    </div>

    <div class="height-pd40">
        <div>
            <div class="display-inline-block" style="width:10%;">총 100개 상품</div>
            <div class="display-inline-block" style="width:70%;"></div>
            <div class="display-inline-block" style="width:17%;text-align:right;">
                <select>
                    <option>조회순</option>
                    <option>상담순</option>
                    <option>수속순</option>
                </select>
            </div>
        </div>
        <style>
            table {font-size:13px;}
            table thead,tbody {text-align:center;}
            table tr{border-top:1px solid black;};
        </style>
        <div>
            <a class="button">업데이트</a>
            <table id="table-edit">
                <colgroup>
                        <col width="5%">
                        <col width="5%">
                        <col width="10%">
                        <col width="10%">
                        <col width="10%">
                        <col width="10%">
                        <col width="10%">
                        <col width="10%">
                        <col width="10%">
                        <col width="10%">
                        <col width="10%">
                </colgroup>
                <thead>
                    <tr>
                        <th class="border-tr">정렬순서</th>
                        <th class="border-tr">노출여부</th>
                        <th class="border-tr">국가</th>
                        <th class="border-tr">타입</th>
                        <th class="border-tr">테마</th>
                        <th class="border-tr">프로그램 명</th>
                        <th class="border-tr">프로그램 ID</th>
                        <th class="border-tr">썸네일 이미지</th>
                        <th class="border-tr">조회</th>
                        <th class="border-tr">인쿼리</th>
                        <th class="border-tr">관리</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <div class="sortable-handle">
                                <span class="sortable-line"></span>
                                <span class="sortable-line"></span>
                            </div>
                        </td>
                        <td>
                            <select>
                                <option>노출</option>
                                <option>숨김</option>
                            </select>
                        </td>
                        <td>미국, 영국, 캐나다, 호주, 뉴질랜드</td>
                        <td>어학연수</td>
                        <td>영어문화, 직장인, 시니어</td>
                        <td>단기어학연수 종합패키지</td>
                        <td>short-term-package</td>
                        <td>썸네일 이미지</td>
                        <td>5,000</td>
                        <td>100</td>
                        <td>
                            <a class="button">수정</a>
                            <a class="button">삭제</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="sortable-handle">
                                <span class="sortable-line"></span>
                                <span class="sortable-line"></span>
                            </div>
                        </td>
                        <td>
                            <select>
                                <option>노출</option>
                                <option>숨김</option>
                            </select>
                        </td>
                        <td>미국, 영국, 캐나다, 호주, 뉴질랜드</td>
                        <td>어학연수</td>
                        <td>영어문화, 직장인, 시니어</td>
                        <td>단기어학연수 종합패키지</td>
                        <td>short-term-package</td>
                        <td>썸네일 이미지</td>
                        <td>5,000</td>
                        <td>100</td>
                        <td>
                            <a class="button">수정</a>
                            <a class="button">삭제</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="sortable-handle">
                                <span class="sortable-line"></span>
                                <span class="sortable-line"></span>
                            </div>
                        </td>
                        <td>
                            <select>
                                <option>노출</option>
                                <option>숨김</option>
                            </select>
                        </td>
                        <td>미국, 영국, 캐나다, 호주, 뉴질랜드</td>
                        <td>어학연수</td>
                        <td>영어문화, 직장인, 시니어</td>
                        <td>단기어학연수 종합패키지</td>
                        <td>short-term-package</td>
                        <td>썸네일 이미지</td>
                        <td>5,000</td>
                        <td>100</td>
                        <td>
                            <a class="button">수정</a>
                            <a class="button">삭제</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="pagination">
        << < 1 2 3 4 5  6 7 8 9 10 > >>
    </div>   
</div>

<script>
        var el = $('#table-edit tbody');

        // Sortable 설정
        var sortable = Sortable.create(el[0], {
            animation: 100,
            handle: '.sortable-handle',
            onStart: function() {
                el.addClass('dragging');
            },
            onEnd: function(newIndex, oldIndex) {
                el.removeClass('dragging');
            },
            onUpdate: function() {
                $('.area-program').addClass('updatable');
            },
        });
</script>
@endsection