{% extends 'base.html' %}

{% block content %}
<h4 id="date-update"></h4>
<div id='intro_text' name='intro_text' class="intro-text">
    <h2>Welcome to the Track Review Sign-Up Page!</h2>
    <p>Have you tried Track Review and would like alerts when there are new Premium Recommendations for you?</p>
    <p>Fill out the form below and you will get an email every time we have a new Premium Recommendation.</p>
    <p>Our alerts are built to be "Quiet", meaning we only email you if there is something worth visiting our app to see.</p>
    <p>If you have any questions or feedback, please reach out to the SMEDS team.</p>
</div>
<style>
    .intro-text {
        text-align: center;
        background-color: #f0f8ff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }

    .intro-text h2 {
        color: #c42a93;
        margin-bottom: 10px;
    }

    .intro-text p {
        color: #333;
        margin: 5px 0;
    }

    .congratsbox {
        display: none;
    }

</style>

<div id="formContainer" class="form-container">
    <div id="congratsbox" display="none" class="congratsbox">
        <h2>Congrats on signing up!</h2>
        <p>Starting tomorrow you will receive an email if there is a Premium Recommendation that meets your criteria.</p>
    </div>
    <form id="filterForm" action="" method="post" class="styled-form">

        <div class="form-group">
            <label for="repOwnerSelect">Label/Rep Owner:</label>
            <select id="repOwnerSelect" name="repOwnerSelect" class="form-control"></select>
        </div>

        <div class="form-group">
            <label for="eraSelect">Frontline/Catalog</label>
            <select id="eraSelect" name="eraSelect" class="form-control">
                <option value="ALL">ALL</option>
                <option value="Frontline">Frontline (Released 2025+)</option>
                <option value="Catalog">Catalog (Released Pre-2025)</option>
            </select>
        </div>

        <div class="form-group">
            <label for="countrySelect">Country</label>
            <select id="countrySelect" name="countrySelect" class="form-control"></select>
        </div>

        <div class="form-group">
            <label for="streamRangev2">Avg Daily Streams Min</label>
            <input type="range" id="streamRangev2" name="streamRangev2" min="0" max="100000" step="10000" value="0" class="form-control-range">
            <span id="streamRangeValue">0</span>
        </div>

        <div class="form-actions">
            <input type="submit" id="submitButton" value="Sign-Up" class="btn btn-primary">
        </div>
    </form>
</div>

<style>
    .form-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
        background-color: #f9f9f9;
        border-radius: 8px;
        box-shadow: 0 8px 16px rgba(208, 77, 208, 0.83);
    }

    .styled-form {
        display: flex;
        flex-direction: column;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }

    .form-control {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    /* slider */
    .form-control-range {
    -webkit-appearance: none;
    appearance: none;
    width: 150px;
    height: 10px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none; /* Remove outline */
    margin-top: 10px; /* Add margin top */
    margin-bottom: 20px; /* Add margin bottom */
    }

    .form-control-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #c42aba;
    cursor: pointer;
    }

    .form-control-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #c22ac4;
    cursor: pointer;
    }

    .form-actions {
        display: flex;
        justify-content: space-between;
    }

    .btn {
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .btn-primary {
        background-color: #5f0060;
        color: rgb(255, 255, 255);
    }

    .btn-secondary {
        background-color: #6c757d;
        color: white;
    }

    .btn:hover {
        opacity: 0.9;
    }

    .btn:disabled {
        background-color: transparent;
        color: grey;
        border: 1px solid grey;
        cursor: not-allowed;
    }
</style>


<script>

	const incoming_values = {
        current_endpoint: "{{ current_endpoint|safe }}",
        filter_status: {{ filter_status|tojson|safe }},
        congrats: {{ congrats|safe }}
    };

    console.log(incoming_values);

    const rep_owners = ["ALL", "Legacy", "RCA", "Columbia",
        "Epic", "5020 Records", "Sony Nashville", "Alamo", "Arista",
        "Provident", "RECORDS", "Ultra", "Masterworks",
        "Milan", "Ministry of Sound", "Century Media", "Black Butter", "Sony International Network",
        "SME International Marketing", "The Orchard", "AWAL", "SME Australia", "SME India",
        "SME UK", "SME Germany", "SME France", "SME Italy", "SME Sweden"
        ];

    const selectRepElement = document.getElementById("repOwnerSelect");

    rep_owners.forEach(repowner => {
        const option = document.createElement("option");
        option.value = repowner;
        option.textContent = repowner;
        selectRepElement.appendChild(option);
    });

    // Update the selected value based on context.filter_status.rep_owner if it's not None
    if (incoming_values.filter_status.rep_owner_choice) {
        selectRepElement.value = incoming_values.filter_status.rep_owner_choice;
    }

    const countries = ['ALL', 'ex-US', 'US', 'US_Latin', 'FR', 'SE', 'MX', 'BR', 'DE', 'GB', 'ex-GB', 'IN', 'CA', 'ES', 
        'IT', 'AR', 'AU', 'CL', 'CO', 'NL', 'PH', 'CH', 'ZA', 
        'IE', 'NZ', 'PT', 'TW', 'JM', 'PE', 'CR', 'BS', 'HN', 
        'GD', 'EC', 'DO', 'SV', 'UY', 'PA', 'HT', 'MS', 'BO', 'BM', 
        'PY', 'DM', 'VE', 'GT', 'DK', 'NO', 'SA', 'PL', 'BE', 'EG',
        'ID', 'TH', 'MY', 'SG', 'VN', 'HK', 'AT'
    ];

    const selectCountryElement = document.getElementById("countrySelect");

    countries.forEach(country => {
        const option = document.createElement("option");
        // option.value = country.toLowerCase().replace(/\s+/g, "-"); // Nice for form submission
        option.value = country
        option.textContent = country;
        selectCountryElement.appendChild(option);
    });

    if (incoming_values.filter_status.geo_country_choice) {
        selectCountryElement.value = incoming_values.filter_status.geo_country_choice;
    }

    const selectEraElement = document.getElementById('eraSelect');
    if (incoming_values.filter_status.era_choice) {
        selectEraElement.value = incoming_values.filter_status.era_choice;
    }

    const selectStreamsElement = document.getElementById('streamRangev2');
    if (incoming_values.filter_status.streamRange_choice) {
        selectStreamsElement.value = incoming_values.filter_status.streamRange_choice;
    }

    const form = document.getElementById('filterForm');
    const congratsbox = document.getElementById('congratsbox');

    if (incoming_values.congrats === 1) {
        congratsbox.style.display = 'block';
        form.style.display = 'none';
    }

    document.addEventListener('DOMContentLoaded', function() {
        
        const streamRange = document.getElementById('streamRangev2');
        const streamRangeValue = document.getElementById('streamRangeValue');

        streamRangeValue.textContent = streamRange.value;
        streamRange.addEventListener('input', function() {
            streamRangeValue.textContent = streamRange.value;
        });

    });

</script>


{% endblock %}