{% load i18n %}
{% load static %}
{% get_current_language as LANGUAGE_CODE %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}" dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% trans "Track Observation" %} - Al Hammadi</title>
    
    <!-- Bootstrap CSS -->
    {% if LANGUAGE_CODE == 'ar' %}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
    {% else %}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    {% endif %}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    
    <!-- Arabic Font -->
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
    
    <style>
        {% if LANGUAGE_CODE == 'ar' %}
        body {
            font-family: 'Tajawal', sans-serif;
        }
        {% endif %}
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .track-container {
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            padding: 40px;
            max-width: 600px;
            width: 100%;
        }
        .logo-header {
            text-align: center;
            margin-bottom: 30px;
        }
        .logo-header h1 {
            color: #333;
            font-size: 1.8rem;
            margin-bottom: 5px;
        }
        .search-form {
            display: flex;
            gap: 10px;
        }
        .search-form input {
            flex: 1;
            font-size: 1.1rem;
            padding: 12px 20px;
            border: 2px solid #dee2e6;
            border-radius: 8px;
        }
        .search-form input:focus {
            border-color: #667eea;
            outline: none;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
        }
        .search-form button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            padding: 12px 30px;
            border-radius: 8px;
            color: white;
            font-size: 1.1rem;
        }
        .search-form button:hover {
            opacity: 0.9;
        }
        .result-card {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 25px;
            margin-top: 30px;
        }
        .status-timeline {
            position: relative;
            {% if LANGUAGE_CODE == 'ar' %}
            padding-right: 30px;
            {% else %}
            padding-left: 30px;
            {% endif %}
            margin-top: 20px;
        }
        .status-timeline::before {
            content: '';
            position: absolute;
            {% if LANGUAGE_CODE == 'ar' %}
            right: 10px;
            {% else %}
            left: 10px;
            {% endif %}
            top: 0;
            bottom: 0;
            width: 2px;
            background: #dee2e6;
        }
        .timeline-item {
            position: relative;
            padding-bottom: 20px;
        }
        .timeline-item:last-child {
            padding-bottom: 0;
        }
        .timeline-item::before {
            content: '';
            position: absolute;
            {% if LANGUAGE_CODE == 'ar' %}
            right: -24px;
            {% else %}
            left: -24px;
            {% endif %}
            top: 5px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #dee2e6;
            border: 2px solid white;
        }
        .timeline-item.active::before {
            background: #667eea;
        }
        .timeline-item.completed::before {
            background: #28a745;
        }
        .status-badge {
            display: inline-block;
            padding: 8px 20px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 1rem;
        }
        .status-new { background: #e3f2fd; color: #1976d2; }
        .status-triaged { background: #e0f7fa; color: #00838f; }
        .status-assigned { background: #e0f7fa; color: #00838f; }
        .status-in_progress { background: #fff3e0; color: #f57c00; }
        .status-resolved { background: #e8f5e9; color: #388e3c; }
        .status-closed { background: #f5f5f5; color: #616161; }
        .status-rejected { background: #ffebee; color: #d32f2f; }
        .status-duplicate { background: #f5f5f5; color: #616161; }
        .language-switcher {
            position: absolute;
            top: 20px;
            {% if LANGUAGE_CODE == 'ar' %}
            left: 20px;
            {% else %}
            right: 20px;
            {% endif %}
        }
        .language-switcher .btn {
            background: rgba(255,255,255,0.9);
            border: none;
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: 500;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: all 0.2s;
        }
        .language-switcher .btn:hover {
            background: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
        }
        .language-switcher .dropdown-menu {
            min-width: 120px;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.15);
        }
        .language-switcher .dropdown-item {
            padding: 10px 20px;
        }
        .language-switcher .dropdown-item:hover {
            background: #f0f3ff;
        }
        .language-switcher .dropdown-item.active {
            background: #667eea;
            color: white;
        }
    </style>
</head>
<body>
    <!-- Language Switcher -->
    <div class="language-switcher">
        <div class="dropdown">
            <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="bi bi-globe me-1"></i>
                {% if LANGUAGE_CODE == 'ar' %}العربية{% else %}English{% endif %}
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
                <li>
                    <form action="{% url 'set_language' %}" method="post">
                        {% csrf_token %}
                        <input type="hidden" name="language" value="en">
                        <input type="hidden" name="next" value="{{ request.path }}">
                        <button type="submit" class="dropdown-item {% if LANGUAGE_CODE == 'en' %}active{% endif %}">
                            <span class="me-2">🇬🇧</span> English
                        </button>
                    </form>
                </li>
                <li>
                    <form action="{% url 'set_language' %}" method="post">
                        {% csrf_token %}
                        <input type="hidden" name="language" value="ar">
                        <input type="hidden" name="next" value="{{ request.path }}">
                        <button type="submit" class="dropdown-item {% if LANGUAGE_CODE == 'ar' %}active{% endif %}">
                            <span class="me-2">🇸🇦</span> العربية
                        </button>
                    </form>
                </li>
            </ul>
        </div>
    </div>

    <div class="track-container">
        <!-- Header -->
        <div class="logo-header">
            <h1><i class="bi bi-search text-primary me-2"></i>{% trans "Track Your Observation" %}</h1>
            <p class="text-muted">{% trans "Enter your tracking code to check the status" %}</p>
        </div>
        
        <!-- Messages -->
        {% if messages %}
        {% for message in messages %}
        <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        {% endfor %}
        {% endif %}
        
        <!-- Search Form -->
        <form method="get" class="search-form">
            <input type="text" name="tracking_code" 
                   placeholder="{% trans 'e.g., OBS-ABC123' %}"
                   value="{{ form.tracking_code.value|default:'' }}"
                   autofocus>
            <button type="submit">
                <i class="bi bi-search me-1"></i>{% trans "Track" %}
            </button>
        </form>
        
        {% if observation %}
        <!-- Result Card -->
        <div class="result-card">
            <!-- Tracking Code -->
            <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                    <small class="text-muted">{% trans "Tracking Code" %}</small>
                    <h4 class="mb-0" style="font-family: 'Courier New', monospace; color: #667eea;">
                        {{ observation.tracking_code }}
                    </h4>
                </div>
                <span class="status-badge status-{{ observation.status }}">
                    {{ observation.get_status_display }}
                </span>
            </div>
            
            <hr>
            
            <!-- Details -->
            <div class="row g-3">
                <div class="col-6">
                    <small class="text-muted d-block">{% trans "Category" %}</small>
                    <strong>{{ observation.category.name|default:"Not specified" }}</strong>
                </div>
                <div class="col-6">
                    <small class="text-muted d-block">{% trans "Severity" %}</small>
                    <span class="badge bg-{{ observation.get_severity_color }}">
                        {{ observation.get_severity_display }}
                    </span>
                </div>
                <div class="col-6">
                    <small class="text-muted d-block">{% trans "Submitted" %}</small>
                    <strong>{{ observation.created_at|date:"M d, Y" }}</strong>
                </div>
                <div class="col-6">
                    <small class="text-muted d-block">{% trans "Last Updated" %}</small>
                    <strong>{{ observation.updated_at|date:"M d, Y" }}</strong>
                </div>
            </div>
            
            <!-- Status Timeline -->
            <h6 class="mt-4 mb-3">{% trans "Status Progress" %}</h6>
            <div class="status-timeline">
                <div class="timeline-item {% if observation.status == 'new' %}active{% elif observation.status != 'new' %}completed{% endif %}">
                    <strong>{% trans "Submitted" %}</strong>
                    <small class="text-muted d-block">{{ observation.created_at|date:"M d, Y H:i" }}</small>
                </div>
                
                {% if observation.triaged_at %}
                <div class="timeline-item {% if observation.status == 'triaged' %}active{% elif observation.status in 'assigned,in_progress,resolved,closed' %}completed{% endif %}">
                    <strong>{% trans "Triaged" %}</strong>
                    <small class="text-muted d-block">{{ observation.triaged_at|date:"M d, Y H:i" }}</small>
                </div>
                {% endif %}
                
                {% if observation.assigned_to %}
                <div class="timeline-item {% if observation.status == 'assigned' %}active{% elif observation.status in 'in_progress,resolved,closed' %}completed{% endif %}">
                    <strong>{% trans "Assigned" %}</strong>
                    <small class="text-muted d-block">{% trans "Being reviewed by our team" %}</small>
                </div>
                {% endif %}
                
                {% if observation.status == 'in_progress' %}
                <div class="timeline-item active">
                    <strong>{% trans "In Progress" %}</strong>
                    <small class="text-muted d-block">{% trans "Action is being taken" %}</small>
                </div>
                {% endif %}
                
                {% if observation.resolved_at %}
                <div class="timeline-item {% if observation.status == 'resolved' %}active{% elif observation.status == 'closed' %}completed{% endif %}">
                    <strong>{% trans "Resolved" %}</strong>
                    <small class="text-muted d-block">{{ observation.resolved_at|date:"M d, Y H:i" }}</small>
                </div>
                {% endif %}
                
                {% if observation.closed_at %}
                <div class="timeline-item completed">
                    <strong>{% trans "Closed" %}</strong>
                    <small class="text-muted d-block">{{ observation.closed_at|date:"M d, Y H:i" }}</small>
                </div>
                {% endif %}
                
                {% if observation.status == 'rejected' %}
                <div class="timeline-item active">
                    <strong class="text-danger">{% trans "Rejected" %}</strong>
                    <small class="text-muted d-block">{% trans "This observation was not accepted" %}</small>
                </div>
                {% endif %}
                
                {% if observation.status == 'duplicate' %}
                <div class="timeline-item active">
                    <strong class="text-secondary">{% trans "Duplicate" %}</strong>
                    <small class="text-muted d-block">{% trans "This observation was marked as duplicate" %}</small>
                </div>
                {% endif %}
            </div>
            
            <!-- Note about privacy -->
            <div class="alert alert-info mt-4 mb-0 small">
                <i class="bi bi-info-circle me-1"></i>
                {% trans "For privacy reasons, detailed notes and internal communications are not shown here." %}
            </div>
        </div>
        {% endif %}
        
        <!-- Back Link -->
        <div class="text-center mt-4">
            <a href="{% url 'observations:observation_create_public' %}" class="text-muted">
                <i class="bi bi-plus-circle me-1"></i>{% trans "Submit a new observation" %}
            </a>
        </div>
    </div>
    
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
