<?php
function h($v){ return htmlspecialchars((string)$v, ENT_QUOTES, 'UTF-8'); }
$title = $title ?? 'Track Chair Assignments';

/*
--------------------------------------------------
Track Chair Summary
--------------------------------------------------
*/
$chairSummary = [];

foreach (($assignments ?? []) as $a) {

    $uid = (int)$a['user_id'];

    if (!isset($chairSummary[$uid])) {

        $chairSummary[$uid] = [
            'user_id'   => $uid,
            'name'      => $a['user_name'],
            'email'     => $a['email'],
            'tracks'    => [],
            'active'    => 0,
            'disabled'  => 0
        ];
    }

    $chairSummary[$uid]['tracks'][] = $a['track_name'];

    if ((int)$a['is_active'] === 1) {
        $chairSummary[$uid]['active']++;
    } else {
        $chairSummary[$uid]['disabled']++;
    }
}
?>

<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">

<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css">

<style>

<style>
.tc-wrap{padding:22px}
.tc-hero{
background:linear-gradient(135deg,#0f172a,#1d4ed8);
color:#fff;
border-radius:22px;
padding:26px;
margin-bottom:22px;
box-shadow:0 14px 35px rgba(15,23,42,.18)
}
.tc-card{
background:#fff;
border:1px solid #e5e7eb;
border-radius:18px;
padding:20px;
margin-bottom:18px;
box-shadow:0 10px 24px rgba(15,23,42,.07)
}
.tc-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px
}
.tc-summary{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
gap:18px
}
.tc-summary-card{
background:#fff;
border:1px solid #dbeafe;
border-radius:18px;
padding:18px;
box-shadow:0 10px 20px rgba(15,23,42,.06)
}
.tc-label{
font-weight:800;
color:#111827;
margin-bottom:7px
}
.tc-select,.tc-btn{
width:100%;
border-radius:12px;
border:1px solid #d1d5db;
padding:11px 13px
}
.tc-btn{
background:#1d4ed8;
color:#fff;
font-weight:800;
border:0;
cursor:pointer
}
.tc-table{
width:100%;
border-collapse:collapse
}
.tc-table th{
background:#f3f4f6;
color:#111827;
text-align:left;
padding:12px
}
.tc-table td{
border-top:1px solid #e5e7eb;
padding:12px
}
.tc-badge{
display:inline-flex;
padding:6px 12px;
border-radius:999px;
font-size:12px;
font-weight:800;
margin:3px
}
.tc-on{
background:#dcfce7;
color:#166534
}
.tc-off{
background:#fee2e2;
color:#991b1b
}
.tc-track{
background:#dbeafe;
color:#1e40af
}
.tc-checks{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:10px
}
.tc-check{
border:1px solid #e5e7eb;
border-radius:12px;
padding:10px;
background:#f9fafb
}
.tc-count{
font-size:26px;
font-weight:800;
color:#1d4ed8
}
@media(max-width:800px){
.tc-grid{
grid-template-columns:1fr
}
}
</style>

<div class="tc-wrap">

    <div class="tc-hero">
        <h2 style="margin:0 0 8px">
            Track Chair Management
        </h2>

        <div>
            Assign one Track Chair to one or multiple tracks
            without affecting the mature conference workflow.
        </div>
    </div>

    <div class="tc-card">
        <form method="get" action="/easychair/admin/track-chairs">

            <div class="tc-label">
                Conference
            </div>

            <select
                name="conference_id"
                class="tc-select"
                onchange="this.form.submit()"
            >
                <?php foreach (($conferences ?? []) as $c): ?>
                    <option
                        value="<?= (int)$c['id'] ?>"
                        <?= (int)$conferenceId === (int)$c['id'] ? 'selected' : '' ?>
                    >
                        <?= h($c['title']) ?>
                    </option>
                <?php endforeach; ?>
            </select>

        </form>
    </div>

    <div class="tc-card">

        <h3>
            Assign Track Chair
        </h3>

        <form method="post" action="/easychair/admin/track-chairs/store">

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

            <div class="tc-grid">

                <div>
                    <div class="tc-label">
                        Chair User
                    </div>

                    <select
                        id="trackChairUser"
			name="user_id"
                        class="tc-select"
                        required
                    >
                        <option value="">
                            Select user...
                        </option>

                        <?php foreach (($users ?? []) as $u): ?>

                            <option value="<?= (int)$u['id'] ?>">
    <?= h($u['name']) ?>
    [<?= h($u['email']) ?>]
</option>
                        <?php endforeach; ?>

                    </select>
                </div>

                <div>

                    <div class="tc-label">
                        Tracks
                    </div>

                    <div class="tc-checks">

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

                            <label class="tc-check">

                                <input
                                    type="checkbox"
                                    name="track_ids[]"
                                    value="<?= (int)$t['id'] ?>"
                                >

                                <?= h($t['name']) ?>

                            </label>

                        <?php endforeach; ?>

                    </div>

                </div>

            </div>

            <div style="margin-top:16px">
                <button
                    class="tc-btn"
                    type="submit"
                >
                    Assign Track Chair
                </button>
            </div>

        </form>

    </div>

    <div class="tc-card">

        <h3>
            Track Chair Summary
        </h3>

        <?php if ($chairSummary): ?>

            <div class="tc-summary">

                <?php foreach ($chairSummary as $chair): ?>

                    <div class="tc-summary-card">

                        <div style="font-size:20px;font-weight:800">
                            <?= h($chair['name']) ?>
                        </div>

                        <div style="color:#6b7280;margin-bottom:10px">
                            <?= h($chair['email']) ?>
                        </div>

                        <div class="tc-count">
                            <?= count($chair['tracks']) ?>
                        </div>

                        <div style="margin-bottom:10px">
                            Assigned Tracks
                        </div>

                        <?php foreach ($chair['tracks'] as $track): ?>

                            <span class="tc-badge tc-track">
                                <?= h($track) ?>
                            </span>

                        <?php endforeach; ?>

                    </div>

                <?php endforeach; ?>

            </div>

        <?php else: ?>

            <div class="alert alert-warning">
                No Track Chair assignments found.
            </div>

        <?php endif; ?>

    </div>

    <div class="tc-card">

        <h3>
            Assignment Details
        </h3>

        <table class="tc-table">

            <thead>
            <tr>
                <th>Track</th>
                <th>Chair</th>
                <th>Email</th>
                <th>Status</th>
                <th>Action</th>
            </tr>
            </thead>

            <tbody>

            <?php foreach (($assignments ?? []) as $a): ?>

                <tr>

                    <td><?= h($a['track_name']) ?></td>

                    <td><?= h($a['user_name']) ?></td>

                    <td><?= h($a['email']) ?></td>

                    <td>

                        <span
                            class="tc-badge <?= (int)$a['is_active'] ? 'tc-on':'tc-off' ?>"
                        >
                            <?= (int)$a['is_active'] ? 'Active':'Disabled' ?>
                        </span>

                    </td>

                    <td>

                        <form
                            method="post"
                            action="/easychair/admin/track-chairs/toggle"
                        >

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

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

                            <button
                                class="tc-btn"
                                type="submit"
                            >
                                <?= (int)$a['is_active']
                                    ? 'Disable'
                                    : 'Enable' ?>
                            </button>

                        </form>

                    </td>

                </tr>

            <?php endforeach; ?>

            </tbody>

        </table>

    </div>

</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
$(function(){

    $('#trackChairUser').select2({
        theme: 'bootstrap-5',
        width: '100%',
        placeholder: 'Search conference member...',
        allowClear: true
    });

});
</script>
