<?php

/**
 * Super Admin — Crew Workspace Assignments Mapping View
 */

/** @var array $crews */
/** @var array $workspaces */
/** @var array $assignmentsByCrew */

?>

<div class="max-w-6xl mx-auto space-y-6">

    <!-- Header Section -->
    <div>
        <h1 class="page-h1">
            <span class="page-header-icon">
                <i class="fa-solid fa-people-arrows"></i>
            </span>
            Workspace Assignment
        </h1>
        <p class="page-subtitle">Associate crew members to multiple wedding environments for day-of operations.</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
        
        <!-- Left: Form to assign workspaces to a crew -->
        <div class="card p-0 bg-white border border-slate-150 rounded-2xl shadow-sm overflow-hidden">
            <div class="bg-slate-50 px-5 py-3 border-b border-slate-150">
                <h3 class="text-xs font-bold text-slate-800 uppercase tracking-wider">Map Workspaces</h3>
            </div>
            
            <form action="<?= url('/app/admin/crews/assignments') ?>" method="POST" class="p-5 space-y-5" id="assignment-form">
                <?= csrf_field() ?>

                <div class="form-group space-y-1.5">
                    <label for="crew_id" class="text-xxs font-bold text-slate-650">Select Crew Member</label>
                    <select name="crew_id" id="crew_id" required class="form-select text-xs w-full rounded-xl" onchange="loadCrewAssignments(this.value)">
                        <option value="">Choose Crew Account...</option>
                        <?php foreach ($crews as $cr): 
                            $name = $cr['display_name'] ?: $cr['username'];
                        ?>
                            <option value="<?= (int) $cr['id'] ?>"><?= escape_html($name) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>

                <div class="form-group space-y-1.5">
                    <label class="text-xxs font-bold text-slate-650 block">Workspaces Checklists</label>
                    <div class="border border-slate-150 rounded-xl p-3 bg-slate-50 max-h-60 overflow-y-auto space-y-2">
                        <?php if (empty($workspaces)): ?>
                            <p class="text-xxs text-slate-450 italic">No workspaces created yet.</p>
                        <?php else: ?>
                            <?php foreach ($workspaces as $ws): 
                                $wsTitle = "{$ws['groom_name']} & {$ws['bride_name']}";
                            ?>
                                <label class="flex items-center gap-2 cursor-pointer select-none text-xxs font-semibold">
                                    <input
                                        type="checkbox"
                                        name="workspace_ids[]"
                                        value="<?= (int) $ws['id'] ?>"
                                        id="ws-chk-<?= (int) $ws['id'] ?>"
                                        class="h-4.5 w-4.5 rounded border-slate-350 text-indigo-650 focus:ring-indigo-500"
                                    >
                                    <span class="text-slate-700"><?= escape_html($wsTitle) ?> <span class="text-[9px] text-slate-400 font-mono">(/<?= escape_html($ws['slug']) ?>)</span></span>
                                </label>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </div>
                </div>

                <button type="submit" class="w-full btn btn-primary text-xs font-bold py-2 rounded-xl flex items-center justify-center gap-1.5">
                    <i class="fa-solid fa-floppy-disk text-[10px]"></i> Save Assignments
                </button>
            </form>
        </div>

        <!-- Right: Current Assignments list -->
        <div class="lg:col-span-2 bg-white border border-slate-150 rounded-2xl shadow-sm overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse text-xxs">
                    <thead>
                        <tr class="bg-slate-50 border-b border-slate-150 text-slate-400 font-bold uppercase tracking-wider text-[10px]">
                            <th class="py-3 px-4 w-1/3">Crew Operator</th>
                            <th class="py-3 px-4">Mapped Workspaces</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 text-slate-650">
                        <?php if (empty($crews)): ?>
                            <tr>
                                <td colspan="2" class="py-8 text-center text-slate-400 italic">
                                    No Crew accounts available.
                                </td>
                            </tr>
                        <?php else: ?>
                            <?php foreach ($crews as $cr): 
                                $name = $cr['display_name'] ?: $cr['username'];
                                $assigned = $assignmentsByCrew[(int) $cr['id']] ?? [];
                            ?>
                                <tr class="hover:bg-slate-50/50 transition-colors">
                                    <td class="py-3.5 px-4 font-bold text-slate-800"><?= escape_html($name) ?></td>
                                    <td class="py-3.5 px-4">
                                        <?php if (empty($assigned)): ?>
                                            <span class="text-slate-400 italic text-[10px]">No workspaces assigned</span>
                                        <?php else: ?>
                                            <div class="flex flex-wrap gap-1.5">
                                                <?php foreach ($assigned as $asg): 
                                                    $title = "{$asg['groom_name']} & {$asg['bride_name']}";
                                                ?>
                                                    <span class="inline-flex items-center px-2 py-0.5 rounded bg-indigo-50 border border-indigo-100 text-indigo-700 font-semibold text-[10px]">
                                                        <?= escape_html($title) ?>
                                                    </span>
                                                <?php endforeach; ?>
                                            </div>
                                        <?php endif; ?>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>

    </div>

</div>

<!-- Script to dynamic pre-check workspaces based on dropdown choice -->
<script>
const crewAssignments = <?= json_encode($assignmentsByCrew) ?>;

function loadCrewAssignments(crewId) {
    // 1. Reset all checkboxes first
    const checkboxes = document.querySelectorAll('input[name="workspace_ids[]"]');
    checkboxes.forEach(chk => chk.checked = false);

    if (!crewId) return;

    // 2. Pre-check workspaces associated with this crew
    const assignedWorkspaces = crewAssignments[parseInt(crewId)] || [];
    assignedWorkspaces.forEach(asg => {
        const chk = document.getElementById('ws-chk-' + asg.workspace_id);
        if (chk) {
            chk.checked = true;
        }
    });
}
</script>
