@extends('admin.layouts.app')
@php

@endphp
@section('content')
<div class="container-fluid">
    <div class="row bg-title">
        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
            <h4 class="page-title">Manage Sponsor Agreement</h4>
        </div>
        <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
            <ol class="breadcrumb">
                <li><a href="{{ route('dashboard') }}">Dashboard</a></li>
                <li><a href="{{ route('sponsor.agreement') }}">Agreements</a></li>
                <li class="active">Agreement</li>
            </ol>
        </div>
    </div>
    <div class="row"> 
        <div class="col-md-12 col-xs-12">
            <div class="white-box">
                <div class="row">
                    <div class="col-md-6 col-xs-12">
                        <h3 class="box-title m-b-0">Agreements</h3>
                    </div>
                </div>
                @include('admin.includes.status')
                <div class="row">
                    <div class="col-md-12">
                        <form id="frm_agreement" name="frm_agreement" method="post" action="{{ route('sponsor.agreement.edit') }}" class="form-horizontal form-validator">
                            {{ csrf_field() }}
                            
                            <div class="form-group">
                                <label class="col-md-12">Sponsor ODC Agreement Content<span class="text-danger">*</span></label>
                                <div class="col-md-12" id="sponsor-odc-toolbar-container"></div>
                                <input type="hidden" name="sponsor_odc_agreement_content" id="sponsor_odc_agreement_content">
                                <div class="col-md-12">
                                    <div name="sponsor_odc_agreement_content_div" id="sponsor_odc_agreement_content_div" placeholder="Agreement Content" class="form-control" style="height:300px; border-color: #9e9e9eba;" required>{!! config('common.sponsor_odc_agreement_content') !!} </div>
                                    <div class="clearfix"></div>
                                </div>
                                
                            </div>
                            <div class="form-group">
                                <label class="col-md-12">Sponsor ODC CAMP Agreement Content<span class="text-danger">*</span></label>
                                <div class="col-md-12" id="sponsor-odc-camp-toolbar-container"></div>
                                <input type="hidden" name="sponsor_odc_camp_agreement_content" id="sponsor_odc_camp_agreement_content">
                                <div class="col-md-12">
                                    <div name="sponsor_odc_camp_agreement_content_div" id="sponsor_odc_camp_agreement_content_div" placeholder="Agreement Content" class="form-control" style="height:300px; border-color: #9e9e9eba;" required>{!! config('common.sponsor_odc_camp_agreement_content') !!} </div>
                                    <div class="clearfix"></div>
                                </div>
                                
                            </div>
                            
                            <div class="form-group">
                                <label class="col-md-12">Sponsor ASSE Agreement Content<span class="text-danger">*</span></label>
                                <div class="col-md-12" id="sponsor_asse_agreement_content_toolbar_container"></div>
                                <input type="hidden" name="sponsor_asse_agreement_content" id="sponsor_asse_agreement_content">
                                <div class="col-md-12">
                                    <div name="sponsor_asse_agreement_content_div" id="sponsor_asse_agreement_content_div" placeholder="Agreement Content" class="form-control" style="height:300px; border-color: #9e9e9eba;" required>{!! config('common.sponsor_asse_agreement_content') !!} </div>
                                    <div class="clearfix"></div>
                                </div>
                                
                            </div>
                            
                            <div class="form-group">
                                <label class="col-md-12">Sponsor CENET Agreement Content<span class="text-danger">*</span></label>
                                <div class="col-md-12" id="sponsor_cenet_agreement_content_toolbar_container"></div>
                                <input type="hidden" name="sponsor_cenet_agreement_content" id="sponsor_cenet_agreement_content">
                                <div class="col-md-12">
                                    <div name="sponsor_cenet_agreement_content_div" id="sponsor_cenet_agreement_content_div" placeholder="Agreement Content" class="form-control" style="height:300px; border-color: #9e9e9eba;" required>{!! config('common.sponsor_cenet_agreement_content') !!} </div>
                                    <div class="clearfix"></div>
                                </div>
                                
                            </div>
                            
                            
                            <div class="form-group">
                                <label class="col-md-12">Sponsor INTRAX Agreement Content<span class="text-danger">*</span></label>
                                <div class="col-md-12" id="sponsor_intrax_agreement_content_toolbar_container"></div>
                                <input type="hidden" name="sponsor_intrax_agreement_content" id="sponsor_intrax_agreement_content">
                                <div class="col-md-12">
                                    <div name="sponsor_intrax_agreement_content_div" id="sponsor_intrax_agreement_content_div" placeholder="Agreement Content" class="form-control" style="height:300px; border-color: #9e9e9eba;" required>{!! config('common.sponsor_intrax_agreement_content') !!} </div>
                                    <div class="clearfix"></div>
                                </div>
                                
                            </div>
                            
                            <div class="form-group">
                                <label class="col-md-12">Sponsor INTRAX Co-branded Agreement Content<span class="text-danger">*</span></label>
                                <div class="col-md-12" id="sponsor_intrax_co_branded_agreement_content_toolbar_container"></div>
                                <input type="hidden" name="sponsor_intrax_co_branded_agreement_content" id="sponsor_intrax_co_branded_agreement_content">
                                <div class="col-md-12">
                                    <div name="sponsor_intrax_co_branded_agreement_content_div" id="sponsor_intrax_co_branded_agreement_content_div" placeholder="Agreement Content" class="form-control" style="height:300px; border-color: #9e9e9eba;" required>{!! config('common.sponsor_intrax_co_branded_agreement_content') !!} </div>
                                    <div class="clearfix"></div>
                                </div>
                                
                            </div>
                            
                            <div class="form-group">
                                <label class="col-md-12">Sponsor AAG Agreement Content<span class="text-danger">*</span></label>
                                <div class="col-md-12" id="sponsor_aag_agreement_content_toolbar_container"></div>
                                <input type="hidden" name="sponsor_aag_agreement_content" id="sponsor_aag_agreement_content">
                                <div class="col-md-12">
                                    <div name="sponsor_aag_agreement_content_div" id="sponsor_aag_agreement_content_div" placeholder="Agreement Content" class="form-control" style="height:300px; border-color: #9e9e9eba;" required>{!! config('common.sponsor_aag_agreement_content') !!} </div>
                                    <div class="clearfix"></div>
                                </div>
                                
                            </div>
                            
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <button type="button" class="btn btn-info" id='btn_save'>Save Agreement</button>
                                    <button type="reset" class="btn btn-danger">Reset</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')

<script>
    $(document).ready(function () {

        DecoupledEditor
                .create(document.querySelector('#sponsor_odc_camp_agreement_content_div'), {
                    removePlugins: ['toolbar'],
                })
                .then(odcCampEditor => {
                    const toolbarContainer = document.querySelector('#sponsor-odc-camp-toolbar-container');
                    toolbarContainer.appendChild(odcCampEditor.ui.view.toolbar.element);
                    toolbarContainer.appendChild(odcCampEditor.ui.view.toolbar.element);
                    window.odcCampEditor = odcCampEditor;
                })
                .catch(error => {
                    console.error(error);
                });
        
        DecoupledEditor
                .create(document.querySelector('#sponsor_odc_agreement_content_div'), {
                    removePlugins: ['toolbar'],
                })
                .then(odcEditor => {
                    const toolbarContainer = document.querySelector('#sponsor-odc-toolbar-container');
                    toolbarContainer.appendChild(odcEditor.ui.view.toolbar.element);
                    toolbarContainer.appendChild(odcEditor.ui.view.toolbar.element);
                    window.odcEditor = odcEditor;
                })
                .catch(error => {
                    console.error(error);
                });
                
                
        DecoupledEditor
                .create(document.querySelector('#sponsor_asse_agreement_content_div'), {
                    removePlugins: ['toolbar'],
                })
                .then(asseEditor => {
                    const toolbarContainer = document.querySelector('#sponsor_asse_agreement_content_toolbar_container');
                    toolbarContainer.appendChild(asseEditor.ui.view.toolbar.element);
                    toolbarContainer.appendChild(asseEditor.ui.view.toolbar.element);
                    window.asseEditor = asseEditor;
                })
                .catch(error => {
                    console.error(error);
                });
        
        DecoupledEditor
                .create(document.querySelector('#sponsor_cenet_agreement_content_div'), {
                    removePlugins: ['toolbar'],
                })
                .then(cenetEditor => {
                    const toolbarContainer = document.querySelector('#sponsor_cenet_agreement_content_toolbar_container');
                    toolbarContainer.appendChild(cenetEditor.ui.view.toolbar.element);
                    toolbarContainer.appendChild(cenetEditor.ui.view.toolbar.element);
                    window.cenetEditor = cenetEditor;
                })
                .catch(error => {
                    console.error(error);
                });
            
        DecoupledEditor
                .create(document.querySelector('#sponsor_intrax_agreement_content_div'), {
                    removePlugins: ['toolbar'],
                })
                .then(intraxEditor => {
                    const toolbarContainer = document.querySelector('#sponsor_intrax_agreement_content_toolbar_container');
                    toolbarContainer.appendChild(intraxEditor.ui.view.toolbar.element);
                    toolbarContainer.appendChild(intraxEditor.ui.view.toolbar.element);
                    window.intraxEditor = intraxEditor;
                })
                .catch(error => {
                    console.error(error);
                });        
        DecoupledEditor
                .create(document.querySelector('#sponsor_intrax_co_branded_agreement_content_div'), {
                    removePlugins: ['toolbar'],
                })
                .then(intraxCoEditor => {
                    const toolbarContainer = document.querySelector('#sponsor_intrax_co_branded_agreement_content_toolbar_container');
                    toolbarContainer.appendChild(intraxCoEditor.ui.view.toolbar.element);
                    toolbarContainer.appendChild(intraxCoEditor.ui.view.toolbar.element);
                    window.intraxCoEditor = intraxCoEditor;
                })
                .catch(error => {
                    console.error(error);
                });        
        DecoupledEditor
                .create(document.querySelector('#sponsor_aag_agreement_content_div'), {
                    removePlugins: ['toolbar'],
                })
                .then(aagEditor => {
                    const toolbarContainer = document.querySelector('#sponsor_aag_agreement_content_toolbar_container');
                    toolbarContainer.appendChild(aagEditor.ui.view.toolbar.element);
                    toolbarContainer.appendChild(aagEditor.ui.view.toolbar.element);
                    window.aagEditor = aagEditor;
                })
                .catch(error => {
                    console.error(error);
                });
                
                
        $(document).on("click", "#btn_save", function () {
            var sp_odc_val = window.odcCampEditor.getData();
            $("#sponsor_odc_camp_agreement_content").val(sp_odc_val);
            
            var sp_odc_val = window.odcEditor.getData();
            $("#sponsor_odc_agreement_content").val(sp_odc_val);
            
            var sp_odc_val = window.asseEditor.getData();
            $("#sponsor_asse_agreement_content").val(sp_odc_val);
                        
            var sp_odc_val = window.cenetEditor.getData();
            $("#sponsor_cenet_agreement_content").val(sp_odc_val);
            
            var sp_odc_val = window.intraxEditor.getData();
            $("#sponsor_intrax_agreement_content").val(sp_odc_val);
            
            var sp_odc_val = window.intraxCoEditor.getData();
            $("#sponsor_intrax_co_branded_agreement_content").val(sp_odc_val);
            
            var sp_odc_val = window.aagEditor.getData();
            $("#sponsor_aag_agreement_content").val(sp_odc_val);
            
            
            $("#frm_agreement").submit();
        });
        CKEDITOR.document.getById('sponsor_odc_camp_agreement_content_div').on('click', function (ev) {
            $("#cke_sponsor_odc_camp_agreement_content_div").empty();
        });
        
        CKEDITOR.document.getById('sponsor_odc_agreement_content_div').on('click', function (ev) {
            $("#cke_sponsor_odc_agreement_content_div").empty();
        });
        
        CKEDITOR.document.getById('sponsor_asse_agreement_content_div').on('click', function (ev) {
            $("#cke_sponsor_asse_agreement_content_div").empty();
        });
        CKEDITOR.document.getById('sponsor_cenet_agreement_content_div').on('click', function (ev) {
            $("#cke_sponsor_cenet_agreement_content_div").empty();
        });
        CKEDITOR.document.getById('sponsor_intrax_agreement_content_div').on('click', function (ev) {
            $("#cke_sponsor_intrax_agreement_content_div").empty();
        });
        CKEDITOR.document.getById('sponsor_intrax_co_branded_agreement_content_div').on('click', function (ev) {
            $("#cke_sponsor_intrax_co_branded_agreement_content_div").empty();
        });
        CKEDITOR.document.getById('sponsor_aag_agreement_content_div').on('click', function (ev) {
            $("#cke_sponsor_aag_agreement_content_div").empty();
        });

    });
</script>
@endsection