@php
    /**
     * 기본정보
     */

    // 학교목록
    $schools = $info->relSchool;
@endphp

@include('includes.require.sweetalert')
@include('includes.require.ui-ajax')

@push('css')
    <link href="/assets/plugins/dropzone/dist/min/dropzone.min.css" rel="stylesheet"/>
    <style type="text/css">
        #table-scroll{height:296px;}
        .table-scroll{height:1px;overflow-y:auto;}
        .table-scroll tr:first-child td,
        .table-scroll tr.no-result + tr td{border-top:0 !important;}
        .table-scroll tr{display:none;}
        .table-scroll tr:last-child,
        .table-scroll tr:not(.no-result){display:table-row;}
        .table-layout-fixed{table-layout:fixed;}

        .logo-box{min-height:238px;}
        .logo-box .dz-message{margin:0 !important;}
        .logo-box .dz-message .message{display:table !important;width:100%;}
        .logo-box .dz-message .cell{display:table-cell;width:100%;height:194px;vertical-align:middle;}
        .logo-box .dz-preview{position:relative !important;display:block !important;margin:0 !important;;text-align:center;}
        .logo-box .dz-preview .dz-image{width:100% !important;height:194px !important;border-radius:14px !important;}
        .logo-box .dz-preview .dz-image img{width:100%;height:100%;object-fit:contain;transform:none !important;-webkit-transform:none !important;filter:none !important;-webkit-filter:none !important;}
        .logo-box .dz-preview .dz-image .btn-cancel{position:absolute;top:0;right:0;z-index:500;}
        .logo-box .dz-preview .dz-image .btn-cancel i{cursor:pointer;}
        .logo-box .dz-preview .dz-progress .dz-upload{background:#a5dc86;}
        .logo-box .dz-preview .message{position:absolute;color:#fff;top:50%;left:2%;width:96%;padding:10px;transform:translate(0,-50%);z-index:10;}
        .logo-box .dz-preview.dz-error .message{background:rgba(255,0,0,.6);}
    </style>
@endpush
@push('scripts')
    <script src="/assets/plugins/blueimp-file-upload/js/jquery.fileupload.js"></script>
    <script src="/assets/plugins/dropzone/dist/dropzone.js"></script>
    <script type="text/javascript">
        Dropzone.autoDiscover = false;
        var dropzone = new Dropzone('#logo-file', {
            url:'{{ route('school.infos.logo.store') }}',
            paramName:'logo_file',
            params:{_token:'{{ csrf_token() }}'},
            thumbnailWidth:null,
            thumbnailHeight:194,
            previewTemplate:$('#logo-file .dz-preview-template').html(),
            maxFiles:1,
            init:function() {
                @if ($info->logo_url)
                    var file = {name:'{{ $info->logo_file_name }}'};
                    file.accepted = true;
                    this.files.push(file);
                    this.emit('addedfile', file);
                    this.emit('thumbnail', file, '{{ $info->logo_url }}');
                    this.emit('complete', file);
                @endif
            }
        }).on('maxfilesexceeded', function(file) {
            this.removeAllFiles(true);
            this.addFile(file);
        }).on('uploadprogress', function(file, percent) {
            $(file.previewElement).find('.dz-progress .dz-upload').css('width', percent + '%');
        }).on('error', function(file, message, xhr) {
            if (xhr) {
                var response = JSON.parse(xhr.responseText);
                $(file.previewElement).find('.message').html(response.message);
            }
        }).on('success', function(file, response) {
            if (response) {
                $('#logo-file input[name="logo_url"]').val(response.url);
            }
        }).on('removedfile', function(file) {
            $('#logo-file input[name="logo_url"]').val('');
        });

        $(function() {
            $(document).bind({
                'school-add':function(e, id, data) {
                    schoolAdd(id, data);
                },
                'school-delete':function(e, id) {
                    schoolDelete(id);
                }
            });
        });

        function schoolAdd(id, data) {
            if ($('#school-list input[name="school_uid[]"][value="' + id + '"]').length) {
                return;
            }

            var obj = $('<tr/>');
            obj.append('<td class="align-middle text-center">' + id + '<input type="hidden" name="school_uid[]" value="' + id + '"/></td>');
            obj.append('<td class="align-middle text-center">' + data.country + '</td>');
            obj.append('<td class="align-middle text-center">' + data.school_type + '</td>');
            if (data.link) {
                obj.append('<td class="align-middle text-truncate"><a href="' + data.link + '" title="' + data.name + '">' + data.name + '</a></td>');
            } else {
                obj.append('<td class="align-middle text-truncate" title="' + data.name + '">' + data.name + '</td>');
            }
            obj.append('<td class="align-middle text-center"><button type="button" class="btn btn-danger btn-icon btn-circle btn-xs" onclick="schoolDelete(' + id + ')"><i class="fa fa-times"></i></button></td>');
            $('#school-list').append(obj);
        }

        function schoolDelete(id) {
            $('#school-list input[name="school_uid[]"][value="' + id + '"]').closest('tr').remove();
        }
    </script>
@endpush

<h5 class="p-10 b-b-1">{{ Lang::get('template_school.word.default_info') }}</h5>
<div class="row p-10">
    <div class="col-md-6">
        <div class="attr mt-0">
            <label class="width-full col-form-label">{{ Lang::get('template_school.word.group_name') }} <span class="text-danger">*</span></label>
            <input type="input" class="form-control" name="name" value="{{ $info->name }}" required/>
        </div>
        <div class="attr">
            <label class="width-full col-form-label">{{ Lang::get('template_school.word.logo') }}</label>
            <div class="dropzone logo-box" id="logo-file">
                <input type="hidden" name="logo_url" value="{{ $info->logo_url }}"/>
                <div class="dz-message needsclick">
                    <div class="message">
                        <div class="cell">Drop files <b>here</b> or <b>click</b> to upload.</div>
                    </div>
                </div>
                <div class="dz-preview-template hide">
                    <div class="dz-preview">
                        <div class="dz-image">
                            <img data-dz-thumbnail/>
                            <button type="button" class="btn btn-cancel btn-danger btn-icon btn-circle btn-md" data-dz-remove><i class="fa fa-times"></i></button>
                        </div>
                        <div class="dz-progress">
                            <span class="dz-upload"></span>
                        </div>
                        <div class="message"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="attr mt-md-0">
            <label class="position-relative width-full col-form-label">
                @php
                    $add_url = route('school.infos.schools.modal.create');
                    if ($info->school_info_uid) {
                        $add_url .= '?school_info_uid='.$info->school_info_uid;
                    }
                @endphp
                {{ Lang::get('template_school.word.school_list') }}
                <a href="{{ $add_url }}" class="btn btn-primary btn-xs right-add-btn" data-toggle="modal" data-type="ajax" data-target="#modal-pop">+ Add</a>
            </label>
            <table class="table table-sm table-layout-fixed m-0">
                <colgroup>
                    <col width="80"/>
                    <col width="80"/>
                    <col width="80"/>
                    <col width="*"/>
                    <col width="30"/>
                </colgroup>
                <thead>
                    <tr>
                        <th class="align-middle text-center">{{ Lang::get('template_school.word.id.short') }}</th>
                        <th class="align-middle text-center">{{ Lang::get('template_school.word.country.short') }}</th>
                        <th class="align-middle text-center">{{ Lang::get('template_school.word.study_type') }}</th>
                        <th class="align-middle text-center">{{ Lang::get('template_school.word.school_name') }}</th>
                        <th class="align-middle text-center"></th>
                    </tr>
                </thead>
            </table>
            <div class="table-scroll" id="table-scroll">
                <table class="table table-sm table-layout-fixed m-0">
                    <colgroup>
                        <col width="80"/>
                        <col width="80"/>
                        <col width="80"/>
                        <col width="*"/>
                        <col width="30"/>
                    </colgroup>
                    <tbody id="school-list">
                        <tr class="no-result">
                            <td colspan="5" class="text-center p-t-40 p-b-40">{{ Lang::get('template_school.desc.search_school') }}</td>
                        </tr>
                        @foreach ($schools as $school)
                            <tr>
                                <td class="align-middle text-center">
                                    {{ $school->school_uid }}
                                    <input type="hidden" name="school_uid[]" value="{{ $school->school_uid }}"/>
                                </td>
                                <td class="align-middle text-center">{{ Country::domain($school->country)['name'] }}</td>
                                <td class="align-middle text-center">@icon('schoolType', $school->school_type)</td>
                                <td class="align-middle text-truncate"><a href="{{ route('school.schools.detail.edit', $school->school_uid) }}" title="{{ $school->name }}">{{ $school->name }}</a></td>
                                <td class="align-middle text-center"></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-12">
        <div class="attr">
            <label class="width-full col-form-label">{{ Lang::get('template_school.word.group') }} <span class="text-muted f-s-11">({!! Lang::get('template_school.desc.check_if_chain_school') !!})</span></label>
            <div class="checkbox checkbox-css">
                <input type="checkbox" class="form-check-input" id="group_school" name="group_school" value="Y" @checked($info->group_school, 'Y')/>
                <label class="form-check-label" for="group_school">{{ Lang::get('template_school.word.group') }}</label>
            </div>
        </div>
        <div class="attr">
            <label class="width-full col-form-label">{{ Lang::get('template_school.word.visibility') }}</label>
            <div class="checkbox checkbox-css">
                <input type="checkbox" class="form-check-input" id="display" name="display" value="Y" @checked($info->display, 'Y')/>
                <label class="form-check-label" for="display">{{ Lang::get('template_school.word.visible') }}</label>
            </div>
        </div>
    </div>
</div>