{% extends 'base.html.twig' %}

{% block title %}{{ 'create_title'|trans({}, 'Tracker') }} — Shamra Academia{% endblock %}

{% block og_title %}{{ 'create_title'|trans({}, 'Tracker') }} — Shamra Academia{% endblock %}
{% block og_description %}{{ 'page_description'|trans({}, 'Tracker') }}{% endblock %}
{% block metaDescription %}{{ 'page_description'|trans({}, 'Tracker') }}{% endblock %}
{% block metaKeywords %}research tracker, thesis progress, متابعة البحث, تقدم الرسالة, Shamra Academia{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        :root {
            --tracker-primary: #7c3aed;
            --tracker-primary-light: #8b5cf6;
            --tracker-primary-dark: #6d28d9;
            --tracker-success: #10b981;
            --tracker-warning: #f59e0b;
            --tracker-bg: #f8f5ff;
            --tracker-border: #e9e0ff;
        }

        .create-tracker-page {
            max-width: 700px;
            margin: 30px auto;
            padding: 0 20px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .wizard-header {
            text-align: center;
            margin-bottom: 36px;
        }
        .wizard-header h1 {
            font-size: 2.2rem;
            font-weight: 700;
            color: #1a1a2e;
            margin-bottom: 12px;
        }
        .wizard-header h1 i {
            font-size: 2rem;
            color: var(--tracker-primary);
            vertical-align: middle;
        }
        .wizard-header p {
            color: #666;
            font-size: 1.15rem;
            line-height: 1.6;
        }

        .wizard-card {
            background: #fff;
            border-radius: 16px;
            border: 1px solid var(--tracker-border);
            padding: 32px;
            box-shadow: 0 4px 20px rgba(124, 58, 237, 0.08);
        }

        .form-group {
            margin-bottom: 24px;
        }
        .form-label {
            display: block;
            font-weight: 600;
            color: #1a1a2e;
            margin-bottom: 8px;
            font-size: 0.95rem;
        }
        .form-hint {
            font-size: 0.85rem;
            color: #888;
            margin-top: 4px;
        }

        .form-input, .form-select, .form-textarea {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid var(--tracker-border);
            border-radius: 10px;
            font-size: 1rem;
            transition: all 0.2s;
            background: #fff;
        }
        .form-input:focus, .form-select:focus, .form-textarea:focus {
            outline: none;
            border-color: var(--tracker-primary);
            box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
        }
        .form-textarea {
            resize: vertical;
            min-height: 80px;
        }

        /* Type Selection Cards */
        .type-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-top: 8px;
        }
        .type-card {
            padding: 16px;
            border: 2px solid var(--tracker-border);
            border-radius: 12px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        .type-card:hover {
            border-color: var(--tracker-primary-light);
        }
        .type-card.selected {
            border-color: var(--tracker-primary);
            background: var(--tracker-bg);
        }
        .type-card i {
            font-size: 1.8rem;
            color: var(--tracker-primary);
            margin-bottom: 8px;
        }
        .type-card .type-name {
            font-weight: 600;
            color: #1a1a2e;
            font-size: 0.9rem;
        }
        .type-card input[type="radio"] {
            display: none;
        }

        /* Viability Section */
        .viability-section {
            background: var(--tracker-bg);
            border-radius: 12px;
            padding: 20px;
            margin-top: 24px;
        }
        .viability-title {
            font-weight: 600;
            color: #1a1a2e;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .viability-question {
            margin-bottom: 20px;
        }
        .viability-label {
            display: block;
            font-weight: 500;
            color: #333;
            margin-bottom: 8px;
            font-size: 0.95rem;
        }
        .viability-hint {
            font-size: 0.85rem;
            color: #666;
            margin-bottom: 8px;
        }
        .rating-input {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        .rating-scale {
            font-size: 0.8rem;
            color: #888;
            margin-left: 12px;
        }
        [dir="rtl"] .rating-scale {
            margin-left: 0;
            margin-right: 12px;
        }
        .rating-btn {
            width: 40px;
            height: 40px;
            border: 2px solid var(--tracker-border);
            border-radius: 10px;
            background: #fff;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .rating-btn:hover {
            border-color: var(--tracker-primary);
        }
        .rating-btn.selected {
            background: var(--tracker-primary);
            border-color: var(--tracker-primary);
            color: #fff;
        }
        .rating-btn input[type="radio"] {
            display: none;
        }

        .viability-result {
            margin-top: 16px;
            padding: 12px;
            border-radius: 8px;
            text-align: center;
            font-weight: 600;
        }
        .viability-result.good {
            background: #d1fae5;
            color: #065f46;
        }
        .viability-result.warning {
            background: #fef3c7;
            color: #92400e;
        }

        /* Optional Linking */
        .optional-section {
            border-top: 1px solid var(--tracker-border);
            padding-top: 24px;
            margin-top: 8px;
        }
        .optional-title {
            font-weight: 600;
            color: #888;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 16px;
        }

        /* Submit Button */
        .submit-btn {
            width: 100%;
            padding: 16px;
            background: linear-gradient(135deg, var(--tracker-primary), var(--tracker-primary-light));
            color: #fff;
            border: none;
            border-radius: 12px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            margin-top: 24px;
        }
        .submit-btn:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }
        .submit-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
        }

        /* Responsive */
        @media (max-width: 640px) {
            .type-cards {
                grid-template-columns: 1fr;
            }
            .wizard-card {
                padding: 20px;
            }
        }

        /* RTL Support */
        [dir="rtl"] .form-input,
        [dir="rtl"] .form-select,
        [dir="rtl"] .form-textarea {
            text-align: right;
        }
    </style>
{% endblock %}

{% block body %}
<div class="create-tracker-page" dir="{{ app.request.locale == 'ar' ? 'rtl' : 'ltr' }}">
    <div class="wizard-header">
        <h1>
            <i class="fas fa-rocket"></i>
            {{ 'create_title'|trans({}, 'Tracker') }}
        </h1>
        <p>{{ 'create_subtitle'|trans({}, 'Tracker') }}</p>
    </div>

    <div class="wizard-card">
        <form method="POST" action="{{ path('research_tracker_create') }}" id="create-tracker-form">
            <!-- Title -->
            <div class="form-group">
                <label class="form-label">{{ 'field_title'|trans({}, 'Tracker') }} *</label>
                <input type="text" name="title" class="form-input" required 
                       placeholder="{{ 'title_placeholder'|trans({}, 'Tracker') }}">
            </div>

            <!-- Type Selection -->
            <div class="form-group">
                <label class="form-label">{{ 'field_type'|trans({}, 'Tracker') }} *</label>
                <div class="type-cards">
                    {% for typeKey, typeData in availableTypes %}
                        <label class="type-card {{ loop.first ? 'selected' : '' }}">
                            <input type="radio" name="type" value="{{ typeKey }}" {{ loop.first ? 'checked' : '' }}>
                            <i class="fas {{ typeKey == 'masters_thesis' ? 'fa-graduation-cap' : (typeKey == 'phd_dissertation' ? 'fa-user-graduate' : 'fa-file-alt') }}"></i>
                            <div class="type-name">{{ app.request.locale == 'ar' ? typeData.labelAr : typeData.labelEn }}</div>
                        </label>
                    {% endfor %}
                </div>
            </div>

            <!-- Target Date -->
            <div class="form-group">
                <label class="form-label">{{ 'field_target_date'|trans({}, 'Tracker') }}</label>
                <input type="date" name="targetDate" class="form-input">
                <div class="form-hint">{{ 'target_date_hint'|trans({}, 'Tracker') }}</div>
            </div>

            <!-- Field (Academic area) -->
            <div class="form-group">
                <label class="form-label">{{ 'field_research_area'|trans({}, 'Tracker') }}</label>
                <select name="fieldId" class="form-select">
                    <option value="">{{ 'select_field'|trans({}, 'Tracker') }}</option>
                    {% for field in fields %}
                        <option value="{{ field.id }}">{{ app.request.locale == 'ar' ? field.arabicFullName : field.englishFullName }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Viability Check -->
            <div class="viability-section">
                <div class="viability-title">
                    <i class="fas fa-chart-line"></i>
                    {{ 'viability_check'|trans({}, 'Tracker') }}
                </div>

                <div class="viability-question">
                    <label class="viability-label">{{ 'viability_q1'|trans({}, 'Tracker') }}</label>
                    <div class="viability-hint">{{ 'viability_q1_hint'|trans({}, 'Tracker') }}</div>
                    <div class="rating-input">
                        {% for i in 1..5 %}
                            <label class="rating-btn">
                                <input type="radio" name="viabilityInteresting" value="{{ i }}">
                                {{ i }}
                            </label>
                        {% endfor %}
                        <span class="rating-scale">({{ 'rating_scale'|trans({}, 'Tracker') }})</span>
                    </div>
                </div>

                <div class="viability-question">
                    <label class="viability-label">{{ 'viability_q2'|trans({}, 'Tracker') }}</label>
                    <div class="viability-hint">{{ 'viability_q2_hint'|trans({}, 'Tracker') }}</div>
                    <div class="rating-input">
                        {% for i in 1..5 %}
                            <label class="rating-btn">
                                <input type="radio" name="viabilityGap" value="{{ i }}">
                                {{ i }}
                            </label>
                        {% endfor %}
                        <span class="rating-scale">({{ 'rating_scale'|trans({}, 'Tracker') }})</span>
                    </div>
                </div>

                <div class="viability-question">
                    <label class="viability-label">{{ 'viability_q3'|trans({}, 'Tracker') }}</label>
                    <div class="viability-hint">{{ 'viability_q3_hint'|trans({}, 'Tracker') }}</div>
                    <div class="rating-input">
                        {% for i in 1..5 %}
                            <label class="rating-btn">
                                <input type="radio" name="viabilityData" value="{{ i }}">
                                {{ i }}
                            </label>
                        {% endfor %}
                        <span class="rating-scale">({{ 'rating_scale'|trans({}, 'Tracker') }})</span>
                    </div>
                </div>

                <div class="viability-result" id="viabilityResult" style="display: none;"></div>
            </div>

            <!-- Optional Linking -->
            <div class="optional-section">
                <div class="optional-title">{{ 'optional_linking'|trans({}, 'Tracker') }}</div>

                {% if projects|length > 0 %}
                    <div class="form-group">
                        <label class="form-label">{{ 'link_project'|trans({}, 'Tracker') }}</label>
                        <select name="projectId" class="form-select">
                            <option value="">{{ 'no_project'|trans({}, 'Tracker') }}</option>
                            {% for project in projects %}
                                <option value="{{ project.id }}">{{ project.title }}</option>
                            {% endfor %}
                        </select>
                        <div class="form-hint">{{ 'link_project_hint'|trans({}, 'Tracker') }}</div>
                    </div>
                {% endif %}

                {% if readingLists|length > 0 %}
                    <div class="form-group">
                        <label class="form-label">{{ 'link_reading_list'|trans({}, 'Tracker') }}</label>
                        <select name="readingListId" class="form-select">
                            <option value="">{{ 'no_reading_list'|trans({}, 'Tracker') }}</option>
                            {% for list in readingLists %}
                                <option value="{{ list.id }}">{{ list.name }} ({{ list.itemCount }} {{ 'papers'|trans({}, 'Tracker') }})</option>
                            {% endfor %}
                        </select>
                        <div class="form-hint">{{ 'link_reading_list_hint'|trans({}, 'Tracker') }}</div>
                    </div>
                {% endif %}
            </div>

            <button type="submit" class="submit-btn">
                <i class="fas fa-rocket"></i> {{ 'start_tracking'|trans({}, 'Tracker') }}
            </button>
        </form>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // Type card selection
        document.querySelectorAll('.type-card').forEach(function(card) {
            card.addEventListener('click', function() {
                document.querySelectorAll('.type-card').forEach(c => c.classList.remove('selected'));
                this.classList.add('selected');
                this.querySelector('input[type="radio"]').checked = true;
            });
        });

        // Rating button selection
        document.querySelectorAll('.rating-btn').forEach(function(btn) {
            btn.addEventListener('click', function() {
                const siblings = this.parentElement.querySelectorAll('.rating-btn');
                siblings.forEach(s => s.classList.remove('selected'));
                this.classList.add('selected');
                this.querySelector('input[type="radio"]').checked = true;
                updateViabilityScore();
            });
        });

        // Calculate viability score
        function updateViabilityScore() {
            const v1 = document.querySelector('input[name="viabilityInteresting"]:checked');
            const v2 = document.querySelector('input[name="viabilityGap"]:checked');
            const v3 = document.querySelector('input[name="viabilityData"]:checked');
            
            if (!v1 || !v2 || !v3) return;

            const avg = (parseInt(v1.value) + parseInt(v2.value) + parseInt(v3.value)) / 3;
            const resultDiv = document.getElementById('viabilityResult');
            
            resultDiv.style.display = 'block';
            if (avg >= 3) {
                resultDiv.className = 'viability-result good';
                resultDiv.innerHTML = '<i class="fas fa-check-circle"></i> {{ "tracker.viability_score_good"|trans({}, "Tracker")|e("js") }} (' + avg.toFixed(1) + '/5)';
            } else {
                resultDiv.className = 'viability-result warning';
                resultDiv.innerHTML = '<i class="fas fa-exclamation-triangle"></i> {{ "tracker.viability_score_warning"|trans({}, "Tracker")|e("js") }} (' + avg.toFixed(1) + '/5)';
            }
        }
    });
    </script>
{% endblock %}