@extends('layouts.app')

@section('title', 'Jadwal')

@push('styles')
<style>
/* Mobile First Responsive */
.schedule-card {
    transition: all 0.3s ease;
}
.schedule-card:active {
    transform: scale(0.98);
}
#reimburseModal {
    display: none;
}
#reimburseModal.show {
    display: flex;
}
</style>
@endpush

@section('content')
<div class="space-y-4 animate-fade-in">
    
    <!-- Header -->
    <div class="flex items-center justify-between gap-3">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Jadwal Treatment</h1>
            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Kelola jadwal Anda</p>
        </div>
        <a href="{{ auth()->user()->isTherapist() ? route('therapist.schedules.create') : route('schedules.create') }}" 
           class="inline-flex items-center justify-center w-12 h-12 bg-gradient-to-r from-primary-600 to-primary-700 hover:from-primary-700 hover:to-primary-800 text-white rounded-xl shadow-lg">
            <i data-lucide="plus" class="w-6 h-6"></i>
        </a>
    </div>

    <!-- Filter Card -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-soft p-4">
        <form method="GET" class="space-y-3">
            <div class="relative">
                <i data-lucide="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400"></i>
                <input type="text" 
                       name="search" 
                       value="{{ request('search') }}" 
                       placeholder="Cari pasien..." 
                       class="w-full pl-10 pr-3 py-2.5 text-sm bg-gray-50 dark:bg-gray-700 border-0 rounded-lg text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500">
            </div>
            
            <div class="grid grid-cols-2 gap-3">
                <div class="relative">
                    <i data-lucide="map-pin" class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400"></i>
                    <input type="text" 
                           name="domicile" 
                           value="{{ request('domicile') }}" 
                           placeholder="Domisili..." 
                           class="w-full pl-10 pr-3 py-2.5 text-sm bg-gray-50 dark:bg-gray-700 border-0 rounded-lg text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500">
                </div>
                
                <div class="relative">
                    <i data-lucide="calendar" class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400"></i>
                    <input type="date" 
                           name="date" 
                           value="{{ request('date') }}" 
                           class="w-full pl-10 pr-3 py-2.5 text-sm bg-gray-50 dark:bg-gray-700 border-0 rounded-lg text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500">
                </div>
            </div>
            
            <button type="submit" 
                    class="w-full inline-flex items-center justify-center py-2.5 bg-gradient-to-r from-primary-600 to-primary-700 text-white text-sm font-medium rounded-lg shadow-lg">
                <i data-lucide="filter" class="w-4 h-4 mr-2"></i>
                Filter
            </button>
        </form>
    </div>

    <!-- Schedule List - Mobile First -->
    <div class="space-y-3">
        @forelse($groupedSchedules as $date => $schedules)
            <!-- Date Header -->
            <div class="bg-gradient-to-r from-primary-600 to-primary-700 rounded-lg px-4 py-2 flex items-center gap-2">
                <i data-lucide="calendar" class="w-4 h-4 text-white"></i>
                <span class="text-white font-semibold text-sm">{{ \Carbon\Carbon::parse($date)->format('d/m/Y') }}</span>
            </div>
            
            @foreach($schedules as $schedule)
                <!-- Schedule Card -->
                <div class="schedule-card bg-white dark:bg-gray-800 rounded-xl shadow-soft overflow-hidden">
                    <div class="p-4 space-y-3">
                        <!-- Patient & Time -->
                        <div class="flex items-start justify-between gap-2">
                            <div class="flex-1 min-w-0">
                                <h3 class="font-bold text-gray-900 dark:text-white text-base">{{ $schedule->patient_name }}</h3>
                                <div class="flex items-center gap-3 mt-1 text-xs text-gray-500 dark:text-gray-400">
                                    <span class="flex items-center gap-1">
                                        <i data-lucide="clock" class="w-3 h-3"></i>
                                        {{ \Carbon\Carbon::parse($schedule->start_time)->format('H:i') }}
                                    </span>
                                    <span class="flex items-center gap-1">
                                        <i data-lucide="map-pin" class="w-3 h-3"></i>
                                        {{ $schedule->patient_domicile }}
                                    </span>
                                </div>
                            </div>
                            <!-- Edit & Delete Schedule Icons -->
                            <div class="flex items-center gap-1 flex-shrink-0">
                                <a href="{{ auth()->user()->isTherapist() ? route('therapist.schedules.edit', $schedule->id) : route('schedules.edit', $schedule->id) }}" 
                                   class="p-2 text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-900/20 rounded-lg"
                                   title="Edit Jadwal">
                                    <i data-lucide="edit-2" class="w-4 h-4"></i>
                                </a>
                                @if(auth()->user()->isAdminOrSuperAdmin())
                                    <button onclick="deleteSchedule({{ $schedule->id }})" 
                                            class="p-2 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 rounded-lg"
                                            title="Hapus Jadwal">
                                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                                    </button>
                                @endif
                            </div>
                        </div>
                        
                        <!-- Treatment -->
                        <div>
                            <div class="text-sm font-medium text-gray-900 dark:text-white">{{ $schedule->treatment->name }}</div>
                            @if($schedule->day_label)
                                <span class="inline-block px-2 py-0.5 rounded text-xs bg-accent-100 dark:bg-accent-900/30 text-accent-700 dark:text-accent-300 mt-1">
                                    {{ $schedule->day_label }}
                                </span>
                            @endif
                        </div>
                        
                        <!-- Add-ons -->
                        @if($schedule->addons->count() > 0)
                            <div class="border-t border-gray-200 dark:border-gray-700 pt-2">
                                <div class="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1">Add-on:</div>
                                @foreach($schedule->addons as $addon)
                                    <div class="text-xs text-gray-700 dark:text-gray-300">• {{ $addon->treatment->name }}</div>
                                @endforeach
                            </div>
                        @endif
                        
                        <!-- Reimburse Actions -->
                        <div class="flex items-center gap-2 pt-2 border-t border-gray-200 dark:border-gray-700">
                            @if($schedule->reimbursements->count() > 0)
                                @foreach($schedule->reimbursements as $reimburse)
                                    <button onclick="viewReimbursement({{ $reimburse->id }})" 
                                            class="p-2 text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20 rounded-lg"
                                            title="Detail Reimburse">
                                        <i data-lucide="eye" class="w-4 h-4"></i>
                                    </button>
                                    <button onclick="editReimbursement({{ $reimburse->id }})" 
                                            class="p-2 text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 rounded-lg"
                                            title="Edit Reimburse">
                                        <i data-lucide="edit-2" class="w-4 h-4"></i>
                                    </button>
                                    <button onclick="deleteReimbursement({{ $reimburse->id }})" 
                                            class="p-2 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 rounded-lg"
                                            title="Hapus Reimburse">
                                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                                    </button>
                                @endforeach
                            @else
                                <button onclick="addReimbursement({{ $schedule->id }})" 
                                        class="flex-1 flex items-center justify-center gap-1 py-2 bg-primary-600 text-white rounded-lg text-xs font-medium"
                                        title="Tambah Reimburse">
                                    <i data-lucide="plus" class="w-3.5 h-3.5"></i>
                                    Reimburse
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        @empty
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-soft p-12 text-center">
                <div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i data-lucide="calendar-x" class="w-8 h-8 text-gray-400"></i>
                </div>
                <p class="text-gray-500 dark:text-gray-400 font-medium">Belum ada jadwal</p>
                <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Klik tombol + untuk membuat jadwal</p>
            </div>
        @endforelse
    </div>
</div>

<!-- Modal Reimburse -->
<div id="reimburseModal" class="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-xl shadow-2xl max-w-lg w-full transform transition-all">
        <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
            <h3 id="modalTitle" class="text-lg font-bold text-gray-900 dark:text-white">Reimburse</h3>
            <button type="button" onclick="closeModal()" class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">
                <i data-lucide="x" class="w-5 h-5 text-gray-400"></i>
            </button>
        </div>
        
        <form id="reimburseForm" enctype="multipart/form-data" class="p-4">
            @csrf
            <input type="hidden" id="reimburseId" name="reimburse_id">
            <input type="hidden" id="scheduleId" name="schedule_id">
            <input type="hidden" id="formMethod" name="_method" value="POST">
            
            <div id="viewMode" class="space-y-4 hidden">
                <div>
                    <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1.5">Keterangan</label>
                    <div id="viewDescription" class="text-sm text-gray-900 dark:text-white p-3 bg-gray-50 dark:bg-gray-700 rounded-lg whitespace-pre-wrap"></div>
                </div>
                
                <div>
                    <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1.5">Nominal</label>
                    <div id="viewAmount" class="text-sm font-semibold text-gray-900 dark:text-white p-3 bg-gray-50 dark:bg-gray-700 rounded-lg"></div>
                </div>
                
                <div id="photoSlider" class="hidden">
                    <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1.5">Bukti Foto</label>
                    <div class="relative">
                        <div id="sliderContainer" class="overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-700">
                            <div id="sliderImages" class="flex transition-transform duration-300"></div>
                        </div>
                        <button type="button" onclick="prevPhoto()" class="absolute left-2 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white p-2 rounded-full hover:bg-opacity-75">
                            <i data-lucide="chevron-left" class="w-4 h-4"></i>
                        </button>
                        <button type="button" onclick="nextPhoto()" class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white p-2 rounded-full hover:bg-opacity-75">
                            <i data-lucide="chevron-right" class="w-4 h-4"></i>
                        </button>
                    </div>
                    <div id="photoIndicators" class="flex justify-center mt-2 space-x-2"></div>
                </div>
            </div>
            
            <div id="editMode" class="space-y-4">
                <div>
                    <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1.5">Keterangan</label>
                    <textarea id="description" name="description" rows="3" required
                        class="w-full px-3 py-2 text-sm bg-gray-50 dark:bg-gray-700 border-0 rounded-lg text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500"></textarea>
                </div>
                
                <div>
                    <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1.5">Nominal</label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm">Rp</span>
                        <input type="number" id="amount" name="amount" required
                            class="w-full pl-10 pr-3 py-2 text-sm bg-gray-50 dark:bg-gray-700 border-0 rounded-lg text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500">
                    </div>
                </div>
                
                <div id="existingPhotosSection" class="hidden">
                    <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2">Foto Saat Ini</label>
                    <div id="existingPhotos" class="grid grid-cols-3 gap-3"></div>
                    <input type="hidden" id="photosToDeleteContainer">
                    <p class="text-[11px] text-gray-500 dark:text-gray-400 mt-1">Centang foto yang ingin dihapus saat menyimpan.</p>
                </div>
                
                <div id="photoUploadSection">
                    <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1.5">Tambah Foto (maks 3)</label>
                    <input type="file" id="photos" name="photos[]" multiple accept="image/*"
                        class="block w-full text-xs text-gray-500 dark:text-gray-400 file:mr-3 file:py-2 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-primary-50 dark:file:bg-primary-900/30 file:text-primary-700 dark:file:text-primary-300 cursor-pointer">
                    <div id="newPhotosPreview" class="grid grid-cols-3 gap-3 mt-2"></div>
                </div>
            </div>
            
            <div class="flex gap-2 mt-5 pt-4 border-t border-gray-200 dark:border-gray-700">
                <button type="button" onclick="closeModal()" 
                        class="flex-1 py-2.5 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg text-sm font-medium">
                    Tutup
                </button>
                <button type="submit" id="submitBtn" 
                        class="flex-1 py-2.5 bg-gradient-to-r from-primary-600 to-primary-700 text-white rounded-lg text-sm font-medium">
                    Simpan
                </button>
            </div>
        </form>
    </div>
</div>

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

@push('scripts')
<script>
lucide.createIcons();

// Photo Slider Variables
let currentPhotoIndex = 0;
let totalPhotos = 0;

// Reimburse Functions
function addReimbursement(scheduleId) {
    document.getElementById('modalTitle').textContent = 'Tambah Reimburse';
    document.getElementById('reimburseId').value = '';
    document.getElementById('scheduleId').value = scheduleId;
    document.getElementById('formMethod').value = 'POST';
    document.getElementById('description').value = '';
    document.getElementById('amount').value = '';
    document.getElementById('photos').value = '';
    
    document.getElementById('viewMode').classList.add('hidden');
    document.getElementById('editMode').classList.remove('hidden');
    document.getElementById('submitBtn').classList.remove('hidden');
    document.getElementById('photoSlider').classList.add('hidden');
    
    document.getElementById('reimburseModal').classList.add('show');
    setTimeout(() => lucide.createIcons(), 50);
}

function viewReimbursement(reimburseId) {
    console.log('=== VIEW REIMBURSE START ===');
    console.log('Reimburse ID:', reimburseId);
    
    fetch(`/api/reimbursement/${reimburseId}`, {
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(res => {
        console.log('Response status:', res.status);
        if (!res.ok) {
            throw new Error(`HTTP ${res.status}`);
        }
        return res.json();
    })
    .then(data => {
        console.log('Full response data:', JSON.stringify(data, null, 2));
        console.log('Photos array:', data.photos);
        console.log('Photos length:', data.photos ? data.photos.length : 0);
        
        document.getElementById('modalTitle').textContent = 'Detail Reimburse';
        document.getElementById('viewDescription').textContent = data.description;
        document.getElementById('viewAmount').textContent = 'Rp ' + new Intl.NumberFormat('id-ID').format(data.amount);
        
        // Show photos with slider
        if (data.photos && data.photos.length > 0) {
            console.log('Calling displayPhotos with', data.photos.length, 'photos');
            displayPhotos(data.photos);
            document.getElementById('photoSlider').classList.remove('hidden');
            console.log('Photo slider shown');
        } else {
            console.log('No photos to display');
            document.getElementById('photoSlider').classList.add('hidden');
        }
        
        document.getElementById('viewMode').classList.remove('hidden');
        document.getElementById('editMode').classList.add('hidden');
        document.getElementById('submitBtn').classList.add('hidden');
        
        document.getElementById('reimburseModal').classList.add('show');
        setTimeout(() => lucide.createIcons(), 50);
        console.log('=== VIEW REIMBURSE END ===');
    })
    .catch(err => {
        console.error('Error loading reimburse:', err);
        alert('Gagal memuat data reimburse: ' + err.message);
    });
}

function editReimbursement(reimburseId) {
    fetch(`/api/reimbursement/${reimburseId}`)
        .then(res => res.json())
        .then(data => {
            document.getElementById('modalTitle').textContent = 'Edit Reimburse';
            document.getElementById('reimburseId').value = reimburseId;
            document.getElementById('scheduleId').value = data.schedule_id || '';
            document.getElementById('formMethod').value = 'POST';
            document.getElementById('description').value = data.description;
            document.getElementById('amount').value = data.amount;
            document.getElementById('photos').value = '';
            
            // Render existing photos with checkbox delete
            const section = document.getElementById('existingPhotosSection');
            const container = document.getElementById('existingPhotos');
            container.innerHTML = '';
            if (data.photos && data.photos.length > 0) {
                section.classList.remove('hidden');
                data.photos.forEach(p => {
                    const item = document.createElement('div');
                    item.className = 'relative group';
                    item.innerHTML = `
                        <img src="${p.url}" class="w-full h-24 object-cover rounded-lg border" alt="foto">
                        <label class="absolute top-1 right-1 bg-white/90 dark:bg-gray-800/90 rounded px-1.5 py-0.5 text-[10px] shadow hidden group-hover:block cursor-pointer">
                            <input type="checkbox" name="photos_to_delete[]" value="${p.id}" class="mr-1 align-middle"> Hapus
                        </label>
                    `;
                    container.appendChild(item);
                });
            } else {
                section.classList.add('hidden');
            }
            
            // Reset new photos preview
            document.getElementById('newPhotosPreview').innerHTML = '';
            
            document.getElementById('viewMode').classList.add('hidden');
            document.getElementById('editMode').classList.remove('hidden');
            document.getElementById('submitBtn').classList.remove('hidden');
            
            document.getElementById('reimburseModal').classList.add('show');
            setTimeout(() => lucide.createIcons(), 50);
        })
        .catch(err => {
            alert('Gagal memuat data reimburse');
            console.error(err);
        });
}

function displayPhotos(photos) {
    const sliderImages = document.getElementById('sliderImages');
    const indicators = document.getElementById('photoIndicators');
    if (!sliderImages || !indicators) return;

    sliderImages.innerHTML = '';
    indicators.innerHTML = '';
    totalPhotos = photos.length;
    currentPhotoIndex = 0;

    photos.forEach((photo, index) => {
        const img = document.createElement('img');
        img.src = photo.url;
        // Pastikan satu slide = satu gambar penuh lebar kontainer
        img.className = 'flex-none w-full h-48 object-contain bg-gray-50 dark:bg-gray-700';
        img.alt = 'Bukti Reimburse ' + (index + 1);
        img.onerror = function() { this.style.border = '2px solid red'; };
        sliderImages.appendChild(img);

        const indicator = document.createElement('div');
        indicator.className = `w-2 h-2 rounded-full ${index === 0 ? 'bg-primary-600 dark:bg-primary-400' : 'bg-gray-300 dark:bg-gray-600'}`;
        indicators.appendChild(indicator);
    });
}

function prevPhoto() {
    if (currentPhotoIndex > 0) {
        currentPhotoIndex--;
        updateSlider();
    }
}

function nextPhoto() {
    if (currentPhotoIndex < totalPhotos - 1) {
        currentPhotoIndex++;
        updateSlider();
    }
}

function updateSlider() {
    const sliderImages = document.getElementById('sliderImages');
    const indicators = document.getElementById('photoIndicators').children;
    sliderImages.style.transform = `translateX(-${currentPhotoIndex * 100}%)`;
    
    Array.from(indicators).forEach((indicator, index) => {
        indicator.className = `w-2 h-2 rounded-full ${index === currentPhotoIndex ? 'bg-primary-600 dark:bg-primary-400' : 'bg-gray-300 dark:bg-gray-600'}`;
    });
    
    setTimeout(() => lucide.createIcons(), 50);
}

function deleteReimbursement(reimburseId) {
    if (confirm('Yakin ingin menghapus reimburse ini?')) {
        fetch(`/api/reimbursement/${reimburseId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json'
            }
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert(data.message || 'Gagal menghapus reimburse');
            }
        })
        .catch(err => {
            alert('Gagal menghapus reimburse');
            console.error(err);
        });
    }
}

function deleteSchedule(scheduleId) {
    if (confirm('Yakin ingin menghapus jadwal ini?')) {
        const form = document.getElementById('deleteForm');
        form.action = `/schedules/${scheduleId}`;
        form.submit();
    }
}

function closeModal() {
    document.getElementById('reimburseModal').classList.remove('show');
}

document.getElementById('reimburseForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const reimburseId = document.getElementById('reimburseId').value;
    const scheduleId = document.getElementById('scheduleId').value;
    
    let url, method;
    if (reimburseId) {
        url = `/api/reimbursement/${reimburseId}`;
        method = 'POST';
    } else {
        url = `/api/schedules/${scheduleId}/reimbursement`;
        method = 'POST';
    }
    
    fetch(url, {
        method: method,
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json'
        }
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert(data.message || 'Gagal menyimpan reimburse');
        }
    })
    .catch(err => {
        alert('Gagal menyimpan reimburse');
        console.error(err);
    });
});

// Preview new photos
const inputPhotos = document.getElementById('photos');
if (inputPhotos) {
    inputPhotos.addEventListener('change', function() {
        const preview = document.getElementById('newPhotosPreview');
        preview.innerHTML = '';
        Array.from(this.files).forEach(file => {
            const reader = new FileReader();
            reader.onload = e => {
                const img = document.createElement('img');
                img.src = e.target.result;
                img.className = 'w-full h-24 object-cover rounded-lg border';
                preview.appendChild(img);
            };
            reader.readAsDataURL(file);
        });
    });
}

setTimeout(() => lucide.createIcons(), 100);
</script>
@endpush
@endsection