@extends('layouts.app')

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

@section('content')
<div class="max-w-5xl mx-auto space-y-6 animate-fade-in">
    
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Tambah Jadwal</h1>
            <p class="text-gray-600 dark:text-gray-400 mt-1">Buat jadwal treatment baru untuk pasien</p>
        </div>
        <a href="{{ auth()->user()->isTherapist() ? route('therapist.schedules.index') : route('schedules.index') }}" 
           class="inline-flex items-center px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-xl transition-all">
            <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
            Kembali
        </a>
    </div>

    <form action="{{ auth()->user()->isTherapist() ? route('therapist.schedules.store') : route('schedules.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
        @csrf
        
        <!-- Main Treatment -->
        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-soft overflow-hidden">
            <div class="px-6 py-4 bg-gradient-to-r from-primary-50 to-accent-50 dark:from-primary-900/20 dark:to-accent-900/20 border-b border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-bold text-gray-900 dark:text-white flex items-center">
                    <i data-lucide="clipboard-list" class="w-5 h-5 mr-2 text-primary-600 dark:text-primary-400"></i>
                    Treatment Utama
                </h3>
            </div>
            
            <div class="p-6 space-y-6">
                <!-- Patient Info -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                            Nama Pasien <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <i data-lucide="user" class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"></i>
                            <input type="text" 
                                   name="patient_name" 
                                   required 
                                   placeholder="Masukkan nama pasien"
                                   class="w-full pl-12 pr-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>
                    
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                            Domisili Pasien <span class="text-red-500">*</span>
                        </label>
                        @if(auth()->user()->isTherapist() && !empty($domiciles))
                            <div class="relative">
                                <i data-lucide="map-pin" class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"></i>
                                <select name="patient_domicile" 
                                        required 
                                        class="w-full pl-12 pr-10 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 appearance-none cursor-pointer">
                                    <option value="">Pilih Domisili</option>
                                    @foreach($domiciles as $domicile)
                                        <option value="{{ $domicile }}">{{ $domicile }}</option>
                                    @endforeach
                                </select>
                                <i data-lucide="chevron-down" class="absolute right-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none"></i>
                            </div>
                        @else
                            @if(auth()->user()->isAdminOrSuperAdmin())
                            <div class="relative">
                                <i data-lucide="map-pin" class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"></i>
                                <select id="patient_domicile_select"
                                        name="patient_domicile"
                                        required
                                        disabled
                                        class="w-full pl-12 pr-10 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 appearance-none cursor-not-allowed">
                                    <option value="">Pilih therapist terlebih dahulu</option>
                                </select>
                                <i data-lucide="chevron-down" class="absolute right-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none"></i>
                            </div>
                            <p class="text-xs text-gray-500 mt-1">Asal = domisili therapist, Tujuan = domisili pasien (sesuai master Transport Fee)</p>
                            @else
                            <div class="relative">
                                <i data-lucide="map-pin" class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"></i>
                                <input type="text" 
                                       name="patient_domicile" 
                                       required 
                                       placeholder="Masukkan domisili pasien"
                                       class="w-full pl-12 pr-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>
                            @endif
                        @endif
                    </div>
                </div>

                <!-- Schedule Info -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                            Tanggal Mulai <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <i data-lucide="calendar" class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"></i>
                            <input type="date" 
                                   name="start_date" 
                                   required 
                                   class="w-full pl-12 pr-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>
                    
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                            Jam Mulai <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <i data-lucide="clock" class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"></i>
                            <input type="time" 
                                   name="start_time" 
                                   required 
                                   class="w-full pl-12 pr-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>
                </div>

                <!-- Treatment Details -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                            Therapist <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <i data-lucide="user-check" class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"></i>
                            <select name="therapist_id" 
                                    id="therapist_id"
                                    required 
                                    class="w-full pl-12 pr-10 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 appearance-none cursor-pointer" 
                                    {{ auth()->user()->isTherapist() ? 'disabled' : '' }}>
                                <option value="">Pilih Therapist</option>
                                @foreach($therapists as $therapist)
                                    <option value="{{ $therapist->id }}" {{ auth()->user()->isTherapist() && auth()->id() == $therapist->id ? 'selected' : '' }}>
                                        {{ $therapist->name }}
                                    </option>
                                @endforeach
                            </select>
                            <i data-lucide="chevron-down" class="absolute right-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none"></i>
                        </div>
                        @if(auth()->user()->isTherapist())
                            <input type="hidden" name="therapist_id" value="{{ auth()->id() }}">
                        @endif
                    </div>
                    
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                            Jenis Treatment <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <i data-lucide="package" class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"></i>
                            <select name="treatment_type" 
                                    id="treatment_type" 
                                    required 
                                    onchange="loadTreatments(this.value, 'treatment_id')" 
                                    class="w-full pl-12 pr-10 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 appearance-none cursor-pointer">
                                <option value="">Pilih Jenis</option>
                                <option value="single">Single</option>
                                <option value="package">Package</option>
                                <option value="extra">Extra</option>
                            </select>
                            <i data-lucide="chevron-down" class="absolute right-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none"></i>
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                            Treatment Utama <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <i data-lucide="activity" class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"></i>
                            <select name="treatment_id" 
                                    id="treatment_id" 
                                    required 
                                    class="w-full pl-12 pr-10 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 appearance-none cursor-pointer">
                                <option value="">Pilih Treatment</option>
                            </select>
                            <i data-lucide="chevron-down" class="absolute right-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none"></i>
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                            Day Label <span class="text-gray-400 text-xs">(Opsional)</span>
                        </label>
                        <div class="relative">
                            <i data-lucide="tag" class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"></i>
                            <input type="text" 
                                   name="day_label" 
                                   placeholder="Contoh: Day 1" 
                                   class="w-full pl-12 pr-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>
                </div>
                
                <!-- Reimburse Section -->
                <div class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
                    <h4 class="font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                        <i data-lucide="receipt" class="w-5 h-5 mr-2 text-accent-600 dark:text-accent-400"></i>
                        Reimburse <span class="text-gray-400 text-sm ml-2">(Opsional)</span>
                    </h4>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Keterangan</label>
                            <input type="text" 
                                   name="reimburse_description" 
                                   placeholder="Contoh: Transport, Parkir"
                                   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-semibold text-gray-700 dark:text-gray-300 mb-2">Nominal</label>
                            <div class="relative">
                                <span class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 font-medium">Rp</span>
                                <input type="number" 
                                       name="reimburse_amount" 
                                       min="0" 
                                       placeholder="0"
                                       class="w-full pl-12 pr-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>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Bukti Foto</label>
                            <input type="file" 
                                   name="reimburse_photos[]" 
                                   accept="image/*" multiple
                                   class="block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-3 file:px-4 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-primary-50 dark:file:bg-primary-900/30 file:text-primary-700 dark:file:text-primary-300 hover:file:bg-primary-100 dark:hover:file:bg-primary-900/50 cursor-pointer transition-all">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Add-on Treatment -->
        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-soft overflow-hidden">
            <div class="px-6 py-4 bg-gradient-to-r from-accent-50 to-emerald-50 dark:from-accent-900/20 dark:to-emerald-900/20 border-b border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-bold text-gray-900 dark:text-white flex items-center">
                        <i data-lucide="plus-circle" class="w-5 h-5 mr-2 text-accent-600 dark:text-accent-400"></i>
                        Add-on Treatment <span class="text-gray-400 text-sm ml-2">(Opsional)</span>
                    </h3>
                    <button type="button" 
                            onclick="addAddon()" 
                            class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-emerald-600 to-green-600 hover:from-emerald-700 hover:to-green-700 text-white text-sm font-medium rounded-xl shadow-md hover:shadow-lg transition-all duration-200 transform hover:-translate-y-0.5">
                        <i data-lucide="plus" class="w-4 h-4 mr-2"></i>
                        Tambah Add-on
                    </button>
                </div>
            </div>
            
            <div class="p-6">
                <div id="addons-container" class="space-y-4">
                    <div class="text-center py-8 text-gray-400 dark:text-gray-500" id="empty-addon">
                        <i data-lucide="inbox" class="w-12 h-12 mx-auto mb-2 opacity-50"></i>
                        <p class="text-sm">Belum ada add-on treatment</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Submit Buttons -->
        <div class="flex justify-end space-x-4 pb-6">
            <a href="{{ auth()->user()->isTherapist() ? route('therapist.schedules.index') : route('schedules.index') }}" 
               class="px-8 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
            </a>
            <button type="submit" 
                    class="inline-flex items-center px-8 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 data-lucide="save" class="w-5 h-5 mr-2"></i>
                Simpan Jadwal
            </button>
        </div>
    </form>
</div>

@push('scripts')
<script>
// Initialize Lucide icons
lucide.createIcons();

let addonCount = 0;
const isTherapist = {{ auth()->user()->isTherapist() ? 'true' : 'false' }};
const currentTherapistId = {{ auth()->id() }};

function loadTreatments(type, targetId) {
    if (!type) return;
    
    fetch(`/api/treatments-by-type?type=${type}`)
        .then(response => response.json())
        .then(data => {
            const select = document.getElementById(targetId);
            select.innerHTML = '<option value="">Pilih Treatment</option>';
            data.forEach(treatment => {
                select.innerHTML += `<option value="${treatment.id}">${treatment.name}</option>`;
            });
            lucide.createIcons();
        });
}

function addAddon() {
    // Hide empty state
    const emptyAddon = document.getElementById('empty-addon');
    if (emptyAddon) emptyAddon.style.display = 'none';
    
    addonCount++;
    const container = document.getElementById('addons-container');
    
    // Build therapist options
    let therapistOptions = '<option value="">Pilih Therapist</option>';
    @foreach($therapists as $therapist)
        therapistOptions += `<option value="{{ $therapist->id }}" ${isTherapist && {{ $therapist->id }} === currentTherapistId ? 'selected' : ''}>{{ $therapist->name }}</option>`;
    @endforeach
    
    const addonHtml = `
        <div class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-2xl p-6 relative bg-gray-50 dark:bg-gray-700/30 animate-scale-in" id="addon-${addonCount}">
            <button type="button" 
                    onclick="removeAddon(${addonCount})" 
                    class="absolute top-4 right-4 p-2 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-all"
                    title="Hapus">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
            <h4 class="font-semibold text-gray-900 dark:text-white mb-4">Add-on #${addonCount}</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Tanggal Mulai</label>
                    <div class="relative">
                        <i data-lucide="calendar" class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"></i>
                        <input type="date" name="addon_start_date[]" class="w-full pl-12 pr-4 py-3 bg-white 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>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Jam Mulai</label>
                    <div class="relative">
                        <i data-lucide="clock" class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"></i>
                        <input type="time" name="addon_start_time[]" class="w-full pl-12 pr-4 py-3 bg-white 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>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Therapist</label>
                    <div class="relative">
                        <i data-lucide="user-check" class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"></i>
                        <select name="addon_therapist_id[]" class="w-full pl-12 pr-10 py-3 bg-white dark:bg-gray-700 border-0 rounded-xl text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 transition-all appearance-none cursor-pointer" ${isTherapist ? 'disabled' : ''}>
                            ${therapistOptions}
                        </select>
                        <i data-lucide="chevron-down" class="absolute right-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none"></i>
                    </div>
                    ${isTherapist ? `<input type="hidden" name="addon_therapist_id[]" value="${currentTherapistId}">` : ''}
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Jenis Treatment</label>
                    <div class="relative">
                        <i data-lucide="package" class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"></i>
                        <select name="addon_treatment_type[]" onchange="loadTreatments(this.value, 'addon_treatment_id_${addonCount}')" class="w-full pl-12 pr-10 py-3 bg-white dark:bg-gray-700 border-0 rounded-xl text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 transition-all appearance-none cursor-pointer">
                            <option value="">Pilih Jenis</option>
                            <option value="single">Single</option>
                            <option value="package">Package</option>
                            <option value="extra">Extra</option>
                        </select>
                        <i data-lucide="chevron-down" class="absolute right-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none"></i>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Treatment</label>
                    <div class="relative">
                        <i data-lucide="activity" class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"></i>
                        <select name="addon_treatment_id[]" id="addon_treatment_id_${addonCount}" class="w-full pl-12 pr-10 py-3 bg-white dark:bg-gray-700 border-0 rounded-xl text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 transition-all appearance-none cursor-pointer">
                            <option value="">Pilih Treatment</option>
                        </select>
                        <i data-lucide="chevron-down" class="absolute right-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none"></i>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Day Label</label>
                    <div class="relative">
                        <i data-lucide="tag" class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"></i>
                        <input type="text" name="addon_day_label[]" placeholder="Contoh: Day 1" class="w-full pl-12 pr-4 py-3 bg-white 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>
            </div>
        </div>
    `;
    container.insertAdjacentHTML('beforeend', addonHtml);
    lucide.createIcons();
}

function removeAddon(id) {
    document.getElementById(`addon-${id}`).remove();
    
    // Show empty state if no addons
    const container = document.getElementById('addons-container');
    if (container.children.length === 1) { // Only empty-addon div remains
        document.getElementById('empty-addon').style.display = 'block';
    }
}

// Re-initialize icons
setTimeout(() => {
    lucide.createIcons();
}, 100);

// Admin dynamic destinations by therapist
@if(auth()->user()->isAdminOrSuperAdmin())
const therapistSelect = document.getElementById('therapist_id');
const domicileSelect = document.getElementById('patient_domicile_select');

if (therapistSelect && domicileSelect) {
    therapistSelect.addEventListener('change', async function() {
        const therapistId = this.value;
        domicileSelect.innerHTML = '<option value="">Memuat...</option>';
        domicileSelect.disabled = true;
        domicileSelect.classList.add('cursor-not-allowed');

        if (!therapistId) {
            domicileSelect.innerHTML = '<option value="">Pilih therapist terlebih dahulu</option>';
            return;
        }

        try {
            const res = await fetch(`{{ route('api.destinations-by-therapist') }}?therapist_id=${encodeURIComponent(therapistId)}`);
            const data = await res.json();
            domicileSelect.innerHTML = '<option value=\"\">Pilih Domisili</option>';
            if (Array.isArray(data) && data.length > 0) {
                data.forEach(item => {
                    const opt = document.createElement('option');
                    opt.value = item;
                    opt.textContent = item;
                    domicileSelect.appendChild(opt);
                });
                domicileSelect.disabled = false;
                domicileSelect.classList.remove('cursor-not-allowed');
            } else {
                domicileSelect.innerHTML = '<option value=\"\">Tidak ada rute. Isi manual di bawah.</option>';
                domicileSelect.disabled = true;
            }
        } catch (e) {
            domicileSelect.innerHTML = '<option value=\"\">Gagal memuat</option>';
        }
    });
}
@endif
</script>
@endpush
@endsection