@extends('layouts.mother')

@section('title', 'Reschedule Appointment')

@section('content')
<div class="max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
    
    <!-- Header -->
    <div class="mb-6">
        <a href="{{ route('mother.appointments') }}" class="text-yellow-600 hover:text-yellow-700 font-medium flex items-center">
            <i class="fas fa-arrow-left mr-2"></i> Back to Appointments
        </a>
    </div>

    <!-- Page Title -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <div class="flex items-center mb-4">
            <div class="flex-shrink-0">
                <div class="h-12 w-12 rounded-full bg-yellow-500 flex items-center justify-center">
                    <i class="fas fa-calendar-alt text-white text-xl"></i>
                </div>
            </div>
            <div class="ml-4">
                <h1 class="text-2xl font-bold text-gray-900">Reschedule Appointment</h1>
                <p class="text-gray-600">Select a new date and time for your appointment</p>
            </div>
        </div>
    </div>

    <!-- Current Appointment Details -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <h2 class="text-lg font-semibold text-gray-900 mb-4">Current Appointment</h2>
        <div class="bg-gray-50 rounded-lg p-4 space-y-2">
            <div class="flex items-center">
                <i class="fas fa-hospital text-yellow-600 w-6"></i>
                <span class="text-gray-700 ml-2"><strong>Clinic:</strong> {{ $appointment->clinic->name }}</span>
            </div>
            <div class="flex items-center">
                <i class="fas fa-calendar text-yellow-600 w-6"></i>
                <span class="text-gray-700 ml-2"><strong>Date:</strong> {{ \Carbon\Carbon::parse($appointment->date)->format('d M Y') }}</span>
            </div>
            <div class="flex items-center">
                <i class="fas fa-clock text-yellow-600 w-6"></i>
                <span class="text-gray-700 ml-2"><strong>Time:</strong> {{ $appointment->slot_label }}</span>
            </div>
        </div>
        
        <!-- Reschedule Rules -->
        <div class="mt-4 p-3 bg-yellow-50 border-l-4 border-yellow-400 rounded">
            <p class="text-sm text-yellow-800">
                <i class="fas fa-exclamation-triangle mr-2"></i>
                <strong>Reschedule Rule:</strong> You can choose the same date but must select a different time slot.
            </p>
        </div>
    </div>

    <!-- New Date Selection -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <h2 class="text-lg font-semibold text-gray-900 mb-4">
            <i class="fas fa-calendar-check text-yellow-600 mr-2"></i>Select New Date
        </h2>
        <input 
            type="date" 
            id="selectedDate"
            min="{{ now()->format('Y-m-d') }}"
            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-transparent"
        >
    </div>

    <!-- Available Time Slots -->
    <div id="slotsContainer" class="hidden bg-white rounded-lg shadow-md p-6 mb-6">
        <h2 class="text-lg font-semibold text-gray-900 mb-4">
            <i class="fas fa-clock text-yellow-600 mr-2"></i>Available Time Slots
        </h2>
        
        <!-- Info notice -->
        <div class="bg-blue-50 border-l-4 border-blue-400 p-3 mb-4 rounded">
            <div class="flex items-center">
                <i class="fas fa-info-circle text-blue-600 mr-2"></i>
                <div class="text-sm text-blue-800">
                    <strong>Important:</strong> You <strong>CAN</strong> select the same date ({{ \Carbon\Carbon::parse($appointment->date)->format('d M Y') }}) but you <strong>CANNOT</strong> select the same time slot ({{ $appointment->slot_label }}). Your current slot will be marked as "Current" and disabled.
                </div>
            </div>
        </div>
        
        <div id="slotsContent"></div>
    </div>

    <!-- Loading -->
    <div id="loadingSlots" class="hidden bg-white rounded-lg shadow-md p-6 mb-6">
        <div class="text-center py-8">
            <i class="fas fa-spinner fa-spin text-4xl text-yellow-500 mb-4"></i>
            <p class="text-gray-600">Checking availability...</p>
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="flex gap-4">
        <button
            type="button"
            id="confirmBtn"
            disabled
            class="flex-1 px-6 py-3 rounded-lg font-semibold transition-all bg-gray-300 text-gray-500 cursor-not-allowed"
        >
            <i class="fas fa-check mr-2"></i>
            Confirm Reschedule
        </button>
        <a href="{{ route('mother.appointments') }}" 
           class="flex-1 px-6 py-3 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg font-semibold transition-all text-center">
            <i class="fas fa-times mr-2"></i>
            Cancel
        </a>
    </div>

</div>

<script>
let selectedSlot = null;
const appointmentId = {{ $appointment->id }};
const clinicId = {{ $appointment->clinic_id }};
const currentDate = '{{ \Carbon\Carbon::parse($appointment->date)->format('Y-m-d') }}';
const currentSlot = '{{ $appointment->slot_label }}';

console.log('🔧 INITIALIZATION:');
console.log('Current Date (formatted):', currentDate);
console.log('Current Slot:', currentSlot);

document.getElementById('selectedDate').addEventListener('change', function() {
    const date = this.value;
    if (!date) return;
    
    selectedSlot = null;
    document.getElementById('confirmBtn').disabled = true;
    document.getElementById('confirmBtn').className = 'flex-1 px-6 py-3 rounded-lg font-semibold transition-all bg-gray-300 text-gray-500 cursor-not-allowed';
    
    document.getElementById('slotsContainer').classList.add('hidden');
    document.getElementById('loadingSlots').classList.remove('hidden');
    
    fetch(`/mother/appointments/${appointmentId}/check-availability?date=${date}`)
        .then(res => {
            if (!res.ok) {
                return res.json().then(data => {
                    throw new Error(data.message || 'Failed to load availability');
                });
            }
            return res.json();
        })
        .then(data => {
            document.getElementById('loadingSlots').classList.add('hidden');
            if (data.success && data.slots) {
                document.getElementById('slotsContainer').classList.remove('hidden');
                renderSlots(data.slots);
            } else {
                alert(data.message || 'No slots available');
            }
        })
        .catch(err => {
            console.error('Availability check error:', err);
            alert(err.message || 'Failed to load availability. Please try again.');
            document.getElementById('loadingSlots').classList.add('hidden');
        });
});

function renderSlots(slots) {
    const periods = {morning: 'Morning', afternoon: 'Afternoon', evening: 'Evening'};
    const selectedDate = document.getElementById('selectedDate').value;
    const isCurrentDate = selectedDate === currentDate;
    
    console.log('🔍 DEBUG INFO:');
    console.log('Current appointment date:', currentDate);
    console.log('Current appointment slot:', currentSlot);
    console.log('Selected date:', selectedDate);
    console.log('Is current date?', isCurrentDate);
    
    let html = '<div class="space-y-4">';
    
    for (const [period, label] of Object.entries(periods)) {
        const periodSlots = slots.filter(s => s.period === period);
        if (periodSlots.length === 0) continue;
        
        html += `<div>
            <h3 class="text-md font-medium text-gray-700 mb-3 flex items-center">
                ${period === 'morning' ? '<i class="fas fa-sun text-yellow-500 mr-2"></i>' : 
                  period === 'afternoon' ? '<i class="fas fa-cloud-sun text-orange-500 mr-2"></i>' : 
                  '<i class="fas fa-moon text-indigo-500 mr-2"></i>'}
                ${label}
            </h3>
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">`;
        
        periodSlots.forEach(slot => {
            const isCurrentSlot = isCurrentDate && slot.slot === currentSlot;
            const disabled = !slot.is_available || isCurrentSlot;
            
            if (isCurrentSlot) {
                console.log('⭐ Found current slot:', slot.slot);
            }
            
            let btnClass, slotText;
            if (isCurrentSlot) {
                btnClass = 'bg-blue-50 text-blue-600 border-2 border-blue-300 cursor-not-allowed';
                slotText = 'Current';
            } else if (!slot.is_available) {
                btnClass = 'bg-gray-50 text-gray-400 cursor-not-allowed opacity-50';
                slotText = 'Full';
            } else {
                btnClass = 'bg-gray-100 hover:bg-yellow-100 text-gray-700 hover:text-yellow-700 cursor-pointer';
                slotText = slot.available + ' slot' + (slot.available != 1 ? 's' : '');
            }
            
            // Only add onclick for available slots that are NOT current
            const onclickAttr = (disabled || isCurrentSlot) ? '' : `onclick="selectSlot('${slot.slot}')"`;
            
            html += `<button type="button" ${onclickAttr} ${disabled ? 'disabled' : ''} 
                     class="slot-btn p-3 rounded-lg text-center transition-all ${btnClass}" data-slot="${slot.slot}">
                        <div class="font-semibold text-sm">${slot.slot}</div>
                        <div class="text-xs mt-1">${slotText}</div>
                    </button>`;
        });
        
        html += '</div></div>';
    }
    
    html += '</div>';
    document.getElementById('slotsContent').innerHTML = html;
}

function selectSlot(slot) {
    // Prevent selecting the current slot
    const selectedDate = document.getElementById('selectedDate').value;
    const isCurrentDate = selectedDate === currentDate;
    const isCurrentSlot = isCurrentDate && slot === currentSlot;
    
    console.log('🎯 SELECTING SLOT:');
    console.log('  Selected Date:', selectedDate);
    console.log('  Current Date:', currentDate);
    console.log('  Is Current Date?', isCurrentDate);
    console.log('  Selected Slot:', slot);
    console.log('  Current Slot:', currentSlot);
    console.log('  Is Current Slot?', isCurrentSlot);
    
    if (isCurrentSlot) {
        alert('⚠️ You cannot select your current time slot!\n\nPlease choose a different time.');
        console.log('❌ BLOCKED! Cannot select current slot!');
        return; // Exit early, don't allow selection
    }
    
    console.log('✅ Slot selection allowed');
    selectedSlot = slot;
    
    document.querySelectorAll('.slot-btn').forEach(btn => {
        if (btn.dataset.slot === slot) {
            btn.className = 'slot-btn p-3 rounded-lg text-center transition-all bg-yellow-500 text-white ring-2 ring-yellow-600';
        } else {
            btn.className = btn.className.replace('bg-yellow-500 text-white ring-2 ring-yellow-600', 'bg-gray-100 hover:bg-yellow-100 text-gray-700 hover:text-yellow-700 cursor-pointer');
        }
    });
    
    const confirmBtn = document.getElementById('confirmBtn');
    confirmBtn.disabled = false;
    confirmBtn.className = 'flex-1 px-6 py-3 rounded-lg font-semibold transition-all bg-yellow-500 hover:bg-yellow-600 text-white cursor-pointer';
}

document.getElementById('confirmBtn').addEventListener('click', function() {
    if (!selectedSlot) return;
    
    const date = document.getElementById('selectedDate').value;
    this.disabled = true;
    this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Rescheduling...';
    
    fetch('{{ route("mother.appointments.reschedule.post", $appointment->id) }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            date: date,
            slot: selectedSlot
        })
    })
    .then(res => {
        if (!res.ok) {
            return res.json().then(data => {
                throw new Error(data.message || 'Failed to reschedule appointment');
            });
        }
        return res.json();
    })
    .then(data => {
        if (data.success) {
            window.location.href = '{{ route("mother.appointments") }}?success=' + encodeURIComponent(data.message);
        } else {
            throw new Error(data.message || 'Failed to reschedule appointment');
        }
    })
    .catch(err => {
        console.error('Reschedule error:', err);
        alert(err.message || 'Failed to reschedule appointment. Please try again.');
        this.disabled = false;
        this.innerHTML = '<i class="fas fa-check mr-2"></i> Confirm Reschedule';
        this.className = 'flex-1 px-6 py-3 rounded-lg font-semibold transition-all bg-yellow-500 hover:bg-yellow-600 text-white cursor-pointer';
    });
});
</script>
@endsection