@php
    /**
     * 학교 목록
     */
@endphp

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

@push('css')
    <style type="text/css">
        .modal-dialog{max-width:900px;width:90%;height:90%;margin-left:auto;margin-right:auto;}
        .modal-dialog form{position:absolute;top:0;bottom:0;left:0;right:0;}
        .modal-dialog .modal-content{height:100%;}
        .modal-dialog .modal-body{display:flex;flex-direction:column;}
        .modal-dialog .table{table-layout:fixed;}
        .modal-dialog .table tbody tr:first-child td{border-top:0 !important;}
        .modal-dialog .school-list{display:flex;flex-direction:column;flex:1 1 auto;}
        .modal-dialog .school-list .checkbox-css{padding-bottom:7px;width:16px;margin:0 auto;}
        .table-scroll{flex:1 1 auto;overflow-y:auto;}
    </style>
@endpush
@push('scripts')
    <script type="text/javascript">
        $(function() {

            var $dialog = $('.modal-dialog');

            $dialog.input();

            $dialog.find('input[name="name"]').focus();

            $dialog.find('form').submit(function() {

                var $form = $(this);
                var $name = $form.find('input[name="name"]');
                $name.val($name.val().trim());

                var url = '{{ route('school.contracts.schools.modal.create.schoollist') }}';
                var data = $form.serialize();
                load(url, data);

                return false;
            });

            function load(url, data) {
                $.ui_ajax({
                    url:url,
                    data:data,
                    closeDelay:0,
                    done:function(data) {
                        if (!data || !data.view) return;

                        $dialog.find('form .school-list').html(data.view);

                        addEventListener();
                    },
                });
            }

            function addEventListener() {

                // 학교 체크 이벤트 설정
                $dialog.find('form .school-list').find('input[type="checkbox"]').change(function() {
                    var school_uid = $(this).val();
                    var obj = $(this).closest('tr');
                    var data = {
                        country:obj.find('td.country').html(),
                        school_type:obj.find('td.school_type').html(),
                        name:obj.find('td.school_name a').html(),
                        link:obj.find('td.school_name a').attr('href')
                    };

                    if ($(this).is(':checked')) {
                        $(document).trigger('school-add', [school_uid, data]);
                    } else {
                        $(document).trigger('school-delete', school_uid);
                    }
                });

                // Pagination
                $dialog.find('form .school-list .pagination a').click(function() {
                    load($(this).attr('href'));
                    return false;
                });

                // 학교 체크여부 확인
                $('form input[name="school_uid[]"]').each(function() {
                    var school_uid = $(this).val();
                    $dialog.find('form .school-list').find('input[type="checkbox"][value="' + school_uid + '"]').prop('checked', true);
                });
            }
        });
    </script>
@endpush

<div class="modal-dialog">
    <form method="GET">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">{{ Lang::get('template_school.word.school_add') }}</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>

            <h5 class="bg-grey-transparent-5 p-10 m-b-0">{{ Lang::get('template_school.word.school_list') }}</h5>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-6">
                                <label class="width-full col-form-label">
                                    {{ Lang::get('template_school.word.country.short') }}
                                </label>
                                <select class="selectpicker width-full" name="country[]" multiple data-actions-box="true">
                                    @foreach (Country::domain() as $code)
                                        <option value="{{ $code->code_domain }}" @selected($code->code_domain, request('country'))>{{ $code->name_en }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-6">
                                <label class="width-full col-form-label">{{ Lang::get('template_school.word.study_type') }}</label>
                                <select class="selectpicker width-full" name="school_type">
                                    <option value="">{{ Lang::get('template_school.word.all') }}</option>
                                    @foreach (CodeSchool::schoolType() as $code)
                                        <option value="{{ $code->cdsh_code }}" @selected($code->cdsh_code, request('school_type'))>{{ $code->cdsh_label['en'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-12">
                                <label class="width-100 col-form-label">{{ Lang::get('template_school.word.school_name') }}</label>
                                <div style="display:flex">
                                    <input type="text" class="form-control m-r-20" name="name" value="{{ request('name') }}" required>
                                    <button type="submit" class="btn btn-primary">{{ Lang::get('template_school.word.search') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="school-list m-t-20">
                    @include('template.school.contract.create.addschool-schoollist', [
                        'schools' => collect()
                    ])
                </div>
            </div>
        </div>
    </form>
</div>

@stack('css')
@stack('scripts')