{% extends 'base.html' %}
{% block content %}

<style>
  .daywise-container { max-width: 1200px; margin: 0 auto; }

  .generator-card {
    background: white; border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #e0e0e0; overflow: hidden;
  }

  .generator-header {
    background: linear-gradient(135deg, #0f5f7a 0%, #1a8ba8 100%);
    color: white; padding: 25px 30px;
    font-size: 20px; font-weight: 600;
    display: flex; align-items: center; gap: 12px;
  }

  .form-body { padding: 40px; }

  .form-label-modern {
    color: #444; font-size: 13px; font-weight: 600;
    margin-bottom: 8px; display: block; text-transform: uppercase; letter-spacing: 0.5px;
  }

  .form-control-modern, .form-select-modern {
    background: #f8f9fa; border: 1px solid #dee2e6;
    border-radius: 8px; padding: 12px 16px; font-size: 15px; color: #333;
  }
  
  .form-control-modern:focus, .form-select-modern:focus {
    background: #fff; border-color: #0f5f7a;
    box-shadow: 0 0 0 3px rgba(15, 95, 122, 0.15); outline: none;
  }

  .btn-generate {
    background: #0f5f7a; color: white; border: none;
    border-radius: 50px; padding: 12px 40px;
    font-size: 16px; font-weight: 600; transition: 0.2s;
    display: inline-flex; align-items: center; gap: 10px;
  }
  .btn-generate:hover:not(:disabled) {
    background: #0a485e; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(15, 95, 122, 0.3);
  }
  .btn-generate:disabled { background: #ccc; cursor: not-allowed; }

  /* Loader */
  .loading-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.9); z-index: 9999;
    align-items: center; justify-content: center; flex-direction: column;
  }
  .loader-spinner {
    width: 50px; height: 50px; border: 5px solid #f3f3f3;
    border-top: 5px solid #0f5f7a; border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

  @media (max-width: 768px) {
    .form-body { padding: 20px; }
    .btn-generate { width: 100%; justify-content: center; }
  }
</style>

<div class="daywise-container">
    <div class="generator-card">
        <div class="generator-header">
            <i class="bi bi-stars"></i>
            <span>Create New Content</span>
        </div>

        <div class="form-body">
            <form method="POST" action="{{ url_for('content_bp.generate_text') }}" id="textForm">
                
                <div class="row g-4 mb-4">
                    <div class="col-md-4">
                        <label class="form-label-modern">Content Length <span class="text-danger">*</span></label>
                        <select name="content_length" class="form-select form-select-modern" required>
                            <option value="" disabled selected>Select...</option>
                            <option>Short</option><option>Medium</option><option>Lengthy</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label-modern">Duration <span class="text-danger">*</span></label>
                        <select name="content_schedule" class="form-select form-select-modern" required>
                            <option value="" disabled selected>Select...</option>
                            <option>Single Day</option><option>2 Days</option><option>5 Days</option>
                            <option>1 Week</option><option>2 Weeks</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label-modern">Start Date <span class="text-danger">*</span></label>
                        <input type="date" name="start_date" class="form-control form-control-modern" required>
                        <small id="dateHelp" class="text-muted" style="font-size: 11px;"></small>
                    </div>
                </div>

                <div class="mb-4">
                    <label class="form-label-modern">Topic / Context <span class="text-danger">*</span></label>
                    <input type="text" class="form-control form-control-modern" name="topic_context" placeholder="What should the content be about?" required>
                </div>

                <div class="row g-4 mb-4">
                    <div class="col-md-3">
                        <label class="form-label-modern">Purpose</label>
                        <select class="form-select form-select-modern" name="purpose_goal" required>
                            <option>Awareness</option><option>Engagement</option><option>Leads</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label-modern">Audience</label>
                        <select class="form-select form-select-modern" name="target_audience" required>
                            <option>Professionals</option><option>Students</option><option>Recruiters</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label-modern">Tone</label>
                        <select class="form-select form-select-modern" name="tone_of_voice" required>
                            <option>Professional</option><option>Inspiring</option><option>Storytelling</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label-modern">Format</label>
                        <select name="formatting" class="form-select form-select-modern">
                            <option>Short & Punchy</option><option>Story Format</option><option>Listicle</option>
                        </select>
                    </div>
                </div>

                <div class="row g-4 mb-5">
                    <div class="col-md-6">
                        <label class="form-label-modern">Keywords</label>
                        <input type="text" name="keywords" class="form-control form-control-modern" placeholder="e.g. innovation, AI">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label-modern">Hashtags</label>
                        <input type="text" name="hashtags" class="form-control form-control-modern" placeholder="Leave blank to auto-generate">
                    </div>
                </div>

                <div class="text-center">
                    {% if not session.get('linkedin_token') %}
                        <a href="{{ url_for('auth_bp.linkedin_login') }}" class="btn-generate" style="background:#6c757d; text-decoration:none;">
                            <i class="bi bi-lock-fill"></i> Connect LinkedIn First
                        </a>
                    {% else %}
                        <button type="submit" class="btn-generate">
                            <i class="bi bi-magic"></i> Generate Content
                        </button>
                    {% endif %}
                </div>
            </form>
        </div>
    </div>
</div>

<div class="loading-overlay" id="textLoading">
    <div class="loader-spinner"></div>
    <h5 class="mt-4" style="color: #0f5f7a;">Generating Content...</h5>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const dateInput = document.querySelector('input[name="start_date"]');
    const dateHelp = document.getElementById('dateHelp');

    if (dateInput) {
        const now = new Date();
        let minDate = new Date(now);

        // Check if current time is past 11:10 AM
        // getHours() returns 0-23, getMinutes() returns 0-59
        if (now.getHours() > 11 || (now.getHours() === 11 && now.getMinutes() > 10)) {
            // It's after 11:10 AM, so set minimum date to Tomorrow
            minDate.setDate(minDate.getDate() + 1);
            // if(dateHelp) dateHelp.textContent = "Scheduling closed for today (cutoff 11:10 AM). Starting from tomorrow.";
        }

        // Format to YYYY-MM-DD for the input attribute
        // We do manual formatting to ensure we use Local Time, not UTC
        const year = minDate.getFullYear();
        const month = String(minDate.getMonth() + 1).padStart(2, '0');
        const day = String(minDate.getDate()).padStart(2, '0');
        const minDateString = `${year}-${month}-${day}`;

        dateInput.setAttribute('min', minDateString);
        
        // Optional: Set default value
        // dateInput.value = minDateString; 
    }
  });

  document.getElementById('textForm').addEventListener('submit', () => {
    document.getElementById('textLoading').style.display = 'flex';
  });
</script>
{% endblock %}