{{--
  Campos mínimos para generar el JSON de provisión.
  Solo lo esencial para correr: bewpro:provision provision-cliente.json
  El resto se configura desde el dashboard después del provision.
--}}

{{-- ── Paso 1: Identidad ───────────────────────────────────────────────────── --}}
<div class="card shadow-sm mb-6 border border-dashed border-primary" id="ps-step-1">
    <div class="card-header min-h-50px py-4 bg-light-primary">
        <div class="card-title flex-column align-items-start w-100">
            <span class="badge badge-primary mb-2">Paso 1 · Obligatorio</span>
            <h3 class="fs-5 fw-bold text-gray-900 mb-0">Identidad del proyecto</h3>
        </div>
    </div>
    <div class="card-body pt-5">
        <div class="row g-5">

            {{-- Nombre --}}
            <div class="col-md-6">
                <label class="form-label required fw-semibold">Nombre del proyecto</label>
                <input type="text"
                       id="project-name"
                       name="name"
                       class="form-control form-control-solid"
                       placeholder="Ej. Jurgen Klaric"
                       value="{{ old('name') }}"
                       required />
                <div class="form-text">Campo <code>name</code> en el JSON.</div>
            </div>

            {{-- db_name --}}
            <div class="col-md-6">
                <label class="form-label required fw-semibold">Base de datos <code class="text-danger">db_name</code></label>
                <input type="text"
                       id="project-db-name"
                       name="db_name"
                       class="form-control form-control-solid"
                       placeholder="bp-cliente-ejemplo"
                       value="{{ old('db_name') }}"
                       pattern="[-a-zA-Z0-9_]+"
                       required />
                <div class="form-text">Solo letras, números y guiones. Ej: <code>bp-jurgen-klaric</code></div>
            </div>

            {{-- URL --}}
            <div class="col-md-6">
                <label class="form-label required fw-semibold">URL del sitio</label>
                <input type="text"
                       id="project-url"
                       name="url"
                       class="form-control form-control-solid"
                       placeholder="https://cliente.bewpro.com"
                       value="{{ old('url') }}"
                       required />
            </div>

            {{-- Email de contacto --}}
            <div class="col-md-6">
                <label class="form-label fw-semibold">Email de contacto</label>
                <input type="email"
                       name="contact_email"
                       class="form-control form-control-solid"
                       placeholder="contacto@cliente.com"
                       value="{{ old('contact_email') }}" />
                <div class="form-text">Se usa en la página de contacto y como email del admin.</div>
            </div>

            {{-- Dominio cPanel --}}
            <div class="col-md-6">
                <label class="form-label fw-semibold">Dominio del sitio <span class="badge badge-light-info fs-8">cPanel</span></label>
                <input type="text"
                       name="domain"
                       class="form-control form-control-solid"
                       placeholder="cliente.com"
                       value="{{ old('domain') }}" />
                <div class="form-text">Solo para "Crear cuenta cPanel". Ej: <code>jurgenklaric.com</code></div>
            </div>

            {{-- Usuario cPanel --}}
            <div class="col-md-6">
                <label class="form-label fw-semibold">Usuario cPanel <span class="badge badge-light-info fs-8">cPanel · opcional</span></label>
                <input type="text"
                       name="cpanel_user"
                       class="form-control form-control-solid"
                       placeholder="jurgen"
                       maxlength="8"
                       pattern="[a-zA-Z0-9]+"
                       value="{{ old('cpanel_user') }}" />
                <div class="form-text">Máx 8 caracteres alfanuméricos. Se auto-genera si lo dejás vacío.</div>
            </div>

        </div>
    </div>
</div>

{{-- ── Paso 2: Demo + Core ─────────────────────────────────────────────────── --}}
<div class="card shadow-sm mb-6 border border-dashed border-success" id="project-demo-core-group">
    <div class="card-header min-h-50px py-4 bg-light-success">
        <div class="card-title flex-column align-items-start w-100">
            <span class="badge badge-success mb-2">Paso 2 · Producto BewPro</span>
            <h3 class="fs-5 fw-bold text-gray-900 mb-0">Demo y core</h3>
        </div>
    </div>
    <div class="card-body pt-5">
        <div class="row g-5">

            {{-- Demo --}}
            <div class="col-md-6">
                <label class="form-label required fw-semibold">Demo visual</label>
                <select id="provision-demo-select" name="demo" class="form-select form-select-solid" required>
                    <option value="">Elegir demo…</option>
                    @foreach($demoCatalog as $demoId => $demoRow)
                        <option value="{{ $demoId }}"
                                data-hint="{{ e($demoRow['hint'] ?? '') }}"
                                {{ old('demo') === $demoId ? 'selected' : '' }}>
                            {{ $demoRow['label'] ?? $demoId }}
                        </option>
                    @endforeach
                </select>
                <div class="form-text mt-1 text-muted fst-italic" id="provision-demo-hint"></div>
            </div>

            {{-- Core --}}
            <div class="col-md-6">
                <label class="form-label required fw-semibold">Core (producto)</label>
                <select id="provision-core-select" name="core" class="form-select form-select-solid" required>
                    <option value="">Primero elegí un demo…</option>
                </select>
                <div class="form-text">El core define módulos y navegación automáticamente.</div>
            </div>

        </div>

        {{-- Módulos preview --}}
        <div class="notice d-flex bg-light-primary rounded border-primary border border-dashed p-4 mt-5">
            <i class="ki-duotone ki-abstract-26 fs-2hx text-primary me-3 mt-1">
                <span class="path1"></span><span class="path2"></span>
            </i>
            <div>
                <div class="fw-semibold text-gray-800 mb-1">Módulos que llevará este proyecto</div>
                <div id="provision-modules-preview" class="d-flex flex-wrap gap-2">
                    <span class="text-muted fs-7">Seleccioná demo y core para ver la lista.</span>
                </div>
            </div>
        </div>

    </div>
</div>