@extends('manager.layouts.app')
@section('page_title', $page_title)

@section('content')
<div class="container-fluid mt-3">
    <div class="card border-0 shadow-sm overflow-hidden">
        <div class="card-header bg-white border-0 py-3 px-4">
            <div class="d-flex justify-content-between">
                <div>
                    <h4 class="card-title mb-0">{{(!empty($p_title) && isset($p_title)) ? $p_title : ''}}</h4>
                    <div class="small text-medium-emphasis">{{(!empty($p_summary) && isset($p_summary)) ? $p_summary : ''}}</div>
                </div>
            </div>
        </div>
        <hr>
        <form action="{{ route('manager.campus-facility.update') }}" method="POST" id="facilityForm">
            @csrf
            <div class="card-body p-0">
                <div class="row no-gutters">
                    <div class="col-md-3 border-right bg-sidebar-light">
                        <div class="nav flex-column nav-pills facility-management-pills" id="v-pills-tab" role="tablist">
                            @foreach($facilities as $index => $facility)
                                <a class="nav-link {{ $loop->first ? 'active' : '' }} border-bottom py-3 px-4"
                                   data-toggle="pill" href="#content-{{ $facility['id'] }}" role="tab">
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-chevron-right mr-3 small opacity-50"></i>
                                        <span class="font-weight-bold">{{ ucwords(str_replace('-', ' ', $facility['id'])) }}</span>
                                    </div>
                                </a>
                            @endforeach
                        </div>
                    </div>
                    <div class="col-md-9 bg-white">
                        <div class="tab-content p-4 p-lg-5">
                            @foreach($facilities as $index => $facility)
                                <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}"
                                     id="content-{{ $facility['id'] }}" role="tabpanel">
                                    <input type="hidden" name="facilities[{{$index}}][id]" value="{{ $facility['id'] }}">
                                    <div class="form-group mb-4">
                                        <label class="text-muted small font-weight-bold text-uppercase">Display Title</label>
                                        <input type="text" name="facilities[{{$index}}][title]" 
                                               class="form-control form-control-lg bg-light border-0 shadow-none" 
                                               value="{{ $facility['title'] ?? '' }}">
                                    </div>
                                    <div class="form-group">
                                        <label class="text-muted small font-weight-bold text-uppercase">Description Content</label>
                                        <textarea name="facilities[{{$index}}][description]" 
                                            id="editor-{{ $facility['id'] }}" 
                                            class="facility-editor">{!! old("facilities.$index.description", $facility['description'] ?? '') !!}</textarea>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer bg-white border-top text-right py-3 px-4">
                <button type="submit" class="btn btn-slate-save px-5 font-weight-bold shadow-sm">Save Changes</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('footer-scripts')
<script src="{{ asset('manager/ckeditor/ckeditor.js') }}"></script>
<script>
    $(document).ready(function () {

        $('.facility-editor').each(function () {
            let id = $(this).attr('id');
            if (CKEDITOR.instances[id]) {
                CKEDITOR.instances[id].destroy(true);
            }
            CKEDITOR.replace(id, {
                toolbar: [
                    { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', '-', 'RemoveFormat' ] },
                    { name: 'paragraph', items: [ 'NumberedList', 'BulletedList' ] },
                    { name: 'links', items: [ 'Link', 'Unlink' ] },
                    { name: 'document', items: [ 'Source' ] },
                    { name: 'tools', items: [ 'Maximize' ] }
                ],
                removePlugins: 'elementspath,image,font,iframe,pagebreak,templates',
                resize_enabled: false, height: 250, allowedContent: true, 
                enterMode: CKEDITOR.ENTER_P, shiftEnterMode: CKEDITOR.ENTER_BR
            });
        });

        $('#facilityForm').on('submit', function () {
            for (let instance in CKEDITOR.instances) {
                CKEDITOR.instances[instance].updateElement();
            }
            return true;
        });

        $('#v-pills-tab a').on('click', function (e) {
            e.preventDefault();
            $(this).tab('show');
        });
    });
</script>
@endpush