@extends('layouts.app')

@section('title', 'Fee Treatment')

@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">Fee Treatment</h1>
            <p class="text-gray-600 dark:text-gray-400 mt-1">Kelola treatment dan fee therapist</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 Treatment</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-list mr-2 text-primary-600 dark:text-primary-400"></i>
                    Daftar Treatment
                </h2>
                <span class="text-sm text-gray-600 dark:text-gray-400">
                    Menampilkan <span class="font-semibold">{{ $treatments->firstItem() ?? 0 }}</span> - <span class="font-semibold">{{ $treatments->lastItem() ?? 0 }}</span> dari <span class="font-semibold text-primary-600 dark:text-primary-400">{{ $treatments->total() }}</span>
                </span>
            </div>
        </div>
        
        <div class="sm:hidden px-4 py-2 text-xs text-gray-500">Geser ke samping untuk melihat kolom ➜</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 text-xs md:text-sm">
                <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">Nama Treatment</th>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider">Jenis Treatment</th>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider">Harga Jual</th>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider">Fee Therapist</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($treatments as $index => $treatment)
                        <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">{{ ($treatments->currentPage() - 1) * $treatments->perPage() + $index + 1 }}</td>
                            <td class="px-6 py-4 font-medium text-gray-900 dark:text-white">{{ $treatment->name }}</td>
                            <td class="px-6 py-4">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold 
                                    {{ $treatment->type == 'package' ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300' : ($treatment->type == 'single' ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300' : 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300') }}">
                                    {{ ucfirst($treatment->type) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-gray-900 dark:text-white">Rp {{ number_format($treatment->price, 0, ',', '.') }}</td>
                            <td class="px-6 py-4 text-green-600 dark:text-green-400 font-semibold">Rp {{ number_format($treatment->therapist_fee, 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($treatment) }})' 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="deleteTreatment({{ $treatment->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="6" 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 treatment</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        @if($treatments->hasPages())
        <div class="px-6 py-3 flex items-center justify-end gap-3 bg-gray-50 dark:bg-gray-900/30 border-t border-gray-200 dark:border-gray-700">
            <div class="flex items-center gap-1 overflow-x-auto">
                <a href="{{ $treatments->previousPageUrl() ?: '#' }}" class="px-3 py-1.5 rounded-lg border text-sm {{ $treatments->onFirstPage() ? 'pointer-events-none opacity-50 border-gray-200 text-gray-400' : 'border-gray-300 hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300' }}">&lt;</a>
                @for ($i = 1; $i <= $treatments->lastPage(); $i++)
                    <a href="{{ $treatments->url($i) }}" class="px-3 py-1.5 rounded-lg border text-sm {{ $i === $treatments->currentPage() ? 'bg-primary-600 border-primary-600 text-white' : 'border-gray-300 hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300' }}">{{ $i }}</a>
                @endfor
                <a href="{{ $treatments->nextPageUrl() ?: '#' }}" class="px-3 py-1.5 rounded-lg border text-sm {{ $treatments->currentPage() === $treatments->lastPage() ? 'pointer-events-none opacity-50 border-gray-200 text-gray-400' : 'border-gray-300 hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300' }}">&gt;</a>
            </div>
        </div>
        @endif
    </div>
<!-- Info: Cara Kerja Fee Treatment -->
    <div class="mt-4 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 Fee Treatment</p>
                <p class="text-sm text-blue-700 dark:text-blue-300 mt-1">
                    Data ini menjadi referensi daftar treatment yang dipakai saat penjadwalan dan perhitungan slip gaji.
                    Harga Jual adalah tarif ke pasien; Fee Therapist adalah bagian untuk therapist yang dijumlahkan ke slip gaji.
                </p>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div id="treatmentModal" 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 Treatment</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="treatmentForm" 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">Nama Treatment</label>
                <input type="text" name="name" id="name" required 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">Jenis Treatment</label>
                <select name="type" id="type" required 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 appearance-none cursor-pointer transition-all">
                    <option value="">Pilih Jenis</option>
                    <option value="single">Single</option>
                    <option value="package">Package</option>
                    <option value="extra">Extra</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Harga Jual</label>
                <input type="number" name="price" id="price" 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>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Fee Therapist</label>
                <input type="number" name="therapist_fee" id="therapist_fee" 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('treatmentModal');
    const form = document.getElementById('treatmentForm');
    const title = document.getElementById('modalTitle');
    const method = document.getElementById('method');
    
    if (mode === 'add') {
        title.textContent = 'Tambah Treatment';
        form.action = '{{ route("fee-treatment.store") }}';
        method.value = 'POST';
        form.reset();
    } else {
        title.textContent = 'Edit Treatment';
        form.action = `/fee-treatment/${data.id}`;
        method.value = 'PUT';
        document.getElementById('name').value = data.name;
        document.getElementById('type').value = data.type;
        document.getElementById('price').value = data.price;
        document.getElementById('therapist_fee').value = data.therapist_fee;
    }
    
    modal.classList.remove('hidden');
    modal.classList.add('flex');
}

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

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