@extends('layouts.app')

@section('title', 'Bonus Pasien')

@section('content')
<div class="space-y-6 animate-fade-in">
    
    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Bonus Pasien</h1>
            <p class="text-gray-600 dark:text-gray-400 mt-1">Kelola bonus berdasarkan jumlah pasien per bulan</p>
        </div>
        <button onclick="openModal('add')" class="w-full sm:w-auto justify-center inline-flex items-center px-6 py-3 bg-gradient-to-r from-primary-600 to-primary-700 hover:from-primary-700 hover:to-primary-800 text-white font-medium rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 transform hover:-translate-y-0.5">
            <i class="fas fa-plus mr-2"></i><span class="hidden sm:inline">Tambah Bonus</span><span class="sm:hidden">Tambah</span>
        </button>
    </div>

    <!-- Table Card -->
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-soft overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <div class="flex items-center justify-between">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
                    <i class="fas fa-gift mr-2 text-primary-600 dark:text-primary-400"></i>
                    Daftar Bonus Pasien
                </h2>
                <span class="text-sm text-gray-600 dark:text-gray-400">
                    Menampilkan <span class="font-semibold">{{ $bonuses->firstItem() ?? 0 }}</span> - <span class="font-semibold">{{ $bonuses->lastItem() ?? 0 }}</span> dari <span class="font-semibold text-primary-600 dark:text-primary-400">{{ $bonuses->total() }}</span>
                </span>
            </div>
        </div>
        <div class="overflow-x-auto scroll-smooth" style="-webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; overscroll-behavior: contain;">
            <table class="w-full">
                <thead class="bg-gray-50 dark:bg-gray-900/50 sticky top-0">
                    <tr>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider">No</th>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider">Jumlah Pasien/Bulan</th>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider">Bonus Pasien/Bulan</th>
                        <th class="px-6 py-4 text-center text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                    @forelse($bonuses as $index => $bonus)
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors duration-150">
                            <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">{{ ($bonuses->currentPage() - 1) * $bonuses->perPage() + $index + 1 }}</td>
                            <td class="px-6 py-4 font-medium text-gray-900 dark:text-white">{{ $bonus->patient_count }} Pasien</td>
                            <td class="px-6 py-4 text-green-600 dark:text-green-400 font-semibold">Rp {{ number_format($bonus->bonus, 0, ',', '.') }}</td>
                            <td class="px-6 py-4 text-center">
                                <div class="flex items-center justify-center space-x-2">
                                    <button onclick='openModal("edit", {{ json_encode($bonus) }})' class="w-9 h-9 md:w-8 md:h-8 flex items-center justify-center text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-all" title="Edit">
                                        <i class="fas fa-edit text-sm"></i>
                                    </button>
                                    <button onclick="deleteBonus({{ $bonus->id }})" class="w-9 h-9 md:w-8 md:h-8 flex items-center justify-center text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-all" title="Hapus">
                                        <i class="fas fa-trash text-sm"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="px-6 py-16 text-center">
                                <div class="flex flex-col items-center justify-center">
                                    <div class="w-20 h-20 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mb-4">
                                        <i class="fas fa-inbox text-gray-400 text-4xl"></i>
                                    </div>
                                    <p class="text-gray-500 dark:text-gray-400 font-medium text-lg">Belum ada data bonus</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    @if($bonuses->hasPages())
    <div class="mt-4 flex items-center justify-between">
        <div class="text-sm text-gray-600 dark:text-gray-400">
            Halaman {{ $bonuses->currentPage() }} dari {{ $bonuses->lastPage() }}
        </div>
        <div>
            {{ $bonuses->withQueryString()->links() }}
        </div>
    </div>
    @endif

    <!-- Info -->
    <div class="bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-400 dark:border-blue-600 p-4 rounded-xl">
        <div class="flex items-start">
            <i class="fas fa-info-circle text-blue-600 dark:text-blue-400 mt-1 mr-3"></i>
            <div>
                <p class="text-sm text-blue-800 dark:text-blue-300 font-medium">Cara Kerja Bonus Pasien</p>
                <p class="text-sm text-blue-700 dark:text-blue-300 mt-1">
                    Bonus diberikan otomatis jika therapist mencapai target jumlah pasien dalam 1 bulan. 
                    Sistem akan mengambil bonus tertinggi yang sesuai dengan jumlah pasien yang dicapai.
                </p>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div id="bonusModal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-50 items-center justify-center p-4">
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl max-w-md w-full max-h-[85vh] overflow-y-auto">
        <div class="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
            <h3 id="modalTitle" class="text-xl font-bold text-gray-900 dark:text-white">Tambah Bonus</h3>
            <button onclick="closeModal()" class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-all">
                <i class="fas fa-times text-gray-400"></i>
            </button>
        </div>
        
        <form id="bonusForm" method="POST" class="p-6 space-y-4">
            @csrf
            <input type="hidden" id="method" name="_method" value="POST">
            
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jumlah Pasien/Bulan</label>
                <input type="number" name="patient_count" id="patient_count" required min="1" class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border-0 rounded-xl text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 transition-all">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Bonus</label>
                <input type="number" name="bonus" id="bonus" required min="0" class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border-0 rounded-xl text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 transition-all">
            </div>

            <div class="flex flex-col sm:flex-row justify-end gap-3 pt-4">
                <button type="button" onclick="closeModal()" class="w-full sm:w-auto px-6 py-3 border-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-all">Batal</button>
                <button type="submit" class="w-full sm:w-auto px-6 py-3 bg-gradient-to-r from-primary-600 to-primary-700 hover:from-primary-700 hover:to-primary-800 text-white font-medium rounded-xl shadow-lg hover:shadow-xl transition-all">Simpan</button>
            </div>
        </form>
    </div>
</div>

<!-- Delete Form -->
<form id="deleteForm" method="POST" class="hidden">
    @csrf
    @method('DELETE')
</form>

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@endpush

@push('scripts')
<script>
function openModal(mode, data = null) {
    const modal = document.getElementById('bonusModal');
    const form = document.getElementById('bonusForm');
    const title = document.getElementById('modalTitle');
    const method = document.getElementById('method');
    
    if (mode === 'add') {
        title.textContent = 'Tambah Bonus';
        form.action = '{{ route("patient-bonus.store") }}';
        method.value = 'POST';
        form.reset();
    } else {
        title.textContent = 'Edit Bonus';
        form.action = `/patient-bonus/${data.id}`;
        method.value = 'PUT';
        document.getElementById('patient_count').value = data.patient_count;
        document.getElementById('bonus').value = data.bonus;
    }
    
    modal.classList.remove('hidden');
    modal.classList.add('flex');
}

function closeModal() {
    const modal = document.getElementById('bonusModal');
    modal.classList.add('hidden');
    modal.classList.remove('flex');
}

function deleteBonus(id) {
    if (confirm('Yakin ingin menghapus bonus ini?')) {
        const form = document.getElementById('deleteForm');
        form.action = `/patient-bonus/${id}`;
        form.submit();
    }
}
</script>
@endpush
@endsection