@extends('layouts.admin-apoteker')

@section('title', 'Data Konseling')

@section('content')
<div class="container mx-auto space-y-6">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
    <h1 class="text-xl font-bold text-gray-900 dark:text-white">📋 Daftar Konseling</h1>

    <div class="flex gap-2">
        <a href="{{ route('web.apotek2.konseling.export.all', request()->query()) }}"
           class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">
            🧾 Export Excel
        </a>
        <a href="{{ route('web.apotek2.konseling.create') }}"
           class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
            ➕ Tambah Konseling
        </a>
    </div>
</div>


    {{-- Form Pencarian dan Filter --}}
    <form method="GET" action="{{ route('web.apotek2.konseling.index') }}" class="flex flex-wrap items-center gap-2">
        <input type="text" name="q" value="{{ request('q') }}" placeholder="Cari nama pasien..." class="rounded border-gray-300 dark:bg-gray-700 dark:text-white px-3 py-2 w-64">
        <select name="apoteker_id" class="rounded border-gray-300 dark:bg-gray-700 dark:text-white px-3 py-2">
            <option value="">-- Semua Apoteker --</option>
            @foreach($apotekers as $apoteker)
                <option value="{{ $apoteker->id }}" {{ request('apoteker_id') == $apoteker->id ? 'selected' : '' }}>
                    {{ $apoteker->name }}
                </option>
            @endforeach
        </select>
        <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Terapkan</button>
        <a href="{{ route('web.apotek2.konseling.index') }}" class="bg-red-600 text-white px-4 py-2 rounded hover:bg-gray-500">Reset</a>

    </form>

    <table class="table-auto w-full text-sm border rounded shadow">
        <thead class="bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white">
            <tr>
                <th class="border px-2 py-1">Pasien</th>
                <th class="border px-2 py-1">Tanggal</th>
                <th class="border px-2 py-1">Dokter</th>
                <th class="border px-2 py-1">Diagnosa</th>
                <th class="border px-2 py-1">Apoteker</th>
                <th class="border px-2 py-1">Aksi</th>
            </tr>
        </thead>
        <tbody>
            @forelse($konselings as $konseling)
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
                    <td class="border px-2 py-1">{{ $konseling->pasien->name }}</td>
                    <td class="border px-2 py-1">{{ $konseling->tanggal_konseling }}</td>
                    <td class="border px-2 py-1">{{ $konseling->nama_dokter ?? '-' }}</td>
                    <td class="border px-2 py-1">{{ \Illuminate\Support\Str::limit($konseling->diagnosa, 30) }}</td>
                    <td class="border px-2 py-1">{{ $konseling->apoteker->name }}</td>
                    <td class="border px-2 py-1 space-y-1">
                        <a href="{{ route('web.apotek2.konseling.show', $konseling->id) }}" class="text-blue-600 hover:underline">Lihat</a>
                        <a href="{{ route('web.apotek2.konseling.edit', $konseling->id) }}" class="text-green-600 hover:underline">Edit</a>
                        <button type="button" data-id="{{ $konseling->id }}" class="text-red-600 hover:underline delete-btn">Hapus</button>
                        <a href="{{ route('web.apotek2.konseling.pdf', $konseling->id) }}" class="text-pink-600 hover:underline">📄 PDF</a>

                        @if($konseling->rekaman_konseling)
                            <audio controls class="w-full mt-1">
                                <source src="{{ asset('storage/' . $konseling->rekaman_konseling) }}" type="audio/webm">
                                Browser tidak mendukung audio.
                            </audio>
                        @else
                            <p class="text-gray-500 text-sm italic">Tidak ada rekaman</p>
                        @endif

                        <form id="delete-form-{{ $konseling->id }}" action="{{ route('web.apotek2.konseling.destroy', $konseling->id) }}" method="POST" class="hidden">
                            @csrf @method('DELETE')
                        </form>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="6" class="text-center py-4 text-gray-500">Belum ada data konseling.</td>
                </tr>
            @endforelse
        </tbody>
    </table>

    @if(method_exists($konselings, 'links'))
        <div class="mt-4">
            {{ $konselings->appends(request()->query())->links() }}
        </div>
    @endif
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.querySelectorAll('.delete-btn').forEach(button => {
        button.addEventListener('click', function () {
            const id = this.getAttribute('data-id');
            Swal.fire({
                title: 'Yakin ingin menghapus?',
                text: 'Data konseling akan dihapus permanen.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#e3342f',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('delete-form-' + id).submit();
                }
            });
        });
    });
</script>
@endpush