{% extends "base.html" %}
{% load static %}

{% block title %}Delete Appointment Request - Appointments{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Breadcrumb -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0">Delete Appointment Request</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{% url 'appointments:dashboard' %}">Appointments</a></li>
                        <li class="breadcrumb-item"><a href="{% url 'appointments:appointment_request_list' %}">Requests</a></li>
                        <li class="breadcrumb-item active">Delete</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card border-danger">
                <div class="card-header bg-danger text-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Confirm Deletion
                    </h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-danger" role="alert">
                        <h6 class="alert-heading">
                            <i class="fas fa-warning me-2"></i>
                            Warning: This action cannot be undone
                        </h6>
                        <p class="mb-0">
                            You are about to permanently delete this appointment request. 
                            This will also affect related records and notifications.
                        </p>
                    </div>

                    <!-- Appointment Details -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h6 class="card-title">Appointment Details</h6>
                                    <ul class="list-unstyled mb-0">
                                        <li><strong>Patient:</strong> {{ object.patient.get_full_name }}</li>
                                        <li><strong>Provider:</strong> {{ object.provider.get_full_name }}</li>
                                        <li><strong>Date:</strong> {{ object.scheduled_datetime|date:"M d, Y" }}</li>
                                        <li><strong>Time:</strong> {{ object.scheduled_datetime|time:"g:i A" }}</li>
                                        <li><strong>Type:</strong> {{ object.get_appointment_type_display }}</li>
                                        <li><strong>Status:</strong> 
                                            <span class="badge bg-{% if object.status == 'scheduled' %}primary{% elif object.status == 'completed' %}success{% elif object.status == 'cancelled' %}danger{% else %}warning{% endif %}">
                                                {{ object.get_status_display }}
                                            </span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h6 class="card-title">Impact Assessment</h6>
                                    <ul class="list-unstyled mb-0">
                                        {% if object.queueentry_set.exists %}
                                            <li class="text-warning">
                                                <i class="fas fa-exclamation-circle me-1"></i>
                                                Will remove from waiting queue
                                            </li>
                                        {% endif %}
                                        {% if object.telemedicinesession_set.exists %}
                                            <li class="text-warning">
                                                <i class="fas fa-video me-1"></i>
                                                Will cancel telemedicine session
                                            </li>
                                        {% endif %}
                                        {% if object.status == 'scheduled' %}
                                            <li class="text-info">
                                                <i class="fas fa-bell me-1"></i>
                                                Will cancel scheduled reminders
                                            </li>
                                        {% endif %}
                                        <li class="text-muted">
                                            <i class="fas fa-history me-1"></i>
                                            Audit trail will be maintained
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Reason for Deletion -->
                    <form method="post">
                        {% csrf_token %}
                        <div class="mb-4">
                            <label for="deletion_reason" class="form-label">
                                <strong>Reason for Deletion *</strong>
                            </label>
                            <select class="form-select" id="deletion_reason" name="deletion_reason" required>
                                <option value="">Select a reason...</option>
                                <option value="patient_request">Patient Request</option>
                                <option value="provider_unavailable">Provider Unavailable</option>
                                <option value="duplicate_booking">Duplicate Booking</option>
                                <option value="system_error">System Error</option>
                                <option value="administrative">Administrative Decision</option>
                                <option value="other">Other</option>
                            </select>
                        </div>

                        <div class="mb-4">
                            <label for="deletion_notes" class="form-label">Additional Notes</label>
                            <textarea class="form-control" id="deletion_notes" name="deletion_notes" rows="3" 
                                      placeholder="Provide additional context for this deletion..."></textarea>
                        </div>

                        <!-- Confirmation Checkbox -->
                        <div class="form-check mb-4">
                            <input class="form-check-input" type="checkbox" id="confirm_deletion" name="confirm_deletion" required>
                            <label class="form-check-label" for="confirm_deletion">
                                <strong>I understand that this action cannot be undone and confirm the deletion of this appointment request.</strong>
                            </label>
                        </div>

                        <!-- Alternative Actions -->
                        <div class="alert alert-info">
                            <h6 class="alert-heading">
                                <i class="fas fa-lightbulb me-2"></i>
                                Consider These Alternatives
                            </h6>
                            <ul class="mb-0">
                                <li><strong>Cancel:</strong> Mark as cancelled instead of deleting</li>
                                <li><strong>Reschedule:</strong> Move to a different time slot</li>
                                <li><strong>Transfer:</strong> Assign to a different provider</li>
                            </ul>
                        </div>

                        <!-- Action Buttons -->
                        <div class="d-flex gap-2 justify-content-end">
                            <a href="{% url 'appointments:appointment_request_detail' object.pk %}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-1"></i>
                                Cancel
                            </a>
                            <a href="{% url 'appointments:appointment_request_update' object.pk %}" class="btn btn-warning">
                                <i class="fas fa-edit me-1"></i>
                                Edit Instead
                            </a>
                            <button type="submit" class="btn btn-danger" id="deleteButton" disabled>
                                <i class="fas fa-trash me-1"></i>
                                Delete Appointment
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const confirmCheckbox = document.getElementById('confirm_deletion');
    const deleteButton = document.getElementById('deleteButton');
    const reasonSelect = document.getElementById('deletion_reason');
    
    function updateDeleteButton() {
        deleteButton.disabled = !(confirmCheckbox.checked && reasonSelect.value);
    }
    
    confirmCheckbox.addEventListener('change', updateDeleteButton);
    reasonSelect.addEventListener('change', updateDeleteButton);
    
    // Confirmation dialog
    deleteButton.addEventListener('click', function(e) {
        if (!confirm('Are you absolutely sure you want to delete this appointment request? This action cannot be undone.')) {
            e.preventDefault();
        }
    });
});
</script>
{% endblock %}