@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">

                <div class="row mx-1">
                    <div class="card shadow-sm border-0">

                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0 fw-bold">{{ $title_menu }}</h5>
                            </div>

                            <div class="col">
                                @include('components.alert')
                            </div>
                        </div>

                        <hr class="horizontal dark mt-0">

                        {{-- ===== EXCEL, PDF, SEARCH ===== --}}
                        <div class="row px-4 py-2">
                            <div class="col-lg d-flex flex-wrap gap-2 align-items-center">

                                <a href="{{ route('pesan.transc', ['export' => 'excel']) }}" class="btn btn-secondary btn-sm mb-0">
                                    <i class="fas fa-file-excel me-1 text-success"></i>
                                    <span class="font-weight-bold">Excel</span>
                                </a>

                                <a href="{{ route('pesan.transc', ['export' => 'pdf']) }}" class="btn btn-secondary btn-sm mb-0">
                                    <i class="fas fa-file-pdf me-1 text-danger"></i>
                                    <span class="font-weight-bold">PDF</span>
                                </a>

                                <div class="ms-auto d-flex align-items-center">
                                    <input
                                        type="text"
                                        id="customSearchPesan"
                                        class="form-control form-control-sm"
                                        style="width: 220px;"
                                        placeholder="Cari data..."
                                    >
                                </div>

                            </div>
                        </div>

                        {{-- ===== TABEL PESAN MASUK ===== --}}
                        <div class="row px-4 py-2">
                            <div class="table-responsive">

                                <table class="table display align-middle mb-0" id="list_pesan" style="width: 100%;">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th width="90" class="text-center text-nowrap">Action</th>
                                            <th width="50" class="text-center text-nowrap">No</th>
                                            <th width="150">Tanggal</th>
                                            <th>Nama Pengirim</th>
                                            <th>Email / Telepon</th>
                                            <th width="120" class="text-center text-nowrap">Status</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        @foreach ($pesanList as $p)
                                            <tr class="{{ $p->is_read == 0 ? 'fw-bold' : '' }}">
                                                <td class="text-center text-nowrap align-middle">
                                                    <button
                                                        class="btn btn-primary btn-xs mb-0 px-3 btn-detail-pesan"
                                                        type="button"
                                                        data-id="{{ $p->idpesan }}"
                                                    >
                                                        <i class="fas fa-eye me-1"></i>
                                                        <span class="font-weight-bold"> Detail</span>
                                                    </button>
                                                </td>

                                                <td class="text-center font-weight-bold align-middle">{{ $loop->iteration }}</td>

                                                <td class="text-sm font-weight-normal align-middle">
                                                    {{ date('d/m/Y H:i', strtotime($p->created_at)) }}
                                                </td>

                                                <td class="text-sm font-weight-normal align-middle">
                                                    <div class="d-flex flex-column">
                                                        <span class="fw-bold text-dark">{{ $p->nama }}</span>
                                                        @if($p->subject)
                                                            <span class="text-xs text-muted">Subjek: {{ Str::limit($p->subject, 35) }}</span>
                                                        @endif
                                                    </div>
                                                </td>

                                                <td class="text-sm font-weight-normal align-middle">
                                                    <div class="d-flex flex-column">
                                                        <span class="text-primary">{{ $p->email }}</span>
                                                        @if($p->telepon)
                                                            <span class="text-xs text-muted">WA: {{ $p->telepon }}</span>
                                                        @endif
                                                    </div>
                                                </td>

                                                <td class="text-sm font-weight-normal text-center align-middle">
                                                    @if($p->is_read == 0)
                                                        <span class="badge bg-danger">Belum Dibaca</span>
                                                    @else
                                                        <span class="badge bg-success">Sudah Dibaca</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>

                            </div>
                        </div>

                        <div class="card-footer bg-white border-0 py-3"></div>

                    </div>
                </div>

                {{-- Area Detail Pesan Masuk --}}
                <div class="row mx-1 mt-4">
                    <div class="col-12 p-0">
                        <div id="section-detail-area"></div>
                    </div>
                </div>

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

@push('js')
<script>
    $('#list_pesan').DataTable({
        paging: true,
        info: true,
        searching: true,
        responsive: true,
        dom: 'rtip',
        language: {
            zeroRecords: "Maaf - Data tidak ditemukan"
        },
        initComplete: function() {
            $('.dataTables_filter').remove();

            $('#customSearchPesan').on('keyup', function () {
                $('#list_pesan').DataTable().search(this.value).draw();
            });
        }
    });

    function loadPesanDetail(id) {
        const $area = $('#section-detail-area');

        $area.html(`
            <div class="card shadow-sm border-0">
                <div class="card-body text-center text-muted py-5">
                    <i class="fa fa-spinner fa-spin me-2"></i>
                    Memuat detail pesan masuk...
                </div>
            </div>
        `);

        $.get(`{{ url('/pesan-transc/detail') }}/${id}`)
            .done(function (html) {
                $area.html(html);
                $('html, body').animate({
                    scrollTop: $area.offset().top - 100
                }, 300);
            })
            .fail(function () {
                $area.html(`
                    <div class="card shadow-sm border-0">
                        <div class="card-body text-danger py-4 text-center">
                            Gagal memuat detail pesan.
                        </div>
                    </div>
                `);
            });
    }

    $(document).on('click', '.btn-detail-pesan', function () {
        loadPesanDetail($(this).data('id'));
    });
</script>
@endpush