@extends('layouts.app')

@section('title', 'Edit Jadwal')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    
    <div>
        <h1 class="text-3xl font-bold text-gray-800 dark:text-white">Edit Jadwal</h1>
        <p class="text-gray-600 dark:text-gray-400">Ubah data jadwal treatment</p>
    </div>

    <form action="{{ auth()->user()->isTherapist() ? route('therapist.schedules.update', $schedule->id) : route('schedules.update', $schedule->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        
        @if(auth()->user()->isAdminOrSuperAdmin())
        <!-- Admin/Superadmin bisa edit semua -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 space-y-4">
            <h3 class="text-lg font-bold text-gray-800 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-3">Treatment Utama</h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Nama Pasien *</label>
                    <input type="text" name="patient_name" value="{{ $schedule->patient_name }}" required class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Domisili Pasien *</label>
                    <input type="text" name="patient_domicile" value="{{ $schedule->patient_domicile }}" required class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tanggal Mulai *</label>
                    <input type="date" name="start_date" value="{{ $schedule->start_date->format('Y-m-d') }}" required class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jam Mulai *</label>
                    <input type="time" name="start_time" value="{{ $schedule->start_time }}" required class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Therapist *</label>
                    <select name="therapist_id" required class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                        @foreach($therapists as $therapist)
                            <option value="{{ $therapist->id }}" {{ $schedule->therapist_id == $therapist->id ? 'selected' : '' }}>
                                {{ $therapist->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jenis Treatment *</label>
                    <select name="treatment_type" id="treatment_type" required onchange="loadTreatments(this.value, 'treatment_id')" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                        <option value="single" {{ $schedule->treatment_type == 'single' ? 'selected' : '' }}>Single</option>
                        <option value="package" {{ $schedule->treatment_type == 'package' ? 'selected' : '' }}>Package</option>
                        <option value="extra" {{ $schedule->treatment_type == 'extra' ? 'selected' : '' }}>Extra</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Treatment Utama *</label>
                    <select name="treatment_id" id="treatment_id" required class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                        @foreach($treatments->where('type', $schedule->treatment_type) as $treatment)
                            <option value="{{ $treatment->id }}" {{ $schedule->treatment_id == $treatment->id ? 'selected' : '' }}>
                                {{ $treatment->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Day Label</label>
                    <input type="text" name="day_label" value="{{ $schedule->day_label }}" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                </div>
            </div>
        </div>
        @else
        <!-- Therapist hanya lihat info jadwal (read-only) -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 space-y-4">
            <h3 class="text-lg font-bold text-gray-800 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-3">Informasi Jadwal (Read-Only)</h3>
            <div class="bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-400 dark:border-yellow-600 p-4 mb-4">
                <p class="text-sm text-yellow-700 dark:text-yellow-300">
                    <i class="fas fa-info-circle mr-2"></i>
                    Anda hanya bisa mengedit Add On dan Reimburse. Untuk mengubah data jadwal utama, hubungi admin.
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Nama Pasien</label>
                    <input type="text" value="{{ $schedule->patient_name }}" disabled class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white">
                    <input type="hidden" name="patient_name" value="{{ $schedule->patient_name }}">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Domisili Pasien</label>
                    <input type="text" value="{{ $schedule->patient_domicile }}" disabled class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white">
                    <input type="hidden" name="patient_domicile" value="{{ $schedule->patient_domicile }}">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tanggal Mulai</label>
                    <input type="text" value="{{ $schedule->start_date->format('d/m/Y') }}" disabled class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white">
                    <input type="hidden" name="start_date" value="{{ $schedule->start_date->format('Y-m-d') }}">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jam Mulai</label>
                    <input type="text" value="{{ $schedule->start_time }}" disabled class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white">
                    <input type="hidden" name="start_time" value="{{ $schedule->start_time }}">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Therapist</label>
                    <input type="text" value="{{ $schedule->therapist->name }}" disabled class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white">
                    <input type="hidden" name="therapist_id" value="{{ $schedule->therapist_id }}">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Treatment Utama</label>
                    <input type="text" value="{{ $schedule->treatment->name }}" disabled class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white">
                    <input type="hidden" name="treatment_type" value="{{ $schedule->treatment_type }}">
                    <input type="hidden" name="treatment_id" value="{{ $schedule->treatment_id }}">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Day Label</label>
                    <input type="text" value="{{ $schedule->day_label }}" disabled class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white">
                    <input type="hidden" name="day_label" value="{{ $schedule->day_label }}">
                </div>
            </div>
        </div>
        @endif

        <!-- Add On Section (Bisa diedit oleh Therapist & Admin) -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 space-y-4">
            <h3 class="text-lg font-bold text-gray-800 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-3">Add On Treatment</h3>
            <div id="addons-container">
                @foreach($schedule->addons as $index => $addon)
                <div class="addon-item border border-gray-200 dark:border-gray-700 rounded-lg p-4 mb-3 bg-gray-50 dark:bg-gray-700/50">
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jenis Treatment</label>
                            <select name="addon_treatment_type[]" onchange="loadTreatments(this.value, 'addon_treatment_id_{{ $index }}')" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                                <option value="single" {{ $addon->treatment_type == 'single' ? 'selected' : '' }}>Single</option>
                                <option value="package" {{ $addon->treatment_type == 'package' ? 'selected' : '' }}>Package</option>
                                <option value="extra" {{ $addon->treatment_type == 'extra' ? 'selected' : '' }}>Extra</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Treatment</label>
                            <select name="addon_treatment_id[]" id="addon_treatment_id_{{ $index }}" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                                @foreach($treatments->where('type', $addon->treatment_type) as $treatment)
                                    <option value="{{ $treatment->id }}" {{ $addon->treatment_id == $treatment->id ? 'selected' : '' }}>{{ $treatment->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Day Label</label>
                            <input type="text" name="addon_day_label[]" value="{{ $addon->day_label }}" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                        </div>
                        <div class="flex items-end">
                            <button type="button" onclick="removeAddon(this)" class="w-full px-4 py-2 bg-red-500 dark:bg-red-600 text-white rounded-lg hover:bg-red-600 dark:hover:bg-red-700">
                                <i class="fas fa-trash mr-2"></i>Hapus
                            </button>
                        </div>
                    </div>
                    <input type="hidden" name="addon_start_date[]" value="{{ $addon->start_date->format('Y-m-d') }}">
                    <input type="hidden" name="addon_start_time[]" value="{{ $addon->start_time }}">
                    <input type="hidden" name="addon_therapist_id[]" value="{{ $addon->therapist_id }}">
                </div>
                @endforeach
            </div>
            <button type="button" onclick="addAddon()" class="w-full px-4 py-2 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg hover:border-indigo-500 dark:hover:border-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition text-gray-700 dark:text-gray-300">
                <i class="fas fa-plus mr-2"></i>Tambah Add On
            </button>
        </div>

        <div class="flex justify-end space-x-3">
            <a href="{{ auth()->user()->isTherapist() ? route('therapist.schedules.index') : route('schedules.index') }}" 
               class="px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition text-gray-700 dark:text-gray-300">
                Batal
            </a>
            <button type="submit" class="bg-indigo-600 dark:bg-indigo-500 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 dark:hover:bg-indigo-600 transition">
                <i class="fas fa-save mr-2"></i>Update Jadwal
            </button>
        </div>
    </form>
</div>

@push('scripts')
<script>
let addonCounter = {{ $schedule->addons->count() }};

function loadTreatments(type, targetId) {
    const select = document.getElementById(targetId);
    if (!select) return;
    if (!type) {
        select.innerHTML = '<option value="">Pilih Treatment</option>';
        return;
    }
    const endpoint = "{{ route('api.treatments-by-type') }}";
    fetch(`${endpoint}?type=${encodeURIComponent(type)}`, { headers: { 'Accept': 'application/json' } })
        .then((response) => {
            if (!response.ok) throw new Error('Request failed');
            return response.json();
        })
        .then((data) => {
            const currentValue = select.value;
            select.innerHTML = '<option value="">Pilih Treatment</option>';
            data.forEach((treatment) => {
                const selected = treatment.id == currentValue ? 'selected' : '';
                select.innerHTML += `<option value="${treatment.id}" ${selected}>${treatment.name}</option>`;
            });
        })
        .catch(() => {
            select.innerHTML = '<option value="">Gagal memuat data</option>';
        });
}

function addAddon() {
    const container = document.getElementById('addons-container');
    const newAddon = document.createElement('div');
    newAddon.className = 'addon-item border border-gray-200 dark:border-gray-700 rounded-lg p-4 mb-3 bg-gray-50 dark:bg-gray-700/50';
    newAddon.innerHTML = `
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jenis Treatment</label>
                <select name="addon_treatment_type[]" onchange="loadTreatments(this.value, 'addon_treatment_id_${addonCounter}')" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                    <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">Treatment</label>
                <select name="addon_treatment_id[]" id="addon_treatment_id_${addonCounter}" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                    <option value="">Pilih Treatment</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Day Label</label>
                <input type="text" name="addon_day_label[]" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
            </div>
            <div class="flex items-end">
                <button type="button" onclick="removeAddon(this)" class="w-full px-4 py-2 bg-red-500 dark:bg-red-600 text-white rounded-lg hover:bg-red-600 dark:hover:bg-red-700">
                    <i class="fas fa-trash mr-2"></i>Hapus
                </button>
            </div>
        </div>
        <input type="hidden" name="addon_start_date[]" value="{{ $schedule->start_date->format('Y-m-d') }}">
        <input type="hidden" name="addon_start_time[]" value="{{ $schedule->start_time }}">
        <input type="hidden" name="addon_therapist_id[]" value="{{ $schedule->therapist_id }}">
    `;
    container.appendChild(newAddon);
    addonCounter++;
}

function removeAddon(button) {
    if (confirm('Yakin ingin menghapus add on ini?')) {
        button.closest('.addon-item').remove();
    }
}
</script>
@endpush
@endsection