@extends('layouts.backoffice.index', ['title' => 'Pesan Masuk'])

@section('main')
    <section class="section">
        <div class="card shadow">
            <div class="card-header">
                <div class="clearfix w-100">
                    <div class="float-left">
                        <h5><b>Pesan Masuk</b></h5>
                    </div>
                    <div class="float-right">
                    </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">Subjek</th>
                                <th scope="col">Isi Pesan</th>
                                <th scope="col">Email</th>
                                <th scope="col">Status</th>
                                <th scope="col">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($inboxes as $inbox)
                                <tr>
                                    <th scope="row">{{ $loop->iteration }}</th>
                                    <td>{{ $inbox->name }}</td>
                                    <td>{{ $inbox->subject }}</td>
                                    <td>{{ $inbox->message }}</td>
                                    <td>{{ $inbox->email }}</td>
                                    @if ($inbox->is_read == 1)
                                        <td>
                                            <div class="badge bg-success">Sudah Dibaca</div>
                                        </td>
                                        <td>
                                            -
                                        </td>
                                    @else
                                        <td>
                                            <div class="badge bg-danger text-white">Belum Dibaca</div>
                                        </td>
                                        <td>
                                            <form action="{{ route('contact.readMessage', ['id' => $inbox->id]) }}"
                                                method="POST">
                                                @csrf
                                                <button type="submit" class="btn btn-success"><i class="fa fa-check"></i>
                                                    Tandai Sudah
                                                    Dibaca</button>
                                            </form>
                                        </td>
                                    @endif
                                </tr>
                            @endforeach

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
@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