@extends('layouts.app')

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

@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">Transport Fee</h1>
            <p class="text-gray-600 dark:text-gray-400 mt-1">Kelola biaya transport berdasarkan asal-tujuan</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 Transport Fee</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">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
                <i class="fas fa-car mr-2 text-primary-600 dark:text-primary-400"></i>
                Daftar Transport Fee
            </h2>
        </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">Asal</th>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider">Tujuan</th>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider">Biaya</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($transportFees as $index => $fee)
                        <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">{{ ($transportFees->currentPage() - 1) * $transportFees->perPage() + $index + 1 }}</td>
                            <td class="px-6 py-4 font-medium text-gray-900 dark:text-white">{{ $fee->origin }}</td>
                            <td class="px-6 py-4 font-medium text-gray-900 dark:text-white">{{ $fee->destination }}</td>
                            <td class="px-6 py-4 text-green-600 dark:text-green-400 font-semibold">Rp {{ number_format($fee->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($fee) }})' 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="deleteTransportFee({{ $fee->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="5" 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 transport fee</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@if($transportFees->hasPages())
    <div class="mt-4 flex flex-col sm:flex-row items-center justify-between gap-2 sm:gap-3 w-full">
        <div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 whitespace-nowrap">
            Halaman {{ $transportFees->currentPage() }} dari {{ $transportFees->lastPage() }}
        </div>
        <div class="w-full sm:w-auto flex justify-center overflow-x-auto" style="-webkit-overflow-scrolling: touch;">
            {{ $transportFees->withQueryString()->links('vendor.pagination.tailwind-therapist') }}
        </div>
    </div>
@endif
<!-- Info: Cara Kerja Transport Fee -->
    <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 Transport Fee</p>
                <p class="text-sm text-blue-700 dark:text-blue-300 mt-1">
                    Biaya transport dihitung per kunjungan berdasarkan domisili therapist (Asal) dan domisili pasien (Tujuan).
                    Nilai ini akan otomatis ditambahkan pada perhitungan slip gaji untuk setiap jadwal pasien.
                </p>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->
<div id="transportModal" 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 Transport Fee</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="transportForm" 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">Asal (Domisili Therapist)</label>
                <input type="text" name="origin" id="origin" 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">Tujuan (Domisili Pasien)</label>
                <input type="text" name="destination" id="destination" 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">Biaya</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>

<!-- 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('transportModal');
    const form = document.getElementById('transportForm');
    const title = document.getElementById('modalTitle');
    const method = document.getElementById('method');
    
    if (mode === 'add') {
        title.textContent = 'Tambah Transport Fee';
        form.action = '{{ route("transport-fee.store") }}';
        method.value = 'POST';
        form.reset();
    } else {
        title.textContent = 'Edit Transport Fee';
        form.action = `/transport-fee/${data.id}`;
        method.value = 'PUT';
        document.getElementById('origin').value = data.origin;
        document.getElementById('destination').value = data.destination;
        document.getElementById('fee').value = data.fee;
    }
    
    modal.classList.remove('hidden');
    modal.classList.add('flex');
}

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

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