<?php

$lang =
    $_SESSION['lang']
    ?? 'en';

$isArabic =
    $lang === 'ar';

$dir =
    $isArabic
        ? 'rtl'
        : 'ltr';

function esub_h($v)
{
    return htmlspecialchars(
        (string)$v,
        ENT_QUOTES,
        'UTF-8'
    );
}

$conferenceTitle =
    $conference['title_ar']
    ?? $conference['title_en']
    ?? 'Conference';

?>

<style>

.submit-hero{
background:
linear-gradient(
135deg,
#0f172a,
#1d4ed8
);
border-radius:28px;
overflow:hidden;
position:relative;
color:#fff;
}

.submit-hero::before{
content:'';
position:absolute;
inset:0;
background:
radial-gradient(
circle at top right,
rgba(255,255,255,.18),
transparent 40%
);
}

.submit-card{
border:0;
border-radius:24px;
box-shadow:
0 10px 30px rgba(15,23,42,.08);
overflow:hidden;
}

.track-card{
border:2px solid #e2e8f0;
border-radius:18px;
padding:18px;
cursor:pointer;
transition:.25s;
height:100%;
}

.track-card:hover{
border-color:#2563eb;
transform:translateY(-3px);
}

.track-card.active{
border-color:#2563eb;
background:#eff6ff;
}

.upload-zone{
border:2px dashed #cbd5e1;
border-radius:24px;
padding:40px;
text-align:center;
background:#f8fafc;
transition:.25s;
}

.upload-zone:hover{
border-color:#2563eb;
background:#eff6ff;
}

.step-badge{
width:42px;
height:42px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
background:#2563eb;
color:#fff;
}

.meta-chip{
padding:10px 18px;
border-radius:999px;
background:#fff;
font-weight:600;
display:inline-flex;
align-items:center;
gap:8px;
box-shadow:0 4px 15px rgba(15,23,42,.08);
}

</style>

<div class="container py-4" dir="<?= $dir ?>">

<div class="submit-hero p-5 mb-4">

<div class="position-relative z-2">

<div class="d-flex flex-wrap justify-content-between align-items-center gap-3">

<div>

<span class="badge bg-light text-dark px-3 py-2 mb-3">

<?= $isArabic
? 'بوابة إرسال الأبحاث'
: 'Paper Submission Portal' ?>

</span>

<h1 class="fw-bold mb-3">

<?= esub_h($conferenceTitle) ?>

</h1>

<div class="fs-5 opacity-75">

<?= $isArabic
? 'نظام إرسال وتحكيم الأبحاث العلمية'
: 'Enterprise Research Submission Workflow' ?>

</div>

</div>

<div class="d-flex flex-wrap gap-3">

<div class="meta-chip text-dark">

<i class="fa fa-layer-group"></i>

<?= count($tracks ?? []) ?>

<?= $isArabic
? 'مسار'
: 'Tracks' ?>

</div>

<div class="meta-chip text-dark">

<i class="fa fa-file"></i>

PDF

</div>

<div class="meta-chip text-dark">

<i class="fa fa-language"></i>

<?= $isArabic
? 'متعدد اللغات'
: 'Multilingual' ?>

</div>

</div>

</div>

</div>

</div>

<form
method="post"
action="/easychair/author/submit/store"
enctype="multipart/form-data"
>

<input
type="hidden"
name="conference_id"
value="<?= (int)$conference_id ?>"
>

<div class="submit-card mb-4">

<div class="card-body p-4">

<div class="d-flex align-items-center gap-3 mb-4">

<div class="step-badge">
1
</div>

<div>

<h4 class="fw-bold mb-1">

<?= $isArabic
? 'بيانات البحث'
: 'Paper Information' ?>

</h4>

<div class="text-muted">

<?= $isArabic
? 'أدخل عنوان وملخص البحث'
: 'Provide title and abstract' ?>

</div>

</div>

</div>

<div class="row g-4">

<div class="col-md-6">

<label class="form-label fw-bold">

<?= $isArabic
? 'عنوان البحث'
: 'Paper Title' ?>

</label>

<input
type="text"
name="title"
class="form-control form-control-lg"
required
>

</div>

<div class="col-md-6">

<label class="form-label fw-bold">

<?= $isArabic
? 'العنوان بالعربية'
: 'Arabic Title' ?>

</label>

<input
type="text"
name="title_ar"
class="form-control form-control-lg"
>

</div>

<div class="col-md-6">

<label class="form-label fw-bold">

<?= $isArabic
? 'الملخص'
: 'Abstract' ?>

</label>

<textarea
name="abstract"
rows="7"
class="form-control"
required
></textarea>

</div>

<div class="col-md-6">

<label class="form-label fw-bold">

<?= $isArabic
? 'الملخص بالعربية'
: 'Arabic Abstract' ?>

</label>

<textarea
name="abstract_ar"
rows="7"
class="form-control"
></textarea>

</div>

<div class="col-md-6">

<label class="form-label fw-bold">

<?= $isArabic
? 'الكلمات المفتاحية'
: 'Keywords' ?>

</label>

<input
type="text"
name="keywords_en"
class="form-control"
placeholder="AI, NLP, Security..."
>

</div>

<div class="col-md-6">

<label class="form-label fw-bold">

<?= $isArabic
? 'الكلمات المفتاحية بالعربية'
: 'Arabic Keywords' ?>

</label>

<input
type="text"
name="keywords_ar"
class="form-control"
>

</div>

</div>

</div>

</div>

<div class="submit-card mb-4">

<div class="card-body p-4">

<div class="d-flex align-items-center gap-3 mb-4">

<div class="step-badge">
2
</div>

<div>

<h4 class="fw-bold mb-1">

<?= $isArabic
? 'المسارات العلمية'
: 'Conference Tracks' ?>

</h4>

<div class="text-muted">

<?= $isArabic
? 'اختر المسار المناسب'
: 'Select the most suitable track' ?>

</div>

</div>

</div>

<div class="row g-3">

<?php foreach (($tracks ?? []) as $t): ?>

<div class="col-lg-4">

<label class="track-card d-block">

<input
type="radio"
name="track_id"
value="<?= (int)$t['id'] ?>"
class="d-none track-radio"
required
>

<div class="fw-bold fs-5 mb-2">

<?= esub_h(
$isArabic
? ($t['name_ar'] ?? '')
: ($t['name_en'] ?? '')
) ?>

</div>

<div class="text-muted small">

<?= esub_h(
$isArabic
? ($t['description_ar'] ?? '')
: ($t['description_en'] ?? '')
) ?>

</div>

</label>

</div>

<?php endforeach; ?>

</div>

</div>

</div>

<div class="submit-card mb-4">

<div class="card-body p-4">

<div class="d-flex align-items-center gap-3 mb-4">

<div class="step-badge">
3
</div>

<div>

<h4 class="fw-bold mb-1">

<?= $isArabic
? 'رفع البحث'
: 'Upload Manuscript' ?>

</h4>

<div class="text-muted">

<?= $isArabic
? 'ارفع ملف البحث بصيغة PDF أو Word'
: 'Upload manuscript PDF or Word file' ?>

</div>

</div>

</div>

<div class="upload-zone">

<i class="fa fa-cloud-upload-alt fa-4x mb-3 text-primary"></i>

<h5 class="fw-bold">

<?= $isArabic
? 'اسحب الملف هنا أو اختر ملفاً'
: 'Drag file here or choose file' ?>

</h5>

<input
type="file"
name="file"
class="form-control mt-4"
required
>

</div>

</div>

</div>

<div class="submit-card mb-4">

<div class="card-body p-4">

<div class="d-flex align-items-center gap-3 mb-4">

<div class="step-badge">
4
</div>

<div>

<h4 class="fw-bold mb-1">

<?= $isArabic
? 'المؤلفون المشاركون'
: 'Co-Authors' ?>

</h4>

<div class="text-muted">

<?= $isArabic
? 'إضافة المؤلفين المشاركين'
: 'Add co-authors if available' ?>

</div>

</div>

</div>

<div id="coauthors">

<div class="row g-3 coauthor-row mb-3">

<div class="col-md-3">
<input
name="coauthor_name[]"
class="form-control"
placeholder="Full Name"
>
</div>

<div class="col-md-3">
<input
name="coauthor_email[]"
class="form-control"
placeholder="Email"
>
</div>

<div class="col-md-4">
<input
name="coauthor_affiliation[]"
class="form-control"
placeholder="Affiliation"
>
</div>

<div class="col-md-2">
<input
name="coauthor_country[]"
class="form-control"
placeholder="Country"
>
</div>

</div>

</div>

<button
type="button"
class="btn btn-outline-primary"
onclick="addCoauthor()"
>

<i class="fa fa-plus"></i>

<?= $isArabic
? 'إضافة مؤلف'
: 'Add Co-Author' ?>

</button>

</div>

</div>

<div class="submit-card">

<div class="card-body p-4">

<div class="form-check mb-4">

<input
class="form-check-input"
type="checkbox"
required
id="confirmSubmission"
>

<label
class="form-check-label"
for="confirmSubmission"
>

<?= $isArabic
? 'أتعهد بأن البحث أصيل وغير مقدم لمؤتمر آخر'
: 'I confirm the submission is original and not submitted elsewhere' ?>

</label>

</div>

<button
class="btn btn-primary btn-lg px-5"
>

<i class="fa fa-paper-plane"></i>

<?= $isArabic
? 'إرسال البحث'
: 'Submit Paper' ?>

</button>

</div>

</div>

</form>

</div>

<script>

document.querySelectorAll('.track-card')
.forEach(card => {

card.addEventListener('click', () => {

document
.querySelectorAll('.track-card')
.forEach(c => c.classList.remove('active'));

card.classList.add('active');

card
.querySelector('.track-radio')
.checked = true;

});

});

function addCoauthor(){

const row =
document
.querySelector('.coauthor-row')
.cloneNode(true);

row.querySelectorAll('input')
.forEach(i => i.value = '');

document
.getElementById('coauthors')
.appendChild(row);

}

</script>
