{% extends "base.html" %}

{% block title %}Additional Services - Vera Medical CRM{% endblock %}

{% block content %}
<div class="mb-6">
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-3xl font-bold text-gray-800">Additional Services</h1>
            <p class="text-gray-600">Appointment for Case #{{ appointment['case_id'] }}</p>
        </div>
        <div>
            <a href="{{ url_for('appointment_view', appointment_id=appointment['id']) }}" 
               class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg font-semibold transition">
                <i class="fas fa-arrow-left mr-2"></i>Back to Appointment
            </a>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Services List -->
    <div class="lg:col-span-2 space-y-4">
        {% if services %}
        {% for service in services %}
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="p-6">
                <div class="flex justify-between items-start mb-4">
                    <div>
                        <span class="px-3 py-1 text-sm font-semibold rounded bg-orange-100 text-orange-800">
                            {{ service['service_type']|replace('_', ' ')|title }}
                        </span>
                        <span class="ml-2 text-sm {% if service['present'] == 1 %}text-green-600{% else %}text-gray-400{% endif %}">
                            {% if service['present'] == 1 %}<i class="fas fa-check-circle"></i> Present{% else %}<i class="fas fa-times-circle"></i> Not Present{% endif %}
                        </span>
                    </div>
                    <div class="flex space-x-2">
                        <a href="{{ url_for('appointment_additional_service_edit', service_id=service['id']) }}" 
                           class="text-blue-600 hover:text-blue-900">
                            <i class="fas fa-edit"></i> Edit
                        </a>
                        <form method="POST" 
                              action="{{ url_for('appointment_additional_service_delete', service_id=service['id']) }}" 
                              onsubmit="return confirm('Are you sure you want to delete this service?');"
                              style="display: inline;">
                            <button type="submit" class="text-red-600 hover:text-red-900">
                                <i class="fas fa-trash"></i> Delete
                            </button>
                        </form>
                    </div>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    {% if service['name'] %}
                    <div>
                        <p class="text-sm text-gray-600">Name</p>
                        <p class="font-semibold text-gray-800">{{ service['name'] }}</p>
                    </div>
                    {% endif %}
                    {% if service['company'] %}
                    <div>
                        <p class="text-sm text-gray-600">Company</p>
                        <p class="font-semibold text-gray-800">{{ service['company'] }}</p>
                    </div>
                    {% endif %}
                    {% if service['language'] %}
                    <div>
                        <p class="text-sm text-gray-600">Language</p>
                        <p class="font-semibold text-gray-800">{{ service['language'] }}</p>
                    </div>
                    {% endif %}
                    {% if service['travel_details'] %}
                    <div class="col-span-2">
                        <p class="text-sm text-gray-600">Travel Details</p>
                        <div class="bg-gray-50 rounded-lg p-3 mt-1">
                            <p class="text-sm text-gray-800 whitespace-pre-wrap">{{ service['travel_details'] }}</p>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
        {% else %}
        <div class="bg-white rounded-lg shadow-md p-6 text-center">
            <p class="text-gray-500 mb-4">No additional services added yet.</p>
        </div>
        {% endif %}
    </div>
    
    <!-- Add Service Form -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="bg-gradient-to-r from-orange-500 to-orange-600 px-6 py-4">
            <h2 class="text-lg font-bold text-white">
                <i class="fas fa-plus mr-2"></i>Add Service
            </h2>
        </div>
        <div class="p-6">
            <form method="POST" action="{{ url_for('appointment_additional_services', appointment_id=appointment['id']) }}" class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Service Type *</label>
                    <select name="service_type" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500">
                        <option value="">Select service type...</option>
                        <option value="videographer">Videographer</option>
                        <option value="nominee">Nominee</option>
                        <option value="interpreter">Interpreter</option>
                        <option value="travel_claimant">Travel for Claimant</option>
                        <option value="travel_doctor">Travel for Doctor</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <input type="checkbox" name="present" value="1" class="mr-2">
                        Present
                    </label>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Name</label>
                    <input type="text" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Company</label>
                    <input type="text" name="company" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500">
                </div>
                
                <div id="language-field" style="display: none;">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Language</label>
                    <input type="text" name="language" placeholder="e.g., Spanish, French" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500">
                </div>
                
                <div id="travel-details-field" style="display: none;">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Travel Details</label>
                    <textarea name="travel_details" rows="4" placeholder="Enter travel arrangements, dates, locations, etc." class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500"></textarea>
                </div>
                
                <button type="submit" class="w-full bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg font-semibold transition">
                    <i class="fas fa-plus mr-2"></i>Add Service
                </button>
            </form>
        </div>
    </div>
</div>

<script>
document.querySelector('select[name="service_type"]').addEventListener('change', function() {
    const serviceType = this.value;
    const languageField = document.getElementById('language-field');
    const travelField = document.getElementById('travel-details-field');
    
    if (serviceType === 'interpreter') {
        languageField.style.display = 'block';
    } else {
        languageField.style.display = 'none';
    }
    
    if (serviceType === 'travel_claimant' || serviceType === 'travel_doctor') {
        travelField.style.display = 'block';
    } else {
        travelField.style.display = 'none';
    }
});
</script>
{% endblock %}