{% extends 'admin_panel/base.html' %}
{% block page_title %}Site Settings{% endblock %}
{% block content %}
<form method="post" enctype="multipart/form-data" class="card-panel">
  {% csrf_token %}
  <ul class="nav nav-tabs mb-4" role="tablist">
    <li class="nav-item"><button type="button" class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-brand">Brand</button></li>
    <li class="nav-item"><button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-contact">Contact</button></li>
    <li class="nav-item"><button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-social">Social</button></li>
    <li class="nav-item"><button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-trust">Trust Numbers</button></li>
    <li class="nav-item"><button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-popup">Exit Popup</button></li>
    <li class="nav-item"><button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-bot">Chatbot</button></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="tab-brand">
      <div class="row g-3">
        <div class="col-md-6"><label class="form-label">Site Name</label><input type="text" name="site_name" class="form-control" value="{{ site.site_name }}"></div>
        <div class="col-md-6"><label class="form-label">Tagline</label><input type="text" name="tagline" class="form-control" value="{{ site.tagline }}"></div>
        <div class="col-md-12"><label class="form-label">Hero Title (homepage)</label><input type="text" name="hero_title" class="form-control" value="{{ site.hero_title }}"></div>
        <div class="col-md-12"><label class="form-label">Hero Subtitle</label><textarea name="hero_subtitle" rows="2" class="form-control">{{ site.hero_subtitle }}</textarea></div>
        <div class="col-md-12"><label class="form-label">Hero Background Image</label><input type="file" name="hero_image" class="form-control">{% if site.hero_image %}<img src="{{ site.hero_image.url }}" class="mt-2 rounded" style="height:80px;">{% endif %}</div>
        <div class="col-md-12"><label class="form-label">About — Short paragraph (footer/about)</label><textarea name="about_short" rows="3" class="form-control">{{ site.about_short }}</textarea></div>
      </div>
    </div>

    <div class="tab-pane fade" id="tab-contact">
      <div class="row g-3">
        <div class="col-md-6"><label class="form-label">Phone (call number)</label><input type="text" name="phone" class="form-control" value="{{ site.phone }}"></div>
        <div class="col-md-6"><label class="form-label">Phone Secondary (WhatsApp display number)</label><input type="text" name="phone_secondary" class="form-control" value="{{ site.phone_secondary }}" placeholder="+234 809 037 7000"></div>
        <div class="col-md-6"><label class="form-label">WhatsApp Number (digits only, for wa.me link)</label><input type="text" name="whatsapp_number" class="form-control" value="{{ site.whatsapp_number }}" placeholder="2348165535147"></div>
        <div class="col-md-12"><label class="form-label">Email</label><input type="email" name="email" class="form-control" value="{{ site.email }}"></div>
        <div class="col-md-12"><label class="form-label">Address</label><textarea name="address" rows="2" class="form-control">{{ site.address }}</textarea></div>
      </div>
    </div>

    <div class="tab-pane fade" id="tab-social">
      <div class="row g-3">
        <div class="col-md-6"><label class="form-label">Facebook URL</label><input type="url" name="facebook" class="form-control" value="{{ site.facebook }}"></div>
        <div class="col-md-6"><label class="form-label">Instagram URL</label><input type="url" name="instagram" class="form-control" value="{{ site.instagram }}"></div>
        <div class="col-md-6"><label class="form-label">Twitter / X URL</label><input type="url" name="twitter" class="form-control" value="{{ site.twitter }}"></div>
        <div class="col-md-6"><label class="form-label">LinkedIn URL</label><input type="url" name="linkedin" class="form-control" value="{{ site.linkedin }}"></div>
        <div class="col-md-6"><label class="form-label">YouTube URL</label><input type="url" name="youtube" class="form-control" value="{{ site.youtube }}"></div>
        <div class="col-md-6"><label class="form-label">TikTok URL</label><input type="url" name="tiktok" class="form-control" value="{{ site.tiktok }}"></div>
      </div>
    </div>

    <div class="tab-pane fade" id="tab-trust">
      <div class="row g-3">
        <div class="col-md-3"><label class="form-label">Clients (#)</label><input type="number" name="clients_count" class="form-control" value="{{ site.clients_count }}"></div>
        <div class="col-md-3"><label class="form-label">Properties Sold</label><input type="number" name="properties_sold" class="form-control" value="{{ site.properties_sold }}"></div>
        <div class="col-md-3"><label class="form-label">Years Experience</label><input type="number" name="years_experience" class="form-control" value="{{ site.years_experience }}"></div>
        <div class="col-md-3"><label class="form-label">Locations Covered</label><input type="number" name="locations_covered" class="form-control" value="{{ site.locations_covered }}"></div>
      </div>
    </div>

    <div class="tab-pane fade" id="tab-popup">
      <div class="form-check form-switch mb-3"><input type="checkbox" name="popup_enabled" id="pe" class="form-check-input" {% if site.popup_enabled %}checked{% endif %}><label for="pe">Enable exit-intent popup</label></div>
      <div class="row g-3">
        <div class="col-md-12"><label class="form-label">Popup Title</label><input type="text" name="popup_title" class="form-control" value="{{ site.popup_title }}"></div>
        <div class="col-md-12"><label class="form-label">Popup Subtitle</label><textarea name="popup_subtitle" rows="2" class="form-control">{{ site.popup_subtitle }}</textarea></div>
        <div class="col-md-6"><label class="form-label">CTA Button Text</label><input type="text" name="popup_cta" class="form-control" value="{{ site.popup_cta }}"></div>
      </div>
    </div>

    <div class="tab-pane fade" id="tab-bot">
      <div class="form-check form-switch mb-3"><input type="checkbox" name="chatbot_enabled" id="ce" class="form-check-input" {% if site.chatbot_enabled %}checked{% endif %}><label for="ce">Enable chatbot widget</label></div>
      <div class="row g-3">
        <div class="col-md-6"><label class="form-label">Chatbot Name</label><input type="text" name="chatbot_name" class="form-control" value="{{ site.chatbot_name }}"></div>
        <div class="col-md-12"><label class="form-label">Greeting Message</label><textarea name="chatbot_greeting" rows="2" class="form-control">{{ site.chatbot_greeting }}</textarea></div>
      </div>
      <p class="small text-muted mt-3">To customize answers, add entries in <a href="{% url 'analytics:chatbot_kb_list' %}">Chatbot Knowledge</a>.</p>
    </div>
  </div>

  <div class="mt-4"><button class="btn btn-primary btn-lg">Save Settings</button></div>
</form>
{% endblock %}