{% extends "base.html" %}

{% block title %}Edit Additional Service - 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">Edit Additional Service</h1>
            <p class="text-gray-600">Appointment for Case #{{ service['case_id'] }}</p>
        </div>
        <div>
            <a href="{{ url_for('appointment_view', appointment_id=service['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="max-w-2xl mx-auto">
    <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-xl font-bold text-white">
                <i class="fas fa-edit mr-2"></i>Edit Service
            </h2>
        </div>
        <div class="p-6">
            <form method="POST" action="{{ url_for('appointment_additional_service_edit', service_id=service['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="videographer" {% if service['service_type'] == 'videographer' %}selected{% endif %}>Videographer</option>
                        <option value="nominee" {% if service['service_type'] == 'nominee' %}selected{% endif %}>Nominee</option>
                        <option value="interpreter" {% if service['service_type'] == 'interpreter' %}selected{% endif %}>Interpreter</option>
                        <option value="travel_claimant" {% if service['service_type'] == 'travel_claimant' %}selected{% endif %}>Travel for Claimant</option>
                        <option value="travel_doctor" {% if service['service_type'] == 'travel_doctor' %}selected{% endif %}>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" {% if service['present'] == 1 %}checked{% endif %} 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" value="{{ service['name'] or '' }}" 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" value="{{ service['company'] or '' }}" 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" {% if service['service_type'] != 'interpreter' %}style="display: none;"{% endif %}>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Language</label>
                    <input type="text" name="language" value="{{ service['language'] or '' }}" 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" {% if service['service_type'] not in ['travel_claimant', 'travel_doctor'] %}style="display: none;"{% endif %}>
                    <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">{{ service['travel_details'] or '' }}</textarea>
                </div>
                
                <div class="flex space-x-3 pt-4">
                    <button type="submit" class="flex-1 bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg font-semibold transition">
                        <i class="fas fa-save mr-2"></i>Save Changes
                    </button>
                    <a href="{{ url_for('appointment_view', appointment_id=service['appointment_id']) }}" 
                       class="flex-1 bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg font-semibold transition text-center">
                        <i class="fas fa-times mr-2"></i>Cancel
                    </a>
                </div>
            </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 %}