@extends('layouts.mother')

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

@section('content')
<div class="max-w-2xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
    
    <!-- Header -->
    <div class="bg-white rounded-xl shadow-lg p-8 mb-6 border border-gray-100">
        <div class="text-center">
            <div class="bg-red-100 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-times-circle text-red-600 text-3xl"></i>
            </div>
            <h1 class="text-3xl font-bold text-gray-900 mb-2">Cancel Appointment</h1>
            <p class="text-gray-600">Confirm cancellation of your appointment</p>
        </div>
    </div>

    <!-- Appointment Details Card -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100 mb-6">
        <div class="bg-gradient-to-r from-red-500 to-red-600 p-6">
            <h2 class="text-xl font-bold text-gray-900">
                <i class="fas fa-info-circle mr-2 text-gray-900"></i>Appointment Details
            </h2>
        </div>

        <div class="p-6 space-y-4 bg-white">
            <!-- Clinic -->
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <i class="fas fa-hospital text-red-600 text-xl mt-1"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm text-gray-600 font-medium">Clinic</p>
                    <p class="text-lg font-semibold text-gray-900">{{ $appointment->clinic->name }}</p>
                </div>
            </div>

            <!-- Date -->
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <i class="fas fa-calendar text-red-600 text-xl mt-1"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm text-gray-600 font-medium">Date</p>
                    <p class="text-lg font-semibold text-gray-900">
                        {{ \Carbon\Carbon::parse($appointment->date)->format('l, d F Y') }}
                    </p>
                </div>
            </div>

            <!-- Time -->
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <i class="fas fa-clock text-red-600 text-xl mt-1"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm text-gray-600 font-medium">Time Slot</p>
                    <p class="text-lg font-semibold text-gray-900">{{ $appointment->slot_label }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Warning Box -->
    <div class="bg-red-50 border-l-4 border-red-600 rounded-lg p-6 mb-6">
        <div class="flex items-start">
            <i class="fas fa-exclamation-triangle text-red-600 text-2xl mt-1"></i>
            <div class="ml-4">
                <h3 class="text-lg font-bold text-red-900 mb-2">Important Notice</h3>
                <ul class="space-y-2 text-red-800">
                    <li class="flex items-start">
                        <i class="fas fa-circle text-xs mt-1.5 mr-2"></i>
                        <span>Your appointment will be permanently cancelled</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-circle text-xs mt-1.5 mr-2"></i>
                        <span>This action cannot be undone</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-circle text-xs mt-1.5 mr-2"></i>
                        <span>A cancellation confirmation email will be sent</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="space-y-3">
        <button
            type="button"
            id="cancelBtn"
            class="w-full px-6 py-4 bg-red-600 hover:bg-red-700 active:bg-red-800 text-white rounded-lg font-bold text-lg transition-all shadow-lg hover:shadow-xl cursor-pointer">
            <i class="fas fa-times-circle mr-2"></i>
            Yes, Cancel Appointment
        </button>
        
        <a href="{{ route('mother.appointments') }}"
            class="block w-full px-6 py-4 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg font-semibold transition-all text-center">
            <i class="fas fa-arrow-left mr-2"></i>
            No, Go Back
        </a>
    </div>

</div>

<script>
document.getElementById('cancelBtn').addEventListener('click', function() {
    if (!confirm('Are you sure you want to cancel this appointment?')) {
        return;
    }
    
    this.disabled = true;
    this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Cancelling...';
    this.className = 'w-full px-6 py-4 bg-gray-400 text-white rounded-lg font-bold text-lg cursor-not-allowed';
    
    fetch('{{ route("mother.appointments.cancel.post", $appointment->id) }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(res => {
        if (!res.ok) {
            return res.json().then(data => {
                throw new Error(data.message || 'Failed to cancel 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 cancel appointment');
        }
    })
    .catch(err => {
        console.error('Cancellation error:', err);
        alert(err.message || 'Failed to cancel appointment. Please try again.');
        this.disabled = false;
        this.innerHTML = '<i class="fas fa-times-circle mr-2"></i> Yes, Cancel Appointment';
        this.className = 'w-full px-6 py-4 bg-red-600 hover:bg-red-700 active:bg-red-800 text-white rounded-lg font-bold text-lg transition-all shadow-lg hover:shadow-xl cursor-pointer';
    });
});
</script>
@endsection