@php
    /**
     * 학교 계약 학교담당자 생성
     */
@endphp

@include('includes.require.input')
@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">
        .modal-dialog{max-width:900px;width:90%;height:90%;margin-left:auto;margin-right:auto;}

        .upload-box{min-height:206px;}
        .upload-box .dz-message{margin:0 !important;}
        .upload-box .dz-message .message{display:table !important;width:100%;}
        .upload-box .dz-message .cell{display:table-cell;width:100%;height:162px;vertical-align:middle;}
        .upload-box .dz-preview{position:relative !important;display:block !important;margin:0 !important;;text-align:center;}
        .upload-box .dz-preview .dz-image{width:100% !important;height:162px !important;border-radius:14px !important;}
        .upload-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;}
        .upload-box .dz-preview .dz-image .btn-cancel{position:absolute;top:0;right:0;z-index:500;}
        .upload-box .dz-preview .dz-image .btn-cancel i{cursor:pointer;}
        .upload-box .dz-preview .dz-progress .dz-upload{background:#a5dc86;}
        .upload-box .dz-preview .message{position:absolute;color:#fff;top:50%;left:2%;width:96%;padding:10px;transform:translate(0,-50%);z-index:10;}
        .upload-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">
        $(function() {
            $('.modal-dialog').input();

            $('.modal-dialog .btn-delete').click(function() {
                $.ui_ajax({
                    url:'{{ route('school.contracts.staff.destroy', [$contractStaff->school_contract_uid, $contractStaff->school_contract_staff_uid]) }}',
                    data:{_token:'{{ csrf_token() }}'},
                    method:'DELETE',
                    confirm:true,
                    type:'error',
                    closeDelay:null,
                    text_done:'Manager deleted.',
                    text_fail:'Delete failed.',
                    text_confirm:'Once deleted, you will not be able to recover this manager!',
                    done:function() {
                        $(document).trigger('contract-manager-deleted', '{{ $contractStaff->school_contract_staff_uid }}');
                        $('.modal-dialog').closest('.modal').modal('hide');
                    }
                });

                return false;
            });

            $('.modal-dialog form').submit(function() {
                $.ui_ajax({
                    method:'POST',
                    url:$(this).attr('action'),
                    data:$(this).serialize(),
                    closeDelay:null,
                    done:function() {
                        window.location.reload();
                    },
                });
                return false;
            });
        });

        Dropzone.autoDiscover = false;
        var dropzone = new Dropzone('#upload-file', {
            url:'{{ route('school.contracts.staff.profile.store', $contractStaff->school_contract_uid) }}',
            paramName:'profile_file',
            params:{_token:'{{ csrf_token() }}'},
            thumbnailWidth:null,
            thumbnailHeight:194,
            previewTemplate:$('#upload-file .dz-preview-template').html(),
            maxFiles:1,
            init:function() {
                @if ($contractStaff->profile_url)
                    var file = {name:'{{ $contractStaff->profile_file_name }}'};
                    file.accepted = true;
                    this.files.push(file);
                    this.emit('addedfile', file);
                    this.emit('thumbnail', file, '{{ $contractStaff->profile_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) {
                $('#upload-file input[name="profile_url"]').val(response.url);
            }
        }).on('removedfile', function(file) {
            $('#upload-file input[name="profile_url"]').val('');
        });
    </script>
@endpush

<div class="modal-dialog">
    @php
        if ($method === 'create') {
            $formTitle = Lang::get('template_school.word.school_manager_add');
            $formMethod = 'POST';
            $formAction = route('school.contracts.staff.store', $contractStaff->school_contract_uid);
        } else if ($method === 'edit') {
            $formTitle = Lang::get('template_school.word.school_manager_edit');
            $formMethod = 'PATCH';
            $formAction = route('school.contracts.staff.update', [$contractStaff->school_contract_uid, $contractStaff->school_contract_staff_uid]);
        }
    @endphp
    <form method="POST" action="{{ $formAction or '' }}">
        {{ csrf_field() }}
        <input type="hidden" name="_method" value="{{ $formMethod or '' }}"/>
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">{{ $formTitle }}</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 m-t-20">{{ Lang::get('template_school.word.manager_info') }}</h5>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6 attr mt-0">
                        <label class="col-form-label width-full">{{ Lang::get('template_school.word.profile_image') }}</label>
                        <div class="dropzone upload-box" id="upload-file">
                            <input type="hidden" name="profile_url" value="{{ $contractStaff->profile_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 class="col-md-6 attr mt-md-0">
                        <div>
                            <label class="col-form-label width-full">{{ Lang::get('template_school.word.manager_name') }} <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="name" value="{{ $contractStaff->name or '' }}"/>
                        </div>
                        <div class="m-t-20">
                            <label class="col-form-label width-full">{{ Lang::get('template_school.word.position') }}</label>
                            <input type="text" class="form-control" name="position" value="{{ $contractStaff->position or '' }}"/>
                        </div>
                        <div class="m-t-20">
                            <label class="col-form-label width-full">{{ Lang::get('template_school.word.address') }}</label>
                            <input type="text" class="form-control" name="address" value="{{ $contractStaff->address or '' }}"/>
                        </div>
                    </div>
                </div>
                <div class="row m-t-20">
                    <div class="col-md-6 attr mt-0">
                        <label class="col-form-label width-full">{{ Lang::get('template_school.word.telephone') }}</label>
                        <input type="text" class="form-control" name="phone" value="{{ $contractStaff->phone or '' }}"/>
                    </div>
                    <div class="col-md-6 attr mt-md-0">
                        <label class="col-form-label width-full">{{ Lang::get('template_school.word.email') }}</label>
                        <input type="email" class="form-control" name="email" value="{{ $contractStaff->email or '' }}"/>
                    </div>
                </div>
                <div class="row m-t-20">
                    <div class="col-md-6 attr mt-0">
                        <label class="col-form-label width-full">{{ Lang::get('template_school.word.memo') }}</label>
                        <textarea class="form-control" name="memo" style="height:78px" placeholder="{{ Lang::get('template_school.word.memo') }}">{!! $contractStaff->memo or '' !!}</textarea>
                    </div>
                </div>
            </div>

            {{-- 등록자정보 --}}
            @if ($method === 'edit')
                <h5 class="bg-grey-transparent-5 p-10 m-b-0 m-t-20">{{ Lang::get('template_school.word.registrant_info') }}</h5>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <label class="col-form-label width-full">{{ Lang::get('template_school.word.first_registered_by') }}</label>
                            <div class="row">
                                <label class="col-form-label width-full">
                                    @if ($contractStaff->relCreateLog)
                                        {{ $contractStaff->relCreateLog->emm_name }} {{ $contractStaff->relCreateLog->created_at->format('Y.m.d H:i:s') }}
                                    @else
                                        &nbsp;
                                    @endif
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="col-form-label width-full">{{ Lang::get('template_school.word.last_edited_by') }}</label>
                            <div class="row">
                                <label class="col-form-label width-full">
                                    @if ($contractStaff->relModifyLog)
                                        {{ $contractStaff->relModifyLog->emm_name }} {{ $contractStaff->relModifyLog->created_at->format('Y.m.d H:i:s') }}
                                    @else
                                        &nbsp;
                                    @endif
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <div class="modal-footer">
                @if ($method === 'edit')
                    <button type="button" class="btn btn-danger btn-delete">{{ Lang::get('template_school.word.delete') }}</button>    
                @endif
                <button type="button" class="btn btn-white" data-dismiss="modal">{{ Lang::get('template_school.word.cancel') }}</button>
                <button type="submit" class="btn btn-success">{{ Lang::get('template_school.word.save') }}</button>
            </div>
        </div>
    </form>
</div>

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