{% extends "base.html" %}
{% block title %}Business Plan Details — {{ config.APP_NAME }}{% endblock %}

{% block head %}
<style>
  .bp-wrap { max-width: 680px; margin: 0 auto; padding: 3rem 0; }
  .bp-hero { margin-bottom: 2rem; }
  .bp-hero h1 { font-size: 1.5rem; margin-bottom: 0.375rem; }
  .bp-hero p { color: #64748B; font-size: 0.9rem; line-height: 1.5; }
  .bp-card { background: white; border: 1px solid #E2E8F0; border-radius: 14px; padding: 1.75rem; margin-bottom: 1.5rem; }
  .bp-card h2 { font-size: 1rem; font-weight: 700; color: #1E293B; margin: 0 0 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid #F1F5F9; }
  .bp-card h2 span { font-size: 0.75rem; font-weight: 500; color: #94A3B8; margin-left: 8px; }
  .bp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .bp-grid--1 { grid-template-columns: 1fr; }
  .bp-field label { display: block; font-size: 0.8rem; font-weight: 600; color: #475569; margin-bottom: 4px; }
  .bp-field label .opt { font-weight: 400; color: #94A3B8; font-size: 0.75rem; }
  .bp-field input, .bp-field select, .bp-field textarea {
    width: 100%; box-sizing: border-box; border: 1px solid #CBD5E1; border-radius: 8px;
    padding: 0.5rem 0.75rem; font-size: 0.875rem; color: #1E293B;
    background: #FAFAFA; outline: none; font-family: inherit;
  }
  .bp-field input:focus, .bp-field select:focus, .bp-field textarea:focus {
    border-color: #1D4ED8; background: white; box-shadow: 0 0 0 3px rgba(29,78,216,0.1);
  }
  .bp-field textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
  .bp-hint { font-size: 0.75rem; color: #94A3B8; margin-top: 4px; }
  .bp-skip { font-size: 0.8rem; color: #64748B; text-align: center; margin-top: 0.5rem; }
  .bp-skip a { color: #1D4ED8; text-decoration: none; }
  .bp-skip a:hover { text-decoration: underline; }
  .bp-note { background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 8px; padding: 0.875rem 1rem; font-size: 0.8125rem; color: #1E3A8A; margin-bottom: 1.5rem; }
  .bp-note strong { display: block; margin-bottom: 2px; }
</style>
{% endblock %}

{% block content %}
<main class="container-page">
  <div class="bp-wrap">

    <div class="bp-hero">
      <h1>Business Plan Details</h1>
      <p>
        These details make your PDF ready for bank meetings and KfW applications.
        All fields are optional — skip any section and the PDF uses auto-generated placeholders.
      </p>
    </div>

    <div class="bp-note">
      <strong>Scenario: {{ scenario.name }}</strong>
      Narrative details are saved to this scenario. You can update them anytime before generating a new PDF.
    </div>

    <form method="POST" action="/planner/export/details">
      <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
      <input type="hidden" name="scenario_id" value="{{ scenario_id }}">
      <input type="hidden" name="language" value="{{ language }}">

      <!-- Company & Legal -->
      <div class="bp-card">
        <h2>Company &amp; Legal Entity <span>Cover page + throughout</span></h2>
        <div class="bp-grid">
          <div class="bp-field">
            <label for="company_name">Company Name <span class="opt">(optional)</span></label>
            <input type="text" id="company_name" name="company_name"
              value="{{ details.get('company_name', '') }}"
              placeholder="e.g. Padel Cologne GmbH">
          </div>
          <div class="bp-field">
            <label for="legal_entity">Legal Entity <span class="opt">(optional)</span></label>
            <select id="legal_entity" name="legal_entity">
              {% set le = details.get('legal_entity', '') %}
              <option value="" {% if not le %}selected{% endif %}>— Select —</option>
              <option value="GmbH" {% if le == 'GmbH' %}selected{% endif %}>GmbH</option>
              <option value="UG (haftungsbeschränkt)" {% if le == 'UG (haftungsbeschränkt)' %}selected{% endif %}>UG (haftungsbeschränkt)</option>
              <option value="GmbH & Co. KG" {% if le == 'GmbH & Co. KG' %}selected{% endif %}>GmbH &amp; Co. KG</option>
              <option value="GbR" {% if le == 'GbR' %}selected{% endif %}>GbR</option>
              <option value="Einzelunternehmen" {% if le == 'Einzelunternehmen' %}selected{% endif %}>Einzelunternehmen</option>
            </select>
          </div>
        </div>
        <div class="bp-grid">
          <div class="bp-field">
            <label for="planned_location_address">Planned Location / Address <span class="opt">(optional)</span></label>
            <input type="text" id="planned_location_address" name="planned_location_address"
              value="{{ details.get('planned_location_address', '') }}"
              placeholder="e.g. Gewerbepark Nord, Cologne">
          </div>
          <div class="bp-field">
            <label for="planned_opening_date">Planned Opening Date <span class="opt">(optional)</span></label>
            <input type="text" id="planned_opening_date" name="planned_opening_date"
              value="{{ details.get('planned_opening_date', '') }}"
              placeholder="e.g. Q3 2026">
          </div>
        </div>
      </div>

      <!-- Founder Profile -->
      <div class="bp-card">
        <h2>Founder / Management Profile <span>Gründerprofil — required by KfW</span></h2>
        <div class="bp-grid">
          <div class="bp-field">
            <label for="founder_name">Founder Name(s) <span class="opt">(optional)</span></label>
            <input type="text" id="founder_name" name="founder_name"
              value="{{ details.get('founder_name', '') }}"
              placeholder="e.g. Max Mustermann">
          </div>
        </div>
        <div class="bp-grid bp-grid--1">
          <div class="bp-field">
            <label for="founder_background">Background &amp; Qualifications <span class="opt">(optional)</span></label>
            <textarea id="founder_background" name="founder_background"
              placeholder="Briefly describe relevant experience: sports management, hospitality, business background, relevant networks...">{{ details.get('founder_background', '') }}</textarea>
            <p class="bp-hint">2–4 sentences. Banks want to see relevant experience or a credible team composition.</p>
          </div>
        </div>
      </div>

      <!-- Business Description -->
      <div class="bp-card">
        <h2>Business Description <span>Vorhabensbeschreibung</span></h2>
        <div class="bp-grid bp-grid--1">
          <div class="bp-field">
            <label for="facility_description">Facility Concept <span class="opt">(optional)</span></label>
            <textarea id="facility_description" name="facility_description"
              placeholder="Describe the concept: indoor/outdoor, number of courts, target customer segments, service level, opening hours, unique positioning...">{{ details.get('facility_description', '') }}</textarea>
          </div>
        </div>
      </div>

      <!-- Operations -->
      <div class="bp-card">
        <h2>Operations <span>Betriebskonzept + Personalplanung</span></h2>
        <div class="bp-grid bp-grid--1">
          <div class="bp-field">
            <label for="operations_concept">Operations Concept <span class="opt">(optional)</span></label>
            <textarea id="operations_concept" name="operations_concept"
              placeholder="How will the facility be run day-to-day? Opening hours, booking system, court management, maintenance approach...">{{ details.get('operations_concept', '') }}</textarea>
          </div>
          <div class="bp-field">
            <label for="staffing_plan">Staffing Plan <span class="opt">(optional)</span></label>
            <textarea id="staffing_plan" name="staffing_plan"
              placeholder="Planned headcount, roles, hiring timeline. e.g. 1 facility manager, 2 part-time reception, 1 coach...">{{ details.get('staffing_plan', '') }}</textarea>
          </div>
        </div>
      </div>

      <!-- Marketing -->
      <div class="bp-card">
        <h2>Marketing Concept <span>Marketingkonzept</span></h2>
        <div class="bp-grid bp-grid--1">
          <div class="bp-field">
            <label for="marketing_concept">Marketing Approach <span class="opt">(optional)</span></label>
            <textarea id="marketing_concept" name="marketing_concept"
              placeholder="How will you attract and retain customers? Launch strategy, digital channels, club partnerships, corporate clients, loyalty programs...">{{ details.get('marketing_concept', '') }}</textarea>
          </div>
        </div>
      </div>

      <div style="margin-top: 1rem;">
        <button type="submit" class="btn-primary" style="width: 100%; padding: 0.875rem; font-size: 1rem; border-radius: 10px;">
          Save &amp; Continue to Export →
        </button>
        <p class="bp-skip">
          <a href="/planner/export?scenario_id={{ scenario_id }}&language={{ language }}">Skip — generate PDF with auto-filled sections</a>
        </p>
      </div>

    </form>

  </div>
</main>
{% endblock %}
