@extends('layouts.default')

@section('content')
    <div class="container">
        <style>
            .layout-sample {margin-top:2rem;}
            .layout-sample ~ .layout-sample {margin-top:4rem;}
            .layout-sample h1 {font-size:1.5rem;margin-bottom:1rem;}
            .layout-sample h2 {font-size:1.2rem;margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid #333;}
            .layout-sample h3 {font-size:1.1rem;margin:.5rem 0;}
            .layout-sample h3:before {content:'# ';}
            .layout-sample h4 {font-size:1rem;margin:.5rem 0;}
            .layout-sample h4:before {content:'## ';}
            .layout-sample h5 {font-size:1rem;margin:.5rem 0;}
            .layout-sample h5:before {content:'### ';}
        </style>

        <!--  기본형 -->
        <div class="flex-wrap">
            <div>
                <a href="{{ route('sample.layout') }}" class="button" rel="nofollow">레이아웃샘플</a>
                <a href="{{ route('sample.board.list') }}" class="button" rel="nofollow">게시판리스트샘플</a>
                <a href="{{ route('sample.board.show') }}" class="button" rel="nofollow">게시판상세샘플</a>
                <a href="#popup-sample1" class="button popup-open" rel="nofollow">텍스트 팝업보기</a>
                <a href="#popup-sample2" class="button popup-open" rel="nofollow">슬라이드 팝업보기</a>
            </div>

            <div class="layout-sample">
                <h2>* sp-ui-kit </h2>
                <h3>pc-mobile 공통 (기본/color/white)</h3>
                <p style="background:#ddd;">
                    <i class="ui-kit-arr">펼치기</i>
                    <i class="ui-kit-arr color">펼치기</i>
                    <i class="ui-kit-arr white">펼치기</i>
                    <i class="ui-kit-x">닫기</i>
                    <i class="ui-kit-x color">닫기</i>
                    <i class="ui-kit-x white">닫기</i>
                    <i class="ui-kit-filter">필터</i>
                    <i class="ui-kit-filter color">필터</i>
                    <i class="ui-kit-filter white">필터</i>
                    <i class="ui-kit-plus-l">더보기</i>
                    <i class="ui-kit-plus-l color">더보기</i>
                    <i class="ui-kit-plus-l white">더보기</i>
                    <i class="ui-kit-plus">닫기</i>
                    <i class="ui-kit-plus color">닫기</i>
                    <i class="ui-kit-plus white">닫기</i>
                    <i class="ui-kit-check">체크</i>
                    <i class="ui-kit-check color">체크</i>
                    <i class="ui-kit-check white">체크</i>
                    <i class="ui-layout-close">팝업닫기</i>
                    <i class="ui-layout-close color">팝업닫기</i>
                    <i class="ui-layout-close white">팝업닫기</i>
                    <i class="ui-layout-search">검색</i>
                    <i class="ui-layout-search color">검색</i>
                </p>
                <p>
                    <i class="ui-kit-star5">별점5/5</i>
                    <i class="ui-kit-star4">별점4/5</i>
                    <i class="ui-kit-star3">별점3/5</i>
                    <i class="ui-kit-star2">별점2/5</i>
                    <i class="ui-kit-star1">별점1/5</i>
                </p>
                <p>
                    <i class="ui-flag-ca"><span class="txt">캐나다</span></i>
                    <i class="ui-flag-au"><span class="txt">호주</span></i>
                    <i class="ui-flag-uk"><span class="txt">영국</span></i>
                    <i class="ui-flag-nz"><span class="txt">뉴질랜드</span></i>
                    <i class="ui-flag-ie"><span class="txt">아일랜드</span></i>

                    <i class="ui-flag-ca"><span class="txt hidden">캐나다</span></i>
                    <i class="ui-flag-au"><span class="txt hidden">호주</span></i>
                    <i class="ui-flag-uk"><span class="txt hidden">영국</span></i>
                    <i class="ui-flag-nz"><span class="txt hidden">뉴질랜드</span></i>
                    <i class="ui-flag-ie"><span class="txt hidden">아일랜드</span></i>
                </p>
                <h3>수정 및 변형</h3>
                <p>
                    <i class="ui-kit-arr" style="transform:rotate(180deg);">닫기</i>
                    <i class="ui-kit-arr" style="transform:rotate(90deg);opacity:.5;">이전</i>
                    <i class="ui-kit-arr" style="transform:rotate(-90deg);opacity:.5;">다음</i>
                </p>
            </div>

            <div class="layout-sample">
                <h2>* 폰트  및 기본단위 </h2>
                <h3>noto / <span class="font-size"></span> = 1rem</h3>
                <p style="font-weight:100;">font-weight:100, <span class="font-size"></span></p>
                <p style="font-weight:300;">font-weight:300, <span class="font-size"></span></p>
                <p style="font-weight:400;">font-weight:400, <span class="font-size"></span></p>
                <p style="font-weight:600;">font-weight:600, <span class="font-size"></span></p>
                <p style="font-weight:800;">font-weight:800, <span class="font-size"></span></p>

                <script>
                    function writeSize () {
                        var size = $( "body" ).css( "font-size" );
                        $( ".font-size" ).html( "body{font-size:" + size + "}" );
                    }
                    $(window).resize(function() {
                        writeSize();
                    });
                    writeSize();
                </script>
            </div>

            <div class="layout-sample">
                <h2>* 인풋 / select / textarea </h2>
                <div class="column">
                    <div class="col2">
                        <h3>input</h3>
                        <p>
                            <input type="text" placeholder="인풋타입 text">
                            <input type="password" placeholder="인풋타입 password">
                            <input type="search" placeholder="인풋타입 search">
                            <input type="tel" placeholder="인풋타입 tel">
                            <input type="email" placeholder="인풋타입 email">
                            <input type="address" placeholder="인풋타입 address">
                            <span class="date-picker">
                                <input type="search" name="preferred_date" value="" readonly="">
                                <button type="button" class="cancel">x</button>
                            </span>
                            <!--<input type="text" class="datepicker" placeholder="날짜선택 text.datepicker">-->
                        </p>
                    </div>
                    <div class="col2">
                        <h3>select</h3>
                        <p>
                            <select>
                                <option value="">선택하세요</option>
                                <option value="1">셀렉트 옵션1</option>
                                <option value="2">셀렉트 옵션2</option>
                                <option value="3">셀렉트 옵션3</option>
                            </select>
                        </p>
                        <p>
                            select value 값이 있을 때만 텍스트색상 변환
                        </p>
                    </div>
                </div>
                <div class="input-wrap column">
                    <h3> .line-style</h3>
                    <div class="input col2">
                        <span class="line-style"><input type="text" placeholder="인풋타입텍스트"></span>
                    </div>
                    <div class="input col2">
                        <span class="line-style">
                            <select>
                                <option value="">옵션을 선택하세요</option>
                                <option value="1">옵션1</option>
                                <option value="2">옵션2</option>
                                <option value="3">옵션3</option>
                            </select>
                        </span>
                    </div>
                </div>
                <h3> 구조 및 활용</h3>
                <div>
                    <h4>.input-wrap > .input > input/select (width:100%)</h4>
                    <div class="input-wrap">
                        <p class="iw-tit">.input-wrap > .iw-tit</p>
                        <div class="input column">
                            <div class="col2">
                                <p class="tit"><label>.input > .tit > label</label></p>
                                <input type="text" placeholder=".input > .tit > label + input">
                            </div>
                            <div class="col2">
                                <p class="tit"><label>.input > .tit > label</label></p>
                                <select>
                                    <option value="">.input > .tit > label + select</option>
                                    <option value="1">셀렉트 옵션1</option>
                                    <option value="2">셀렉트 옵션2</option>
                                    <option value="3">셀렉트 옵션3</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <h3>textarea</h3>
                <textarea placeholder="입력창"></textarea>
            </div>

            <div class="layout-sample">
                <h2>* 체크박스/라디오</h2>
                <p class="chk-wrap">
                    <span class="chk"><input type="checkbox" id="test1"><label for="test1">체크박스</label></span>
                    <span class="rdo"><input type="radio" id="test2"><label for="test2">라디오</label></span>
                    <span class="chk-custom"><input type="checkbox" id="test3"><label for="test3">.chk-custom</label></span>
                    <span class="chk-custom"><input type="radio" id="test4"><label for="test4">라디오공통사용</label></span>
                </p>
            </div>
            <div class="layout-sample">
                <h2>* 버튼색상확인</h2>
                <input type="button" class="button" value="인풋타입버튼">
                <button class="button pale">버튼태그로감싼버튼.pale</button>
                <a href="#" class="button">a태그버튼</a>
                <a href="#" class="button color">a태그버튼.color</a>
                <a href="#" class="button mix">a태그버튼.mix</a>
                <a href="#" class="button point">a태그버튼.point</a>
                <button class="button pale">더보기 + </button>
            </div>
        </div>
    </div>

    <!-- 팝업 기본 : 클릭시 바디 fixed, 내부 세로 스크롤 -->
    <div class="area-layer-popup" id="popup-sample1" style="">
        <div class="popup-container">
            <div class="popup-title">
                <p class="heading-text">타이틀</p>
            </div>
            <div class="popup-content">
                팝업컨텐츠영역
            </div>
            <div class="popup-close-x">
                <i class="ui-layout-close">팝업닫기</i>
            </div>
        </div>
    </div>

    <!-- 팝업 슬라이더 : 가로 최대폭 고정, 세로 스크롤 + 바디픽스 없음 -->
    <div class="area-layer-popup" id="popup-sample2" style="display:none;">
        <div class="popup-slider">
            <div class="popup-content">
                <ul class="slider-pop-content">
                    <li><img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/tmp/pop-sample1.png" alt=""></li>
                    <li><img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/tmp/pop-sample1.png" alt=""></li>
                    <li><img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/tmp/pop-sample1.png" alt=""></li>
                </ul>
            </div>

            <div class="popup-condition-wrap"> <!-- [D]: 버튼 갯수 추가/삭제 가능 -->
                <button class="popup-slider-auto"><span class="hidden">슬라이더 컨트롤 버튼</span></button><!-- [D]: 스크롤 컨트롤 버튼 클릭시 슬라이더 플레이 컨트롤 해주세요. / .popup-slider-auto.stop일 경우 아이콘 바뀜 -->
                <button class="popup-close-allday">오늘 하루 닫기</button>
                <button class="popup-close">닫기</button>
            </div>
        </div>
    </div>

    <!-- 상품 리스트 기본 -->
    <div class="flex-wrap area-programs-wrap">
        <div class="area-pg-list col4">
            <article class="area-pg-item">
                <a href="#">
                    <div class="pg-item-thumb">
                        <div class="bg"><img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/banner/tmp/program-thumb-short.png" alt=""></div>
                        <div class="title">
                            <p>
                                <span>단기어학연수</span><br>
                                <span class="color">종합패키지</span>
                            </p>
                        </div>
                        <div class="cate">
                            <span class="lang">어학연수</span>
                        </div>
                    </div>
                    <div class="pg-item-cont">
                        <div class="pg-text">
                            1~2개월 단기연수
                        </div>
                        <div class="tag">
                            <span>미국</span>
                            <span>캐나다</span>
                            <span>영국</span>
                            <span>호주</span>
                            <span>뉴질랜드</span>
                            <span>미국</span>
                            <span>캐나다</span>
                        </div>
                    </div>
                </a>
            </article>
            <article class="area-pg-item">
                <a href="#">
                    <div class="pg-item-thumb">
                        <div class="bg"><img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/banner/tmp/program-thumb-short.png" alt=""></div>
                        <div class="title">
                            <p>
                                <span>단기어학연수</span><br>
                                <span class="color">종합패키지</span>
                            </p>
                        </div>
                        <div class="cate">
                            <span class="univ">해외대학</span>
                        </div>
                    </div>
                    <div class="pg-item-cont">
                        <div class="pg-text">
                            1~2개월 단기연수 준비생을 위한 종합패키지1~2개월 단기연수 준비생을 위한 종합패키지
                        </div>
                        <div class="tag">
                            <span>미국</span>
                            <span>캐나다</span>
                            <span>영국</span>
                            <span>호주</span>
                            <span>뉴질랜드</span>
                            <span>미국</span>
                            <span>캐나다</span>
                        </div>
                    </div>
                </a>
            </article>
            <article class="area-pg-item">
                <a href="#">
                    <div class="pg-item-thumb">
                        <div class="bg"><img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/banner/tmp/program-thumb-short.png" alt=""></div>
                        <div class="title">
                            <p>
                                <span>단기어학연수</span><br>
                                <span class="color">종합패키지</span>
                            </p>
                        </div>
                        <div class="cate">
                            <span class="junior">조기유학</span>
                        </div>
                    </div>
                    <div class="pg-item-cont">
                        <div class="pg-text">
                            1~2개월 단기연수 준비생을 위한 종합패키지
                        </div>
                        <div class="tag">
                            <span>미국</span>
                            <span>캐나다</span>
                            <span>영국</span>
                            <span>호주</span>
                            <span>뉴질랜드</span>
                        </div>
                    </div>
                </a>
            </article>
            <article class="area-pg-item">
                <a href="#">
                    <div class="pg-item-thumb">
                        <div class="bg"><img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/banner/tmp/program-thumb-short.png" alt=""></div>
                        <div class="title">
                            <p>
                                <span>단기어학연수</span><br>
                                <span class="color">종합패키지</span>
                            </p>
                        </div>
                        <div class="cate">
                            <span class="working">워홀&middot;인턴십</span>
                        </div>
                    </div>
                    <div class="pg-item-cont">
                        <div class="pg-text">
                            1~2개월 단기연수 준비생을 위한 종합패키지
                        </div>
                        <div class="tag">
                            <span>미국</span>
                            <span>캐나다</span>
                            <span>영국</span>
                            <span>호주</span>
                            <span>뉴질랜드</span>
                        </div>
                    </div>
                </a>
            </article>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function(){
            var $datepicker = $('.layout-container .date-picker input[name="preferred_date"]').datepicker({
                autoClose: true,
                minDate: new Date(),
                onRenderCell: function(date, cellType) {
                    if (cellType == 'day') {
                        return {
                            disabled: date.getDay() == 0 || date.getDay() == 6
                        };
                    }
                },
                onSelect: function(formattedDate, date, inst) {
                    var $el = inst.$el;
                    if ($el.val()) {
                        $el.closest('.date-picker').addClass('exist');
                    } else {
                        $el.closest('.date-picker').removeClass('exist');
                    }
                }
            });

            $('.layout-container .date-picker button.cancel').click(function() {
                $datepicker.data('datepicker').clear();
                $datepicker.closest('.date-picker').removeClass('exist');
            });
        });
    </script>

@endsection