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

<!-- Hero Header Section -->
<div class="card p-5 mb-5 shadow-sm border-0" style="background: linear-gradient(135deg, #04A96D, #038a58); color: white; border-radius: 20px;">
    <div class="row align-items-center gy-4">
        <div class="col-lg-8">
            <span class="badge bg-white text-success mb-3 px-3 py-2 fw-bold shadow-sm" style="border-radius: 30px;">
                <i class="fa-solid fa-code-fork me-1"></i> Interactive Sandbox
            </span>
            <h1 class="display-6 fw-bold text-white">What-if Scenario Simulator</h1>
            <p class="text-white-50 lead mb-0">Simulate profile optimizations dynamically to evaluate how upskilling and internships mitigate graduate unemployment risks.</p>
        </div>
        <div class="col-lg-4 text-lg-end d-none d-lg-block">
            <span class="badge bg-white bg-opacity-10 text-white border border-white-25 px-3 py-2 rounded-pill fs-7">
                <i class="fa-solid fa-flask me-1"></i> Scenario Testing Mode
            </span>
        </div>
    </div>
</div>

<div class="row gx-4 gy-4">
    <!-- Form Input Block -->
    <div class="col-lg-7">
        <div class="card p-4 shadow-sm border-0 rounded-4">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h4 class="fw-bold text-dark mb-1"><i class="fa-solid fa-sliders me-2 text-success"></i> Modify Feature Vectors</h4>
                    <p class="text-muted small mb-0">Adjust parameters to observe instant predictive variance.</p>
                </div>
            </div>

            <!-- Enhanced Result/Output Alerts -->
            {% if result_text %}
            <div class="card border-0 mb-3 p-3 text-center shadow-sm" style="background: #fff3cd; border-left: 5px solid #ffc107 !important; border-radius: 12px;">
                <div class="fw-bold text-warning-emphasis fs-5">
                    <i class="fa-solid fa-triangle-exclamation me-2"></i> {{ result_text }}
                </div>
            </div>
            {% endif %}

            {% if scenario_text %}
            <div class="card border-0 mb-3 p-3 shadow-sm bg-light" style="border-left: 5px solid #6c757d !important; border-radius: 12px;">
                <div class="text-dark small">
                    <i class="fa-solid fa-circle-info text-secondary me-2"></i> {{ scenario_text }}
                </div>
            </div>
            {% endif %}

            {% if recommendations %}
            <div class="card border-0 mb-4 p-3 shadow-sm" style="background: #e2f0d9; border-left: 5px solid #04A96D !important; border-radius: 12px;">
                <strong class="text-success mb-2 d-block"><i class="fa-solid fa-wand-magic-sparkles me-2"></i> Recommended Strategic Interventions:</strong>
                <ul class="mb-0 text-muted small ps-3">
                    {% for rec in recommendations %}
                    <li class="mb-1">{{ rec }}</li>
                    {% endfor %}
                </ul>
            </div>
            {% endif %}

            <!-- Main Interactive Form -->
            <form action="/whatif" method="POST">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold text-secondary small">Current Study Program</label>
                        <select name="Current Study" class="form-select border-light-subtle shadow-none rounded-3" required>
                            <option value="BSc in CSE">BSc in CSE</option>
                            <option value="BSc in CE">BSc in CE</option>
                            <option value="BSc in EEE">BSc in EEE</option>
                            <option value="BSc in Textile">BSc in Textile</option>
                            <option value="BBA">BBA</option>
                            <option value="BBA in Marketing">BBA in Marketing</option>
                            <option value="MBA">MBA</option>
                            <option value="Masters">Masters</option>
                            <option value="LL.B">LL.B</option>
                            <option value="BA in English">BA in English</option>
                            <option value="BA Honours">BA Honours</option>
                            <option value="MA">MA</option>
                            <option value="MSS">MSS</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold text-secondary small">Age Group</label>
                        <select name="Age Group" class="form-select border-light-subtle shadow-none rounded-3">
                            <option value="18-22">18-22 Years</option>
                            <option value="23-26">23-26 Years</option>
                            <option value="27-30">27-30 Years</option>
                            <option value="30+">Above 30</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold text-secondary small">Gender Identity</label>
                        <select name="Gender" class="form-select border-light-subtle shadow-none rounded-3">
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                            <option value="Prefer not to say">Prefer not to say</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold text-secondary small">University Type</label>
                        <select name="University Type" class="form-select border-light-subtle shadow-none rounded-3">
                            <option value="Private">Private University</option>
                            <option value="Public">Public University</option>
                            <option value="National">National University</option>
                            <option value="International">International University</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold text-secondary small">Domain/Field</label>
                        <select name="Field" class="form-select border-light-subtle shadow-none rounded-3">
                            <option value="cse">CSE & IT</option>
                            <option value="engineering">Non-IT Engineering</option>
                            <option value="business">Business & Commerce</option>
                            <option value="arts">Arts & Social Sciences</option>
                            <option value="other">Other Disciplines</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold text-secondary small">CGPA Tier</label>
                        <select name="CGPA" class="form-select border-light-subtle shadow-none rounded-3">
                            <option value="3.61-4.00">3.61 - 4.00 (Excellent)</option>
                            <option value="3.31-3.60">3.31 - 3.60 (Good)</option>
                            <option value="3.01-3.30">3.01 - 3.30 (Average)</option>
                            <option value="2.50-3.00">2.50 - 3.00 (Below Average)</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold text-secondary small">Primary Skill Set</label>
                        <select name="Skill Type" class="form-select border-light-subtle shadow-none rounded-3">
                            <option value="programming">Technical/Programming</option>
                            <option value="communication">Corporate Communication</option>
                            <option value="business_logic">Business Logic & Strategy</option>
                            <option value="marketing">Digital Marketing</option>
                            <option value="design">UI/UX & Graphics Design</option>
                            <option value="none">No Certified Skills</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold text-secondary small">Internship History</label>
                        <select name="Internship" class="form-select border-light-subtle shadow-none rounded-3">
                            <option value="none">No Internship Experience</option>
                            <option value="1-3">1 to 3 Months</option>
                            <option value="3-6">3 to 6 Months</option>
                            <option value="6_more">More than 6 Months</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold text-secondary small">Weekly Development/Upskilling Hours</label>
                        <select name="wkly_dev_skill" class="form-select border-light-subtle shadow-none rounded-3">
                            <option value="0">0 Hours (Inactive)</option>
                            <option value="1-3">1 to 3 Hours/Week</option>
                            <option value="4-7">4 to 7 Hours/Week</option>
                            <option value="8-10">8 to 10 Hours/Week</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold text-secondary small">Target Job Platform</label>
                        <select name="Job Platform" class="form-select border-light-subtle shadow-none rounded-3">
                            <option value="linkedin">LinkedIn Professional Networking</option>
                            <option value="bdjobs">BDJobs Corporate Portal</option>
                            <option value="network">Personal Alumni Network</option>
                            <option value="facebook">Social Media/Facebook Groups</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold text-secondary small">Prior Experience Mandatory?</label>
                        <select name="Experience Requirement" class="form-select border-light-subtle shadow-none rounded-3">
                            <option value="no">No (Targeting Freshers Entry-level)</option>
                            <option value="yes">Yes (Targeting Experienced Roles)</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold text-secondary small">Institutional Career Support</label>
                        <select name="Support" class="form-select border-light-subtle shadow-none rounded-3">
                            <option value="career_guidance">University Career Guidance</option>
                            <option value="training">Technical Bootcamp Training</option>
                            <option value="internship">Placement Internships</option>
                            <option value="government_programs">External Government Initiatives</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold text-secondary small">Aligned with Modern Ed-System?</label>
                        <select name="Education System" class="form-select border-light-subtle shadow-none rounded-3">
                            <option value="yes">Yes (Industry Oriented Curriculum)</option>
                            <option value="no">No (Theoretical/Backdated Curriculum)</option>
                            <option value="not_sure">Neutral / Not Sure</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold text-secondary small">Geographical Location</label>
                        <select name="location" class="form-select border-light-subtle shadow-none rounded-3">
                            <option value="dhaka_metro_politan">Dhaka Metropolitan Area</option>
                            <option value="district_town">District Headquarter Town</option>
                            <option value="other_divisional_city">Other Divisional City</option>
                            <option value="rural_area">Rural/Suburban Area</option>
                        </select>
                    </div>
                    <div class="col-md-12">
                        <label class="form-label fw-semibold text-secondary small">Active Job Hunting Duration</label>
                        <select name="Job Search Time" class="form-select border-light-subtle shadow-none rounded-3">
                            <option value="less_6_months">Less than 6 Months</option>
                            <option value="6_12_months">6 to 12 Months</option>
                            <option value="1_2_years">1 to 2 Years</option>
                            <option value="2_plus_years">Long-term (More than 2 Years)</option>
                        </select>
                    </div>
                </div>
                <div class="text-center mt-5">
                    <button type="submit" class="btn btn-success btn-lg px-5 py-3 fw-bold shadow-sm" style="background-color: #04A96D; border-color: #04A96D; border-radius: 12px; font-size: 1.05rem;">
                        <i class="fa-solid fa-rotate me-2"></i> Run Scenario Simulation
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Right Guidance Panel -->
    <div class="col-lg-5">
        <div class="card p-4 shadow-sm border-0 rounded-4 mb-4 bg-white">
            <h4 class="fw-bold text-dark mb-3"><i class="fa-solid fa-chart-line text-success me-2"></i> Simulation Guide</h4>
            <p class="text-muted small">Use this simulator to demonstrate the optimization capabilities of your model to the defense board. Try these standard edge cases:</p>
            
            <div class="row g-3 mt-2">
                <div class="col-12">
                    <div class="p-3 rounded-4 bg-light border-start border-success border-3">
                        <strong class="text-success small d-block mb-1"><i class="fa-solid fa-arrow-up-right-dots me-1"></i> Scenario A: Upskilling Impact</strong>
                        <p class="mb-0 text-muted extra-small" style="font-size: 0.85rem;">Switch Primary Skill Set from <strong>'None'</strong> to <strong>'Technical/Programming'</strong> and check the risk shift.</p>
                    </div>
                </div>
                <div class="col-12">
                    <div class="p-3 rounded-4 bg-light border-start border-primary border-3">
                        <strong class="text-primary small d-block mb-1"><i class="fa-solid fa-business-time me-1"></i> Scenario B: Experiential Weight</strong>
                        <p class="mb-0 text-muted extra-small" style="font-size: 0.85rem;">Inject <strong>'3 to 6 Months'</strong> of Internship history while keeping academic CGPA at an average tier.</p>
                    </div>
                </div>
                <div class="col-12">
                    <div class="p-3 rounded-4 bg-light border-start border-warning border-3">
                        <strong class="text-warning-emphasis small d-block mb-1"><i class="fa-solid fa-hourglass-half me-1"></i> Scenario C: Learning Consistency</strong>
                        <p class="mb-0 text-muted extra-small" style="font-size: 0.85rem;">Scale up Weekly Development Hours to <strong>'8-10 Hours'</strong> to simulate rigorous self-regulated learning.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="card p-4 shadow-sm border-0 rounded-4 bg-dark text-white">
            <h4 class="fw-bold text-white mb-3"><i class="fa-solid fa-graduation-cap text-success me-2"></i> Viva / Defense Tip</h4>
            <p class="text-white-50 small mb-3">Explain to the external examiners that this page serves as a <strong>Decision Support System (DSS)</strong> for educational policy-makers and university career centers to design data-driven curriculums.</p>
            <div class="p-3 rounded-3 bg-white bg-opacity-10 text-success fw-semibold small text-center">
                <i class="fa-solid fa-circle-check me-1"></i> Perfect for interactive cross-validation demos!
            </div>
        </div>
    </div>
</div>

{% endblock %}