{{-- Contact fields for demo-accounting-1 — ALL editable fields matching the blade --}}

{{-- 1. PAGE HEADER --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">1. Encabezado de página</h4>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-6">
            <label class="form-label">Heading principal</label>
            <input type="text" name="contact[page_heading]" class="form-control form-control-solid" value="{{ old('contact.page_heading', $siteData['contact']['page_heading'] ?? '') }}" placeholder="Hablemos de tu proyecto" />
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">Subtítulo</label>
            <input type="text" name="contact[page_subtitle]" class="form-control form-control-solid" value="{{ old('contact.page_subtitle', $siteData['contact']['page_subtitle'] ?? '') }}" placeholder="Respondemos en menos de 24 horas" />
        </div>
    </div>
</div>

{{-- 2. FORMULARIO --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">2. Formulario de contacto</h4>
    <p class="text-gray-600 fs-7 mb-4">Labels, placeholders y botón del formulario.</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-3">
            <label class="form-label">Label: Nombre</label>
            <input type="text" name="contact[label_name]" class="form-control form-control-solid" value="{{ old('contact.label_name', $siteData['contact']['label_name'] ?? '') }}" placeholder="Nombre Completo" />
        </div>
        <div class="col-12 col-md-3">
            <label class="form-label">Label: Email</label>
            <input type="text" name="contact[label_email]" class="form-control form-control-solid" value="{{ old('contact.label_email', $siteData['contact']['label_email'] ?? '') }}" placeholder="Correo Electrónico" />
        </div>
        <div class="col-12 col-md-3">
            <label class="form-label">Label: Teléfono</label>
            <input type="text" name="contact[label_phone]" class="form-control form-control-solid" value="{{ old('contact.label_phone', $siteData['contact']['label_phone'] ?? '') }}" placeholder="Teléfono" />
        </div>
        <div class="col-12 col-md-3">
            <label class="form-label">Label: Asunto</label>
            <input type="text" name="contact[label_subject]" class="form-control form-control-solid" value="{{ old('contact.label_subject', $siteData['contact']['label_subject'] ?? '') }}" placeholder="Asunto" />
        </div>
        <div class="col-12 col-md-4">
            <label class="form-label">Label: Mensaje</label>
            <input type="text" name="contact[label_message]" class="form-control form-control-solid" value="{{ old('contact.label_message', $siteData['contact']['label_message'] ?? '') }}" placeholder="Mensaje" />
        </div>
        <div class="col-12 col-md-4">
            <label class="form-label">Placeholder del asunto</label>
            <input type="text" name="contact[subject_placeholder]" class="form-control form-control-solid" value="{{ old('contact.subject_placeholder', $siteData['contact']['subject_placeholder'] ?? '') }}" placeholder="¿En qué podemos ayudarte?" />
        </div>
        <div class="col-12 col-md-4">
            <label class="form-label">Placeholder del mensaje</label>
            <input type="text" name="contact[message_placeholder]" class="form-control form-control-solid" value="{{ old('contact.message_placeholder', $siteData['contact']['message_placeholder'] ?? '') }}" placeholder="Contanos sobre tu negocio..." />
        </div>
        <div class="col-12 col-md-4">
            <label class="form-label">Botón enviar</label>
            <input type="text" name="contact[submit_label]" class="form-control form-control-solid" value="{{ old('contact.submit_label', $siteData['contact']['submit_label'] ?? '') }}" placeholder="Enviar Mensaje" />
        </div>
        <div class="col-12 col-md-4">
            <label class="form-label">Texto "Enviando..."</label>
            <input type="text" name="contact[submit_loading]" class="form-control form-control-solid" value="{{ old('contact.submit_loading', $siteData['contact']['submit_loading'] ?? '') }}" placeholder="Enviando..." />
        </div>
    </div>
</div>

{{-- 3. OPCIONES DE ASUNTO --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">3. Opciones de Asunto</h4>
    <p class="text-gray-600 fs-7 mb-4">Lista de opciones del dropdown "Asunto" del formulario.</p>
    <div class="row g-4 mb-6">
        <div class="col-12">
            @php
                $subjectsRaw = old('contact.subjects', $siteData['contact']['subjects'] ?? '');
                if (is_array($subjectsRaw)) { $subjectsRaw = json_encode($subjectsRaw, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT); }
            @endphp
            <textarea name="contact[subjects]" class="form-control form-control-solid" rows="4">{{ $subjectsRaw }}</textarea>
            <span class="form-text">Array JSON de strings. Ej: ["Consulta General", "Sitio Web", "Soporte"]</span>
        </div>
    </div>
</div>

{{-- 4. SIDEBAR — Calendly y WhatsApp --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">4. Sidebar — CTAs</h4>
    <p class="text-gray-600 fs-7 mb-4">Tarjetas de Calendly y WhatsApp en la barra lateral.</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-6">
            <label class="form-label">Calendly — Heading</label>
            <input type="text" name="contact[calendly_heading]" class="form-control form-control-solid" value="{{ old('contact.calendly_heading', $siteData['contact']['calendly_heading'] ?? '') }}" placeholder="Agendá una reunión" />
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">Calendly — Subtítulo</label>
            <input type="text" name="contact[calendly_subtitle]" class="form-control form-control-solid" value="{{ old('contact.calendly_subtitle', $siteData['contact']['calendly_subtitle'] ?? '') }}" placeholder="30 minutos. Sin compromiso." />
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">Calendly — Botón</label>
            <input type="text" name="contact[calendly_button]" class="form-control form-control-solid" value="{{ old('contact.calendly_button', $siteData['contact']['calendly_button'] ?? '') }}" placeholder="Elegir horario" />
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">WhatsApp — Botón</label>
            <input type="text" name="contact[whatsapp_label]" class="form-control form-control-solid" value="{{ old('contact.whatsapp_label', $siteData['contact']['whatsapp_label'] ?? '') }}" placeholder="Escribinos por WhatsApp" />
        </div>
        <div class="col-12">
            <label class="form-label">Calendly — URL del booking</label>
            <input type="url" name="site[booking_url]" class="form-control form-control-solid" value="{{ old('site.booking_url', $siteData['site']['booking_url'] ?? config('site.booking_url', '')) }}" placeholder="https://calendly.com/tu-usuario/30min" />
            <span class="form-text">URL completa de tu cuenta Calendly. <strong>Si lo dejás vacío, las tarjetas de Calendly NO se renderizan</strong> en el sitio (en su lugar el botón lleva a /contact).</span>
        </div>
    </div>
</div>

{{-- 5. SIDEBAR — Info de contacto --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">5. Sidebar — Información</h4>
    <p class="text-gray-600 fs-7 mb-4">Textos de la sección de información lateral. Teléfono, email y dirección vienen de "La Marca".</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-6">
            <label class="form-label">Heading</label>
            <input type="text" name="contact[sidebar_heading]" class="form-control form-control-solid" value="{{ old('contact.sidebar_heading', $siteData['contact']['sidebar_heading'] ?? '') }}" placeholder="Escribinos" />
        </div>
        <div class="col-12">
            <label class="form-label">Subtítulo</label>
            <input type="text" name="contact[sidebar_subtitle]" class="form-control form-control-solid" value="{{ old('contact.sidebar_subtitle', $siteData['contact']['sidebar_subtitle'] ?? '') }}" placeholder="Respondemos en menos de 24 horas..." />
        </div>
        <div class="col-12 col-md-4">
            <label class="form-label">Heading ubicación</label>
            <input type="text" name="contact[location_heading]" class="form-control form-control-solid" value="{{ old('contact.location_heading', $siteData['contact']['location_heading'] ?? '') }}" placeholder="Dónde estamos" />
        </div>
        <div class="col-12 col-md-4">
            <label class="form-label">Label "Teléfono:"</label>
            <input type="text" name="contact[label_phone_sidebar]" class="form-control form-control-solid" value="{{ old('contact.label_phone_sidebar', $siteData['contact']['label_phone_sidebar'] ?? '') }}" placeholder="Teléfono:" />
        </div>
        <div class="col-12 col-md-4">
            <label class="form-label">Heading horarios</label>
            <input type="text" name="contact[hours_heading]" class="form-control form-control-solid" value="{{ old('contact.hours_heading', $siteData['contact']['hours_heading'] ?? '') }}" placeholder="Horarios" />
        </div>
    </div>
</div>

{{-- 6. HORARIOS --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">6. Horarios de atención</h4>
    <div class="row g-4 mb-6">
        <div class="col-12">
            @php
                $hoursRaw = old('contact.hours_detail', $siteData['contact']['hours_detail'] ?? '');
                if (is_array($hoursRaw)) { $hoursRaw = json_encode($hoursRaw, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT); }
            @endphp
            <textarea name="contact[hours_detail]" class="form-control form-control-solid" rows="4">{{ $hoursRaw }}</textarea>
            <span class="form-text">Ej: [{"day": "Lunes a Viernes", "hours": "9:00 - 16:00"}, {"day": "Sábados", "hours": "Cerrado"}]</span>
        </div>
    </div>
</div>