{{!
    This file is part of Moodle - http://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @package    local_academic_ticket_system
    @copyright  2026 learn-ix support@learn-ix.com
    @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
}}

<div class="ats-container">
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

    <div class="fixed inset-0 z-0 bg-gray-100 overflow-hidden" aria-hidden="true">
        <div class="blob blob-1 rounded-full"></div>
        <div class="blob blob-2 rounded-full"></div>
        <div class="blob blob-3 rounded-full"></div>
        <div class="absolute inset-0 bg-white/60 backdrop-blur-[60px]"></div>
    </div>

    <main class="container mx-auto p-4 sm:p-6 lg:p-10 max-w-5xl relative z-10 flex flex-col" role="main">

        <header class="glass-panel rounded-3xl p-6 mb-8 flex flex-col md:flex-row items-center justify-between gap-6 hover:shadow-2xl transition-shadow duration-300">
            <div class="flex items-center gap-5 w-full md:w-auto">
                <!-- الأيقونة الآن تعتمد على اللون الأساسي الصريح -->
                <div class="w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg shadow-brand text-white transform rotate-3 hover:rotate-0 transition-transform duration-300" style="background-color: var(--ats-primary);" aria-hidden="true">
                    <i class="fas fa-edit text-3xl"></i>
                </div>
                <div>
                    <h1 class="text-2xl sm:text-3xl font-extrabold text-gray-800">
                        {{title}}
                    </h1>
                    <p class="text-gray-500 font-medium mt-1">{{#str}}form_instruction, local_academic_ticket_system{{/str}}</p>
                </div>
            </div>

            <a href="{{return_url}}" class="glass-card px-6 py-3 rounded-2xl flex items-center gap-2 text-gray-700 font-bold hover-text-brand hover:bg-white transition-all text-decoration-none" aria-label="{{#str}}return_home, local_academic_ticket_system{{/str}}">
                <i class="fas fa-arrow-left" aria-hidden="true"></i>
                <span>{{#str}}return_home, local_academic_ticket_system{{/str}}</span>
            </a>
        </header>

        <div class="glass-panel rounded-3xl p-8 sm:p-10 relative overflow-hidden">
            <form action="{{action_url}}" method="post" enctype="multipart/form-data" class="custom-ticket-form space-y-8">
                <input type="hidden" name="sesskey" value="{{sesskey}}">

                <div>
                    <label for="ticket_title" class="form-label">
                        <i class="fas fa-heading text-brand ms-2" aria-hidden="true"></i> {{#str}}ticket_title_label, local_academic_ticket_system{{/str}}
                    </label>
                    <input type="text" id="ticket_title" name="title" class="glass-input w-full focus-ring-brand focus:border-brand transition-all"
                           placeholder="{{#str}}title_placeholder, local_academic_ticket_system{{/str}}"
                           required aria-required="true">
                </div>

                <div>
                    <label for="ticket_category" class="form-label">
                        <i class="fas fa-layer-group text-brand-secondary ms-2" aria-hidden="true"></i> {{#str}}ticket_department_label, local_academic_ticket_system{{/str}}
                    </label>
                    <select id="ticket_category" name="category_id" class="glass-select w-full focus-ring-brand focus:border-brand transition-all" required aria-required="true">
                        <option value="" disabled selected>{{#str}}select_department_hint, local_academic_ticket_system{{/str}}</option>
                        {{#categories}}
                            <option value="{{id}}">{{title}}</option>
                        {{/categories}}
                    </select>
                </div>

                <div>
                    <label for="ticket_priority" class="form-label">
                        <i class="fas fa-flag text-red-500 ms-2" aria-hidden="true"></i> {{#str}}ticket_priority_label, local_academic_ticket_system{{/str}}
                    </label>
                    <select id="ticket_priority" name="priority" class="glass-select w-full focus-ring-brand focus:border-brand transition-all" required aria-required="true">
                        <option value="" disabled selected>{{#str}}select_priority_hint, local_academic_ticket_system{{/str}}</option>
                        <option value="low">{{#str}}priority_low, local_academic_ticket_system{{/str}}</option>
                        <option value="medium">{{#str}}priority_medium, local_academic_ticket_system{{/str}}</option>
                        <option value="high">{{#str}}priority_high, local_academic_ticket_system{{/str}}</option>
                        <option value="urgent">{{#str}}priority_urgent, local_academic_ticket_system{{/str}}</option>
                    </select>
                </div>

                <div>
                    <label for="ticket_description" class="form-label">
                        <i class="fas fa-align-right text-brand ms-2" aria-hidden="true"></i> {{#str}}ticket_description_label, local_academic_ticket_system{{/str}}
                    </label>
                    <textarea id="ticket_description" name="description" rows="6" class="glass-input resize-none leading-relaxed w-full focus-ring-brand focus:border-brand transition-all"
                              placeholder="{{#str}}description_placeholder, local_academic_ticket_system{{/str}}"
                              required aria-required="true"></textarea>
                </div>

                <section class="space-y-3" aria-labelledby="voice_note_label">
                    <label id="voice_note_label" class="flex items-center font-bold text-gray-700">
                        <i class="fas fa-microphone me-2 text-brand" aria-hidden="true"></i> {{#str}}record_voice_note, local_academic_ticket_system{{/str}}
                    </label>

                    <div class="glass-panel rounded-2xl p-4 flex items-center justify-between gap-4 border-dashed border-2 border-brand-light">
                        <div class="flex items-center gap-3">
                            <button type="button" id="startRecord" class="w-12 h-12 rounded-full bg-brand-light text-brand flex items-center justify-center hover:bg-brand hover:text-white transition-all shadow-md hover:shadow-brand"
                                    aria-label="{{#str}}start_recording, local_academic_ticket_system{{/str}}">
                                <i class="fas fa-microphone" aria-hidden="true"></i>
                            </button>
                            <button type="button" id="stopRecord" class="hidden w-12 h-12 rounded-full bg-red-500 text-white flex items-center justify-center animate-pulse shadow-lg shadow-red-500/30"
                                    aria-label="{{#str}}stop_recording, local_academic_ticket_system{{/str}}">
                                <i class="fas fa-stop" aria-hidden="true"></i>
                            </button>
                            <div id="recordingStatus" class="text-sm font-bold text-gray-500" aria-live="polite">
                                {{#str}}click_to_record, local_academic_ticket_system{{/str}}
                            </div>
                        </div>

                        <div id="audioPreviewContainer" class="hidden flex-1">
                            <audio id="audioPlayback" controls class="w-full h-8 outline-none" aria-label="Audio preview"></audio>
                        </div>
                    </div>
                    <input type="file" id="voice_note_input" name="voice_note" class="hidden" accept="audio/*">
                </section>

                <section class="space-y-3" aria-labelledby="upload_label">
                    <label id="upload_label" class="form-label mb-3">
                        <i class="fas fa-paperclip text-brand ms-2" aria-hidden="true"></i> {{#str}}attach_files_optional, local_academic_ticket_system{{/str}}
                    </label>
                    <div class="upload-zone group relative hover-border-brand transition-colors" id="drop-zone">
                        <div class="w-16 h-16 bg-brand-light rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform text-brand" aria-hidden="true">
                            <i class="fa-solid fa-cloud-arrow-up text-3xl"></i>
                        </div>
                        <h6 class="font-bold text-gray-700 text-lg mb-1 group-hover-text-brand transition-colors">{{#str}}click_to_upload, local_academic_ticket_system{{/str}}</h6>
                        <p class="text-sm text-gray-400" id="file-name-display" aria-live="polite">
                            {{#str}}drag_drop_hint, local_academic_ticket_system{{/str}}
                        </p>

                        <input type="file" id="file_attachments" name="attachments[]" multiple
                               class="absolute inset-0 opacity-0 cursor-pointer w-full h-full"
                               onchange="updateFileName(this)"
                               aria-label="{{#str}}click_to_upload, local_academic_ticket_system{{/str}}">
                    </div>
                </section>

                <div class="pt-6 flex flex-col sm:flex-row items-center justify-end gap-4 border-t border-gray-200/50">
                    <a href="{{return_url}}"
                       class="w-full sm:w-auto text-center text-gray-500 font-bold hover:text-brand px-6 py-3.5 transition-all duration-300 text-decoration-none rounded-2xl hover:bg-white/50 border border-transparent hover:border-white/40">
                        {{#str}}cancel, local_academic_ticket_system{{/str}}
                    </a>
                    <button type="submit" class="w-full sm:w-auto shadow-brand py-3.5 px-8 rounded-2xl text-white font-bold hover:opacity-90 transition-opacity border-0" style="background-color: var(--ats-primary);">
                        <span>{{#str}}submit, local_academic_ticket_system{{/str}}</span>
                        <i class="fa-solid fa-paper-plane ms-2" aria-hidden="true"></i>
                    </button>
                </div>
            </form>
        </div>
    </main>
</div>

{{#js}}
    require(['jquery', 'core/str'], function($, str) {
    $('.custom-ticket-form').on('submit', function() {
    var btn = $(this).find('button[type="submit"]');
    btn.css('opacity', '0.8').css('pointer-events', 'none');
    btn.html('<i class="fa fa-circle-notch fa-spin"></i> {{#str}}sending, local_academic_ticket_system{{/str}}');
    });

    window.updateFileName = function(input) {
    var display = $('#file-name-display');
    var zone = $('#drop-zone');

    if (input.files && input.files.length > 0) {
    var count = input.files.length;
    str.get_string('filesselected', 'local_academic_ticket_system', count).done(function(localizedString) {
    display.html('<span class="text-green-600 font-bold"><i class="fa fa-check-circle"></i> ' + localizedString + '</span>');
    });
    zone.addClass('active border-brand');
    } else {
    display.text("{{#str}}drag_drop_hint, local_academic_ticket_system{{/str}}");
    zone.removeClass('active border-brand');
    }
    }

    let mediaRecorder;
    let audioChunks = [];

    $('#startRecord').on('click', async function() {
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    mediaRecorder = new MediaRecorder(stream);
    audioChunks = [];

    mediaRecorder.ondataavailable = e => audioChunks.push(e.data);

    mediaRecorder.onstop = () => {
    const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
    const audioUrl = URL.createObjectURL(audioBlob);
    $('#audioPlayback').attr('src', audioUrl);
    $('#audioPreviewContainer').removeClass('hidden');

    let file = new File([audioBlob], "voice_note.webm", {type:"audio/webm"});
    let container = new DataTransfer();
    container.items.add(file);
    document.getElementById('voice_note_input').files = container.files;

    $('#recordingStatus').text("{{#str}}recording_finished, local_academic_ticket_system{{/str}}").removeClass('text-red-500').addClass('text-green-600');
    };

    mediaRecorder.start();
    $(this).addClass('hidden');
    $('#stopRecord').removeClass('hidden');
    $('#recordingStatus').text("{{#str}}recording_now, local_academic_ticket_system{{/str}}").removeClass('text-green-600 text-gray-500').addClass('text-red-500');
    } catch (err) {
    str.get_string('nopermission', 'local_academic_ticket_system').done(function(localizedString) {
    alert(localizedString);
    });
    }
    }
    });

    $('#stopRecord').on('click', function() {
    mediaRecorder.stop();
    $(this).addClass('hidden');
    $('#startRecord').removeClass('hidden');
    });
    });
{{/js}}
