@extends('layouts.portal.app')

@section('title', 'Create Dataset — InsightsReady')

@push('styles')
    <link rel="stylesheet" href="{{ asset('portal-assets/portal.css') }}" />
    <style>
        /* Page chrome */
        .page-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
        .crumbs{display:flex;gap:8px;align-items:center;color:var(--ink-700);font-weight:600}
        .crumbs a{color:inherit;text-decoration:none}
        .crumbs .sep{opacity:.5}
        .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

        /* Form shell */
        .form-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
        @media (max-width:980px){ .form-wrap{grid-template-columns:1fr} }
        .card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px}
        .card h3{margin:0 0 8px}
        .hint{color:var(--ink-700);font-size:13px}
        .field{display:grid;gap:6px;margin:12px 0}
        .row{display:grid;grid-template-columns:1fr 1fr;gap:12px; margin-top: 10px;}
        @media (max-width:640px){ .row{grid-template-columns:1fr} }

        /* Inputs */
        .input, select{
            width:100%; appearance:none; background:#fff; color:var(--ink-900);
            border:1px solid var(--border); border-radius:12px; padding:10px 12px; font-weight:600;
        }
        .input:focus, select:focus{outline:none; box-shadow:var(--focus)}
        label{font-weight:800; font-size:14px}
        .req::after{content:" *"; color:#c2410c; font-weight:800}

        /* Select adornment (chevron) */
        .select{position:relative}
        .select:after{
            content:"\f078"; font-family:"Font Awesome 6 Free"; font-weight:900;
            position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--ink-700); pointer-events:none;
        }

        /* Side panel */
        .pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:#fff;font-weight:700;font-size:12px}
        .pill--muted{background:#f9fafb}
        .meta-grid{display:grid;gap:10px}
        .kebab-tip{color:var(--ink-700);font-size:13px}

        /* Footer bar */
        .bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;margin-top:12px}
        .btn--sm{padding:10px 12px;border-radius:12px;font-weight:800}
        .btn--ghost{background:#fff;border:1px solid var(--border)}
    </style>
@endpush

@section('content')
    <main class="container page">
        <!-- Form -->
        <section class="form-wrap">
            <!-- Left: main form -->
            <div class="card">
                <h3>New dataset</h3>
                <p class="hint">Fill the basic info. You can add fields/mapping after creation.</p>

                <div class="field">
                    <label for="ds_name" class="req">Name</label>
                    <input id="ds_name" class="input" type="text" placeholder="e.g., Ecommerce Orders" />
                </div>

                <div class="row">
                    <div class="field">
                        <label for="ds_type" class="req">Type</label>
                        <div class="select">
                            <select id="ds_type">
                                <option>Fact</option>
                                <option>Dimension</option>
                                <option>Time-series</option>
                                <option>Events</option>
                                <option selected>Mixed</option>
                            </select>
                        </div>
                    </div>

                    <div class="field">
                        <label for="ds_workspace" class="req">Workspace</label>
                        <div class="select">
                            <select id="ds_workspace">
                                <option selected>Default</option>
                                <option>Marketing</option>
                                <option>Ecommerce</option>
                                <option>Finance</option>
                                <option>Data Science</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="field">
                        <label for="ds_loadmode" class="req">Load Mode</label>
                        <div class="select">
                            <select id="ds_loadmode">
                                <option selected>Incremental (by watermark)</option>
                                <option>Full refresh</option>
                                <option>CDC (change data capture)</option>
                                <option>Append-only</option>
                                <option>Upsert / Merge</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="bar">
                    <a class="btn btn--ghost btn--sm" href="{{ url('/portal/datasets') }}">Cancel</a>
                    <a class="btn btn--brand btn--sm" href="#">Create</a>
                </div>
            </div>

            <!-- Right: help & preview-ish meta -->
            <aside class="card" aria-label="Context">
                <h3>Quick guidance</h3>
                <div class="meta-grid">
                    <div>
                        <div class="pill pill--muted">Naming tip</div>
                        <p class="hint" style="margin:6px 0 0">
                            Prefer nouns (e.g., <strong>Orders</strong>, <strong>Customers</strong>). Use camel or snake case for technical names.
                        </p>
                    </div>

                    <div>
                        <div class="pill">Type presets</div>
                        <p class="hint" style="margin:6px 0 0">
                            <strong>Fact</strong> (transactions), <strong>Dimension</strong> (entities), <strong>Time-series</strong> (metrics by time), <strong>Events</strong> (GA4), <strong>Mixed</strong> (hybrid).
                        </p>
                    </div>

                    <div>
                        <div class="pill">Load mode</div>
                        <p class="hint" style="margin:6px 0 0">
                            <strong>Incremental</strong> uses a timestamp or ID watermark. <strong>Upsert</strong> merges by key. <strong>CDC</strong> expects change tables.
                        </p>
                    </div>

                    <div>
                        <div class="pill pill--muted">After create</div>
                        <p class="hint" style="margin:6px 0 0">
                            You’ll be prompted to map sources, choose a primary key, and configure publish targets (e.g., Power BI).
                        </p>
                    </div>

                    <div>
                        <p class="kebab-tip">Need advanced settings (RLS, partitions, retention)? Edit after creation from the dataset’s ⚙️ Settings tab.</p>
                    </div>
                </div>
            </aside>
        </section>

    </main>
@endsection

@push('scripts')
@endpush