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

{% block link%}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
{% endblock link %}


{% block content %}
<section class="section">
    <div class="section-body">
        <div class="card">
            <div class="card-header">
                <h4> Schedule {{ campaign_name}} Campaign </h4>
            </div>
            <form method="post" action="{% url 'schedule-campaign' %}">
                {% csrf_token %}
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-5 form-group">
                            <label>Campaign</label>
                            <input type="text" name="campaign_name" class="form-control" value="{{ campaign_name }}" readonly>
                        </div>
                        <div class="col-md-5 form-group">
                            <label>Select Branches</label>
                            <select class="form-control branch" id="branch" name="branch" multiple>

                                {% for branch in branches %}
                                {% if not branch.is_superuser or not branch.is_admin %}
                                <option value="{{ branch.branch_name }}">{{ branch.branch_name }}</option>
                                {% endif %}
                                {% endfor %}
                            </select>

                        </div>
                        <div class="col-md-2 form-group">
                            <label>Select All</label>
                            <div class="mt-1 mr-2">
                                <button class="btn btn-primary btn-sm mr-2" onClick="selectAll();" type="button"><span
                                    class="fa fa-check-circle"></span></button>
                            </div>
                            
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 form-group">   
                            <label>Fixed Rotation</label>
                            <input  type="checkbox" id="fixed" name="fixed_rotation_type" data-toggle="collapse"/>
                        </div>
                        <div class="col-md-4 form-group">   
                            <label>Daily Rotation</label>
                            <input  type="checkbox" id="daily" name="daily_rotation_type" data-toggle="collapse"/>
                        </div>
                        <div class="col-md-4 form-group">   
                            <label>Weekly Rotation</label>
                            <input  type="checkbox" id="weekly" name="weekly_rotation_type" data-toggle="collapse"/>
                        </div>
                    </div>

                    <div class="row" id="fixedForm">
                        <div class="col-md-4 form-group">
                            <label>Start Date</label>
                            <input class="form-control" type="datetime-local" name="start_date" />
                        </div>
                        <div class="col-md-4 form-group">
                            <label>End Date</label>
                            <input class="form-control" type="datetime-local" name="end_date" />
                        </div>
                    </div>

                    <div class="row" id="dailyForm">
                        <div class="col-md-4 form-group">
                            <label>Start Time</label>
                            <input class="form-control" type="time" name="day_start" />
                        </div>
                        <div class="col-md-4 form-group">
                            <label>End Time</label>
                            <input class="form-control" type="time" name="day_end" />
                        </div>
                    </div>

                    <div class="row" id="weeklyForm">
                        <div class="col-md-4 form-group">
                            <label>Days of the Week</label>
                            <select class="form-control" id="week" name="week" multiple>
                                <option value="Monday">Mon</option>
                                <option value="Tuesday">Tue</option>
                                <option value="Wednesday">Wed</option>
                                <option value="Thursday">Thu</option>
                                <option value="Friday">Fri</option>
                                <option value="Saturday">Sat</option>
                                <option value="Sunday">Sun</option>
                            </select>
                        </div>
                        <div class="col-md-4 form-group">
                            <label>Start Time</label>
                            <input class="form-control" type="time" name="week_start" />
                        </div>
                        <div class="col-md-4 form-group">
                            <label>End Time</label>
                            <input class="form-control" type="time" name="week_end" />
                        </div>
                    </div>
                          
                    <div class="row">
                        <div class="col-md-2 form-group">         
                            <button class="btn btn-md btn-primary form-control" type="submit">Submit</button>
                        </div>
                    </div>
                </div>

            </form>
        </div>

    </div>
</section>
{% endblock content %}

{% block script %}
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function () {


        $('#branch').select2()
    })

    function selectAll() {
        let options = $('.branch');

        //  options.

        options.find('option').each(function (i, item) {

            $(this).prop('selected', true).parent().trigger('change')

        })
    }

</script>
<script>
checkbox1 = $('#fixed');
checkbox1Form = $('#fixedForm');
checkbox2 = $('#daily');
checkbox2Form = $('#dailyForm');
checkbox3 = $('#weekly');
checkbox3Form = $('#weeklyForm');

checkbox1Form.hide();
checkbox2Form.hide();
checkbox3Form.hide();

checkbox1.on('click', function () {
if ($(this).is(':checked')) {
    checkbox1Form.show();
    checkbox2.attr('disabled', true);
    checkbox3.attr('disabled', true);
} else {
    checkbox1Form.hide();
    checkbox2.attr('disabled', false);
    checkbox3.attr('disabled', false);  
}
});

checkbox2.on('click', function () {
if ($(this).is(':checked')) {
    checkbox2Form.show();
    checkbox1.attr('disabled', true);
    checkbox3.attr('disabled', true);
} else {
    checkbox2Form.hide();
    checkbox1.attr('disabled', false);
    checkbox3.attr('disabled', false);
}
});


checkbox3.on('click', function () {
if ($(this).is(':checked')) {
    checkbox3Form.show();
    $('#week').select2()
    checkbox1.attr('disabled', true);
    checkbox2.attr('disabled', true);
} else {
    checkbox3Form.hide();
    checkbox1.attr('disabled', false);
    checkbox2.attr('disabled', false);
}
});

</script>
{% endblock script %}