@extends('layouts.app')

@section('title', 'Detail Jadwal ' . $therapist->name)

@push('styles')
<style>
@media (max-width: 640px) {
  .schedule-table th, .schedule-table td { padding: 0.75rem !important; }
}
/* Modal visibility handled by .show to avoid Tailwind display utility conflicts */
#reimburseModal { display: none; }
#reimburseModal.show { display: flex; }
</style>
@endpush

@section('content')
<div class="space-y-6">
    
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-3xl font-bold text-gray-800 dark:text-white">Detail Jadwal - {{ $therapist->name }}</h1>
            <p class="text-gray-600 dark:text-gray-400">Periode: {{ \Carbon\Carbon::parse($startDate)->format('d/m/Y') }} - {{ \Carbon\Carbon::parse($endDate)->format('d/m/Y') }}</p>
        </div>
        <a href="{{ route('schedules.index', ['start_date' => $startDate, 'end_date' => $endDate]) }}" class="inline-flex items-center px-3 py-2 sm:px-4 sm:py-2 rounded-lg bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 hover:bg-indigo-100 dark:hover:bg-indigo-900/50 transition">
            <i class="fas fa-arrow-left mr-2"></i>
            <span class="hidden sm:inline">Kembali</span>
        </a>
    </div>

    <!-- Table -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm overflow-hidden">
        <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">
            <table class="w-full schedule-table">
                <thead class="bg-gray-50 dark:bg-gray-900/50 border-b border-gray-200 dark:border-gray-700">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Tanggal</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Pasien</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Domisili Pasien</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Treatment</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Add On</th>
                        @if(auth()->user()->isAdminOrSuperAdmin())
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Create/Edited At</th>
                        @endif
                        <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Reimburse</th>
                        <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                    @php $totalSchedules = 0; @endphp
                    @forelse($groupedSchedules as $date => $schedules)
                        @php $totalSchedules += $schedules->count(); @endphp
                        @foreach($schedules as $index => $schedule)
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition">
                                @if($index == 0)
                                    <td class="px-4 py-3 text-sm text-gray-900 dark:text-white font-medium whitespace-nowrap" rowspan="{{ $schedules->count() }}">
                                        {{ \Carbon\Carbon::parse($date)->format('d/m/Y') }}
                                    </td>
                                @endif
                                <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">{{ $schedule->patient_name }}</td>
                                <td class="px-4 py-3 text-sm text-gray-900 dark:text-white">{{ $schedule->patient_domicile }}</td>
                                <td class="px-4 py-3 text-sm text-gray-900 dark:text-white">
                                    {{ $schedule->treatment->name }}
                                    @if($schedule->day_label)
                                        <span class="text-xs text-gray-500 dark:text-gray-400">({{ $schedule->day_label }})</span>
                                    @endif
                                </td>
                                <td class="px-4 py-3 text-sm text-gray-900 dark:text-white">
                                    @if($schedule->addons->count() > 0)
                                        @foreach($schedule->addons as $addon)
                                            <div class="mb-1">
                                                {{ $addon->treatment->name }}
                                                @if($addon->day_label)
                                                    <span class="text-xs text-gray-500 dark:text-gray-400">({{ $addon->day_label }})</span>
                                                @endif
                                            </div>
                                        @endforeach
                                    @else
                                        <span class="text-gray-400 dark:text-gray-500">-</span>
                                    @endif

                                    </td>
                                @if(auth()->user()->isAdminOrSuperAdmin())
                                <td class="px-4 py-3 text-xs text-gray-700 dark:text-gray-300">
                                    <div>Created by: {{ optional($schedule->creator)->name ?? '-' }} {{ $schedule->created_at?->timezone('Asia/Jakarta')?->format('d-m-Y H:i') }}</div>
                                    @if($schedule->updated_at && $schedule->updated_at->ne($schedule->created_at))
                                        <div>Edited by: {{ optional($schedule->editor)->name ?? '-' }} {{ $schedule->updated_at?->timezone('Asia/Jakarta')?->format('d-m-Y H:i') }}</div>
                                    @endif
                                </td>
                                @endif
                                <td class="px-4 py-3 text-center">
                                    <div class="flex items-center justify-center space-x-2">
                                        @if($schedule->reimbursements->count() > 0)
                                            @foreach($schedule->reimbursements as $reimburse)
                                                <button onclick="viewReimbursement({{ $reimburse->id }})" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300" title="Detail">
                                                    <i class="fas fa-eye"></i>
                                                </button>
                                                <button onclick="editReimbursement({{ $reimburse->id }})" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300" title="Edit">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button onclick="deleteReimbursement({{ $reimburse->id }})" class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300" title="Hapus">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            @endforeach
                                        @else
                                            <button onclick="addReimbursement({{ $schedule->id }})" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300" title="Tambah">
                                                <i class="fas fa-plus"></i>
                                            </button>
                                        @endif
                                    </div>
                                </td>
                                <td class="px-4 py-3 text-center text-sm font-medium">
                                    <div class="flex items-center justify-center space-x-2">
                                        <a href="{{ route('schedules.edit', $schedule->id) }}" 
                                           class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300" title="Edit">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <button onclick="deleteSchedule({{ $schedule->id }})" class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300" title="Hapus">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    @empty
                        <tr>
                            <td colspan="{{ auth()->user()->isAdminOrSuperAdmin() ? 8 : 7 }}" class="px-6 py-12 text-center text-gray-500 dark:text-gray-400">
                                <i class="fas fa-inbox text-4xl mb-3"></i>
                                <p>Tidak ada jadwal pada periode ini</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    @if($totalSchedules > 0)
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6">
        <div class="text-right">
            <p class="text-lg font-semibold text-gray-800 dark:text-white">Total Jadwal: <span class="text-indigo-600 dark:text-indigo-400">{{ $totalSchedules }}</span></p>
        </div>
    </div>
    @endif
</div>

<!-- Modal Reimburse -->
<div id="reimburseModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 items-center justify-center p-4 sm:p-6 md:p-8 hidden">
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-full md:max-w-3xl lg:max-w-4xl xl:max-w-5xl transform transition-all max-h-[90vh] flex flex-col">
        <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 class="fas fa-times text-gray-400"></i>
            </button>
        </div>
        
        <form id="reimburseForm" enctype="multipart/form-data" class="p-4 overflow-y-auto">
            @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 min-h-[260px] md:min-h-[420px] max-h-[70vh]">
                            <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 class="fas fa-chevron-left"></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 class="fas fa-chevron-right"></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>
                    <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>

<!-- 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>
// Photo Slider Variables
let currentPhotoIndex = 0;
let totalPhotos = 0;

function addReimbursement(scheduleId) {
    document.getElementById('modalTitle').textContent = 'Tambah Reimburse';
    document.getElementById('reimburseId').value = '';
    document.getElementById('scheduleId').value = scheduleId;
    document.getElementById('description').value = '';
    document.getElementById('amount').value = '';
    const photos = document.getElementById('photos');
    if (photos) photos.value = '';

    document.getElementById('existingPhotosSection').classList.add('hidden');
    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.remove('hidden');
    document.getElementById('reimburseModal').classList.add('show');
}

function viewReimbursement(reimburseId) {
    fetch(`/api/reimbursement/${reimburseId}`, { headers: { 'Accept': 'application/json' } })
        .then(res => res.json())
        .then(data => {
            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);

            if (data.photos && data.photos.length > 0) {
                displayPhotos(data.photos);
                document.getElementById('photoSlider').classList.remove('hidden');
            } else {
                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.remove('hidden');
            document.getElementById('reimburseModal').classList.add('show');
        })
        .catch(err => alert('Gagal memuat data reimburse'));
}

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('description').value = data.description;
            document.getElementById('amount').value = data.amount;
            const photos = document.getElementById('photos');
            if (photos) photos.value = '';

            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');
            }

            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.remove('hidden');
            document.getElementById('reimburseModal').classList.add('show');
        })
        .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 slide = document.createElement('div');
        slide.className = 'w-full shrink-0 flex items-center justify-center';
        const img = document.createElement('img');
        img.src = photo.url;
        img.className = 'max-h-[65vh] md:max-h-[70vh] w-auto max-w-full object-contain';
        img.alt = 'Bukti Reimburse ' + (index + 1);
        img.onerror = function() { this.style.border = '2px solid red'; };
        slide.appendChild(img);
        sliderImages.appendChild(slide);

        const indicator = document.createElement('div');
        indicator.className = `w-2 h-2 rounded-full ${index === 0 ? 'bg-indigo-600 dark:bg-indigo-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-indigo-600 dark:bg-indigo-400' : 'bg-gray-300 dark:bg-gray-600'}`;
    });
}

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 closeModal() {
    const modal = document.getElementById('reimburseModal');
    modal.classList.add('hidden');
    modal.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;
    if (reimburseId) {
        url = `/api/reimbursement/${reimburseId}`; // update
    } else {
        url = `/api/schedules/${scheduleId}/reimbursement`; // create
    }

    fetch(url, {
        method: 'POST',
        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');
        if (!preview) return;
        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);
        });
    });
}
</script>
@endpush
@endsection