@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.6rem;font-weight:700;color:#18181b;">{{ $childPage->page_name }}</h1>
            <p style="margin:0.3rem 0 0;font-size:0.84rem;color:#6b7280;">
                Parent: {{ $page->page_name }} #{{ $recordId }} · FK: {{ $childPage->foreign_key_col }}
            </p>
        </div>
        <a href="{{ route('themes.pages.data', ['pageId' => $page->id]) }}"
           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;">
            ← Back To Parent Data
        </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 ($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

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

        {{-- Child records --}}
        <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:0.95rem 1.2rem;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;">Child Records</h3>
                <span style="font-size:0.8rem;color:#6b7280;">Total: {{ $childRecords->count() }}</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($childColumns 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 }}
                                </th>
                            @endforeach
                            <th style="padding:0.6rem 0.9rem;text-align:center;font-weight:600;color:#374151;border-bottom:1px solid #e5e7eb;">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($childRecords as $row)
                            <tr style="border-bottom:1px solid #f1f5f9;">
                                <td style="padding:0.6rem 0.9rem;color:#6b7280;">{{ $row->id }}</td>
                                @foreach($childColumns 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 === '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}, 70) }}
                                        @endif
                                    </td>
                                @endforeach
                                <td style="padding:0.6rem 0.9rem;text-align:center;">
                                    <form method="POST"
                                          action="{{ route('themes.pages.child.data.destroy', ['pageId' => $page->id, 'recordId' => $recordId, 'childPageId' => $childPage->id, 'childRecordId' => $row->id]) }}"
                                          onsubmit="return confirm('Child record 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>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="{{ $childColumns->count() + 2 }}" style="padding:1.2rem;text-align:center;color:#9ca3af;">
                                    Abhi koi child record nahi. Right side se add karein.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Add child record form --}}
        <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;">+ New Child Record</h3>

            <form method="POST" action="{{ route('themes.pages.child.data.store', ['pageId' => $page->id, 'recordId' => $recordId, 'childPageId' => $childPage->id]) }}">
                @csrf

                @foreach($childColumns 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>
                        </label>

                        @php $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">No</option>
                                <option value="1">Yes</option>
                            </select>
                        @elseif($col->column_type === 'enum')
                            <select name="{{ $col->column_name }}"
                                    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 }}">{{ $option }}</option>
                                @endforeach
                            </select>
                        @elseif($col->column_type === 'text' || $col->column_type === 'json')
                            <textarea name="{{ $col->column_name }}" rows="3"
                                      style="width:100%;border:1px solid #d1d5db;border-radius:8px;padding:0.6rem 0.7rem;font-size:0.84rem;resize:vertical;"></textarea>
                        @elseif($col->column_type === 'date')
                            <input type="date" name="{{ $col->column_name }}"
                                   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 }}"
                                   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 }}" step="{{ $col->column_type === 'decimal' ? '0.01' : '1' }}"
                                   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 }}"
                                   style="width:100%;border:1px solid #d1d5db;border-radius:8px;padding:0.6rem 0.7rem;font-size:0.84rem;">
                        @endif
                    </div>
                @endforeach

                <button type="submit"
                        style="width:100%;background:#7c3aed;color:#fff;border:none;border-radius:9px;padding:0.75rem;font-weight:600;cursor:pointer;font-size:0.88rem;">
                    Add Child Record
                </button>
            </form>
        </div>
    </div>
</div>
@endsection