<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judiciary of Eswatini - Registrar Administrative Portal</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        slatePrimary: '#3D405B',
                        sageAccent: '#818C78',
                        warmCanvas: '#F2F1EC',
                        cardSurface: '#FCFAF7',
                        borderMuted: '#D4D0C3',
                        charcoalText: '#2D2D2D',
                        softSage: '#E6E9E1'
                    }
                }
            }
        }
    </script>
    <style>
        body { background-color: #F2F1EC; color: #2D2D2D; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
        .font-mono-custom { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
        .tab-btn.active { background-color: #3D405B; color: #FFFFFF; font-weight: 700; }
        .tab-btn:not(.active) { background-color: #FCFAF7; color: #6E6D68; border: 1px solid #D4D0C3; }
        .tab-btn:not(.active):hover { background-color: #E6E9E1; color: #3D405B; }
    </style>
</head>
<body class="min-h-screen p-4 sm:p-6 lg:p-8">

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

        <!-- Top Header Navigation -->
        <header class="bg-cardSurface border border-borderMuted rounded-3xl p-5 sm:p-6 shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div class="flex items-center gap-4">
                <div class="w-14 h-14 rounded-2xl bg-slatePrimary text-white flex items-center justify-center font-bold text-2xl shadow-md shrink-0">
                    ⚖️
                </div>
                <div>
                    <div class="flex items-center gap-2 flex-wrap">
                        <h1 class="text-xl sm:text-2xl font-extrabold text-slatePrimary">
                            Judiciary of Eswatini
                        </h1>
                        <span class="px-3 py-0.5 rounded-full text-xs font-bold bg-softSage text-slatePrimary border border-sageAccent/40">
                            PHP Server Administrative Portal v2.4
                        </span>
                    </div>
                    <p class="text-xs sm:text-sm text-gray-500 mt-0.5">
                        High Court & Supreme Court Registry Administration &bull; <span class="font-mono text-sageAccent font-semibold">app.bevuya.com</span>
                    </p>
                </div>
            </div>

            <div class="flex items-center gap-3 self-start md:self-auto">
                <a href="../index.php" class="px-4 py-2 bg-softSage hover:bg-[#d8ded1] text-slatePrimary font-semibold text-xs rounded-xl border border-sageAccent/30 transition-all flex items-center gap-1.5">
                    <span>&larr; API Explorer</span>
                </a>
                <a href="/" class="px-4 py-2 bg-slatePrimary hover:bg-[#2e3146] text-white font-bold text-xs rounded-xl shadow-xs transition-all flex items-center gap-1.5">
                    <span>View Public Portal &rarr;</span>
                </a>
            </div>
        </header>

        <!-- System Alerts & Flash Messages -->
        
        <!-- Email Action Confirmation Receipt Modal / Banner -->
        
        <!-- Dashboard KPI Metric Cards -->
        <div class="grid grid-cols-2 lg:grid-cols-5 gap-3.5 sm:gap-4">
            <div class="bg-cardSurface p-4 rounded-2xl border border-borderMuted shadow-2xs">
                <p class="text-xs text-gray-500 font-semibold">Published Judgments</p>
                <p class="text-2xl font-black text-slatePrimary mt-1">0</p>
                <p class="text-[11px] text-sageAccent font-mono mt-0.5">Coram & Multi-Doc</p>
            </div>

            <div class="bg-cardSurface p-4 rounded-2xl border border-borderMuted shadow-2xs">
                <p class="text-xs text-gray-500 font-semibold">Daily Cause Rolls</p>
                <p class="text-2xl font-black text-slatePrimary mt-1">0</p>
                <p class="text-[11px] text-sageAccent font-mono mt-0.5">Scheduled Matters</p>
            </div>

            <div class="bg-cardSurface p-4 rounded-2xl border border-borderMuted shadow-2xs">
                <p class="text-xs text-gray-500 font-semibold">Court Dockets</p>
                <p class="text-2xl font-black text-slatePrimary mt-1">0</p>
                <p class="text-[11px] text-sageAccent font-mono mt-0.5">E-Filing Records</p>
            </div>

            <div class="bg-cardSurface p-4 rounded-2xl border border-borderMuted shadow-2xs">
                <p class="text-xs text-gray-500 font-semibold">Library Gazette Docs</p>
                <p class="text-2xl font-black text-slatePrimary mt-1">0</p>
                <p class="text-[11px] text-sageAccent font-mono mt-0.5">Acts & Directions</p>
            </div>

            <div class="bg-cardSurface p-4 rounded-2xl border border-borderMuted shadow-2xs">
                <p class="text-xs text-gray-500 font-semibold">Action Email Logs</p>
                <p class="text-2xl font-black text-slatePrimary mt-1">0</p>
                <p class="text-[11px] text-sageAccent font-mono mt-0.5">Dispatched Notices</p>
            </div>
        </div>

        <!-- Administrative Main Navigation Tabs -->
        <div class="flex items-center gap-2 overflow-x-auto pb-1">
            <button onclick="switchTab('judgments')" id="tab-btn-judgments" class="tab-btn active px-4 py-2.5 rounded-xl text-xs sm:text-sm font-semibold transition-all shrink-0">
                ⚖️ Judgments & Coram Certification
            </button>
            <button onclick="switchTab('court_roll')" id="tab-btn-court_roll" class="tab-btn px-4 py-2.5 rounded-xl text-xs sm:text-sm font-semibold transition-all shrink-0">
                📜 Cause Roll & Scheduling
            </button>
            <button onclick="switchTab('verify')" id="tab-btn-verify" class="tab-btn px-4 py-2.5 rounded-xl text-xs sm:text-sm font-semibold transition-all shrink-0">
                📁 E-Filing Document Verification
            </button>
            <button onclick="switchTab('library')" id="tab-btn-library" class="tab-btn px-4 py-2.5 rounded-xl text-xs sm:text-sm font-semibold transition-all shrink-0">
                📚 Law Library & Gazettes
            </button>
            <button onclick="switchTab('email_logs')" id="tab-btn-email_logs" class="tab-btn px-4 py-2.5 rounded-xl text-xs sm:text-sm font-semibold transition-all shrink-0">
                ✉️ Email Transmission Logs
            </button>
        </div>

        <!-- =========================================================================
            TAB 1: JUDGMENTS & CORAM CERTIFICATION
           ========================================================================= -->
        <div id="tab-content-judgments" class="space-y-6">
            
            <!-- Add Judgment Form Card -->
            <div class="bg-cardSurface rounded-3xl p-6 sm:p-8 border border-borderMuted shadow-sm space-y-6">
                <div class="flex items-center justify-between border-b border-borderMuted/60 pb-4">
                    <div>
                        <h2 class="text-lg sm:text-xl font-bold text-slatePrimary flex items-center gap-2">
                            <span>⚖️</span>
                            <span>Certify & Publish Judicial Decision</span>
                        </h2>
                        <p class="text-xs text-gray-500 mt-0.5">
                            Files are automatically mapped to structured folder hierarchy: <span class="font-mono text-sageAccent font-bold">uploads/{division}/{year}/{month}/</span>
                        </p>
                    </div>
                    <span class="text-xs font-mono font-bold bg-softSage px-3 py-1 rounded-lg text-slatePrimary border border-sageAccent/30">
                        Registrar Certified PKI
                    </span>
                </div>

                <form method="POST" action="" class="space-y-5" id="judgmentForm">
                    <input type="hidden" name="action" value="add_judgment">

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="md:col-span-2">
                            <label class="block text-xs font-bold text-slatePrimary mb-1">Case Title / Parties *</label>
                            <input type="text" name="title" required placeholder="e.g. Eswatini Revenue Service v Inyatsi Construction Group Ltd" class="w-full p-2.5 bg-white border border-borderMuted rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-sageAccent">
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-slatePrimary mb-1">Citation *</label>
                            <input type="text" name="citation" value="[2026] SZHC 459" required class="w-full p-2.5 bg-white border border-borderMuted rounded-xl text-sm font-mono focus:outline-none focus:ring-2 focus:ring-sageAccent">
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs font-bold text-slatePrimary mb-1">Case Number *</label>
                            <input type="text" id="caseNumberInput" name="case_number" value="HC 167/2026" required class="w-full p-2.5 bg-white border border-borderMuted rounded-xl text-sm font-mono focus:outline-none focus:ring-2 focus:ring-sageAccent" oninput="updatePathPreview()">
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-slatePrimary mb-1">Court Division *</label>
                            <select name="division" id="divisionSelect" class="w-full p-2.5 bg-white border border-borderMuted rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-sageAccent" onchange="updatePathPreview()">
                                <option value="High Court" selected>High Court of Eswatini</option>
                                <option value="Supreme Court">Supreme Court of Eswatini</option>
                                <option value="Industrial Court">Industrial Court of Eswatini</option>
                                <option value="Commercial Court">Commercial Court Division</option>
                                <option value="Magistrate Court">Magistrate Court (Mbabane / Manzini)</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-slatePrimary mb-1">Date Delivered *</label>
                            <input type="date" id="dateInput" name="date_delivered" value="2026-10-14" required class="w-full p-2.5 bg-white border border-borderMuted rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-sageAccent" onchange="updatePathPreview()">
                        </div>
                    </div>

                    <!-- Multi-Judge Bench / Coram Section -->
                    <div class="p-4 bg-warmCanvas rounded-2xl border border-borderMuted space-y-3">
                        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
                            <div>
                                <h3 class="text-xs font-bold text-slatePrimary uppercase tracking-wider flex items-center gap-1.5">
                                    <span>👥</span>
                                    <span>Coram / Presiding Bench (Multiple Judges)</span>
                                </h3>
                                <p class="text-[11px] text-gray-500">First designated judge will act as Lead Presiding Judge</p>
                            </div>

                            <!-- Coram Quick Presets -->
                            <div class="flex items-center gap-1.5 flex-wrap">
                                <span class="text-[10px] font-bold text-gray-500 uppercase">Presets:</span>
                                <button type="button" onclick="setCoramPreset('single')" class="px-2.5 py-1 bg-white hover:bg-softSage text-slatePrimary text-xs font-semibold rounded-lg border border-borderMuted shadow-2xs">
                                    Single Judge
                                </button>
                                <button type="button" onclick="setCoramPreset('high_bench')" class="px-2.5 py-1 bg-white hover:bg-softSage text-slatePrimary text-xs font-semibold rounded-lg border border-borderMuted shadow-2xs">
                                    High Court Bench (3)
                                </button>
                                <button type="button" onclick="setCoramPreset('supreme_coram')" class="px-2.5 py-1 bg-white hover:bg-softSage text-slatePrimary text-xs font-semibold rounded-lg border border-borderMuted shadow-2xs">
                                    Supreme Court Coram (5)
                                </button>
                            </div>
                        </div>

                        <!-- Dynamic Judges Container -->
                        <div id="judgesContainer" class="space-y-2 pt-1">
                            <div class="flex items-center gap-2">
                                <span class="text-xs font-bold text-sageAccent bg-white px-2 py-1.5 rounded-lg border border-borderMuted shrink-0">
                                    ★ Lead Judge
                                </span>
                                <input type="text" name="judges[]" value="Hon. Justice B. S. Dlamini" required class="flex-1 p-2 bg-white border border-borderMuted rounded-xl text-xs font-semibold focus:ring-1 focus:ring-sageAccent">
                            </div>
                        </div>

                        <button type="button" onclick="addJudgeRow()" class="text-xs font-bold text-slatePrimary hover:text-sageAccent flex items-center gap-1 mt-2">
                            <span>+ Add Coram Bench Member</span>
                        </button>
                    </div>

                    <!-- Multi-Document Upload & Storage Hierarchy Preview -->
                    <div class="p-4 bg-warmCanvas rounded-2xl border border-borderMuted space-y-3">
                        <div class="flex items-center justify-between">
                            <div>
                                <h3 class="text-xs font-bold text-slatePrimary uppercase tracking-wider flex items-center gap-1.5">
                                    <span>📄</span>
                                    <span>Attached Certified Documents & Decrees</span>
                                </h3>
                                <p class="text-[11px] text-gray-500">Attach Lead Judgment, Concurring Opinions, Decrees or Heads of Argument</p>
                            </div>
                            <button type="button" onclick="addDocRow()" class="text-xs font-bold text-slatePrimary hover:text-sageAccent">
                                + Attach Additional File
                            </button>
                        </div>

                        <div id="docsContainer" class="space-y-2 pt-1">
                            <div class="grid grid-cols-1 sm:grid-cols-12 gap-2 bg-white p-2.5 rounded-xl border border-borderMuted items-center">
                                <div class="sm:col-span-6">
                                    <input type="text" name="doc_titles[]" value="Full Certified Judgment (Signed)" placeholder="Document Title" class="w-full p-1.5 border border-borderMuted rounded-lg text-xs font-medium">
                                </div>
                                <div class="sm:col-span-5">
                                    <select name="doc_types[]" class="w-full p-1.5 border border-borderMuted rounded-lg text-xs font-medium">
                                        <option value="Lead Judgment" selected>Lead Judgment (Primary)</option>
                                        <option value="Concurring Judgment">Concurring Judgment</option>
                                        <option value="Dissenting Judgment">Dissenting Judgment</option>
                                        <option value="Court Order">Court Order / Decree</option>
                                        <option value="Certified Copy">Certified Copy</option>
                                        <option value="Heads of Argument">Heads of Argument</option>
                                    </select>
                                </div>
                                <div class="sm:col-span-1 text-center">
                                    <span class="text-xs text-gray-400">PDF</span>
                                </div>
                            </div>
                        </div>

                        <!-- Live Server Storage Path Preview -->
                        <div class="p-2.5 bg-softSage/60 rounded-xl border border-sageAccent/30 flex items-center justify-between text-xs font-mono">
                            <span class="text-slatePrimary font-semibold">Live Storage Folder:</span>
                            <span id="storagePathPreview" class="text-slatePrimary font-bold">uploads/high_court/2026/10/</span>
                        </div>
                    </div>

                    <!-- Category, Headnotes, Full Text -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-bold text-slatePrimary mb-1">Legal Subject / Category</label>
                            <select name="category" class="w-full p-2.5 bg-white border border-borderMuted rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-sageAccent">
                                <option value="Civil" selected>Civil Law</option>
                                <option value="Constitutional">Constitutional & Human Rights</option>
                                <option value="Commercial">Commercial & Corporate</option>
                                <option value="Criminal">Criminal Appeal / Trial</option>
                                <option value="Labor">Labor & Industrial Relations</option>
                                <option value="Taxation">Taxation & Customs</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-slatePrimary mb-1">Keywords / Search Tags</label>
                            <input type="text" name="keywords" value="Judicial Precedent, Contract Interpretation, Eswatini High Court" class="w-full p-2.5 bg-white border border-borderMuted rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-sageAccent">
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slatePrimary mb-1">Headnotes & Legal Summary</label>
                        <textarea name="headnotes" rows="2" placeholder="Key legal principles, ratio decidendi, applicable statutes..." class="w-full p-2.5 bg-white border border-borderMuted rounded-xl text-xs focus:outline-none focus:ring-2 focus:ring-sageAccent"></textarea>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slatePrimary mb-1">Full Judgment Ruling Text</label>
                        <textarea name="full_text" rows="5" placeholder="IN THE HIGH COURT OF ESWATINI&#10;HELD AT MBABANE&#10;&#10;In the matter between: ...&#10;&#10;JUDGMENT:&#10;1. The applicant instituted these proceedings seeking relief..." class="w-full p-2.5 bg-white border border-borderMuted rounded-xl text-xs font-serif leading-relaxed focus:outline-none focus:ring-2 focus:ring-sageAccent"></textarea>
                    </div>

                    <!-- Email Action Copy Checkbox -->
                    <div class="p-3.5 bg-softSage rounded-xl border border-sageAccent/40 flex items-center justify-between gap-3">
                        <label class="flex items-center gap-2 text-xs font-bold text-slatePrimary cursor-pointer">
                            <input type="checkbox" name="send_email_copy" value="1" checked class="w-4 h-4 text-slatePrimary rounded focus:ring-sageAccent">
                            <span>Send email copy of this action to registered practitioners & registry archives</span>
                        </label>
                        <span class="text-[11px] font-mono text-slatePrimary font-semibold bg-white/70 px-2 py-0.5 rounded">
                            Dispatches certified notice & PDF link
                        </span>
                    </div>

                    <div class="flex items-center justify-end gap-3 pt-2">
                        <button type="reset" class="px-5 py-2.5 bg-warmCanvas hover:bg-borderMuted text-gray-700 font-bold rounded-xl text-xs transition-colors">
                            Reset Form
                        </button>
                        <button type="submit" class="px-7 py-3 bg-slatePrimary hover:bg-[#2e3146] text-white font-bold rounded-xl text-sm shadow-md transition-all">
                            Publish & Apply Registrar Stamp &rarr;
                        </button>
                    </div>
                </form>
            </div>

            <!-- Published Judgments Data Table -->
            <div class="bg-cardSurface rounded-3xl p-6 border border-borderMuted shadow-sm space-y-4">
                <div class="flex items-center justify-between">
                    <h3 class="font-bold text-slatePrimary text-base flex items-center gap-2">
                        <span>📋</span>
                        <span>Official Published Precedents (0 Records)</span>
                    </h3>
                    <span class="text-xs text-gray-500 font-mono">Sorted by latest delivery</span>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full text-left text-xs border-collapse">
                        <thead>
                            <tr class="bg-warmCanvas text-slatePrimary border-b border-borderMuted">
                                <th class="p-3 font-bold">Citation & Case</th>
                                <th class="p-3 font-bold">Title / Parties</th>
                                <th class="p-3 font-bold">Division</th>
                                <th class="p-3 font-bold">Coram / Bench</th>
                                <th class="p-3 font-bold">Delivered</th>
                                <th class="p-3 font-bold">Category</th>
                                <th class="p-3 font-bold text-right">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-borderMuted/60">
                                                    </tbody>
                    </table>
                </div>
            </div>

        </div>

        <!-- =========================================================================
            TAB 2: DAILY CAUSE ROLL & SCHEDULING
           ========================================================================= -->
        <div id="tab-content-court_roll" class="space-y-6 hidden">
            
            <div class="bg-cardSurface rounded-3xl p-6 sm:p-8 border border-borderMuted shadow-sm space-y-6">
                <div class="border-b border-borderMuted/60 pb-4">
                    <h2 class="text-lg sm:text-xl font-bold text-slatePrimary flex items-center gap-2">
                        <span>📜</span>
                        <span>Schedule Court Matter & Daily Cause List</span>
                    </h2>
                    <p class="text-xs text-gray-500 mt-0.5">
                        Matters are automatically published to the daily docket and can be consolidated into official Court Roll library documents.
                    </p>
                </div>

                <form method="POST" action="" class="space-y-4">
                    <input type="hidden" name="action" value="add_court_roll">

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs font-bold text-slatePrimary mb-1">Case Number *</label>
                            <input type="text" name="case_number" value="HC 317/2026" required class="w-full p-2.5 bg-white border border-borderMuted rounded-xl text-sm font-mono focus:ring-sageAccent">
                        </div>

                        <div class="md:col-span-2">
                            <label class="block text-xs font-bold text-slatePrimary mb-1">Parties (Applicant vs Respondent) *</label>
                            <input type="text" name="parties" required placeholder="e.g. Standard Bank Eswatini Ltd v Mbabane Commercial Motors" class="w-full p-2.5 bg-white border border-borderMuted rounded-xl text-sm focus:ring-sageAccent">
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-4 gap-4">
                        <div>
                            <label class="block text-xs font-bold text-slatePrimary mb-1">Division *</label>
                            <select name="division" class="w-full p-2.5 bg-white border border-borderMuted rounded-xl text-xs focus:ring-sageAccent">
                                <option value="High Court" selected>High Court</option>
                                <option value="Supreme Court">Supreme Court</option>
                                <option value="Commercial Court">Commercial Court</option>
                                <option value="Industrial Court">Industrial Court</option>
                                <option value="Magistrate Court">Magistrate Court</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-slatePrimary mb-1">Courtroom *</label>
                            <select name="courtroom" class="w-full p-2.5 bg-white border border-borderMuted rounded-xl text-xs focus:ring-sageAccent">
                                <option value="Court 1 (Main Hall)">Court 1 (Main Hall)</option>
                                <option value="Court 2 (Civil Hall)">Court 2 (Civil Hall)</option>
                                <option value="Court 3 (Criminal)">Court 3 (Criminal)</option>
                                <option value="Supreme Court Chamber">Supreme Court Chamber</option>
                                <option value="Judge Chambers A">Judge Chambers A</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-slatePrimary mb-1">Presiding Judge *</label>
                            <input type="text" name="judge" value="Hon. Justice Maphalala" required class="w-full p-2.5 bg-white border border-borderMuted rounded-xl text-xs font-semibold focus:ring-sageAccent">
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-slatePrimary mb-1">Time & Date *</label>
                            <div class="flex gap-2">
                                <input type="text" name="time" value="09:30 AM" class="w-1/2 p-2 bg-white border border-borderMuted rounded-xl text-xs font-mono">
                                <input type="date" name="date" value="2026-10-14" class="w-1/2 p-2 bg-white border border-borderMuted rounded-xl text-xs">
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-bold text-slatePrimary mb-1">Matter Type</label>
                            <select name="matter_type" class="w-full p-2.5 bg-white border border-borderMuted rounded-xl text-xs">
                                <option value="Motion / Urgent Application">Motion / Urgent Application</option>
                                <option value="Civil Trial" selected>Civil Trial</option>
                                <option value="Criminal Trial">Criminal Trial</option>
                                <option value="Supreme Court Appeal">Supreme Court Appeal</option>
                                <option value="Pre-Trial Conference">Pre-Trial Conference</option>
                                <option value="Ruling & Sentence">Ruling & Sentence</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-slatePrimary mb-1">Initial Hearing Status</label>
                            <select name="status" class="w-full p-2.5 bg-white border border-borderMuted rounded-xl text-xs">
                                <option value="Scheduled" selected>Scheduled</option>
                                <option value="In Session">In Session</option>
                                <option value="Stood Down">Stood Down</option>
                                <option value="Adjourned">Adjourned</option>
                            </select>
                        </div>
                    </div>

                    <div class="p-3 bg-softSage rounded-xl border border-sageAccent/40 space-y-2">
                        <label class="flex items-center gap-2 text-xs font-bold text-slatePrimary cursor-pointer">
                            <input type="checkbox" name="sync_library" value="1" checked class="w-4 h-4 text-slatePrimary rounded">
                            <span>Synchronize with Law Library under 'Court Roll' official archive</span>
                        </label>
                        <label class="flex items-center gap-2 text-xs font-bold text-slatePrimary cursor-pointer">
                            <input type="checkbox" name="send_email_copy" value="1" checked class="w-4 h-4 text-slatePrimary rounded">
                            <span>Send email copy of this schedule notice to registered practitioners & registry</span>
                        </label>
                    </div>

                    <div class="flex justify-end pt-2">
                        <button type="submit" class="px-6 py-2.5 bg-slatePrimary hover:bg-[#2e3146] text-white font-bold rounded-xl text-xs shadow-md">
                            Schedule Cause Matter &rarr;
                        </button>
                    </div>
                </form>
            </div>

            <!-- Scheduled Cause Roll Matters Table -->
            <div class="bg-cardSurface rounded-3xl p-6 border border-borderMuted shadow-sm space-y-4">
                <h3 class="font-bold text-slatePrimary text-base flex items-center gap-2">
                    <span>📋</span>
                    <span>Scheduled Court Roll Matters (0 Matters)</span>
                </h3>

                <div class="overflow-x-auto">
                    <table class="w-full text-left text-xs border-collapse">
                        <thead>
                            <tr class="bg-warmCanvas text-slatePrimary border-b border-borderMuted">
                                <th class="p-3 font-bold">Case No</th>
                                <th class="p-3 font-bold">Parties</th>
                                <th class="p-3 font-bold">Division & Court</th>
                                <th class="p-3 font-bold">Judge</th>
                                <th class="p-3 font-bold">Date & Time</th>
                                <th class="p-3 font-bold">Status</th>
                                <th class="p-3 font-bold text-right">Update Status</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-borderMuted/60">
                                                    </tbody>
                    </table>
                </div>
            </div>

        </div>

        <!-- =========================================================================
            TAB 3: E-FILING DOCUMENT VERIFICATION & STAMPING
           ========================================================================= -->
        <div id="tab-content-verify" class="space-y-6 hidden">
            <div class="bg-cardSurface rounded-3xl p-6 sm:p-8 border border-borderMuted shadow-sm space-y-6">
                <div class="border-b border-borderMuted/60 pb-4">
                    <h2 class="text-lg sm:text-xl font-bold text-slatePrimary flex items-center gap-2">
                        <span>📁</span>
                        <span>E-Filing Document Verification & Official Registrar Stamp</span>
                    </h2>
                    <p class="text-xs text-gray-500 mt-0.5">
                        Inspect practitioner filed pleadings, affidavits, and apply the certified PKI registrar verification seal.
                    </p>
                </div>

                <div class="space-y-3">
                                            <div class="bg-white p-4 rounded-2xl border border-borderMuted flex flex-col sm:flex-row sm:items-center justify-between gap-3 shadow-2xs">
                            <div class="space-y-1">
                                <div class="flex items-center gap-2 flex-wrap">
                                    <span class="font-mono text-xs font-bold text-slatePrimary bg-softSage px-2 py-0.5 rounded">
                                        HC 204/2026                                    </span>
                                    <span class="font-semibold text-xs text-charcoalText">
                                        Founding Affidavit of Mandla Dlamini                                    </span>
                                    <span class="text-[10px] font-bold text-gray-500 bg-warmCanvas px-2 py-0.5 rounded border border-borderMuted">
                                        Founding Affidavit                                    </span>
                                </div>
                                <p class="text-xs text-gray-500">
                                    Filing Counsel: <strong>Adv. M. Zwane</strong> &bull; Filed: 2026-10-14                                </p>
                            </div>

                            <div class="flex items-center gap-2">
                                                                    <form method="POST" action="">
                                        <input type="hidden" name="action" value="verify_document">
                                        <input type="hidden" name="doc_id" value="doc-f-101">
                                        <button type="submit" class="px-4 py-2 bg-slatePrimary hover:bg-[#2e3146] text-white font-bold text-xs rounded-xl shadow-xs transition-all flex items-center gap-1.5">
                                            <span>🔏 Apply Registrar Stamp</span>
                                        </button>
                                    </form>
                                                            </div>
                        </div>
                                            <div class="bg-white p-4 rounded-2xl border border-borderMuted flex flex-col sm:flex-row sm:items-center justify-between gap-3 shadow-2xs">
                            <div class="space-y-1">
                                <div class="flex items-center gap-2 flex-wrap">
                                    <span class="font-mono text-xs font-bold text-slatePrimary bg-softSage px-2 py-0.5 rounded">
                                        HC 188/2026                                    </span>
                                    <span class="font-semibold text-xs text-charcoalText">
                                        Notice of Motion & Urgent Relief                                    </span>
                                    <span class="text-[10px] font-bold text-gray-500 bg-warmCanvas px-2 py-0.5 rounded border border-borderMuted">
                                        Notice of Motion                                    </span>
                                </div>
                                <p class="text-xs text-gray-500">
                                    Filing Counsel: <strong>Simelane & Associates</strong> &bull; Filed: 2026-10-14                                </p>
                            </div>

                            <div class="flex items-center gap-2">
                                                                    <form method="POST" action="">
                                        <input type="hidden" name="action" value="verify_document">
                                        <input type="hidden" name="doc_id" value="doc-f-102">
                                        <button type="submit" class="px-4 py-2 bg-slatePrimary hover:bg-[#2e3146] text-white font-bold text-xs rounded-xl shadow-xs transition-all flex items-center gap-1.5">
                                            <span>🔏 Apply Registrar Stamp</span>
                                        </button>
                                    </form>
                                                            </div>
                        </div>
                                            <div class="bg-white p-4 rounded-2xl border border-borderMuted flex flex-col sm:flex-row sm:items-center justify-between gap-3 shadow-2xs">
                            <div class="space-y-1">
                                <div class="flex items-center gap-2 flex-wrap">
                                    <span class="font-mono text-xs font-bold text-slatePrimary bg-softSage px-2 py-0.5 rounded">
                                        SC 44/2026                                    </span>
                                    <span class="font-semibold text-xs text-charcoalText">
                                        Heads of Argument for Respondent                                    </span>
                                    <span class="text-[10px] font-bold text-gray-500 bg-warmCanvas px-2 py-0.5 rounded border border-borderMuted">
                                        Heads of Argument                                    </span>
                                </div>
                                <p class="text-xs text-gray-500">
                                    Filing Counsel: <strong>Mabuza Attorneys</strong> &bull; Filed: 2026-10-14                                </p>
                            </div>

                            <div class="flex items-center gap-2">
                                                                    <span class="px-3 py-1.5 bg-emerald-100 text-emerald-800 rounded-xl text-xs font-bold border border-emerald-300 flex items-center gap-1">
                                        <span>✅</span> Certified PKI Verified
                                    </span>
                                                            </div>
                        </div>
                                    </div>
            </div>
        </div>

        <!-- =========================================================================
            TAB 4: LAW LIBRARY & PRACTICE DIRECTIONS
           ========================================================================= -->
        <div id="tab-content-library" class="space-y-6 hidden">
            <div class="bg-cardSurface rounded-3xl p-6 sm:p-8 border border-borderMuted shadow-sm space-y-6">
                <div class="border-b border-borderMuted/60 pb-4">
                    <h2 class="text-lg sm:text-xl font-bold text-slatePrimary flex items-center gap-2">
                        <span>📚</span>
                        <span>Publish Court Library & Statutory Gazettes</span>
                    </h2>
                    <p class="text-xs text-gray-500 mt-0.5">
                        Publish statutory instruments, Acts of Parliament, practice directions, and consolidated court rules.
                    </p>
                </div>

                <form method="POST" action="" class="space-y-4">
                    <input type="hidden" name="action" value="add_library">

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="md:col-span-2">
                            <label class="block text-xs font-bold text-slatePrimary mb-1">Document Title *</label>
                            <input type="text" name="title" required placeholder="e.g. Practice Direction 02 of 2026 - E-Filing Protocols" class="w-full p-2.5 bg-white border border-borderMuted rounded-xl text-sm">
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-slatePrimary mb-1">Category *</label>
                            <select name="category" class="w-full p-2.5 bg-white border border-borderMuted rounded-xl text-sm">
                                <option value="Practice Direction" selected>Practice Direction</option>
                                <option value="Court Rules">Court Rules & High Court Act</option>
                                <option value="Act of Parliament">Act of Parliament</option>
                                <option value="Law Reports">Law Reports</option>
                                <option value="Legal Template">Legal Template</option>
                            </select>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs font-bold text-slatePrimary mb-1">Division</label>
                            <input type="text" name="division" value="High Court & Supreme Court" class="w-full p-2.5 bg-white border border-borderMuted rounded-xl text-xs">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-slatePrimary mb-1">Year</label>
                            <input type="number" name="year" value="2026" class="w-full p-2.5 bg-white border border-borderMuted rounded-xl text-xs font-mono">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-slatePrimary mb-1">File Size</label>
                            <input type="text" name="file_size" value="2.4 MB" class="w-full p-2.5 bg-white border border-borderMuted rounded-xl text-xs font-mono">
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slatePrimary mb-1">Description & Applicability</label>
                        <textarea name="description" rows="2" placeholder="Official procedural guidance issued by the Chief Justice regarding..." class="w-full p-2.5 bg-white border border-borderMuted rounded-xl text-xs"></textarea>
                    </div>

                    <div class="flex justify-end pt-2">
                        <button type="submit" class="px-6 py-2.5 bg-slatePrimary hover:bg-[#2e3146] text-white font-bold rounded-xl text-xs shadow-md">
                            Publish to Law Library &rarr;
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- =========================================================================
            TAB 5: ACTION EMAIL TRANSMISSION LOGS
           ========================================================================= -->
        <div id="tab-content-email_logs" class="space-y-6 hidden">
            <div class="bg-cardSurface rounded-3xl p-6 border border-borderMuted shadow-sm space-y-4">
                <div class="flex items-center justify-between border-b border-borderMuted/60 pb-3">
                    <h3 class="font-bold text-slatePrimary text-base flex items-center gap-2">
                        <span>✉️</span>
                        <span>Dispatched Email Action Transmission Logs (0 Entries)</span>
                    </h3>
                    <span class="text-xs text-sageAccent font-mono font-bold">Judicial Certified Outbox</span>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full text-left text-xs border-collapse">
                        <thead>
                            <tr class="bg-warmCanvas text-slatePrimary border-b border-borderMuted">
                                <th class="p-3 font-bold">Action Type</th>
                                <th class="p-3 font-bold">Subject</th>
                                <th class="p-3 font-bold">Recipients</th>
                                <th class="p-3 font-bold">Summary / Note</th>
                                <th class="p-3 font-bold">Dispatched At</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-borderMuted/60">
                                                            <tr>
                                    <td colspan="5" class="p-6 text-center text-gray-400 italic">
                                        No action emails logged yet. Emails are dispatched when toggling the email checkbox on judgment or roll publication.
                                    </td>
                                </tr>
                                                    </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>

    <!-- Client-side Interactive Logic for Coram Presets & Live Paths -->
    <script>
        function switchTab(tabId) {
            const tabs = ['judgments', 'court_roll', 'verify', 'library', 'email_logs'];
            tabs.forEach(t => {
                const el = document.getElementById('tab-content-' + t);
                const btn = document.getElementById('tab-btn-' + t);
                if (t === tabId) {
                    el.classList.remove('hidden');
                    btn.classList.add('active');
                } else {
                    el.classList.add('hidden');
                    btn.classList.remove('active');
                }
            });
        }

        function setCoramPreset(type) {
            const container = document.getElementById('judgesContainer');
            container.innerHTML = '';

            let judges = [];
            if (type === 'single') {
                judges = ['Hon. Justice B. S. Dlamini'];
            } else if (type === 'high_bench') {
                judges = [
                    'Hon. Justice B. S. Dlamini (Presiding)',
                    'Hon. Justice M. S. Simelane',
                    'Hon. Justice T. A. Nxumalo'
                ];
            } else if (type === 'supreme_coram') {
                judges = [
                    'Hon. Chief Justice B. C. Maphalala (CJ)',
                    'Hon. Justice P. J. Masuku (JA)',
                    'Hon. Justice S. B. Maphanga (JA)',
                    'Hon. Justice R. F. Dlamini (JA)',
                    'Hon. Justice K. M. Hlophe (JA)'
                ];
            }

            judges.forEach((j, idx) => {
                const div = document.createElement('div');
                div.className = 'flex items-center gap-2';
                div.innerHTML = `
                    <span class="text-xs font-bold ${idx === 0 ? 'text-sageAccent' : 'text-gray-500'} bg-white px-2 py-1.5 rounded-lg border border-borderMuted shrink-0">
                        ${idx === 0 ? '★ Lead Judge' : 'Judge ' + (idx + 1)}
                    </span>
                    <input type="text" name="judges[]" value="${j}" required class="flex-1 p-2 bg-white border border-borderMuted rounded-xl text-xs font-semibold focus:ring-1 focus:ring-sageAccent">
                    ${idx > 0 ? '<button type="button" onclick="this.parentElement.remove()" class="text-red-500 hover:text-red-700 text-xs px-2 font-bold">&times;</button>' : ''}
                `;
                container.appendChild(div);
            });
        }

        function addJudgeRow() {
            const container = document.getElementById('judgesContainer');
            const count = container.children.length + 1;
            const div = document.createElement('div');
            div.className = 'flex items-center gap-2';
            div.innerHTML = `
                <span class="text-xs font-bold text-gray-500 bg-white px-2 py-1.5 rounded-lg border border-borderMuted shrink-0">
                    Judge ${count}
                </span>
                <input type="text" name="judges[]" placeholder="Hon. Justice Name" required class="flex-1 p-2 bg-white border border-borderMuted rounded-xl text-xs font-semibold focus:ring-1 focus:ring-sageAccent">
                <button type="button" onclick="this.parentElement.remove()" class="text-red-500 hover:text-red-700 text-xs px-2 font-bold">&times;</button>
            `;
            container.appendChild(div);
        }

        function addDocRow() {
            const container = document.getElementById('docsContainer');
            const div = document.createElement('div');
            div.className = 'grid grid-cols-1 sm:grid-cols-12 gap-2 bg-white p-2.5 rounded-xl border border-borderMuted items-center';
            div.innerHTML = `
                <div class="sm:col-span-6">
                    <input type="text" name="doc_titles[]" placeholder="Document Title / Opinion" class="w-full p-1.5 border border-borderMuted rounded-lg text-xs font-medium">
                </div>
                <div class="sm:col-span-5">
                    <select name="doc_types[]" class="w-full p-1.5 border border-borderMuted rounded-lg text-xs font-medium">
                        <option value="Concurring Judgment">Concurring Judgment</option>
                        <option value="Dissenting Judgment">Dissenting Judgment</option>
                        <option value="Court Order">Court Order / Decree</option>
                        <option value="Certified Copy">Certified Copy</option>
                        <option value="Heads of Argument">Heads of Argument</option>
                    </select>
                </div>
                <div class="sm:col-span-1 text-center">
                    <button type="button" onclick="this.closest('.grid').remove()" class="text-red-500 hover:text-red-700 text-xs font-bold">&times;</button>
                </div>
            `;
            container.appendChild(div);
        }

        function updatePathPreview() {
            const division = document.getElementById('divisionSelect').value;
            const dateVal = document.getElementById('dateInput').value || '2026-08-14';
            const parts = dateVal.split('-');
            const year = parts[0] || '2026';
            const month = parts[1] || '08';
            const divSlug = division.toLowerCase().replace(/[^a-z0-9_]/g, '').replace(/ /g, '_');
            document.getElementById('storagePathPreview').innerText = `uploads/${divSlug}/${year}/${month}/`;
        }
    </script>
</body>
</html>
