@extends('programs.manager.default')

@section('content')
    <div class="container">
        <div class="area-search">
            <form method="GET" action="{{ route('program-manager.analytics.index') }}">
                <input type="hidden" name="sort" value="{{ $sort }}"/>
                <input type="hidden" name="date_type" value="{{ $date['type'] }}"/>
                <input type="hidden" name="date_start" value="{{ $date['start']->format('Y-m-d') }}"/>
                <input type="hidden" name="date_end" value="{{ $date['end']->format('Y-m-d') }}"/>
                <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">
                                    <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>
            </form>
        </div>
        <div class="area-analytics">
            <div class="row">
                <div class="col-12">
                    <form>
                        <div class="row buttons">
                            <div class="col sort-buttons">
                                <button type="button" data-name="sort" data-value="view_logs_cnt" class="button @active($sort, 'view_logs_cnt')">조회순</button>
                                <button type="button" data-name="sort" data-value="counsel_logs_cnt" class="button @active($sort, 'counsel_logs_cnt')">인쿼리순</button>
                            </div>
                            <div class="col date-buttons">
                                <div class="input-group">
                                    <input type="text" class="date" data-range="true" data-multiple-dates-separator="   ~   " readonly>
                                </div>
                                <div class="input-group">
                                    <button type="button" data-name="date_type" data-value="1week" class="button @active($date['type'], '1week')">1주</button>
                                    <button type="button" data-name="date_type" data-value="1month" class="button @active($date['type'], '1month')">1달</button>
                                    <button type="button" data-name="date_type" data-value="custom" class="button @active($date['type'], 'custom')">기간 지정</button>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="programs">
                        @include('programs.manager.analytics.programs', [
                            'programs' => $programs,
                        ])
                    </div>
                </div>
            </div>  
        </div>
    </div>

    <script type="text/javascript">

        var dates = {!! json_encode($dates->keyBy('type')) !!};
        var $datepicker = $('.area-analytics form input.date[data-range="true"]');

        /**
         * 정렬순서 및 기간조회 버튼을 활성화합니다.
         */
        function setButtonToActive(button) {

            if (!(button instanceof jQuery)) {
                button = $(button);
            }

            var name = button.data('name');
            var value = button.data('value');

            $('.area-search form input[name="' + name + '"]').val(value);
            button.addClass('active').siblings('.button').removeClass('active');
        }

        $('.area-search form').submit(function() {

            var $form = $(this);

            $('.area-analytics .programs').addClass('loading');

            // URL Replace
            var url = $form.attr('action') + '?' + $form.serialize();
            history.replaceState(null, null, url);

            if ($form.data('ajax')) {
                $form.data('ajax').abort();
            }

            var ajax = $.ajax({
                method: $form.attr('method'),
                url: $form.attr('action'),
                data: $form.serialize(),
                dataType: 'json',
                cache: false,
                headers: {
                    'Response-Type': 'json',
                }
            }).done(function(response) {
                $('.area-analytics .programs').removeClass('loading');
                $('.area-analytics .programs').html(response.data.view);
            }).fail(function(jqXHR, textStatus, errorThrown) {
                if (textStatus !== 'abort') {
                    $('.area-analytics .programs').removeClass('loading');
                    alert('프로그램 로딩에 실패했습니다.');
                }
            });
            $form.data('ajax', ajax);

            return false;
        });

        /**
         * datepicker init
         */
        $datepicker.datepicker({
            toggleSelected: false,
            onShow: function(inst, animationCompleted) {
                if (!animationCompleted) {
                    var $button = $('.area-analytics form .button[data-name="date_type"][data-value="custom"]');
                    setButtonToActive($button[0]);
                }
            },
            onSelect: function(formattedDate, date, inst) {
                if ($datepicker.data('datepicker-initialized')) {
                    if (date.length > 1) {
                        inst.hide();
                        $('.area-search form input[name="date_start"]').val(date[0].format('yyyy-mm-dd'));
                        $('.area-search form input[name="date_end"]').val(date[1].format('yyyy-mm-dd'));
                        $('.area-search form').submit();
                    } else if (date.length > 0) {
                        $('.area-search form input[name="date_start"]').val(date[0].format('yyyy-mm-dd'));
                        $('.area-search form input[name="date_end"]').val('');
                    }
                }
            }
        });

        /**
         * datepicker 초기 설정
         */
        $datepicker.data('datepicker').selectDate([
            new Date($('.area-search form input[name="date_start"]').val()),
            new Date($('.area-search form input[name="date_end"]').val())
        ]);
        $datepicker.data('datepicker-initialized', true);


        // 정렬순서 및 기간 설정 버튼 이벤트
        $('.area-analytics form .button').click(function() {

            setButtonToActive(this);

            var name = $(this).data('name');
            var value = $(this).data('value');

            if (name === 'date_type') {
                if (value === 'custom') {
                    $datepicker.focus().data('datepicker').show();
                } else {
                    $datepicker.data('datepicker').selectDate([new Date(dates[value].start), new Date(dates[value].end)]);
                }
            } else {
                $('.area-search form').submit();
            }

            return false;
        });

        $(function() {

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

            $('.area-search input[name="title"]').on('input', function() {
                $('.area-search form').submit();
            });

            $('.area-search input[type="checkbox"]').change(function() {
                $('.area-search form').submit();
            });
        });
    </script>
@endsection