{% extends "base.html" %}
{% load static %}

{% block style %}
<style>
    .row .col-md-6:nth-child(1) .panel {
        background-color: #F76B78;
    }

    .row .col-md-6:nth-child(2) .panel {
        background-color: #DC4353;
    }

    .row .col-md-6:nth-child(3) .panel {
        background-color: #C41E2E;
    }

    .row .col-md-6:nth-child(4) .panel {
        background-color: #9B0C1A;
    }

    .row .col-md-6:nth-child(1) .panel button {
        background-color: #F76B78;
        border-color: #F76B78;
    }

    .row .col-md-6:nth-child(2) .panel button {
        background-color: #DC4353;
        border-color: #DC4353;
    }

    .row .col-md-6:nth-child(3) .panel button {
        background-color: #C41E2E;
        border-color: #C41E2E;
    }

    .row .col-md-6:nth-child(4) .panel button {
        background-color: #9B0C1A;
        border-color: #9B0C1A;
    }

    .text-danger {
        margin-left: 0px;
    }

    input[type='file'] {
        height: auto;
        width: auto;
        opacity: 1;
    }

    .slider {
        width: 100% !important;
    }

    .hunt-form .form-group {
        margin-top: 10px;
        align-items: center !important;
    }
    #start-hunt-root{
        width: 100%;
        display: flex;
        justify-content: center; align-items: center;
        padding: 30px;

    }
    .main{
        width: 500px;
        height: max-content;
        padding: 20px;
        background-color: white;
        box-shadow:  0px 0px 10px rgb(174, 174, 174);
    }
    .title{
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
    }
    .title p{
        font-size: 5rem;
        font-weight:900;
        margin: 10px;
    }

    .input-container {
    display: flex;
    width: 100%;
    margin-bottom: 15px;
    }

    /* Style the form icons */
    .icon {
    padding: 10px;
    background: rgb(255, 30, 30);
    color: white;
    min-width: 50px;
    text-align: center;
    }

    /* Style the input fields */
    .input-field {
    width: 100%;
    padding: 10px;
    outline: none;
    }

    .input-field:focus {
    border: 1px solid rgb(255, 30, 30);
    }

    #bughunt-submit{
        display: flex;
        width: 100%;
        justify-content: flex-end;
        align-items: center;
        margin-top: 10px;
    }
    #bughunt-submit button {
        background-color: rgb(255, 30, 30);
        color: white;
        padding: 10px 10px;
        border: none;
        cursor: pointer;
        width: 200px;
        opacity: 0.9;
        font-size: 1.5rem;
        font-weight: bold;
    }

    #bughunt-submit button:hover {
        background-color: rgb(203, 0, 0);
    }

    #bughunt-select-plan{
        padding: 10px 10px 10px 10px;
        width: 100%;
        border-radius: 0;
        border: none;
        background-color: rgba(255, 0, 0, 0.784);
        color: white;
        font-size: 1.4rem;
        font-weight: bold;
    }

    @media (max-width:1222px) {
        .title p{
            font-size: 4rem ;
        }
    }

    @media (max-width:498px) {
        .main{
            width: 95vw;
        }
        .panel-title p{
            font-size: 1rem;
        }
        .title p{
            font-size: 3rem;
        }
    }

</style>
{% endblock %}

{% block content %}
<script src="{% static "js/jquery.validate.js" %}"></script>
<link href="{% static "css/bootstrap-slider.css" %}" rel="stylesheet">
<form role="form" action="/hunt/" method="post" enctype="multipart/form-data" class="hunt-form">
    {% csrf_token %}
    <div id="start-hunt-root">
        <div class="row main">
            <div class="panel-heading">
                <div class="panel-title text-center">
                    <div class="title">
                        <p >START A </p>  
                        <p style="color: red;">BUGHUNT</p> 
                    </div>
                    <p style="font-weight: bold;">Enter URL, APP name or GPS location of issue</p>
                    <hr />
                </div>
            </div>
                {% csrf_token %}
                <div class="form-group">

                    <div class="input-container">
                        <i class="fa fa-bug icon" aria-hidden="true"></i>
                        <input class="input-field url required" type="text" placeholder="Name of the bughunt" name="name">
                    </div>
                    {% if form.url.errors %}
                    <label id="url-error" class="error" for="url">{{ form.url.errors }}</label>
                    {% endif %}
                </div>
                <div class="form-group">

                    <div class="input-container">
                        <i class="fa fa-link icon" aria-hidden="true"></i>
                        <input class="input-field url required" type="text" placeholder="http://example.com" name="url" 
                            value="{{ form.url.value|default:"" }}">
                    </div>
                    {% if form.url.errors %}
                    <label id="url-error" class="error" for="url">{{ form.url.errors }}</label>
                    {% endif %}
                </div>
                <div class="form-group">
                    <div class="input-container">
                        <i class="fa fa-file-picture-o icon" aria-hidden="true"></i>
                        <input class="input-field url required" type="file" name="logo" style="width: 100%; border:1px solid #1f1f1f77">
                    </div>
                    {% if form.logo.errors %}
                    <label id="url-error" class="error" for="url">{{ form.logo.errors }}</label>
                    {% endif %}
                </div>
                <div class="input-group">
                    <div class="input-container">
                        <i class="fa fa-pencil-square-o icon" aria-hidden="true"></i>
                        <textarea data-required="true" name="description" id="description"
                            data-intro="Description of Issue" data-step="2" class="input-field url required"
                            rows="3" cols="100%" placeholder="Describe bug issue">
                        </textarea>
                    </div>
                </div>
                <div class="form-group">
                    <select name="plan" value="Flea" id="bughunt-select-plan">
                        <option value="Flea">Flea Plan $9.00 / Month</option>
                        <option value="Ant">Ant Plan $99.00 / Month</option>
                        <option value="Wasp">Wasp Plan $499.00 / Month</option>
                        <option value="Scorpion">Scorpion Plan $1499.00 / Month</option>
                    </select>
                </div>
                <div class="form-group">
                    <strong>Grand Prize:</strong>
                    <p>Max amout awarded to winner</p>
                    <div>
                        <input class="slider" type="text" name="prize" value="{{ form.prize.value|default:'100' }}"
                            data-provide="slider" data-slider-min="100" data-slider-max="10000" data-slider-step="100"
                            data-slider-value="{{ form.prize.value|default:'100' }}">
                    </div>
                    {{ form.prize.errors }}
                </div>

                {% if not user.is_authenticated %}
                <br><span class="text-danger"><a href="/accounts/login">*Login required</a></span>
                {% else %}
                <div class="form-group" id="bughunt-submit">
                    <button type="submit">START BUGHUNT!</button>
                </div>
                {% endif %}
        </div>
    </div>

<h1 class="page-sub-header">Subscription:</h1>
{% include '_subscriptions.html' %}
<div class="row">
    <div class="col-lg-12">
        <div class="free-plan-text">
            <h2>Free Plan:</h2>
            <p>Limited to 5 bugs per month:</p>
        </div>
        <button type="submit" class="submit_button" onclick="javascript:document.getElementById('plan').value='Free'"
            class="btn btn-primary btn-lg">
            Start
        </button>
        <br><br>
    </div>
</div>
</form>
{% endblock %}

{% block after_js %}
<script src="{% static "js/bootstrap-slider.js" %}"></script>

<script>
    {% comment %} $('.btn').on('click', function () {
        $(".hunt-form").valid();
    }); {% endcomment %}

    function numberWithCommas(x) {
        var parts = x.toString().split(".");
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return parts.join(".");
    }

    $(".slider").slider({
        tooltip: 'always',
        formatter: function (value) {
            return '$' + numberWithCommas(value);
        }
    });
</script>
{% endblock %}