@extends('layouts.demo10.base')

@section('content')
<div style="padding:1.5rem 0 2rem;">

    {{-- Header --}}
    <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem;">
        <div>
            <h1 style="margin:0;font-size:1.8rem;font-weight:700;color:#18181b;">{{ $page->page_name }}</h1>
            <p style="margin:0.3rem 0 0;color:#6b7280;font-size:0.85rem;">
                Table: <code>{{ $page->table_name }}</code> · {{ $project->name }}
            </p>
        </div>
        <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;">
            ← Page Builder
        </a>
    </div>

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

    @if($parentPage)
        <div style="margin-bottom:1rem;padding:0.85rem 1rem;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;border-radius:12px;">
            Yeh child table hai. Is mein record add karne ke liye parent <strong>{{ $parentPage->page_name }}</strong> record select karna zaroori hai.
            Agar aap direct parent row se aao ge to child button se bhi same kaam hoga.
        </div>
    @endif

    <div style="display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.25rem;align-items:start;">

        {{-- ── RECORDS TABLE ── --}}
        <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.25rem;border-bottom:1px solid #f1f5f9;display:flex;justify-content:space-between;align-items:center;">
                    <h3 style="margin:0;font-size:1rem;font-weight:700;color:#111827;">Records</h3>
                    <span style="font-size:0.8rem;color:#6b7280;">Total: {{ $records->total() }}</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.6rem 0.9rem;text-align:left;font-weight:600;color:#374151;border-bottom:1px solid #e5e7eb;">#</th>
                                @foreach($columns as $col)
                                    <th style="padding:0.6rem 0.9rem;text-align:left;font-weight:600;color:#374151;border-bottom:1px solid #e5e7eb;">
                                        {{ $col->column_name }}
                                        <span style="font-weight:400;color:#9ca3af;font-size:0.72rem;">({{ $col->column_type }})</span>
                                    </th>
                                @endforeach
                                <th style="padding:0.6rem 0.9rem;text-align:center;font-weight:600;color:#374151;border-bottom:1px solid #e5e7eb;">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($records as $row)
                                <tr style="border-bottom:1px solid #f1f5f9;transition:background 0.12s;"
                                    onmouseover="this.style.background='#f9fafb'" onmouseout="this.style.background=''">
                                    <td style="padding:0.6rem 0.9rem;color:#6b7280;">{{ $row->id }}</td>
                                    @foreach($columns as $col)
                                        <td style="padding:0.6rem 0.9rem;color:#1f2937;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                                            @if($col->column_type === 'boolean')
                                                <span style="display:inline-block;padding:1px 8px;border-radius:999px;font-size:0.75rem;background:{{ $row->{$col->column_name} ? '#dcfce7' : '#fee2e2' }};color:{{ $row->{$col->column_name} ? '#166534' : '#991b1b' }};">
                                                    {{ $row->{$col->column_name} ? 'Yes' : 'No' }}
                                                </span>
                                            @elseif($col->column_type === 'json')
                                                <span title="{{ e($row->{$col->column_name}) }}" style="color:#6b7280;font-family:monospace;font-size:0.75rem;">JSON</span>
                                            @elseif($col->column_type === 'enum')
                                                <span style="display:inline-block;padding:1px 8px;border-radius:999px;font-size:0.75rem;background:#eff6ff;color:#1d4ed8;">
                                                    {{ $row->{$col->column_name} }}
                                                </span>
                                            @else
                                                {{ Str::limit($row->{$col->column_name}, 60) }}
                                            @endif
                                        </td>
                                    @endforeach
                                    <td style="padding:0.6rem 0.9rem;text-align:center;white-space:nowrap;">
                                        <div style="display:inline-flex;gap:0.4rem;align-items:center;">
                                            @foreach($childPages as $childPage)
                                                <a href="{{ route('themes.pages.child.data', ['pageId' => $page->id, 'recordId' => $row->id, 'childPageId' => $childPage->id]) }}"
                                                   style="background:#7c3aed;color:#fff;border-radius:7px;padding:3px 9px;font-size:0.75rem;text-decoration:none;font-weight:600;">
                                                    {{ $childPage->page_name }}
                                                </a>
                                            @endforeach
                                            <a href="{{ route('themes.pages.data', ['pageId' => $page->id, 'edit' => $row->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.data.destroy', ['pageId' => $page->id, 'recordId' => $row->id]) }}"
                                                  onsubmit="return confirm('Record #{{ $row->id }} delete hoga. Sure?')">
                                                @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;">
                                                    Del
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="{{ $columns->count() + 2 }}" style="padding:1.5rem;text-align:center;color:#9ca3af;">
                                        Abhi tak koi record nahi. Right side form se add karein.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @if($records->hasPages())
                    <div style="padding:0.75rem 1.25rem;border-top:1px solid #f1f5f9;">
                        {{ $records->links() }}
                    </div>
                @endif
            </div>
        </div>

        {{-- ── ADD / EDIT FORM ── --}}
        <div>
            @php
                $isEditing  = !is_null($editRecord);
                $formAction = $isEditing
                    ? route('themes.pages.data.update', ['pageId' => $page->id, 'recordId' => $editRecord->id])
                    : route('themes.pages.data.store', ['pageId' => $page->id]);
                $formMethod = $isEditing ? 'PUT' : 'POST';
            @endphp

            <div style="background:#fff;border:1px solid #e8e2da;border-radius:18px;padding:1.25rem;box-shadow:0 4px 18px rgba(15,23,42,0.05);">
                <h3 style="margin:0 0 1rem;font-size:0.95rem;font-weight:700;color:#111827;">
                    {{ $isEditing ? '✏️ Edit Record #' . $editRecord->id : '+ New Record' }}
                </h3>

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

                    @if($parentPage)
                        <div style="margin-bottom:0.85rem;">
                            <label style="display:block;margin-bottom:0.3rem;font-size:0.82rem;font-weight:600;color:#374151;">
                                Parent {{ $parentPage->page_name }} Record <span style="color:#ef4444;">*</span>
                            </label>
                            <select name="parent_record_id"
                                    {{ $isEditing ? '' : 'required' }}
                                    style="width:100%;border:1px solid #d1d5db;border-radius:8px;padding:0.6rem 0.7rem;font-size:0.84rem;">
                                <option value="">Select parent record</option>
                                @foreach($parentRecords as $parentRecord)
                                    <option value="{{ $parentRecord->id }}" {{ (string) ($selectedParentId ?? '') === (string) $parentRecord->id ? 'selected' : '' }}>
                                        {{ $parentPage->page_name }} #{{ $parentRecord->id }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    @endif

                    @foreach($columns as $col)
                        @continue(in_array($col->column_name, $autoManagedColumns ?? [], true))
                        <div style="margin-bottom:0.75rem;">
                            <label style="display:block;margin-bottom:0.3rem;font-size:0.82rem;font-weight:600;color:#374151;">
                                {{ $col->column_name }}
                                <span style="font-weight:400;color:#9ca3af;">({{ $col->column_type }})</span>
                                @if(!$col->is_nullable) <span style="color:#ef4444;">*</span> @endif
                            </label>

                            @php
                                $currentVal = $isEditing ? ($editRecord->{$col->column_name} ?? '') : old($col->column_name, $col->default_value ?? '');
                                $enumOptions = $col->enum_options ? (json_decode($col->enum_options, true) ?: []) : [];
                            @endphp

                            @if($col->column_type === 'boolean')
                                <select name="{{ $col->column_name }}"
                                        style="width:100%;border:1px solid #d1d5db;border-radius:8px;padding:0.6rem 0.7rem;font-size:0.84rem;">
                                    <option value="0" {{ !$currentVal ? 'selected' : '' }}>No</option>
                                    <option value="1" {{ $currentVal ? 'selected' : '' }}>Yes</option>
                                </select>
                            @elseif($col->column_type === 'enum')
                                <select name="{{ $col->column_name }}"
                                        {{ !$col->is_nullable ? 'required' : '' }}
                                        style="width:100%;border:1px solid #d1d5db;border-radius:8px;padding:0.6rem 0.7rem;font-size:0.84rem;">
                                    @if($col->is_nullable)
                                        <option value="">Select option</option>
                                    @endif
                                    @foreach($enumOptions as $option)
                                        <option value="{{ $option }}" {{ (string) $currentVal === (string) $option ? 'selected' : '' }}>{{ $option }}</option>
                                    @endforeach
                                </select>
                            @elseif($col->column_type === 'text' || $col->column_type === 'json')
                                <textarea name="{{ $col->column_name }}" rows="3"
                                          {{ !$col->is_nullable ? 'required' : '' }}
                                          style="width:100%;border:1px solid #d1d5db;border-radius:8px;padding:0.6rem 0.7rem;font-size:0.84rem;resize:vertical;">{{ $currentVal }}</textarea>
                            @elseif($col->column_type === 'date')
                                <input type="date" name="{{ $col->column_name }}" value="{{ $currentVal }}"
                                       {{ !$col->is_nullable ? 'required' : '' }}
                                       style="width:100%;border:1px solid #d1d5db;border-radius:8px;padding:0.6rem 0.7rem;font-size:0.84rem;">
                            @elseif($col->column_type === 'datetime')
                                <input type="datetime-local" name="{{ $col->column_name }}" value="{{ $currentVal }}"
                                       {{ !$col->is_nullable ? 'required' : '' }}
                                       style="width:100%;border:1px solid #d1d5db;border-radius:8px;padding:0.6rem 0.7rem;font-size:0.84rem;">
                            @elseif(in_array($col->column_type, ['integer','bigInteger','decimal']))
                                <input type="number" name="{{ $col->column_name }}" value="{{ $currentVal }}"
                                       step="{{ $col->column_type === 'decimal' ? '0.01' : '1' }}"
                                       {{ !$col->is_nullable ? 'required' : '' }}
                                       style="width:100%;border:1px solid #d1d5db;border-radius:8px;padding:0.6rem 0.7rem;font-size:0.84rem;">
                            @else
                                <input type="text" name="{{ $col->column_name }}" value="{{ $currentVal }}"
                                       {{ !$col->is_nullable ? 'required' : '' }}
                                       style="width:100%;border:1px solid #d1d5db;border-radius:8px;padding:0.6rem 0.7rem;font-size:0.84rem;">
                            @endif
                        </div>
                    @endforeach

                    <div style="display:flex;gap:0.5rem;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 Record' : 'Add Record' }}
                        </button>
                        @if($isEditing)
                            <a href="{{ route('themes.pages.data', ['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>

            {{-- Child page quick-link --}}
            @if($childPages->isNotEmpty())
                <div style="margin-top:0.9rem;background:#ede9fe;border-radius:12px;padding:0.8rem 1rem;">
                    <p style="margin:0;font-size:0.82rem;color:#4c1d95;font-weight:600;">
                        Child Tables: {{ $childPages->pluck('page_name')->join(', ') }}
                    </p>
                    <p style="margin:0.2rem 0 0;font-size:0.77rem;color:#7c3aed;">
                        Har row ke samne related child table ka button available hai.
                    </p>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection