<?php
require __DIR__ . '/../../layouts/header.php';

$page_title = trans('edit_submission');

/*
Safe accessor
*/

function v($row, $k)
{
    return e((string)($row[$k] ?? ''));
}

/*
Safety: ensure row exists
*/

if (!isset($row) || !is_array($row)) {
    $row = [];
}
?>

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

<h3 class="mb-0">
<i class="fa-solid fa-pen-to-square me-2"></i>
<?= e(trans('edit_submission')) ?>
</h3>

<a
class="btn btn-outline-secondary btn-rounded"
href="<?= e(base_path('author/submissions')) ?>"
>
<i class="fa-solid fa-arrow-left me-2"></i>
<?= e(trans('back')) ?>
</a>

</div>

<div class="card shadow-sm border-0">

<div class="card-body">

<form
method="post"
action="<?= e(base_path('author/submission/update')) ?>"
class="row g-3"
>

<input
type="hidden"
name="_csrf"
value="<?= e(csrf_token()) ?>"
>

<input
type="hidden"
name="id"
value="<?= v($row,'id') ?>"
>

<div class="col-12">

<div class="fw-bold">

<?= v($row,'submission_no') ?>
—
<?= v($row,'title') ?>

</div>

<div class="small text-muted">

Status:
<?= v($row,'status') ?>

</div>

</div>

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

<label class="form-label ec-required">
<?= e(trans('title_en')) ?>
</label>

<input
name="title"
class="form-control"
value="<?= v($row,'title') ?>"
required
>

</div>

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

<label class="form-label ec-required">
<?= e(trans('title_ar')) ?>
</label>

<input
name="title_ar"
class="form-control"
value="<?= v($row,'title_ar') ?>"
required
>

</div>

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

<label class="form-label ec-required">
<?= e(trans('abstract_en')) ?>
</label>

<textarea
name="abstract"
class="form-control"
rows="6"
required
><?= v($row,'abstract') ?></textarea>

</div>

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

<label class="form-label ec-required">
<?= e(trans('abstract_ar')) ?>
</label>

<textarea
name="abstract_ar"
class="form-control"
rows="6"
required
><?= v($row,'abstract_ar') ?></textarea>

</div>

<!-- Keywords EN -->

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

<label class="form-label ec-required">
<?= e(trans('keywords_en')) ?>
</label>

<input
type="hidden"
name="keywords"
id="kw_en_hidden"
value="<?= v($row,'keywords') ?>"
>

<div class="border rounded-3 p-2 bg-light">

<div
id="kw_en_tags"
class="d-flex flex-wrap gap-2 mb-2"
></div>

<input
id="kw_en_input"
class="form-control"
placeholder="Type keyword and press Enter"
autocomplete="off"
>

<div class="small text-muted mt-1">

Press Enter to add.
Click × to remove.

</div>

</div>

</div>

<!-- Keywords AR -->

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

<label class="form-label ec-required">
<?= e(trans('keywords_ar')) ?>
</label>

<input
type="hidden"
name="keywords_ar"
id="kw_ar_hidden"
value="<?= v($row,'keywords_ar') ?>"
>

<div class="border rounded-3 p-2 bg-light">

<div
id="kw_ar_tags"
class="d-flex flex-wrap gap-2 mb-2"
></div>

<input
id="kw_ar_input"
class="form-control"
placeholder="اكتب كلمة واضغط Enter"
autocomplete="off"
>

<div class="small text-muted mt-1">

Enter للإضافة،
واضغط × للحذف.

</div>

</div>

</div>

<div class="col-12">

<button
class="btn btn-success btn-rounded"
>

<i class="fa-solid fa-check me-2"></i>

<?= e(trans('save')) ?>

</button>

</div>

</form>

</div>

</div>

<script>

(function(){

function parseCSV(v){

v = (v || "").trim();

if (!v) return [];

return v.split(",")

.map(s => s.trim())

.filter(Boolean);

}

function uniq(arr){

const seen = new Set();

const out = [];

for (const x of arr){

const k = x.toLowerCase();

if (seen.has(k)) continue;

seen.add(k);

out.push(x);

}

return out;

}

function render(tagsEl, hiddenEl, tags){

tagsEl.innerHTML = "";

tags.forEach((t, idx)=>{

const b = document.createElement("span");

b.className =
"badge bg-primary d-inline-flex align-items-center gap-2";

b.style.borderRadius = "999px";

b.style.padding = "8px 10px";

b.innerHTML =
`<span>${escapeHtml(t)}</span>
<a href="#" data-i="${idx}"
style="color:#fff;
text-decoration:none;
font-weight:900">×</a>`;

tagsEl.appendChild(b);

});

hiddenEl.value = tags.join(", ");

}

function escapeHtml(s){

return (s+"").replace(/[&<>"']/g,

m => ({

'&':'&amp;',

'<':'&lt;',

'>':'&gt;',

'"':'&quot;',

"'":'&#39;'

}[m]));

}

function setup(inputId, tagsId, hiddenId){

const input =
document.getElementById(inputId);

const tagsEl =
document.getElementById(tagsId);

const hidden =
document.getElementById(hiddenId);

let tags =
uniq(parseCSV(hidden.value));

render(tagsEl, hidden, tags);

input.addEventListener(

"keydown",

(e)=>{

if (e.key === "Enter"){

e.preventDefault();

const v =
(input.value || "").trim();

if (!v) return;

tags =
uniq(tags.concat([v]));

input.value = "";

render(tagsEl, hidden, tags);

}

}

);

tagsEl.addEventListener(

"click",

(e)=>{

const a =
e.target.closest("a[data-i]");

if (!a) return;

e.preventDefault();

const i =
parseInt(a.getAttribute("data-i"), 10);

tags.splice(i, 1);

render(tagsEl, hidden, tags);

}

);

}

setup(
"kw_en_input",
"kw_en_tags",
"kw_en_hidden"
);

setup(
"kw_ar_input",
"kw_ar_tags",
"kw_ar_hidden"
);

})();

</script>

<?php
require __DIR__ . '/../../layouts/footer.php';
?>
