@include('components.theme.pages.header')

<section>
    <!-- basic table -->
    @csrf
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header d-flex align-items-center">
                    <h6 class="card-title">Detail Bimbingan dan Konseling</h6>
                    @if($detail->is_status != 4)
                    <div class="ms-auto">
                        <a href="{{ app_url('report') . '/close/' . $detail->id }}" class="btn btn-sm btn-danger">Tutup Kasus</a>
                    </div>
                    @endif
                </div>
                <div class="card-body">
                    <ul class="list-group list-group-flush">
                        <li class="d-flex align-items-center list-group-item border-0">
                            <span class="fw-bold">Nama Siswa:</span>
                            <span class="ms-auto">{{ $siswa }} (NIS: {{ $nis }})</span>
                        </li>
                        <li class="d-flex align-items-center list-group-item border-0">
                            <span class="fw-bold">Jenis Bimbingan dan Konseling:</span>
                            <span class="ms-auto">
                                @if($detail->is_priority == 1)
                                    <span class="mb-1 badge font-medium bg-light-info text-info">Normal</span>
                                @elseif($detail->is_priority == 2)
                                    <span class="mb-1 badge font-medium bg-light-primary text-primary">Sedang</span>
                                @else
                                    <span class="mb-1 badge font-medium bg-light-danger text-danger">Parah</span>
                                @endif
                            </span>
                        </li>
                        <li class="d-flex align-items-center list-group-item border-0">
                            <span class="fw-bold">Status B.K:</span>
                            <span class="ms-auto">
                                @if($detail->is_status == 1)
                                    <span class="mb-1 badge font-medium bg-light-info text-info">Menunggu Respon</span>
                                @elseif($detail->is_status == 2)
                                    <span class="mb-1 badge font-medium bg-light-primary text-primary">Konselor telah membalas</span>
                                @elseif($detail->is_status == 3)
                                    <span class="mb-1 badge font-medium bg-light-primary text-primary">{{ $siswa }} telah membalas</span>
                                @else
                                    <span class="mb-1 badge font-medium bg-light-danger text-danger">Kasus ditutup</span>
                                @endif
                            </span>
                        </li>
                        <li class="d-flex align-items-center list-group-item border-0">
                            <span class="fw-bold">Tanggal B.K dibuat:</span>
                            <span class="ms-auto">
                                {{ date_formatting($detail->created_at, 'timeago') }}
                            </span>
                        </li>
                        <li class="d-flex align-items-center list-group-item border-0">
                            <span class="fw-bold">Tanggal B.K diperbarui:</span>
                            <span class="ms-auto">
                                {{ date_formatting($detail->updated_at, 'timeago') }}
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-12 mt-5">
            <div class="card">
                <div class="card-body">
                    @if($detail->is_status == 4)
                    <div class="mb-4">
                        <div class="alert alert-success">Bimbingan dan konseling sudah ditutup/dinyatakan selesai!</div>
                    </div>
                    @endif
                    @if(!empty($ticketResponse))
                        <div class="mb-4" style="max-height: 300px" data-simplebar>
                            @foreach($ticketResponse as $record)
                            @php $sender = \App\Models\User::find($record->user_id)->name @endphp
                            @php $senderAvatar = substr($sender, 0, 1) @endphp
                            <div class="mb-9">
                                <div class="card card-bordered w-100">
                                    <div class="card-body">
                                        <div class="w-100 d-flex flex-stack mb-8">
                                            <div class="d-flex align-items-center f">
                                                <div class="symbol symbol-50px me-5">
                                                    @if (\App\Models\User::find($record->user_id)->level == enum('isKonselor'))
                                                        @php
                                                            $level = "konselor";
                                                        @endphp
                                                        <div class="symbol-label fs-1 fw-bold bg-primary text-white">
                                                            {{ $senderAvatar }}
                                                        </div>
                                                    @else
                                                        @php
                                                            $level = "siswa";
                                                        @endphp
                                                        <div class="symbol-label fs-1 fw-bold bg-dark text-white">
                                                            {{ $senderAvatar }}
                                                        </div>
                                                    @endif
                                                </div>
                                                <div class="d-flex flex-column fw-semibold fs-5 text-gray-600 text-dark">
                                                    <div class="d-flex align-items-center">
                                                        <a href="#" class="text-gray-800 fw-bold text-hover-primary fs-5 me-3">{{ $sender }} <span class="small text-muted">as {{ $level }}</small></a>
                                                        <span class="m-0"></span>
                                                    </div>
                                                    <span class="text-muted fw-semibold small">{{ date_formatting($record->created_at, 'timeago') }}</span>
                                                </div>
                                            </div>
                                        </div>

                                        <!--begin::Desc-->
                                        <p class="fw-normal fs-5 text-gray-700 m-0">
                                            {!! $record->message !!}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    @else
                        <div class="alert alert-danger d-flex align-items-center p-5">
                            <i class="ki-duotone ki-shield-tick fs-2hx text-danger me-4"><span class="path1"></span><span class="path2"></span></i>
                            <div class="d-flex flex-column">
                                <h4 class="mb-1 text-danger">Maaf! Pesan tidak ditemukan</h4>
                                <span>Tidak ditemukan pesan pada ticket, Silahkan kirim pesan</span>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    {{ Form::close() }}
</section>

@push('scripts')
    <script src="https://preview.keenthemes.com/html/metronic/docs/assets/plugins/custom/ckeditor/ckeditor-classic.bundle.js"></script>
    <script>
    ClassicEditor
    .create(document.querySelector('#message'), {
        placeholder: 'Apa keluhan anda?',
        toolbar: {
            alignment: {
                options: ['left','right']
            },
            items: [
                'undo', 'redo',
                '|', 'heading',
                '|', 'bold', 'italic', 'underline', 'strikethrough',
                '|', 'link', 'insertTable',
                '|', 'bulletedList', 'numberedList', 'outdent', 'indent',
                '|', 'alignment','blockQuote',
                '|', 'horizontalLine',
            ]
        }
    });
    </script>
@endpush
@include('components.theme.pages.footer')