<?php
$title = 'Edit Homepage Section';
?>

<div class="container-fluid py-4">

    <div class="card border-0 shadow-lg rounded-4">

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

            <h2 class="fw-bold mb-4">
                Edit Homepage Section
            </h2>

            <form
                method="post"
 enctype="multipart/form-data"              
  action="/easychair/admin/conference-home/sections/update">

                <input
                    type="hidden"
                    name="id"
                    value="<?= (int)$section['id'] ?>">

                <div class="row g-4">
<div class="col-md-4">

    <label class="form-label">
        Background Type
    </label>

    <select
        name="background_type"
        class="form-select">

        <?php
        $bg =
            $section['background_type']
            ?? 'gradient';
        ?>

        <option
            value="gradient"
            <?= $bg === 'gradient' ? 'selected' : '' ?>>

            Gradient

        </option>

        <option
            value="image"
            <?= $bg === 'image' ? 'selected' : '' ?>>

            Image

        </option>

        <option
            value="solid"
            <?= $bg === 'solid' ? 'selected' : '' ?>>

            Solid

        </option>

    </select>

</div>

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

    <label class="form-label">
        Background Value
    </label>

    <input
        type="text"
        name="background_value"
        class="form-control"
        placeholder="linear-gradient(...)"
        value="<?= htmlspecialchars(
            $section['background_value'] ?? ''
        ) ?>">

</div>

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

    <label class="form-label">
        Custom CSS Class
    </label>
<div class="col-md-6">

    <label class="form-label">
        Background Image
    </label>

<input
    type="hidden"
    name="existing_background_image"
    value="<?= htmlspecialchars(
        $section['background_image']
        ?? ''
    ) ?>">

    <input
        type="file"
        name="background_image"
        class="form-control"
        >

    <?php if (!empty($section['background_image'])): ?>

        <div class="mt-3">

            <img
                src="/easychair/uploads/section_backgrounds/<?= htmlspecialchars($section['background_image']) ?>"
                class="img-fluid rounded-4 shadow"
                style="max-height:220px">

        </div>

    <?php endif; ?>

</div>

    <input
        type="text"
        name="custom_css_class"
        class="form-control"
        value="<?= htmlspecialchars(
            $section['custom_css_class'] ?? ''
        ) ?>">

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

                        <label class="form-label">
                            Section Title (EN)
                        </label>

                        <input
                            type="text"
                            name="section_title_en"
                            class="form-control"
                            value="<?= htmlspecialchars($section['section_title_en'] ?? '') ?>">

                    </div>

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

                        <label class="form-label">
                            عنوان القسم
                        </label>

                        <input
                            type="text"
                            name="section_title_ar"
                            class="form-control"
                            dir="rtl"
                            value="<?= htmlspecialchars($section['section_title_ar'] ?? '') ?>">

                    </div>

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

                        <label class="form-label">
                            Main Title (EN)
                        </label>

                        <input
                            type="text"
                            name="title_en"
                            class="form-control"
                            value="<?= htmlspecialchars($section['title_en'] ?? '') ?>">

                    </div>

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

                        <label class="form-label">
                            العنوان الرئيسي
                        </label>

                        <input
                            type="text"
                            name="title_ar"
                            class="form-control"
                            dir="rtl"
                            value="<?= htmlspecialchars($section['title_ar'] ?? '') ?>">

                    </div>

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

                        <label class="form-label">
                            Subtitle (EN)
                        </label>

                        <textarea
                            name="subtitle_en"
                            class="form-control"
                            rows="4"><?= htmlspecialchars($section['subtitle_en'] ?? '') ?></textarea>

                    </div>

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

                        <label class="form-label">
                            الوصف العربي
                        </label>

                        <textarea
                            name="subtitle_ar"
                            class="form-control"
                            dir="rtl"
                            rows="4"><?= htmlspecialchars($section['subtitle_ar'] ?? '') ?></textarea>

                    </div>

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

                        <label class="form-label">
                            Icon Class
                        </label>

                        <input
                            type="text"
                            name="icon_class"
                            class="form-control"
                            value="<?= htmlspecialchars($section['icon_class'] ?? '') ?>">

                    </div>

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

                        <label class="form-label">
                            Theme
                        </label>

                        <input
                            type="text"
                            name="theme_name"
                            class="form-control"
                            value="<?= htmlspecialchars($section['theme_name'] ?? '') ?>">

                    </div>

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

                        <label class="form-label">
                            Sort
                        </label>

                        <input
                            type="number"
                            name="sort_order"
                            class="form-control"
                            value="<?= (int)$section['sort_order'] ?>">

                    </div>

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

                        <label class="form-label">
                            Enabled
                        </label>

                        <div class="form-check form-switch mt-2">

                            <input
                                type="checkbox"
                                name="enabled"
                                class="form-check-input"
                                <?= !empty($section['enabled']) ? 'checked' : '' ?>>

                        </div>

                    </div>

                </div>

                <div class="mt-4">

                    <button
                        type="submit"
                        class="btn btn-primary rounded-pill px-5">

                        <i class="fa fa-save"></i>
                        Save Section

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>
<hr class="my-5">

<h4 class="fw-bold mb-4">
    Live Preview
</h4>

<div
id="section-preview"
class="rounded-4 shadow-lg p-5 text-white"
style="
background:
<?= htmlspecialchars(
    $section['background_value']
    ?? 'linear-gradient(135deg,#0d6efd,#6610f2)'
) ?>;
">

    <h2 class="fw-bold">

        <?= htmlspecialchars(
            $section['title_en']
            ?? 'Section Title'
        ) ?>

    </h2>

    <div class="opacity-75">

        <?= htmlspecialchars(
            $section['subtitle_en']
            ?? 'Section subtitle preview'
        ) ?>

    </div>

</div>
<script>

const bgInput =
document.querySelector(
    '[name="background_value"]'
);

const preview =
document.getElementById(
    'section-preview'
);

if (bgInput && preview) {

    bgInput.addEventListener(
        'input',
        () => {

            preview.style.background =
                bgInput.value;

        }
    );
}

</script>
<script>

const imageInput =
document.querySelector(
    '[name="background_image"]'
);

if (imageInput && preview) {

    imageInput.addEventListener(
        'change',
        e => {

            const file =
                e.target.files[0];

            if (!file) return;

            const reader =
                new FileReader();

            reader.onload = ev => {

                preview.style.backgroundImage =
                    `url(${ev.target.result})`;

            };

            reader.readAsDataURL(file);

        }
    );
}

</script>
