<x-app-layout>
    <x-slot name="header">Manajemen Pembayaran</x-slot>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6">

        {{-- Breadcrumb --}}
        <nav class="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400">
            <a href="{{ route('admin.pembayaran.index') }}" class="hover:text-teal-500 transition">Pembayaran</a>
            <i class="fas fa-chevron-right text-xs"></i>
            <span class="text-slate-700 dark:text-slate-200 font-medium">Buat Tagihan</span>
        </nav>

        {{-- Stats --}}
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
            <div class="kkd-card flex items-center gap-3 p-4">
                <div class="w-10 h-10 rounded-lg flex items-center justify-center bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 text-blue-600 shrink-0">
                    <i class="fas fa-file-invoice text-sm"></i>
                </div>
                <div><p class="stat-label">Tagihan Hari Ini</p><p class="stat-value text-2xl">{{ $stats['total_hari_ini'] }}</p></div>
            </div>
            <div class="kkd-card flex items-center gap-3 p-4">
                <div class="w-10 h-10 rounded-lg flex items-center justify-center bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 text-green-600 shrink-0">
                    <i class="fas fa-check-circle text-sm"></i>
                </div>
                <div><p class="stat-label">Lunas Hari Ini</p><p class="stat-value text-2xl">{{ $stats['lunas_hari_ini'] }}</p></div>
            </div>
            <div class="kkd-card flex items-center gap-3 p-4">
                <div class="w-10 h-10 rounded-lg flex items-center justify-center bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 text-amber-600 shrink-0">
                    <i class="fas fa-clock text-sm"></i>
                </div>
                <div><p class="stat-label">Menunggu</p><p class="stat-value text-2xl">{{ $stats['menunggu'] }}</p></div>
            </div>
            <div class="kkd-card flex items-center gap-3 p-4">
                <div class="w-10 h-10 rounded-lg flex items-center justify-center bg-teal-50 dark:bg-teal-900/20 border border-teal-200 dark:border-teal-700 text-teal-600 shrink-0">
                    <i class="fas fa-coins text-sm"></i>
                </div>
                <div>
                    <p class="stat-label">Pendapatan Hari Ini</p>
                    <p class="text-lg font-bold text-slate-800 dark:text-white">Rp {{ number_format($stats['pendapatan_hari_ini'], 0, ',', '.') }}</p>
                </div>
            </div>
        </div>

        {{-- Error --}}
        @if($errors->any())
            <div class="p-4 rounded-xl bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-700">
                <p class="text-sm font-semibold text-red-700 dark:text-red-400 mb-1"><i class="fas fa-exclamation-circle mr-1"></i>Terdapat kesalahan:</p>
                <ul class="list-disc list-inside text-sm text-red-600 space-y-0.5">
                    @foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach
                </ul>
            </div>
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

            {{-- ── Kolom Kiri: Info Konsultasi ─────────────────────────────── --}}
            <div class="space-y-5">

                {{-- Info Pasien --}}
                <div class="kkd-card">
                    <h3 class="section-title mb-4"><i class="fas fa-user mr-2 text-teal-500"></i>Pasien</h3>
                    <dl class="space-y-2 text-sm">
                        <div>
                            <dt class="text-xs text-slate-400 uppercase tracking-wider mb-0.5">Nama</dt>
                            <dd class="font-semibold text-slate-800 dark:text-white">{{ $konsultasi->pasien->nama_lengkap ?? '-' }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs text-slate-400 uppercase tracking-wider mb-0.5">No. Rekam Medis</dt>
                            <dd class="font-medium text-slate-700 dark:text-slate-300">{{ $konsultasi->pasien->no_rekam_medis ?? '-' }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs text-slate-400 uppercase tracking-wider mb-0.5">No. Konsultasi</dt>
                            <dd class="font-medium text-teal-600 dark:text-teal-400">{{ $konsultasi->nomor_konsultasi ?? '-' }}</dd>
                        </div>
                    </dl>
                </div>

                {{-- Info Dokter --}}
                <div class="kkd-card">
                    <h3 class="section-title mb-4"><i class="fas fa-user-md mr-2 text-blue-500"></i>Dokter</h3>
                    <dl class="space-y-2 text-sm">
                        <div>
                            <dt class="text-xs text-slate-400 uppercase tracking-wider mb-0.5">Nama</dt>
                            <dd class="font-semibold text-slate-800 dark:text-white">{{ $konsultasi->dokter->nama_lengkap ?? '-' }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs text-slate-400 uppercase tracking-wider mb-0.5">Spesialisasi</dt>
                            <dd class="font-medium text-slate-700 dark:text-slate-300">{{ $konsultasi->dokter->spesialisasi ?? 'Umum' }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs text-slate-400 uppercase tracking-wider mb-0.5">Tarif Konsultasi</dt>
                            <dd class="font-bold text-teal-600 dark:text-teal-400">Rp {{ number_format($tarifDefault, 0, ',', '.') }}</dd>
                        </div>
                    </dl>
                </div>

                {{-- Keluhan --}}
                @if($konsultasi->keluhan_pasien)
                <div class="kkd-card">
                    <h3 class="section-title mb-3"><i class="fas fa-notes-medical mr-2 text-orange-500"></i>Keluhan</h3>
                    <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed">{{ $konsultasi->keluhan_pasien }}</p>
                    @if($konsultasi->diagnosis_utama)
                        <div class="mt-3 pt-3 border-t border-slate-200 dark:border-slate-700">
                            <p class="text-xs text-slate-400 mb-0.5">Diagnosis</p>
                            <p class="text-sm font-medium text-slate-700 dark:text-slate-300">{{ $konsultasi->diagnosis_utama }}</p>
                        </div>
                    @endif
                </div>
                @endif

            </div>

            {{-- ── Kolom Kanan: Form Tagihan ────────────────────────────────── --}}
            <div class="lg:col-span-2">
                <form action="{{ route('admin.pembayaran.store') }}" method="POST" id="formTagihan">
                    @csrf
                    <input type="hidden" name="dokter_pasien_id" value="{{ $konsultasi->id }}">

                    <div class="space-y-5">

                        {{-- Rincian Biaya --}}
                        <div class="kkd-card">
                            <h3 class="section-title mb-4"><i class="fas fa-receipt mr-2 text-green-500"></i>Rincian Biaya</h3>

                            <div class="space-y-4">
                                {{-- Biaya Konsultasi --}}
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                                        Biaya Konsultasi <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm font-medium">Rp</span>
                                        <input type="number" name="biaya_konsultasi" id="biayaKonsultasi"
                                               value="{{ old('biaya_konsultasi', $tarifDefault) }}"
                                               min="0" required
                                               oninput="hitungTotal()"
                                               class="w-full pl-10 pr-3 py-2.5 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-sm text-slate-800 dark:text-slate-200 focus:ring-2 focus:ring-teal-400 outline-none">
                                    </div>
                                    @error('biaya_konsultasi')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
                                </div>

                                {{-- Biaya Tambahan --}}
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                                        Biaya Tambahan <span class="text-xs text-slate-400">(opsional)</span>
                                    </label>
                                    <div class="relative">
                                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm font-medium">Rp</span>
                                        <input type="number" name="biaya_tambahan" id="biayaTambahan"
                                               value="{{ old('biaya_tambahan', 0) }}"
                                               min="0" placeholder="0"
                                               oninput="hitungTotal()"
                                               class="w-full pl-10 pr-3 py-2.5 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-sm text-slate-800 dark:text-slate-200 focus:ring-2 focus:ring-teal-400 outline-none">
                                    </div>
                                </div>

                                {{-- Keterangan Biaya Tambahan --}}
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                                        Keterangan Biaya Tambahan <span class="text-xs text-slate-400">(opsional)</span>
                                    </label>
                                    <input type="text" name="keterangan_biaya_tambahan"
                                           value="{{ old('keterangan_biaya_tambahan') }}"
                                           placeholder="Contoh: Obat, tindakan, dll."
                                           class="w-full px-3 py-2.5 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-sm text-slate-800 dark:text-slate-200 focus:ring-2 focus:ring-teal-400 outline-none">
                                </div>

                                {{-- Diskon --}}
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                                        Diskon <span class="text-xs text-slate-400">(opsional)</span>
                                    </label>
                                    <div class="relative">
                                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm font-medium">Rp</span>
                                        <input type="number" name="diskon" id="diskon"
                                               value="{{ old('diskon', 0) }}"
                                               min="0" placeholder="0"
                                               oninput="hitungTotal()"
                                               class="w-full pl-10 pr-3 py-2.5 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-sm text-slate-800 dark:text-slate-200 focus:ring-2 focus:ring-teal-400 outline-none">
                                    </div>
                                </div>

                                {{-- Total Preview --}}
                                <div class="p-4 rounded-xl bg-teal-50 dark:bg-teal-900/20 border border-teal-200 dark:border-teal-700">
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <p class="text-xs text-teal-600 dark:text-teal-400 font-semibold uppercase tracking-wider mb-0.5">Total yang Harus Dibayar</p>
                                            <p id="previewTotal" class="text-2xl font-bold text-teal-700 dark:text-teal-300">
                                                Rp {{ number_format($tarifDefault, 0, ',', '.') }}
                                            </p>
                                        </div>
                                        <div class="w-12 h-12 rounded-full bg-teal-100 dark:bg-teal-900/50 flex items-center justify-center">
                                            <i class="fas fa-calculator text-teal-600 text-lg"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Metode Pembayaran --}}
                        <div class="kkd-card">
                            <h3 class="section-title mb-4"><i class="fas fa-credit-card mr-2 text-purple-500"></i>Metode Pembayaran <span class="text-red-500">*</span></h3>

                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">

                                {{-- TUNAI --}}
                                <label class="metode-card cursor-pointer" id="cardTunai">
                                    <input type="radio" name="metode_pembayaran" value="TUNAI" class="sr-only"
                                           {{ old('metode_pembayaran') === 'TUNAI' ? 'checked' : '' }}
                                           onchange="pilihtMetode('TUNAI')">
                                    <div class="flex items-center gap-3 p-4 rounded-xl border-2 border-slate-200 dark:border-slate-700 hover:border-teal-400 dark:hover:border-teal-600 transition"
                                         id="boxTunai">
                                        <div class="w-11 h-11 rounded-xl flex items-center justify-center bg-blue-100 dark:bg-blue-900/40 shrink-0">
                                            <i class="fas fa-money-bill-wave text-blue-600 text-lg"></i>
                                        </div>
                                        <div>
                                            <p class="font-semibold text-slate-800 dark:text-white text-sm">Tunai</p>
                                            <p class="text-xs text-slate-400">Bayar langsung di kasir</p>
                                        </div>
                                        <div class="ml-auto w-5 h-5 rounded-full border-2 border-slate-300 dark:border-slate-600 flex items-center justify-center" id="radioBtnTunai">
                                            <div class="w-2.5 h-2.5 rounded-full bg-teal-500 hidden" id="radioFillTunai"></div>
                                        </div>
                                    </div>
                                </label>

                                {{-- QRIS --}}
                                <label class="metode-card cursor-pointer" id="cardQris">
                                    <input type="radio" name="metode_pembayaran" value="QRIS" class="sr-only"
                                           {{ old('metode_pembayaran') === 'QRIS' ? 'checked' : '' }}
                                           onchange="pilihtMetode('QRIS')">
                                    <div class="flex items-center gap-3 p-4 rounded-xl border-2 border-slate-200 dark:border-slate-700 hover:border-teal-400 dark:hover:border-teal-600 transition"
                                         id="boxQris">
                                        <div class="w-11 h-11 rounded-xl flex items-center justify-center bg-yellow-100 dark:bg-yellow-900/40 shrink-0">
                                            <i class="fas fa-qrcode text-yellow-600 text-lg"></i>
                                        </div>
                                        <div>
                                            <p class="font-semibold text-slate-800 dark:text-white text-sm">QRIS</p>
                                            <p class="text-xs text-slate-400">Scan QR code untuk bayar</p>
                                        </div>
                                        <div class="ml-auto w-5 h-5 rounded-full border-2 border-slate-300 dark:border-slate-600 flex items-center justify-center" id="radioBtnQris">
                                            <div class="w-2.5 h-2.5 rounded-full bg-teal-500 hidden" id="radioFillQris"></div>
                                        </div>
                                    </div>
                                </label>

                            </div>
                            @error('metode_pembayaran')<p class="text-xs text-red-500 mt-2">{{ $message }}</p>@enderror
                        </div>

                        {{-- Tombol Aksi --}}
                        <div class="flex items-center gap-3 justify-end">
                            <a href="{{ route('admin.pembayaran.index') }}"
                               class="px-5 py-2.5 rounded-lg border border-slate-300 dark:border-slate-600 text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 transition">
                                <i class="fas fa-arrow-left mr-1.5"></i>Batal
                            </a>
                            <button type="submit" id="btnSubmit"
                                    class="px-6 py-2.5 bg-gradient-to-r from-teal-500 to-teal-600 hover:from-teal-600 hover:to-teal-700 text-white text-sm font-semibold rounded-lg shadow transition disabled:opacity-60 disabled:cursor-not-allowed">
                                <i class="fas fa-file-invoice mr-2"></i>Buat Tagihan
                            </button>
                        </div>

                    </div>
                </form>
            </div>

        </div>
    </div>

    @push('scripts')
    <script>
    // ── Hitung Total Preview ──────────────────────────────────────────────────
    function hitungTotal() {
        const konsul   = parseFloat(document.getElementById('biayaKonsultasi').value) || 0;
        const tambahan = parseFloat(document.getElementById('biayaTambahan').value)   || 0;
        const diskon   = parseFloat(document.getElementById('diskon').value)           || 0;
        const total    = Math.max(0, konsul + tambahan - diskon);

        document.getElementById('previewTotal').textContent =
            'Rp ' + total.toLocaleString('id-ID');
    }

    // ── Pilih Metode Pembayaran ───────────────────────────────────────────────
    function pilihtMetode(metode) {
        // Reset semua
        ['Tunai', 'Qris'].forEach(m => {
            document.getElementById('box' + m).classList.remove('border-teal-500', 'bg-teal-50', 'dark:bg-teal-900/20');
            document.getElementById('box' + m).classList.add('border-slate-200', 'dark:border-slate-700');
            document.getElementById('radioFill' + m).classList.add('hidden');
            document.getElementById('radioBtnQris'.replace('Qris', m)).classList.remove('border-teal-500');
        });

        // Aktifkan yang dipilih
        const id = metode === 'TUNAI' ? 'Tunai' : 'Qris';
        document.getElementById('box' + id).classList.add('border-teal-500', 'bg-teal-50', 'dark:bg-teal-900/20');
        document.getElementById('box' + id).classList.remove('border-slate-200', 'dark:border-slate-700');
        document.getElementById('radioFill' + id).classList.remove('hidden');
        document.getElementById('radioBtn' + id).classList.add('border-teal-500');
    }

    // ── Validasi Form sebelum Submit ─────────────────────────────────────────
    document.getElementById('formTagihan').addEventListener('submit', function(e) {
        const metode = document.querySelector('input[name="metode_pembayaran"]:checked');
        if (!metode) {
            e.preventDefault();
            alert('Pilih metode pembayaran terlebih dahulu!');
            return;
        }
        const btn = document.getElementById('btnSubmit');
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Memproses...';
    });

    // ── Init: jika ada old value --
    @if(old('metode_pembayaran'))
        pilihtMetode('{{ old("metode_pembayaran") }}');
    @endif

    // Hitung total saat load
    hitungTotal();
    </script>
    @endpush
</x-app-layout>