@extends('layout.app')
@section('content')
    <style>
        .card {
            box-shadow: none !important;
        }

        button {
            text-decoration: none !important;
        }

        table thead th {
            background-color: #87CEEB !important;
            color: rgb(12, 12, 12) !important;
            border-color: #eaeaea !important;
            padding: 12px;
            text-align: center;
        }

        table tbody tr:nth-child(odd) {
            background-color: #f2f2f2 !important;
        }

        table tbody tr:nth-child(even) {
            background-color: #ffffff !important;
        }

        table tbody tr:hover {
            background-color: #d1ecf1 !important;
        }

        table,
        th,
        td {
            border: 2px solid #eaeaea !important;
            padding: 10px;
        }

        table tbody td {
            text-align: left;
        }
    </style>

    <div class="container">
        <div class="page-inner">
            <div class="page-header">
                <h3 class="fw-bold mb-3">Riwayat Diagnosa</h3>
            </div>

            {{-- Tampilan Mobile --}}
            <div id="mobileDiagnosisContainer" class="d-block d-md-none" style="background-color: #F5F7FD;">
                @forelse($diagnosa as $data)
                    <div class="card shadow-sm rounded-4 border-0 mb-4 mobile-card" data-id="{{ $data->id }}"
                        style="background-color: #f9f9f9;">
                        <div class="card-body p-3 shadow" style="border-radius: 10px;">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <div class="d-flex align-items-center">
                                    <i class="bi bi-calendar-check-fill text-primary me-2"></i>
                                    <span class="fw-bold">{{ $data->tanggal_diagnosa }}</span>
                                </div>
                                <a href="#" class="text-danger fw-bold btn-hapus" data-id="{{ $data->id }}"
                                    data-token="{{ csrf_token() }}" style="text-decoration: none;">
                                    Hapus
                                </a>
                            </div>
                            <hr class="my-3">
                            <div class="d-flex justify-content-between mb-1">
                                <span class="fw-bold">Nilai CF:</span>
                                <span class="badge bg-success"><strong>{{ number_format($data->cf * 100) }}%</strong></span>
                            </div>
                            <div class="mb-1">
                                <span class="fw-bold">Indikasi Penyakit:</span>
                                <p class="mb-0">{{ $data->penyakit->nama_penyakit }}</p>
                            </div>
                            <div>
                                <span class="fw-bold">Penanganan:</span>
                                <p class="mb-0 text-justify d-none penanganan" id="penanganan-{{ $data->id }}">
                                    {{ $data->penanganan }}
                                </p>
                            </div>
                            <button class="btn btn-link p-0 mt-2 text-primary fw-bold lihat-selengkapnya"
                                style="text-decoration: none;" data-id="{{ $data->id }}">
                                Lihat Selengkapnya...
                            </button>
                        </div>
                    </div>
                @empty
                    <p class="text-center py-3">Tidak ada data riwayat diagnosa.</p>
                @endforelse
            </div>


            {{-- Tampilan Desktop --}}
            <div class="col-xl-12 col-md-12 mt-4">
                <div class="card border-0 shadow-sm rounded-4">
                    <div class="card-body d-none d-md-block">
                        <div class="table-responsive">
                            <table id='diagnosisTable' class="table table-bordered" width="100%" cellspacing="0"
                                style="border-width: 2px;">
                                <thead>
                                    <tr>
                                        <th class="text-center" style="width: 5%;">No</th>
                                        <th class="text-center" style="width: 20%;">Tanggal</th>
                                        <th style="width: 20%;">Indikasi Penyakit</th>
                                        <th style="width: 10%;">Nilai CF</th>
                                        <th class="text-center" style="width: 15%;">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($diagnosa as $data)
                                        <tr>
                                            <td class="text-center">{{ $loop->iteration }}</td>
                                            <td>{{ $data->tanggal_diagnosa }}</td>
                                            <td>{{ $data->penyakit->nama_penyakit }}</td>
                                            <td class="text-center">{{ number_format($data->cf * 100) }}%</td>
                                            <td class="text-center">
                                                <a href="#" data-bs-toggle="modal" data-bs-target="#detailModal"
                                                    class="btn btn-success mb-3" onclick="detailData({{ $data }})">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a href="#" class="btn btn-danger mb-3 btn-hapus"
                                                    data-id="{{ $data->id }}">
                                                    <i class="fas fa-trash"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center">Tidak ada data riwayat diagnosa.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-md">
            <div class="modal-content" style="border-radius: 10px; overflow: hidden;">
                <div class="modal-header bg-white">
                    <h5 class="modal-title text-dark" id="detailModalLabel">Detail Penanganan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" style="background-color: #f8f9fa; padding: 20px;">
                    <div class="row">
                        <div class="col-12 text-start">
                            <h6 class="fw-bold text-dark">Penanganan:</h6>
                            <p id="modalPenanganan" class="text-muted mb-0 text-start"></p>
                        </div>
                        <div class="col-12 text-start mt-3">
                            <h6 class="fw-bold text-dark">Gambar Penyakit:</h6>
                            <img id="modalGambar" src="" alt="Gambar Penyakit" class="img-fluid rounded shadow-lg"
                                style="max-height: 180px; object-fit: cover;">
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-end" style="background-color: #e9ecef;">
                    <button type="button" class="btn btn-dark" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>








    @section('script')
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            $(document).ready(function() {
                let table = $('#diagnosisTable').DataTable({
                    responsive: true,
                    paging: true,
                    lengthChange: false,
                    searching: true,
                    ordering: true,
                    info: false,
                    autoWidth: false,
                    pageLength: 5
                });

                // Fungsi untuk menampilkan detail data pada modal
                window.detailData = function(data) {
                    console.log(data.gambar);

                    $('#modalGambar').attr('src', '/storage/' + data.gambar);
                    $('#modalPenanganan').text(data.penanganan);
                }

                // Toggle tampilan penanganan
                $(document).on('click', '.lihat-selengkapnya', function() {
                    let id = $(this).data('id');
                    let penanganan = $('#penanganan-' + id);
                    let button = $(this);

                    penanganan.toggleClass('d-none');
                    button.text(penanganan.hasClass('d-none') ? 'Lihat Selengkapnya' : 'Tutup');
                });

                // Hapus riwayat diagnosa tanpa konfirmasi
                $(document).on('click', '.btn-hapus', function(e) {
                    e.preventDefault();
                    let id = $(this).data('id');
                    let row = $(this).closest('tr');
                    let card = $('.mobile-card[data-id="' + id + '"]'); // Untuk tampilan mobile

                    $.ajax({
                        url: '{{ route('diagnosa.destroy', '') }}/' + id,
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.success) {
                                table.row(row).remove().draw(false);

                                card.fadeOut(500, function() {
                                    $(this).remove();
                                    checkMobileEmptyState();
                                });

                                updateTableNumbers();

                                if (table.rows().count() === 0) {
                                    $('#diagnosisTable tbody').html(
                                        '<tr><td colspan="6" class="text-center">Tidak ada riwayat diagnosa</td></tr>'
                                    );
                                }

                                Swal.fire({
                                    toast: true,
                                    position: 'top-end',
                                    icon: 'success',
                                    title: 'Riwayat berhasil dihapus!',
                                    showConfirmButton: false,
                                    timer: 3000
                                });

                                setTimeout(checkMobileEmptyState, 500);
                            }
                        }
                    });
                });

                // Fungsi untuk memperbarui nomor urut di tabel setelah penghapusan
                function updateTableNumbers() {
                    $('#diagnosisTable tbody tr').each(function(index) {
                        $(this).find('td:first').text(index + 1);
                    });
                }

                // Fungsi untuk menampilkan pesan "Tidak ada riwayat diagnosa" jika semua data terhapus (Mobile)
                function checkMobileEmptyState() {
                    if ($('.mobile-card').length === 0) {
                        $('#mobileDiagnosisContainer').html('<p class="text-center">Tidak ada riwayat diagnosa</p>');
                    }
                }
            });
        </script>
    @endsection

@endsection