{{--
  Campos para form-reseller.
  Sin campos de cuenta cPanel ni db_name.
--}}

<div class="card shadow-sm mb-6 border border-dashed border-primary" id="fr-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">
            <div class="col-md-6">
                <label class="form-label required fw-semibold">Nombre del negocio / cliente</label>
                <input type="text"
                    id="project-name"
                    name="name"
                    class="form-control form-control-solid"
                    placeholder="Ej. Estudio Jur&iacute;dico Andreozzi"
                    value="{{ old('name') }}"
                    required />
            </div>

            <div class="col-md-6">
                <label class="form-label fw-semibold">URL del sitio <span class="text-muted fs-8">(opcional)</span></label>
                <input type="text"
                    id="project-url"
                    name="url"
                    class="form-control form-control-solid"
                    placeholder="Dejar vacío para subdominio .bewpro.com"
                    value="{{ old('url') }}" />
                <div class="form-text text-muted">Opcional. Si se deja vacío se genera un subdominio automático.</div>
            </div>

            <div class="col-md-6">
                <label class="form-label fw-semibold">Email de contacto del cliente <span class="text-muted fs-8">(opcional)</span></label>
                <input type="email"
                    name="contact_email"
                    class="form-control form-control-solid"
                    placeholder="contacto@cliente.com"
                    value="{{ old('contact_email') }}" />
            </div>
        </div>
    </div>
</div>

<div class="card shadow-sm mb-6 border border-dashed border-success" id="form-reseller-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 {{ e(config('services.airtable.reseller_name', '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">
            <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>

            <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 elegi un demo...</option>
                </select>
            </div>
        </div>

        <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">Modulos que llevara este proyecto</div>
                <div id="provision-modules-preview" class="d-flex flex-wrap gap-2">
                    <span class="text-muted fs-7">Selecciona demo y core para ver la lista.</span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card shadow-sm mb-6 border border-dashed border-info" id="fr-step-3">
    <div class="card-header min-h-50px py-4 bg-light-info">
        <div class="card-title flex-column align-items-start w-100">
            <span class="badge badge-info mb-2">Paso 3 · Opciones de provisión</span>
            <h3 class="fs-5 fw-bold text-gray-900 mb-0">Personalización</h3>
        </div>
    </div>
    <div class="card-body pt-5">
        <div class="row g-5">
            <div class="col-md-12">
                <div class="form-check form-switch form-check-custom form-check-solid">
                    <input class="form-check-input" type="checkbox" name="clean" value="1" id="provision-clean" checked />
                    <label class="form-check-label fw-semibold" for="provision-clean">
                        Provisión limpia (sin contenido seed)
                    </label>
                </div>
                <div class="form-text text-muted mt-1">
                    Recomendado para resellers: el sitio se entrega vacío para cargar contenido del cliente via <code>bewpro:seed</code>.
                </div>
            </div>

            <div class="col-md-12 mt-5">
                <label class="form-label fw-semibold">Colores de marca <span class="text-muted fs-8">(opcional)</span></label>
                <div class="form-text text-muted mb-3">6 colores HEX separados por coma: primary, secondary, tertiary, quaternary, dark, light</div>
                <div class="row g-3" id="color-inputs-row">
                    @php
                        $colorLabels = ['Primary', 'Secondary', 'Tertiary', 'Quaternary', 'Dark', 'Light'];
                        $colorDefaults = ['#1A325D', '#B8960C', '#F5F5F0', '#6B7280', '#0F1923', '#FFFFFF'];
                    @endphp
                    @foreach($colorLabels as $i => $label)
                    <div class="col-md-2 col-4">
                        <label class="form-label fs-8 text-muted">{{ $label }}</label>
                        <div class="d-flex align-items-center gap-2">
                            <input type="color"
                                class="form-control form-control-color border-0 p-0"
                                style="width:32px;height:32px;cursor:pointer;"
                                data-color-index="{{ $i }}"
                                value="{{ $colorDefaults[$i] }}" />
                            <input type="text"
                                class="form-control form-control-solid form-control-sm color-hex-input"
                                data-color-index="{{ $i }}"
                                value="{{ $colorDefaults[$i] }}"
                                maxlength="7"
                                style="font-family:monospace;width:90px;" />
                        </div>
                    </div>
                    @endforeach
                </div>
                <input type="hidden" name="colors" id="colors-hidden" value="" />
            </div>
        </div>
    </div>
</div>