@extends('layouts.app')

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

@section('content')
<div class="space-y-6 animate-fade-in">
    
    <!-- Header -->
    <div>
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Fee Harian</h1>
        <p class="text-gray-600 dark:text-gray-400 mt-1">Kelola fee harian therapist</p>
    </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">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
                <i class="fas fa-calendar-day mr-2 text-primary-600 dark:text-primary-400"></i>
                Daftar Fee Harian
            </h2>
        </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">Deskripsi</th>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider">Nominal Fee</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">
                    @foreach($dailyFees as $index => $dailyFee)
                        <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">{{ $index + 1 }}</td>
                            <td class="px-6 py-4 font-medium text-gray-900 dark:text-white">{{ $dailyFee->description }}</td>
                            <td class="px-6 py-4 text-green-600 dark:text-green-400 font-semibold">Rp {{ number_format($dailyFee->fee, 0, ',', '.') }}</td>
                            <td class="px-6 py-4 text-center">
                                <button onclick='openModal({{ json_encode($dailyFee) }})' class="inline-flex items-center justify-center w-10 h-10 sm:w-auto sm:h-auto px-4 py-2 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 mr-1"></i> <span class="hidden sm:inline">Edit</span>
                                </button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <!-- 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">Informasi Fee Harian</p>
                <p class="text-sm text-blue-700 dark:text-blue-300 mt-1">
                    Jika 1 hari therapist hanya menangani 1 pasien, maka fee harian yang didapat sesuai nominal "1 Pasien/Hari". 
                    Jika dalam 1 hari menangani 2 atau lebih pasien, maka fee harian yang didapat sesuai nominal "2+ Pasien/Hari".
                </p>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div id="dailyFeeModal" 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 class="text-xl font-bold text-gray-900 dark:text-white">Edit Fee Harian</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="dailyFeeForm" method="POST" class="p-6 space-y-4">
            @csrf
            @method('PUT')
            
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Deskripsi</label>
                <input type="text" id="description" disabled class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-700 border-0 rounded-xl text-gray-500 dark:text-gray-400">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Nominal Fee</label>
                <input type="number" name="fee" id="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>

@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(data) {
    const modal = document.getElementById('dailyFeeModal');
    const form = document.getElementById('dailyFeeForm');
    
    form.action = `/daily-fee/${data.id}`;
    document.getElementById('description').value = data.description;
    document.getElementById('fee').value = data.fee;
    
    modal.classList.remove('hidden');
    modal.classList.add('flex');
}

function closeModal() {
    const modal = document.getElementById('dailyFeeModal');
    modal.classList.add('hidden');
    modal.classList.remove('flex');
}
</script>
@endpush
@endsection