<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>تذكرة دعم جديدة<?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/support" class="btn btn-outline">← العودة</a>
<?php $__template->endSection(); ?>

<?php $__template->section('content'); ?>
<div class="card" style="max-width:800px;">
    <div style="padding:20px;">
        <form method="POST" action="/support" enctype="multipart/form-data">
            <?= csrf_field() ?>

            <div class="form-group" style="margin-bottom:20px;">
                <label class="form-label" style="font-weight:600;">الموضوع <span style="color:#DC2626;">*</span></label>
                <input type="text" name="subject" class="form-input" value="<?= e(old('subject')) ?>" placeholder="عنوان مختصر للمشكلة أو الطلب..." required maxlength="255" style="font-size:16px;">
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;margin-bottom:20px;">
                <div class="form-group">
                    <label class="form-label">التصنيف</label>
                    <select name="category" class="form-select">
                        <option value="">— اختر —</option>
                        <?php foreach ($categories as $k => $v): ?>
                            <option value="<?= $k ?>"><?= e($v) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">الأولوية</label>
                    <select name="priority" class="form-select">
                        <option value="normal">عادي</option>
                        <option value="low">منخفض</option>
                        <option value="high">مرتفع</option>
                        <option value="urgent">عاجل</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">تعيين إلى</label>
                    <select name="assigned_to" class="form-select">
                        <option value="">— بدون تعيين —</option>
                        <?php foreach ($employees as $emp): ?>
                            <option value="<?= (int) $emp['id'] ?>"><?= e($emp['full_name_ar']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>

            <div class="form-group" style="margin-bottom:20px;">
                <label class="form-label" style="font-weight:600;">المحتوى <span style="color:#DC2626;">*</span></label>
                <p style="font-size:12px;color:#6B7280;margin:0 0 8px;">اكتب تفاصيل المشكلة أو الطلب بالكامل — يمكنك لصق نصوص كبيرة، أكواد خطأ، أو أي محتوى تحتاجه</p>
                <textarea name="body" class="form-input" rows="15" required placeholder="اكتب هنا بالتفصيل...&#10;&#10;يمكنك لصق:&#10;- رسائل الخطأ كاملة&#10;- خطوات إعادة إنتاج المشكلة&#10;- أرقام العضويات أو الاستمارات المتأثرة&#10;- أي بيانات أخرى" style="font-size:14px;line-height:1.7;font-family:inherit;min-height:300px;resize:vertical;"><?= e(old('body')) ?></textarea>
            </div>

            <div class="form-group" style="margin-bottom:25px;">
                <label class="form-label" style="font-weight:600;">المرفقات</label>
                <p style="font-size:12px;color:#6B7280;margin:0 0 8px;">صور، ملفات PDF، مستندات — حتى 20 ميجا للملف الواحد — يمكنك رفع عدة ملفات</p>
                <div style="border:2px dashed #D1D5DB;border-radius:10px;padding:30px;text-align:center;background:#F9FAFB;" id="dropZone">
                    <div style="font-size:36px;margin-bottom:10px;">&#x1f4ce;</div>
                    <p style="margin:0 0 10px;color:#6B7280;">اسحب الملفات هنا أو</p>
                    <label class="btn btn-outline" style="cursor:pointer;">
                        اختر ملفات
                        <input type="file" name="attachments[]" multiple style="display:none;" id="fileInput" accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.csv,.zip,.rar,.mp4,.mov">
                    </label>
                    <div id="fileList" style="margin-top:15px;text-align:right;"></div>
                </div>
            </div>

            <div style="border-top:1px solid #E5E7EB;padding-top:20px;display:flex;justify-content:space-between;align-items:center;">
                <a href="/support" class="btn btn-outline">إلغاء</a>
                <button type="submit" class="btn btn-primary" style="padding:12px 40px;font-size:16px;">إرسال التذكرة</button>
            </div>
        </form>
    </div>
</div>

<script>
var fileInput = document.getElementById('fileInput');
var fileList = document.getElementById('fileList');
var dropZone = document.getElementById('dropZone');

fileInput.addEventListener('change', function() { updateFileList(); });

dropZone.addEventListener('dragover', function(e) { e.preventDefault(); dropZone.style.borderColor = '#0D7377'; dropZone.style.background = '#F0FDFA'; });
dropZone.addEventListener('dragleave', function(e) { e.preventDefault(); dropZone.style.borderColor = '#D1D5DB'; dropZone.style.background = '#F9FAFB'; });
dropZone.addEventListener('drop', function(e) {
    e.preventDefault();
    dropZone.style.borderColor = '#D1D5DB';
    dropZone.style.background = '#F9FAFB';
    if (e.dataTransfer.files.length > 0) {
        fileInput.files = e.dataTransfer.files;
        updateFileList();
    }
});

function updateFileList() {
    fileList.innerHTML = '';
    for (var i = 0; i < fileInput.files.length; i++) {
        var f = fileInput.files[i];
        var size = f.size > 1048576 ? (f.size / 1048576).toFixed(1) + ' MB' : (f.size / 1024).toFixed(0) + ' KB';
        var isImg = f.type.startsWith('image/');
        fileList.innerHTML += '<div style="display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #F3F4F6;font-size:13px;">' +
            '<span style="font-size:16px;">' + (isImg ? '&#x1f5bc;' : '&#x1f4c4;') + '</span>' +
            '<span style="flex:1;">' + f.name + '</span>' +
            '<span style="color:#6B7280;">' + size + '</span></div>';
    }
}
</script>
<?php $__template->endSection(); ?>
