@extends('layouts.demo10.base')

@section('content')
<div style="padding:1.5rem 0 2rem;">
    <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem;">
        <div>
            <h1 style="margin:0;font-size:1.7rem;font-weight:700;color:#18181b;">Schema Manager</h1>
            <p style="margin:0.3rem 0 0;font-size:0.86rem;color:#6b7280;">
                {{ $page->page_name }} · <code>{{ $page->table_name }}</code>
            </p>
        </div>
        <div style="display:flex;gap:0.55rem;flex-wrap:wrap;">
            <a href="{{ route('themes.pages.builder') }}"
               style="background:#fff;color:#111827;border:1px solid #e5e7eb;padding:0.65rem 1rem;border-radius:10px;text-decoration:none;font-weight:600;font-size:0.85rem;">
                ← Builder
            </a>
            <a href="{{ route('themes.pages.data', ['pageId' => $page->id]) }}"
               style="background:#2563eb;color:#fff;padding:0.65rem 1rem;border-radius:10px;text-decoration:none;font-weight:600;font-size:0.85rem;">
                Data
            </a>
        </div>
    </div>

    @if (session('success'))
        <div style="margin-bottom:1rem;padding:0.85rem 1rem;background:#dcfce7;color:#166534;border:1px solid #86efac;border-radius:12px;">
            {{ session('success') }}
        </div>
    @endif
    @if ($errors->any())
        <div style="margin-bottom:1rem;padding:0.85rem 1rem;background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;border-radius:12px;">
            {{ $errors->first() }}
        </div>
    @endif

    <div style="display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:1.1rem;align-items:start;">
        <div>
            <div style="background:#fff;border:1px solid #e8e2da;border-radius:18px;overflow:hidden;box-shadow:0 4px 18px rgba(15,23,42,0.05);">
                <div style="padding:1rem 1.2rem;border-bottom:1px solid #f1f5f9;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;">
                    <h3 style="margin:0;font-size:1rem;font-weight:700;color:#111827;">Existing Fields</h3>
                    <span style="font-size:0.8rem;color:#6b7280;">Parent aur child dono tables par same schema screen available hai.</span>
                </div>
                <div style="overflow-x:auto;">
                    <table style="width:100%;border-collapse:collapse;font-size:0.84rem;">
                        <thead>
                            <tr style="background:#f8fafc;">
                                <th style="padding:0.65rem 0.9rem;text-align:left;border-bottom:1px solid #e5e7eb;">Field</th>
                                <th style="padding:0.65rem 0.9rem;text-align:left;border-bottom:1px solid #e5e7eb;">Type</th>
                                <th style="padding:0.65rem 0.9rem;text-align:left;border-bottom:1px solid #e5e7eb;">Nullable</th>
                                <th style="padding:0.65rem 0.9rem;text-align:left;border-bottom:1px solid #e5e7eb;">Default</th>
                                <th style="padding:0.65rem 0.9rem;text-align:center;border-bottom:1px solid #e5e7eb;">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($columns as $column)
                                @php
                                    $isProtected = in_array($column->column_name, ['id', 'created_at', 'updated_at', $page->foreign_key_col]);
                                    $enumOptions = $column->enum_options ? (json_decode($column->enum_options, true) ?: []) : [];
                                @endphp
                                <tr style="border-bottom:1px solid #f1f5f9;">
                                    <td style="padding:0.65rem 0.9rem;color:#111827;font-weight:600;">
                                        {{ $column->column_name }}
                                        @if($isProtected)
                                            <span style="display:inline-block;margin-left:0.35rem;background:#eef2ff;color:#4338ca;border-radius:999px;padding:1px 7px;font-size:0.7rem;">system</span>
                                        @endif
                                        @if($enumOptions)
                                            <div style="font-size:0.74rem;color:#6b7280;margin-top:2px;">{{ implode(', ', $enumOptions) }}</div>
                                        @endif
                                    </td>
                                    <td style="padding:0.65rem 0.9rem;color:#374151;">{{ $column->column_type }}</td>
                                    <td style="padding:0.65rem 0.9rem;color:#374151;">{{ $column->is_nullable ? 'Yes' : 'No' }}</td>
                                    <td style="padding:0.65rem 0.9rem;color:#374151;">{{ $column->default_value ?? '—' }}</td>
                                    <td style="padding:0.65rem 0.9rem;text-align:center;">
                                        @if(!$isProtected)
                                            <div style="display:inline-flex;gap:0.4rem;align-items:center;">
                                                <a href="{{ route('themes.pages.schema', ['pageId' => $page->id, 'edit_column' => $column->id]) }}"
                                                   style="background:#0284c7;color:#fff;border-radius:7px;padding:3px 9px;font-size:0.75rem;text-decoration:none;font-weight:600;">
                                                    Edit
                                                </a>
                                                <form method="POST" action="{{ route('themes.pages.schema.columns.destroy', ['pageId' => $page->id, 'columnId' => $column->id]) }}"
                                                      onsubmit="return confirm('Field {{ $column->column_name }} delete karna hai?')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit"
                                                            style="background:#ef4444;color:#fff;border:none;border-radius:7px;padding:3px 9px;font-size:0.75rem;font-weight:600;cursor:pointer;">
                                                        Delete
                                                    </button>
                                                </form>
                                            </div>
                                        @else
                                            <span style="font-size:0.75rem;color:#94a3b8;">Protected</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" style="padding:1.5rem;text-align:center;color:#9ca3af;">No schema fields found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            @if($relatedPages->isNotEmpty())
                <div style="margin-top:1rem;background:#fff;border:1px solid #e8e2da;border-radius:16px;padding:1rem;box-shadow:0 4px 18px rgba(15,23,42,0.05);">
                    <h3 style="margin:0 0 0.65rem;font-size:0.95rem;font-weight:700;color:#111827;">Related Child Tables</h3>
                    <div style="display:flex;gap:0.5rem;flex-wrap:wrap;">
                        @foreach($relatedPages as $relatedPage)
                            <a href="{{ route('themes.pages.schema', ['pageId' => $relatedPage->id]) }}"
                               style="background:#f5f3ff;color:#6d28d9;border-radius:999px;padding:6px 12px;font-size:0.8rem;text-decoration:none;font-weight:600;">
                                {{ $relatedPage->page_name }}
                            </a>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>

        <div style="background:#fff;border:1px solid #e8e2da;border-radius:18px;padding:1.2rem;box-shadow:0 4px 18px rgba(15,23,42,0.05);">
            @php
                $isEditing = !is_null($editColumn);
                $action = $isEditing
                    ? route('themes.pages.schema.columns.update', ['pageId' => $page->id, 'columnId' => $editColumn->id])
                    : route('themes.pages.schema.columns.store', ['pageId' => $page->id]);
                $enumValues = $isEditing && $editColumn->enum_options ? implode(',', json_decode($editColumn->enum_options, true) ?: []) : '';
            @endphp

            <h3 style="margin:0 0 1rem;font-size:0.98rem;font-weight:700;color:#111827;">
                {{ $isEditing ? 'Edit Field' : 'Add New Field' }}
            </h3>

            <form method="POST" action="{{ $action }}">
                @csrf
                @if($isEditing)
                    @method('PUT')
                @endif

                <div style="margin-bottom:0.8rem;">
                    <label style="display:block;margin-bottom:0.3rem;font-size:0.82rem;font-weight:600;color:#374151;">Field Name</label>
                    <input type="text" name="name" value="{{ old('name', $editColumn->column_name ?? '') }}"
                           placeholder="status"
                           style="width:100%;border:1px solid #d1d5db;border-radius:8px;padding:0.6rem 0.7rem;font-size:0.84rem;"
                           required>
                </div>

                <div style="margin-bottom:0.8rem;">
                    <label style="display:block;margin-bottom:0.3rem;font-size:0.82rem;font-weight:600;color:#374151;">Data Type</label>
                    <select name="type" id="schema_type_select"
                            style="width:100%;border:1px solid #d1d5db;border-radius:8px;padding:0.6rem 0.7rem;font-size:0.84rem;">
                        @php $currentType = old('type', $editColumn->column_type ?? 'string'); @endphp
                        @foreach(['string','text','integer','bigInteger','decimal','boolean','date','datetime','json','enum'] as $type)
                            <option value="{{ $type }}" {{ $currentType === $type ? 'selected' : '' }}>{{ $type }}</option>
                        @endforeach
                    </select>
                </div>

                <div style="margin-bottom:0.8rem;">
                    <label style="display:flex;align-items:center;gap:0.45rem;font-size:0.82rem;font-weight:600;color:#374151;">
                        <input type="checkbox" name="nullable" value="1" {{ old('nullable', $editColumn->is_nullable ?? false) ? 'checked' : '' }}>
                        Allow NULL
                    </label>
                </div>

                <div style="margin-bottom:0.8rem;">
                    <label style="display:block;margin-bottom:0.3rem;font-size:0.82rem;font-weight:600;color:#374151;">Default Value</label>
                    <input type="text" name="default" value="{{ old('default', $editColumn->default_value ?? '') }}"
                           placeholder="optional"
                           style="width:100%;border:1px solid #d1d5db;border-radius:8px;padding:0.6rem 0.7rem;font-size:0.84rem;">
                </div>

                <div id="enum_values_wrap" style="margin-bottom:0.8rem;display:{{ $currentType === 'enum' ? 'block' : 'none' }};">
                    <label style="display:block;margin-bottom:0.3rem;font-size:0.82rem;font-weight:600;color:#374151;">Enum Values</label>
                    <input type="text" name="enum_values" value="{{ old('enum_values', $enumValues) }}"
                           placeholder="pending,approved,rejected"
                           style="width:100%;border:1px solid #d1d5db;border-radius:8px;padding:0.6rem 0.7rem;font-size:0.84rem;">
                    <div style="font-size:0.74rem;color:#6b7280;margin-top:3px;">Comma separated values use karein.</div>
                </div>

                <div style="display:flex;gap:0.5rem;align-items:center;margin-top:1rem;">
                    <button type="submit"
                            style="flex:1;background:{{ $isEditing ? '#0284c7' : '#2563eb' }};color:#fff;border:none;border-radius:9px;padding:0.75rem;font-weight:600;cursor:pointer;font-size:0.88rem;">
                        {{ $isEditing ? 'Update Field' : 'Add Field' }}
                    </button>
                    @if($isEditing)
                        <a href="{{ route('themes.pages.schema', ['pageId' => $page->id]) }}"
                           style="flex:1;background:#f1f5f9;color:#374151;border-radius:9px;padding:0.75rem;font-weight:600;text-align:center;text-decoration:none;font-size:0.88rem;">
                            Cancel
                        </a>
                    @endif
                </div>
            </form>

            <div style="margin-top:0.95rem;padding:0.8rem;border-radius:12px;background:#fff7ed;color:#9a3412;font-size:0.78rem;line-height:1.45;">
                Ghalat field ko delete karke naya sahi field add ya update kar sakte ho. System columns jaise <code>id</code>, timestamps, aur child FK protected rahenge.
            </div>
        </div>
    </div>
+</div>
+
+<script>
+(function () {
+    var typeSelect = document.getElementById('schema_type_select');
+    var enumWrap = document.getElementById('enum_values_wrap');
+    if (!typeSelect || !enumWrap) return;
+
+    function syncEnum() {
+        enumWrap.style.display = typeSelect.value === 'enum' ? 'block' : 'none';
+    }
+
+    typeSelect.addEventListener('change', syncEnum);
+    syncEnum();
+})();
+</script>
+@endsection