@extends('programs.manager.default')

@push('head')
    <script type="text/javascript" src="/assets/sortable/js/Sortable.min.js"></script>
@endpush

@section('content')
    <div class="container">
        <div class="area-search">
            <form method="GET" action="{{ route('program-manager.index') }}">

                <div class="row">
                    <div class="col-12 input-group">
                        <label class="label">Brand</label>
                        <div class="chk-wrap">
                                                        @foreach ($brands as $val)
                                <span class="rdo">
                                    <input type="radio" id="brand-{{ $val }}" name="brand" value="{{ $val }}" @checked($val, $brand)>
                                    <label for="brand-{{ $val }}">{{ $val }}</label>
                                </span>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 input-group">
                        <label class="label">공개여부</label>
                        <div class="chk-wrap">
                            <span class="chk">
                                <input type="checkbox" id="enable-Y" name="enable[]" value="Y" @checked('Y', $enable)>
                                <label for="enable-Y">공개</label>
                            </span>
                            <span class="chk">
                                <input type="checkbox" id="enable-N" name="enable[]" value="N" @checked('N', $enable)>
                                <label for="enable-N">비공개</label>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 input-group">
                        <label class="label">국가</label>
                        <div class="chk-wrap">
                            @foreach ($countries as $val)
                                <span class="chk">
                                    <input type="checkbox" id="country-{{ $val['id'] }}" name="country[]" value="{{ $val['id'] }}" @checked($val['active'])>
                                    <label for="country-{{ $val['id'] }}">{{ $val['name'] }}</label>
                                </span>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 input-group">
                        <label class="label">과정</label>
                        <div class="chk-wrap">
                            @foreach ($types as $val)
                                <span class="chk type" data-brand="{{ $val['brand'] }}">
                                    <input type="checkbox" id="type-{{ $val['id'] }}" name="type[]" value="{{ $val['id'] }}" data-theme-id="{{ implode(',', array_column($val['themes'], 'id')) }}" @checked($val['active'])>
                                    <label for="type-{{ $val['id'] }}">{{ $val['name'] }}</label>
                                </span>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 input-group">
                        <label class="label">테마</label>
                        <div class="chk-wrap themes {{ $types->where('active')->count() ? '' : 'disable' }}">
                            <span class="desc">과정을 선택해 주세요.</span>
                            @foreach ($themes as $theme)
                                <span class="chk @display($theme['enable'])">
                                    <input type="checkbox" id="theme-{{ $theme['id'] }}" name="theme[]" value="{{ $theme['id'] }}" @checked($theme['active'])>
                                    <label for="theme-{{ $theme['id'] }}">{{ $theme['name'] }}</label>
                                </span>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-6 input-group">
                        <label class="label">프로그램명</label>
                        <input type="text" placeholder="프로그램명" name="title" value="{{ $title }}"/>
                    </div>
                </div>
                <div class="row buttons">
                    <div class="col-12">
                        <button type="reset" class="button pale">초기화</button>
                        <button type="submit" class="button mix">검색</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="area-programs">
            <div class="program-ctrl">
                <span>총 <em class="total-count">{{ number_format($programs['count']) }}</em>건의 프로그램</span>
                <button type="button" class="button color update" onclick="updatePrograms()">업데이트</button>
                <a href="{{ route('program-manager.create') }}" class="button mix">등록</a>
            </div>
            <form method="POST" action="{{ route('program-manager.updateAll') }}">
                @method('PATCH')
                <table>
                    <colgroup>
                        <col/>
                        <col/>
                        <col/>
                        <col width="24%"/>
                        <col width="24%"/>
                        <col width="28%"/>
                        <col width="24%"/>
                        <col/>
                        <col/>
                        <col/>
                        <col/>
                    </colgroup>
                    <thead>
                        <tr>
                            <th style="width:40px">정렬</th>
                            <th style="width:40px">공개</th>
                            <th style="width:140px">과정</th>
                            <th>국가</th>
                            <th>테마</th>
                            <th>프로그램명</th>
                            <th>프로그램 ID</th>
                            <th style="width:105px">이미지</th>
                            <th style="width:56px">조회수</th>
                            <th style="width:56px">인쿼리</th>
                            <th style="width:40px">관리</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($programs['resources'] as $program)
                            <tr>
                                <td>
                                    <input type="hidden" name="lineup[{{ $program['id'] }}]" value="{{ $program['lineup'] }}"/>
                                    <div class="sortable-handle">
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                    </div>
                                </td>
                                <td>
                                    <span class="chk">
                                        <input type="hidden" name="enable[{{ $program['id'] }}]" value="{{ $program['enable'] }}"/>
                                        <input type="checkbox" id="program-enable-{{ $program['id'] }}" class="enable" @checked('Y', $program['enable'])>
                                        <label for="program-enable-{{ $program['id'] }}"></label>
                                    </span>
                                </td>
                                <td>
                                    <div class="ellipsis">{{ $program['type']['name'] }}</div>
                                </td>
                                <td title="{{ $program['country_names'] }}">
                                    <div class="ellipsis-box">{{ $program['country_names'] }}</div>
                                </td>
                                <td title="{{ $program['theme_names'] }}">
                                    <div class="ellipsis-box">{{ $program['theme_names'] }}</div>
                                </td>
                                <td class="linkable">
                                    @if ($program['brand'] == '영어캠프')
                                    <a href="{{ route('camp.programs.show', $program['source']) }}" target="_blank" title="{{ $program['title'] }} 바로가기"><div class="ellipsis-box">{{ $program['title'] }}</div></a>
                                    @else
                                    <a href="{{ route('programs.show', $program['source']) }}" target="_blank" title="{{ $program['title'] }} 바로가기"><div class="ellipsis-box">{{ $program['title'] }}</div></a>
                                    @endif
                                </td>
                                <td class="linkable">
                                    <div class="ellipsis-box">{{ $program['source'] }}</div>
                                </td>
                                <td class="linkable">
                                    <div class="image">
                                        @if ($program['bg_image'])
                                            <img src="{{ $program['bg_image'] }}"/>
                                        @endif
                                    </div>
                                </td>
                                <td>{{ number_format($program['read_cnt']) }}</td>
                                <td>{{ number_format($program['counsel_cnt']) }}</td>
                                <td>
                                    <a class="button text small edit" href="{{ route('program-manager.edit', array_merge([$program['source']], request()->all())) }}" title="{{ $program['title'] }} 수정하기">수정</a>
                                    <button type="button" class="button text small delete" onclick="deleteProgram(this)" data-href="{{ route('program-manager.destroy', $program['source']) }}" title="{{ $program['title'] }} 삭제하기">삭제</button>
                                </td>
                            </tr>
                        @empty
                            <tr class="empty">
                                <td colspan="11">검색조건과 일치하는 프로그램이 없습니다.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </form>
        </div>
    </div>

    <script type="text/javascript">
        $('.area-search form').on('reset', function() {
            var form = $(this);

            form.find('input').prop('checked', false);
            form.find('input[type="text"]').val('');

            return false;
        });

        $('.area-programs table input.enable').change(function() {
            $('.area-programs').addClass('updatable');

            $(this).siblings('input[name^="enable"]').val($(this).is(':checked') ? 'Y' : 'N');
        });

        // Sortable 설정
        var table = $('.area-programs table tbody');
        Sortable.create(table[0], {
            animation: 150,
            handle: '.sortable-handle',
            onStart: function() {
                table.addClass('dragging');
            },
            onEnd: function(evt) {
                var item = table.find('tr:eq(' + evt.newIndex + ')').addClass('hold-hover');
                setTimeout(function() {
                    table.removeClass('dragging');
                    item.removeClass('hold-hover');
                }, 50);
            },
            onUpdate: function(evt) {
                $('.area-programs').addClass('updatable');

                // lineup change
                if (evt.newIndex > evt.oldIndex) {
                    var val, tmp = table.find('tr:eq(' + evt.newIndex + ') input[name^="lineup"]').val();
                    for (var i = evt.newIndex; i > evt.oldIndex; i--) {
                        val = table.find('tr:eq(' + (i - 1) + ') input[name^="lineup"]').val();
                        table.find('tr:eq(' + i + ') input[name^="lineup"]').val(val);
                    }
                    table.find('tr:eq(' + evt.oldIndex + ') input[name^="lineup"]').val(tmp);
                } else {
                    var val, tmp = table.find('tr:eq(' + evt.newIndex + ') input[name^="lineup"]').val();
                    for (var i = evt.newIndex; i < evt.oldIndex; i++) {

                        val = table.find('tr:eq(' + (i + 1) + ') input[name^="lineup"]').val();
                        table.find('tr:eq(' + i + ') input[name^="lineup"]').val(val);
                    }
                    table.find('tr:eq(' + evt.oldIndex + ') input[name^="lineup"]').val(tmp);
                }
            },
        });

        $(function() {
            $('.area-search input[name="title"]').focus();
        });

        function updatePrograms() {

            var $form = $('.area-programs form');

            $.ui_ajax({
                ajax: {
                    method: $form.attr('method'),
                    url: $form.attr('action'),
                    data: $form.serialize()
                },
                dialog: {
                    type: 'success',
                    confirm: true,
                    text_process: '업데이트 중입니다.<br/>잠시만 기다려 주세요.',
                    text_done: '업데이트가 완료되었습니다.',
                    text_fail: '업데이트에 실패했습니다.',
                    text_confirm: '업데이트 하시겠습니까?'
                }
            });
        }

        function deleteProgram(obj)
        {
            var result = false;

            $.ui_ajax({
                ajax: {
                    method: 'DELETE',
                    url: $(obj).data('href'),
                    done: function() {
                        result = true;
                    }
                },
                dialog: {
                    type: 'error',
                    confirm: true,
                    text_process: '삭제 중입니다.<br/>잠시만 기다려 주세요.',
                    text_done: '삭제가 완료되었습니다.',
                    text_fail: '삭제에 실패했습니다.',
                    text_confirm: '삭제 하시겠습니까?',
                    close: function() {
                        if (result) {
                            $(obj).closest('tr').remove();

                            var $count = $('.area-programs .total-count');
                            var count = parseInt($count.html().replace(/\,/g, ''));
                            $count.html((count - 1).toLocaleString());
                        }
                    }
                }
            });
        }

        function setType(brand){
            $('span.type').each(function(){
                var b = $(this).attr('data-brand');
                if (b != brand) {
                    $(this).hide();
                    $('.themes .chk').each(function(){
                        if (!$(this).hasClass('d-none')) $(this).addClass('d-none');
                    });
                    $(this).find('input').prop('checked', false);
                } else {
                    $(this).show();
                }
            });
        }

        $(document).ready(function(){
            setType('{{ $brand }}');

            $('input[name=brand]').each(function(){
                $(this).click(function(){
                    setType($(this).val());
                });
            });
        });
    </script>
@endsection