@extends('layouts.backoffice.index', ["title" => "Kata Motivasi"])

@section('main')
<section class="section">
    <div class="card shadow">
        <div class="card-header">
            <div class="clearfix w-100">
                <div class="float-left">
                    <h5><b>Kata Motivasi</b></h5>
                </div>
                <div class="float-right">
                    <a href="" data-toggle="modal" data-target="#modal-add" class="btn btn-primary"><i class="fa fa-plus"></i>   Tambah Data</a>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th scope="col">No</th>
                            <th scope="col">Nama</th>
                            <th scope="col">Jabatan</th>
                            <th scope="col">Deskripsi Singkat</th>
                            <th scope="col">Status</th>
                            <th scope="col">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">1</th>
                            <td>Septian Iqbal</td>
                            <td>Manager</td>
                            <td>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor, velit modi. Animi fugiat eius asperiores rerum, dolore nam laudantium itaque, tenetur sed ex illum voluptatibus doloribus nostrum vel quia atque?</td>
                            <td><div class="badge bg-success">Aktif</div></td>
                            <td>
                                <a href="" data-toggle="modal" data-target="#modal-edit" class="btn mt-3 btn-warning"><i class="fa fa-edit"></i> Edit</a>
                                <button type="button" class="btn mt-3 btn-danger" data-toggle="modal" data-target="#modal-delete"><i class="fa fa-trash"></i> Hapus</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>

<div class="modal fade" id="modal-delete">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body bg-warning">
                <div class="alert alert-warning alert-has-icon p-0">
                    <div class="alert-icon"><i class="fa fa-trash"></i></div>
                    <div class="alert-body">
                        <div class="alert-title">Konfirmasi Hapus Data</div>
                        Apakah anda yakin ingin menghapus data ini ? <br> data yang sudah dihapus tidak dapat dikembalikan
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="row">
                    <div class="col-md-6">
                        <button type="button" class="btn btn-danger btn-block" data-dismiss="modal"><i class="fa fa-times"></i> Batal Hapus</button>
                    </div>
                    <div class="col-md-6">
                        <button type="button" class="btn btn-success btn-block"><i class="fa fa-check"></i> Hapus Data</button>                    
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-add">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white pb-4">
                <h5 class="modal-title">Tambah Data</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="">Kata Motivasi</label>
                    <textarea id="qoutes-add" name="" class="form-control" rows="30"></textarea>
                </div>
                <div class="form-group">
                    <label for="">Pencipta</label>
                    <input type="text" class="form-control">
                </div>
                <div class="form-group">
                    <label class="form-label">Status</label>
                    <div class="selectgroup w-100">
                        <label class="selectgroup-item">
                            <input type="radio" name="transportation" value="2" class="selectgroup-input">
                            <span class="selectgroup-button selectgroup-button-icon"><i class="fas fa-check"></i> Publish</span>
                        </label>
                        <label class="selectgroup-item">
                            <input type="radio" name="transportation" value="1" class="selectgroup-input" checked="">
                            <span class="selectgroup-button selectgroup-button-icon"><i class="fas fa-times"></i> Draft</span>
                        </label>
                    </div>
                    <small>Jika status <b>Publish</b> akan tampil dihalaman utama</small>
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-6">
                        <button type="button" class="btn btn-danger mb-3 btn-block" data-dismiss="modal"><i class="fa fa-times"></i> Batal</button>
                    </div>
                    <div class="col-md-6">
                        <button type="button" class="btn btn-success mb-3 btn-block"><i class="fa fa-save"></i> Simpan</button>                    
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-edit">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white pb-4">
                <h5 class="modal-title">Tambah Data</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="">Kata Motivasi</label>
                    <textarea id="qoutes-edit" name="" class="form-control" rows="30"></textarea>
                </div>
                <div class="form-group">
                    <label for="">Pencipta</label>
                    <input type="text" class="form-control">
                </div>
                <div class="form-group">
                    <label class="form-label">Status</label>
                    <div class="selectgroup w-100">
                        <label class="selectgroup-item">
                            <input type="radio" name="transportation" value="2" class="selectgroup-input">
                            <span class="selectgroup-button selectgroup-button-icon"><i class="fas fa-check"></i> Publish</span>
                        </label>
                        <label class="selectgroup-item">
                            <input type="radio" name="transportation" value="1" class="selectgroup-input" checked="">
                            <span class="selectgroup-button selectgroup-button-icon"><i class="fas fa-times"></i> Draft</span>
                        </label>
                    </div>
                    <small>Jika status <b>Publish</b> akan tampil dihalaman utama</small>
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-6">
                        <button type="button" class="btn btn-danger mb-3 btn-block" data-dismiss="modal"><i class="fa fa-times"></i> Batal</button>
                    </div>
                    <div class="col-md-6">
                        <button type="button" class="btn btn-success mb-3 btn-block"><i class="fa fa-save"></i> Simpan</button>                    
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.bootstrap4.min.css">
@endpush

@push('scripts')
<!-- DATATABLES JS -->
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.4.1/js/responsive.bootstrap4.min.js"></script>

{{-- CKEDITOR --}}
<script src="https://cdn.ckeditor.com/ckeditor5/41.2.0/classic/ckeditor.js"></script>

<script>
    // ============================
    // DATATABLE
    // ============================
    ClassicEditor
    $(function() {
        $(".table").DataTable({
            responsive: true,
            autoWidth: false,
            pageLength: 10,
            language: {
                "lengthMenu": "Tampilkan _MENU_ data",
                "zeroRecords": "Tidak ada data",
                "info": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                "infoEmpty": "Tidak ada data tersedia",
                "search": "Cari:",
                "paginate": {
                    "previous": "Sebelumnya",
                    "next": "Selanjutnya"
                }
            }
        });
    });

    // ============================
    // CKEDITOR
    // ============================
    ClassicEditor
        .create(document.querySelector('#qoutes-add'))
        .then(editor => {
            editor.editing.view.change(writer => {
                writer.setStyle('min-height', '100px', editor.editing.view.document.getRoot());
            });
        })
        .catch(error => console.error(error));
    ClassicEditor
        .create(document.querySelector('#qoutes-edit'))
        .then(editor => {
            editor.editing.view.change(writer => {
                writer.setStyle('min-height', '100px', editor.editing.view.document.getRoot());
            });
        })
        .catch(error => console.error(error));
</script>
@endpush