{% extends "base.html" %}

{% block title %}Post Blood Request - RaktaPulse{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow-sm border-0 rounded-4">
                <div class="card-body p-4 p-md-5">
                    <div class="text-center mb-4">
                        <div class="bg-danger bg-opacity-10 text-danger rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                            <i class="bi bi-megaphone-fill fs-3"></i>
                        </div>
                        <h2 class="fw-bold">Post a Blood Request</h2>
                        <p class="text-secondary">Fill in the details to alert nearby donors.</p>
                    </div>

                    <form method="POST" id="requestForm" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-secondary">Patient Name *</label>
                                <input type="text" name="patient_name" class="form-control rounded-3" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-secondary">Blood Group *</label>
                                <select name="blood_group" class="form-select rounded-3" required>
                                    <option value="" selected disabled>Select Group</option>
                                    {% for group in blood_groups %}
                                    <option value="{{ group }}">{{ group }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-secondary">Hospital Name *</label>
                                <input type="text" name="hospital" class="form-control rounded-3" value="{{ selected_hospital }}" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-secondary">Urgency *</label>
                                <select name="urgency" class="form-select rounded-3">
                                    {% for val, label in urgency_levels %}
                                    <option value="{{ val }}">{{ label }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label small fw-bold text-secondary">Location (City/Area) *</label>
                                <input type="text" name="location" class="form-control rounded-3" placeholder="e.g. Balaju, Kathmandu" required>
                            </div>
                            <div class="col-12">
                                <label class="form-label small fw-bold text-secondary">Contact Number *</label>
                                <input type="text" name="contact_number" class="form-control rounded-3" required>
                            </div>
                            <div class="col-12">
                                <label class="form-label small fw-bold text-secondary">Upload Photo (Optional)</label>
                                <input type="file" name="image" class="form-control rounded-3" accept="image/*">
                                <div class="form-text small">Include a prescription or patient photo for verification.</div>
                            </div>
                            
                            <!-- Hidden coordinates -->
                            <input type="hidden" name="latitude" id="id_latitude">
                            <input type="hidden" name="longitude" id="id_longitude">
                        </div>

                        <div class="alert alert-info mt-4 d-flex align-items-center small" id="geo-status">
                            <i class="bi bi-geo-alt-fill me-2"></i>
                            <span>Fetching your precise location for the live map...</span>
                        </div>

                        <div class="mt-4">
                            <button type="submit" class="btn btn-danger w-100 py-3 rounded-3 fw-bold shadow-sm">
                                <i class="bi bi-send-fill me-2"></i> Broadcast Alert
                            </button>
                            <a href="{% url 'blood_request_list' %}" class="btn btn-link w-100 mt-2 text-secondary text-decoration-none small">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        if ("geolocation" in navigator) {
            navigator.geolocation.getCurrentPosition(function(position) {
                document.getElementById('id_latitude').value = position.coords.latitude;
                document.getElementById('id_longitude').value = position.coords.longitude;
                const status = document.getElementById('geo-status');
                status.classList.replace('alert-info', 'alert-success');
                status.innerHTML = '<i class="bi bi-check-circle-fill me-2"></i> Precise location captured! This will appear on the live map.';
            }, function(error) {
                const status = document.getElementById('geo-status');
                status.classList.replace('alert-info', 'alert-warning');
                status.innerHTML = '<i class="bi bi-exclamation-triangle-fill me-2"></i> Could not get precise location. You can still post, but it won\'t show on the live map.';
                console.warn("Geolocation error:", error);
            });
        } else {
            document.getElementById('geo-status').style.display = 'none';
        }
    });
</script>
{% endblock %}