<?php
$title = 'Homepage Sections CMS';
?>

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

    <div class="d-flex justify-content-between align-items-center mb-4">

        <div>

            <h2 class="fw-bold mb-1">
                Homepage Sections CMS
            </h2>

            <div class="text-muted">
                Full enterprise governance for homepage sections
            </div>

        </div>

        <a
            href="/easychair/admin/conference-home/sections/create"
            class="btn btn-primary rounded-pill">

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

        </a>

    </div>

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

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

            <div class="table-responsive">

                <table class="table align-middle mb-0">

                    <thead class="table-light">

                        <tr>

                            <th>ID</th>

                            <th>Section</th>

                            <th>Theme</th>

                            <th>Sort</th>

                            <th>Status</th>

                            <th width="260">
                                Actions
                            </th>

                        </tr>

                    </thead>

                    <tbody id="sortable-sections">

                    <?php foreach (($sections ?? []) as $s): ?>

                        <tr data-id="<?= (int)$s['id'] ?>">

                            
                                <td>

    <span class="drag-handle me-2"
          style="cursor:grab">

        <i class="fa fa-grip-vertical"></i>

    </span>

    <?= (int)$s['id'] ?>

</td>

                            <td>

                                <div class="fw-bold">
                                    <?= htmlspecialchars(
                                        $s['section_title_en']
                                        ?? $s['section_key']
                                    ) ?>
                                </div>

                                <div class="small text-muted">
                                    <?= htmlspecialchars(
                                        $s['section_key']
                                    ) ?>
                                </div>
<div class="mt-2">

    <span class="badge bg-dark">

        <?= htmlspecialchars(
            $s['section_key']
        ) ?>

    </span>

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

        <span class="badge bg-success">
            Image
        </span>

    <?php endif; ?>

    <?php if (!empty($s['background_value'])): ?>

        <span class="badge bg-primary">
            Styled
        </span>

    <?php endif; ?>

</div>

                            </td>

                            <td>

                                <span class="badge bg-info">
                                    <?= htmlspecialchars(
                                        $s['theme_name']
                                        ?? 'default'
                                    ) ?>
                                </span>

                            </td>

                            <td>

                                <span class="badge bg-dark">
                                    <?= (int)$s['sort_order'] ?>
                                </span>

                            </td>

                            <td>

                                <?php if (!empty($s['enabled'])): ?>

                                    <span class="badge bg-success">
                                        Enabled
                                    </span>

                                <?php else: ?>

                                    <span class="badge bg-danger">
                                        Disabled
                                    </span>

                                <?php endif; ?>

                            </td>

                            <td>

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

    <a
href="/easychair/admin/conference-home/sections/up?id=<?= (int)$s['id'] ?>"
class="btn btn-sm btn-light rounded-pill">

        <i class="fa fa-arrow-up"></i>

    </a>

    <a
href="/easychair/admin/conference-home/sections/down?id=<?= (int)$s['id'] ?>"
class="btn btn-sm btn-light rounded-pill">

        <i class="fa fa-arrow-down"></i>

    </a>

    <a
href="/easychair/admin/conference-home/sections/edit?id=<?= (int)$s['id'] ?>"
class="btn btn-sm btn-warning rounded-pill">

        <i class="fa fa-edit"></i>
        Edit

    </a>

   <button
type="button"
class="btn btn-sm btn-secondary rounded-pill js-toggle-section"
data-id="<?= (int)$s['id'] ?>">

    <i class="fa fa-power-off"></i>

    <?= !empty($s['enabled'])
        ? 'Disable'
        : 'Enable' ?>

</button>

<a
href="/easychair/admin/conference-home/sections/duplicate?id=<?= (int)$s['id'] ?>"
class="btn btn-sm btn-info rounded-pill">

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

</a>

    <a
href="/easychair/admin/conference-home/sections/delete?id=<?= (int)$s['id'] ?>"
class="btn btn-sm btn-danger rounded-pill"
onclick="return confirm('Delete section permanently?')">

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

    </a>

</div>
                            </td>

                        </tr>

                    <?php endforeach; ?>

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>
<script>

document.querySelectorAll('.js-toggle-section')
.forEach(btn => {

    btn.addEventListener('click', async () => {

        const id =
            btn.dataset.id;

        const fd =
            new FormData();

        fd.append('id', id);

        try {

            const res =
                await fetch(
                    '/easychair/admin/conference-home/sections/toggle-ajax',
                    {
                        method: 'POST',
                        body: fd
                    }
                );

            const json =
                await res.json();

            if (json.success) {

                location.reload();

            } else {

                alert('Toggle failed');

            }

        } catch (e) {

            alert('Request failed');

        }

    });

});

</script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>

const sortable =
new Sortable(

    document.getElementById(
        'sortable-sections'
    ),

    {

        animation: 150,

        handle: '.drag-handle',

        onEnd: async () => {

            const ids = [];

            document
            .querySelectorAll(
                '#sortable-sections tr'
            )
            .forEach(row => {

                ids.push(
                    row.dataset.id
                );

            });

            const fd =
                new FormData();

            ids.forEach(id => {
                fd.append(
                    'items[]',
                    id
                );
            });

            try {

                const res =
                    await fetch(

                        '/easychair/admin/conference-home/sections/reorder-ajax',

                        {
                            method: 'POST',
                            body: fd
                        }

                    );

                const json =
                    await res.json();

                if (!json.success) {

                    alert(
                        'Sort failed'
                    );
                }

            } catch (e) {

                alert(
                    'Request failed'
                );
            }

        }

    }

);

</script>
