@extends('layouts.demo10.base')

@section('content')

<style>
    .schema-page-shell {
        margin-top: calc(var(--spacing) * -5);
        margin-inline: calc(var(--spacing) * -6);
        margin-bottom: calc(var(--spacing) * -5);
        min-height: calc(100vh - 80px);
        background: #faf9f6;
    }

    .schema-flow {
        height: 74px;
        background: #e2e2e2;
        border-bottom: 1px solid #d8d8d8;
        padding: 0 22px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .schema-flow-steps {
        display: flex;
        align-items: center;
        gap: 28px;
        color: #8f8f8f;
        font-size: 15px;
        font-weight: 500;
    }

    .schema-flow-step {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    .schema-flow-step.is-active {
        color: #202020;
    }

    .schema-flow-dot {
        width: 30px;
        height: 30px;
        border-radius: 999px;
        border: 1px solid #d0d0d0;
        background: #f5f5f5;
        color: #8f8f8f;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .schema-flow-step.is-active .schema-flow-dot {
        background: #2f66e8;
        border-color: #2f66e8;
        color: #ffffff;
    }

    .schema-flow-arrow {
        color: #9f9f9f;
        font-size: 20px;
        line-height: 1;
    }

    .schema-main {
        max-width: 1380px;
        margin: 26px auto 0;
        padding: 0 18px 24px;
    }

    .schema-card {
        background: #f5f5f5;
        border: 1px solid #e6e6e6;
        border-radius: 14px;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
        padding: 16px;
    }

    .schema-page-title {
        margin: 0;
        color: #1f1f1f;
        font-size: 26px;
        font-weight: 600;
        line-height: 1.15;
    }

    .schema-page-subtitle {
        margin: 4px 0 16px;
        color: #7d7d7d;
        font-size: 14px;
    }

    .schema-topbar {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 12px;
        flex-wrap: wrap;
    }

    .schema-heading {
        min-width: 0;
    }

    @media (min-width: 1024px) {
        .schema-page-title {
            font-size: 30px;
        }
    }

    .schema-main-panel-flat-left {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }

    @media (min-width: 1024px) {
        .schema-main-panel-flat-left {
            border-left: 0 !important;
        }
    }

    @media (min-width: 1280px) {
        .schema-page-shell {
            margin-inline: calc(var(--spacing) * -7.5);
        }
    }

    .schema-actions {
        margin-bottom: 0;
        margin-left: auto;
    }

    #schema-container {
        align-items: stretch;
    }

    #validateSchemaBtn,
    #generateSchemaBtn {
        min-height: 34px;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 500;
        padding-inline: 12px;
    }

    #generateSchemaBtn {
        background: #e9e9e9;
        color: #8c8c8c;
        border-color: #e1e1e1;
    }

    #left-sidebar .kt-card,
    #right-content .kt-card {
        height: 100%;
        border-radius: 10px;
        background: #f8f8f8;
        border: 1px solid #dedede;
        overflow: hidden;
    }

    .schema-tab-header {
        height: 34px;
        border-bottom: 1px solid #dcdcdc;
        background: #e8efff;
        color: #3a4a7a;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        font-size: 12px;
        font-weight: 500;
    }

    .schema-tab-label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    #left-sidebar .kt-card-body,
    #right-content .kt-card-body {
        background: #f8f8f8;
        border: 0 !important;
        padding: 8px;
    }

    @media (min-width: 1024px) {
        #left-sidebar,
        #right-content {
            align-self: stretch;
        }

        #left-sidebar .kt-card,
        #right-content .kt-card {
            min-height: 380px;
        }

        #left-sidebar .kt-card-body,
        #right-content .kt-card-body {
            height: calc(100% - 34px);
        }
    }

    #tableSearch {
        height: 34px;
        border-radius: 8px;
        border: 1px solid #d7d7d7;
        background: #f4f4f4;
    }

    #schemaTable thead th {
        font-size: 10px;
        font-weight: 500;
        color: #555;
        background: #f0f0f0;
    }

    #schemaTable tbody td {
        font-size: 10px;
        color: #333;
    }

    /* Add Table Modal */
    .add-table-modal-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 9999;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(2px);
    }
    .add-table-modal-overlay.active {
        display: flex;
    }
    .add-table-modal {
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 20px 60px rgba(15,23,42,0.18);
        padding: 28px 28px 22px;
        width: 100%;
        max-width: 480px;
        animation: modalSlideIn 0.22s cubic-bezier(.4,0,.2,1);
    }
    @keyframes modalSlideIn {
        from { opacity:0; transform: translateY(-18px) scale(0.97); }
        to   { opacity:1; transform: translateY(0) scale(1); }
    }
    .add-table-modal-title {
        font-size: 17px;
        font-weight: 700;
        color: #1a1a2e;
        margin-bottom: 4px;
    }
    .add-table-modal-subtitle {
        font-size: 12px;
        color: #8a8a9a;
        margin-bottom: 20px;
    }
    .add-table-form-group {
        margin-bottom: 16px;
    }
    .add-table-form-group label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: #444;
        margin-bottom: 5px;
    }
    .add-table-form-group input,
    .add-table-form-group select {
        width: 100%;
        height: 38px;
        border-radius: 8px;
        border: 1.5px solid #d8d8e0;
        background: #f6f6fa;
        padding: 0 12px;
        font-size: 13px;
        color: #222;
        outline: none;
        transition: border-color .15s;
    }
    .add-table-form-group input:focus,
    .add-table-form-group select:focus {
        border-color: #2f66e8;
        background: #fff;
    }
    .add-table-toggle-row {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
    }
    .add-table-toggle-row label {
        font-size: 13px;
        font-weight: 600;
        color: #333;
        cursor: pointer;
        user-select: none;
    }
    /* Toggle switch */
    .atm-toggle {
        position: relative;
        display: inline-block;
        width: 40px;
        height: 22px;
    }
    .atm-toggle input { opacity:0; width:0; height:0; }
    .atm-toggle-slider {
        position: absolute;
        inset: 0;
        background: #d0d0de;
        border-radius: 999px;
        cursor: pointer;
        transition: background .2s;
    }
    .atm-toggle-slider:before {
        content: '';
        position: absolute;
        height: 16px; width: 16px;
        left: 3px; bottom: 3px;
        background: #fff;
        border-radius: 50%;
        transition: transform .2s;
        box-shadow: 0 1px 4px rgba(0,0,0,.15);
    }
    .atm-toggle input:checked + .atm-toggle-slider { background: #2f66e8; }
    .atm-toggle input:checked + .atm-toggle-slider:before { transform: translateX(18px); }
    .add-table-modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 20px;
        padding-top: 14px;
        border-top: 1px solid #ebebeb;
    }
    .atm-btn-cancel {
        background: #f0f0f5;
        color: #555;
        border: none;
        border-radius: 8px;
        padding: 0 18px;
        height: 36px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: background .15s;
    }
    .atm-btn-cancel:hover { background: #e2e2ee; }
    .atm-btn-add {
        background: #2f66e8;
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 0 22px;
        height: 36px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: background .15s;
    }
    .atm-btn-add:hover { background: #2455c8; }
    .atm-child-section { display: none; }
    .atm-child-section.visible { display: block; }
    .atm-fk-info {
        font-size: 11px;
        color: #7a8ab0;
        margin-top: 4px;
    }
    #addTableBtn {
        background: #2f66e8;
        color: #fff;
        border: none;
        border-radius: 6px;
        padding: 0 10px;
        height: 24px;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        transition: background .15s;
    }
    #addTableBtn:hover { background: #2455c8; }
</style>

<div class="schema-page-shell">
    <div class="schema-flow">
        <div class="schema-flow-steps" aria-label="ODK workflow">
            <div class="schema-flow-step">
                <span class="schema-flow-dot">
                    <i class="ki-filled ki-file-up text-sm"></i>
                </span>
                <span>ODKForm</span>
            </div>
            <span class="schema-flow-arrow">&rarr;</span>
            <div class="schema-flow-step is-active">
                <span class="schema-flow-dot">
                    <i class="ki-filled ki-document text-sm"></i>
                </span>
                <span>Generate Schema</span>
            </div>
            <span class="schema-flow-arrow">&rarr;</span>
            <div class="schema-flow-step">
                <span class="schema-flow-dot">
                    <i class="ki-filled ki-exit-down text-sm"></i>
                </span>
                <span>Import</span>
            </div>
        </div>
    </div>

@can('view.schema_design')
    <div class="schema-main">
        <div class="schema-card">
            <div class="schema-topbar">
                <div class="schema-heading">
                    <h1 class="schema-page-title">Schema Design</h1>
                    <p class="schema-page-subtitle">Project/{{ $currentProject->name ?? 'Projects' }}/Schema Design</p>
                </div>

                <div class="schema-actions flex flex-wrap justify-end gap-2">
                    <button class="kt-btn kt-btn-outline valid-schema-btn px-2" id="validateSchemaBtn"
                    onclick="AuditTracker.track({
                        event_type: 'click',
                        module:     'SchemaDesign',
                        section:    'SchemaDesign',
                        page:       'Schema Design',
                        action:     'Click Validate Schema Button'
                    })">
                       Validate Schema
                    </button>
                    @can('generate.schema_design')
                    <button class="kt-btn kt-btn-primary add-btn" id="generateSchemaBtn"
                    onclick="AuditTracker.track({
                        event_type: 'click',
                        module:     'SchemaDesign',
                        section:    'SchemaDesign',
                        page:       'Schema Design',
                        action:     'Click Save Schema Button'
                    })">
                        Save Data
                    </button>
                    @endcan
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-12 gap-3 lg:gap-4" id="schema-container">
        <!-- LEFT SIDEBAR: Search & Tables -->
        <div class="lg:col-span-4 flex flex-col gap-4 transition-all duration-300" id="left-sidebar">
            <div class="kt-card h-full mt-1 border border-input">
                <div class="schema-tab-header">
                    <span class="schema-tab-label">
                        <i class="ki-filled ki-file text-xs"></i>
                        <span>Table</span>
                    </span>
                    <div class="flex items-center gap-2">
                        @can('generate.schema_design')
                        <button id="addTableBtn" title="Add Table">
                            <i class="ki-filled ki-plus" style="font-size:11px;"></i> Add Table
                        </button>
                        @endcan
                        <button id="toggleSidebar" class="btn btn-sm btn-icon hidden" title="Collapse Sidebar">
                            <i class="ki-filled ki-double-left text-lg"></i>
                        </button>
                    </div>
                </div>
                <div class="kt-card-body flex flex-col gap-4 border p-2" style="height: calc(100% - 34px); max-height: 70vh; overflow-y: auto;">
                    <div class="kt-input">
                        <i class="ki-filled ki-magnifier"></i>
                        <input type="text" placeholder="Search tables..." id="tableSearch">
                    </div>

                    <div class="table-group">
                        <h4 class="table-group-title text-xs font-bold text-muted-foreground uppercase mb-2">Tables</h4>
                        <ul class="table-list flex flex-col gap-1 list-none p-0" id="main_tables">
                            @foreach(array_keys($schema['Tables']) as $tableName)
                                <li class="flex items-center justify-between gap-2 p-2 rounded-md hover:bg-accent cursor-pointer transition-colors group">
                                    <div class="flex items-center gap-2">
                                        <i class="ki-filled ki-file-text text-lg text-muted-foreground group-hover:text-primary"></i>
                                        <span class="text-sm font-medium">{{ $tableName }}</span>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>

                    <div class="table-group mt-4">
                        <h4 class="table-group-title text-xs font-bold text-muted-foreground uppercase mb-2" id="child-tables-header">Child Tables</h4>
                        <ul class="table-list flex flex-col gap-1 list-none p-0" id="child_tables">
                            @foreach(array_keys($schema['Child_tables']) as $tableName)
                                <li class="flex items-center justify-between gap-2 p-2 rounded-md hover:bg-accent cursor-pointer transition-colors group">
                                    <div class="flex items-center gap-2">
                                        <i class="ki-filled ki-file-text text-lg text-muted-foreground group-hover:text-primary"></i>
                                        <span class="text-sm font-medium">{{ $tableName }}</span>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>

                    <div class="table-group mt-4">
                        <h4 class="table-group-title text-xs font-bold text-muted-foreground uppercase mb-2">Lookup Tables</h4>
                        <ul class="table-list flex flex-col gap-1 list-none p-0" id="lookup_tables">
                            @foreach($schema['Lookup_tables'] as $lookup)
                                <li class="flex items-center gap-2 p-2 rounded-md hover:bg-accent cursor-pointer transition-colors group">
                                    <i class="ki-filled ki-file-text text-lg text-muted-foreground group-hover:text-primary"></i>
                                    <span class="text-sm font-medium">{{ $lookup['table_name'] }}</span>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- RIGHT CONTENT: Schema Details -->
        <div class="lg:col-span-8 flex flex-col gap-5 transition-all duration-300" id="right-content">
            <div class="kt-card h-full border border-input">
                <div class="schema-tab-header">
                    <div class="flex items-center gap-2">
                        <button id="expandSidebar" class="btn btn-sm btn-icon hidden" title="Expand Sidebar">
                            <i class="ki-filled ki-double-right text-lg"></i>
                        </button>
                        <span class="schema-tab-label"><i class="ki-filled ki-file text-xs"></i><span class="schema-table-name">Submissions</span></span>
                    </div>
                    @can('generate.schema_design')
                    <button class="kt-btn kt-btn-icon kt-btn-sm kt-btn-primary rounded-md" id="addColumnBtn"
                     onclick="AuditTracker.track({
                        event_type: 'click',
                        module:     'SchemaDesign',
                        section:    'SchemaDesign',
                        page:       'Schema Design',
                        action:     'Click Add Column Button'
                    })">
                        <i class="ki-filled ki-plus"></i>
                    </button>
                    @endcan
                </div>
                <div class="kt-card-body border" style="height: calc(100% - 34px); max-height: 70vh; overflow-y: auto;">
                    <div class="kt-scrollable-x-auto">
                        <table class="kt-table kt-table-border" id="schemaTable">
                            <thead>
                                <tr>
                                    <th class="min-w-[150px]">Name</th>
                                    <th class="min-w-[150px]">Comment</th>
                                    <th class="min-w-[80px]">DataType</th>
                                    <th class="min-w-[80px]">Length</th>
                                    <th class="min-w-[70px]">Nullable</th>
                                    <th class="min-w-[80px]">Default</th>
                                    <th class="min-w-[50px] text-center">Is Lookup</th>
                                    <th class="min-w-[150px]">Reference</th>
                                    <th class="min-w-[100px]">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Primary Key Row (Hardcoded by JS or initial load) -->
                                <tr class="primary-row bg-light/30" data-json-id="id">
                                    <td><strong>id</strong></td>
                                    <td>-</td>
                                    <td><span class="kt-badge kt-badge-outline kt-badge-secondary kt-badge-sm">SERIAL</span></td>
                                    <td>-</td>
                                    <td><span class="kt-badge kt-badge-outline kt-badge-danger kt-badge-sm">No</span></td>
                                    <td><span class="kt-badge kt-badge-outline kt-badge-success kt-badge-sm">Auto</span></td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td></td>
                                </tr>

                                @php
                                    $firstTable = array_key_first($schema['Tables']);
                                @endphp

                                @if($firstTable && isset($schema['Tables'][$firstTable]))
                                    @foreach($schema['Tables'][$firstTable] as $column)
                                    <tr data-json-id="{{ $column['id'] }}">
                                        <td><strong>{{ $column['id'] }}</strong></td>
                                        <td>{{ $column['name'] }}</td>
                                        <td><span class="kt-badge kt-badge-outline kt-badge-primary kt-badge-sm">{{ strtoupper($column['datatype']) }}</span></td>
                                        <td>{{ $column['length'] }}</td>
                                        <td>
                                            <span class="kt-badge kt-badge-outline kt-badge-sm {{ $column['nullable'] ? 'kt-badge-success' : 'kt-badge-danger' }}">
                                                {{ $column['nullable'] ? 'Yes' : 'No' }}
                                            </span>
                                        </td>
                                        <td>{{ empty($column['predefined']) ? 'NULL' : $column['predefined'] }}</td>
                                        <td class="text-center">
                                            <input type="checkbox" class="is-lookup-checkbox kt-checkbox kt-checkbox-sm" {{ !empty($column['is_lookup']) ? 'checked' : '' }}>
                                        </td>
                                        <td class="lookup-reference-column">
                                            @if(!empty($column['is_lookup']))
                                                <select class="reference-lookup-dropdown kt-select">
                                                    <option value=""></option>
                                                    <option value="_new_">+ Create New</option>
                                                    @foreach($schema['Lookup_tables'] as $lookup)
                                                        <option value="{{ $lookup['table_name'] }}" {{ ($column['lookup_reference'] ?? '') === $lookup['table_name'] ? 'selected' : '' }}>
                                                            {{ $lookup['table_name'] }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            @endif
                                        </td>
                                        <td class="text-right">
                                            @can('generate.schema_design')
                                            <div class="flex gap-2">
                                                <button class="kt-btn kt-btn-icon kt-btn-sm kt-btn-ghost hover:text-primary edit-row">
                                                    <i class="ki-filled ki-pencil"></i>
                                                </button>
                                                <button class="kt-btn kt-btn-icon kt-btn-sm kt-btn-ghost hover:text-danger delete-row">
                                                    <i class="ki-filled ki-trash"></i>
                                                </button>
                                            </div>
                                            @endcan
                                        </td>
                                    </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>

                    <!-- Lookup Options Panel (Hidden by default) -->
                    <div class="hidden mt-5" id="lookupOptionsPanel">
                        <div class="kt-card kt-card-bordered bg-light/20">
                            <div class="kt-card-header">
                                <h4 class="lookup-table-name text-sm font-bold">Lookup Table Options</h4>
                                <button class="kt-btn kt-btn-sm kt-btn-primary" id="addLookupOptionBtn">
                                    <i class="ki-filled ki-plus"></i> Add Option
                                </button>
                            </div>
                            <div class="kt-card-body">
                                <table class="kt-table kt-table-sm schemaDesign-table" id="lookupMiniTable">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Option Name</th>
                                            <th class="text-right">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody class="schemaDesign-table-body"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            </div>
        </div>
    </div>
@else
<div class="flex items-center justify-center min-h-[400px]">
    <div class="text-center">
        <i class="ki-filled ki-lock text-4xl text-danger mb-4"></i>
        <h3 class="text-lg font-semibold text-foreground">Access Denied</h3>
        <p class="text-sm text-secondary-foreground">You do not have permission to view this page.</p>
    </div>
</div>
@endcan
</div>

{{-- ============================================================ --}}
{{-- ADD TABLE MODAL --}}
{{-- ============================================================ --}}
<div class="add-table-modal-overlay" id="addTableModalOverlay">
    <div class="add-table-modal" role="dialog" aria-modal="true" aria-labelledby="addTableModalTitle">
        <div class="add-table-modal-title" id="addTableModalTitle">
            <i class="ki-filled ki-data text-primary" style="font-size:16px;"></i>
            Add New Table
        </div>
        <p class="add-table-modal-subtitle">Define a new main or child table for your schema.</p>

        <div class="add-table-form-group">
            <label for="newTableNameInput">Table Name <span style="color:#e53;">*</span></label>
            <input type="text" id="newTableNameInput" placeholder="e.g. household_members" autocomplete="off">
        </div>

        <div class="add-table-toggle-row">
            <label class="atm-toggle">
                <input type="checkbox" id="isChildTableToggle">
                <span class="atm-toggle-slider"></span>
            </label>
            <label for="isChildTableToggle">Is Child Table?</label>
        </div>

        <div class="atm-child-section" id="atmChildSection">
            <div class="add-table-form-group">
                <label for="parentTableSelect">Parent Table <span style="color:#e53;">*</span></label>
                <select id="parentTableSelect">
                    <option value="">-- Select Parent Table --</option>
                </select>
            </div>
            <div class="add-table-form-group">
                <label for="foreignKeyInput">Foreign Key Column</label>
                <input type="text" id="foreignKeyInput" placeholder="e.g. household_id" autocomplete="off">
                <div class="atm-fk-info">Auto-generated from parent table name. You can modify it.</div>
            </div>
        </div>

        <div class="add-table-modal-footer">
            <button class="atm-btn-cancel" id="addTableModalCancel">Cancel</button>
            <button class="atm-btn-add" id="addTableModalConfirm">
                <i class="ki-filled ki-plus" style="font-size:12px;"></i> Add Table
            </button>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
    window.schemaTables = Object.assign(@json($schema['Tables'] ?? []), @json($schema['Child_tables'] ?? []));
    window.schemaLookups = @json($schema['Lookup_tables'] ?? []);
    window.formId = @json($form_id);
    window.tenantId = @json($tenant_id);
    window.canCreateSchema = {{ auth()->user()->can('generate.schema_design') ? 'true' : 'false' }};
    document.addEventListener('DOMContentLoaded', function () {
        const scrollableContent = document.getElementById('scrollable_content');
        const mainPanel = scrollableContent ? scrollableContent.parentElement : null;
        if (mainPanel) {
            mainPanel.classList.add('schema-main-panel-flat-left');
        }
    });
</script>

@vite('resources/js/pages/schemaDesign.js')
@vite('resources/js/ImportDataset/import-dataset.js')
@endsection