@extends('petugas.layouts.layout_dashboard')

@section("title") Informasi Layanan @endsection

@section("breadcrumb")
    <li class="breadcrumb-item"><a href="{{route('petugas.dashboard.index')}}">Dashboard</a></li>
    <li class="breadcrumb-item">@yield("title")</li>
@endsection

@section('header-scripts')
    <script src="https://cdn.ckeditor.com/4.13.1/standard/ckeditor.js"></script>
    <script src="https://cdn.ckeditor.com/ckeditor5/16.0.0/inline/ckeditor.js"></script>
@endsection

@section("content")
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header card-header-rose card-header-icon">
                    <div class="card-icon">
                        <i class="material-icons">info</i>
                    </div>
                    <h4 class="card-title">Data Informasi Layanan</h4>
                </div>
                <div class="card-body">

                    <form id="form" action="{{route('petugas.informasi_layanan.update', [1])}}" method="post">
                        @csrf
                        <input type="hidden" value="PUT" name="_method">
                        <div class="row">
                            <div id="judul_informasi_layanan" contenteditable="true"  class="text-center col-md-12">
                                                            </div>
                            <br>
                            <div id="isi_informasi_layanan_l" contenteditable="true" class="text-right col-md-6">
                                                            </div>
                            <div id="isi_informasi_layanan_r" contenteditable="true" class="text-left col-md-6">
                                                            </div>

                            <textarea id="title" name="title" style="display:none;"></textarea>
                            <textarea id="info_1" name="info_1" style="display:none;"></textarea>
                            <textarea id="info_2" name="info_2" style="display:none;"></textarea>

                            <div class="text-center col-md-12">
                                @error('title')
                                <span class="bmd text-danger">{{ $message }}</span>
                                @enderror
                                <br>
                                @error('info_1')
                                <span class="bmd text-danger">{{ $message }}</span>
                                @enderror
                                <br>
                                @error('info_2')
                                <span class="bmd text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <script>
                                // Turn off automatic editor creation first.
                                CKEDITOR.disableAutoInline = true;
                                CKEDITOR.inline( 'judul_informasi_layanan' );
                                CKEDITOR.inline( 'isi_informasi_layanan_l' );
                                CKEDITOR.inline( 'isi_informasi_layanan_r' );
                            </script>
                        </div>
                        <div class="text-center">
                            <input class="btn btn-rose btn-round" type="submit" value="Simpan" />
                        </div>
                        <script>

                            var title = CKEDITOR.document.getById( 'title' ),
                                info_1 = CKEDITOR.document.getById( 'info_1' ),
                                info_2 = CKEDITOR.document.getById( 'info_2' ),
                                form = CKEDITOR.document.getById( 'form' );

                            // Update textarea on form submit with editor data.
                            form.$.onsubmit = function() {
                                title.setValue( CKEDITOR.instances.judul_informasi_layanan.getData() );
                                info_1.setValue( CKEDITOR.instances.isi_informasi_layanan_l.getData() );
                                info_2.setValue( CKEDITOR.instances.isi_informasi_layanan_r.getData() );
                            }

                        </script>
                    </form>

                </div>
            </div>
        </div>
    </div>
@endsection

@section('footer-scripts')>
@include('petugas.components.notification')
@endsection