{% extends 'base/base.html' %}
{% load static %}
{% block title %} {{ object.name }} {% endblock %}

{% block body %}
    {% include 'base/nav-bar.html' %}
    <div id="wrap">
        <div id="main">
            <!-- content goes here -->
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-block">
                                <h1 class="card-title">{{ object.name }}</h1>
                                <h4 class="card-subtitle mb-2">{{ object.batch }}, <span style="font-size:20px"
                                                                                         class="text-muted">{{ object.email }}</span>
                                </h4>
                                <hr>
                                <h4>Why do you want to join?</h4>
                                <p class="card-text">{{ object.motivation }}</p>
                                <h4>Technical knowledge</h4>
                                <p class="card-text">{{ object.cs_background }}</p>
                                <h4>Interests</h4>
                                <p class="card-text">{{ object.interests }}</p>
                                <h4>How would you contribute to the club</h4>
                                <p class="card-text">{{ object.contribution }}</p>
                                <p class="card-text">
                                    <small class="text-muted">{{ object.date }}</small>
                                </p>
                                {% if object.is_approved %}
                                    <hr>
                                    <div class="alert alert-success" role="alert">
                                        <strong>Approved!</strong> Mail has been sent to this applicant.
                                    </div>
                                {% endif %}
                                {% if object.is_rejected %}
                                    <hr>
                                    <div class="alert alert-danger" role="alert">
                                        <strong>Rejected!</strong> Mail has sent to this applicant.
                                    </div>
                                {% endif %}
                                {% ifequal object.is_rejected object.is_approved %}
                                    <div id="buttons">
                                        <hr>
                                        <button id="approve" onclick="control(1)" class="btn btn-success card-link">
                                            Approve
                                        </button>
                                        <button id="reject" onclick="control(2)" class="btn btn-danger card-link">
                                            Reject
                                        </button>
                                    </div>
                                {% endifequal %}
                                {% if mail_error %}
                                    <div class="error alert alert-danger" role="alert">
                                        <strong>error!</strong> {{ mail_error }}.
                                    </div>
                                {% endif %}
                                <div style="display: none;" id="mail_form">
                                    <form method="post" action="{% url 'join_update' object.id %}">
                                        <hr>
                                        {% csrf_token %}
                                        <h2 id="head">Sent mail</h2>
                                        <input style="display: none" id="option" value="" name="">
                                        <div class="form-group">
                                            <label for="mail_id">To</label>
                                            <input type="email" class="form-control" name="mail_id" id="mail_id"
                                                   value="{{ object.mail_subject }}" placeholder="Mail Id">
                                        </div>
                                        <div class="form-group">
                                            <label for="subject">Subject</label>
                                            <input type="text" class="form-control" name="mail_subject" id="subject"
                                                   value="{{ object.mail_subject }}" placeholder="Subject">
                                            <small class="form-text text-muted">
                                                Subject of the mail
                                            </small>
                                        </div>
                                        <div class="form-group">
                                            <label for="mail_content">Description</label>
                                            <textarea rows="10" name="mail_content" class="form-control"
                                                      placeholder="Mail content" id="mail_content" rows="5">
                                                {{ object.mail_content }}
                                            </textarea>
                                            <small class="form-text text-muted">
                                                Content of the mail
                                            </small>
                                        </div>
                                        <button id="submit-btn" type="submit" class=""></button>
                                        <div onclick="control(3)" class="btn btn-secondary">Cancel</div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% include 'base/footer.html' %}
    <style>

        .error {
            margin: 20px 0;
        }

        .card {
            margin: 70px 5% 0 5%;
            padding: 0;
        }

        @media (min-width: 768px) {
            /* Desktops */
            .card {
                margin: 70px 13% 0 13%;
                padding: 40px;
            }

            .card-text {
                margin: 10px 20px 20px 0;
            }
        }

        h4 {
            margin: 20px 0;
        }

        @media (max-width: 600px) {
            /* smartphones, Android phones, landscape iPhone, tablets */
            .card {
                margin: 40px 0 0 0;
                padding: 0;
            }
        }
    </style>
    <script>
        function control(selection) {
            var form, head, option, subject, content, btns;
            form = document.getElementById('mail_form');
            head = document.getElementById('head');
            option = document.getElementById('option');
            subject = document.getElementById('subject');
            content = document.getElementById('mail_content');
            btns = document.getElementById('buttons');
            submit_btn = document.getElementById('submit-btn');
            to = document.getElementById('mail_id');
            to.value = '{{ object.email }}';

            console.log(selection);

            if (selection === 3) {
                // cancel
                form.style.display = 'none';
                btns.style.display = 'block';
            }
            else if (selection === 1) {
                // approve
                head.innerHTML = 'Sent approval mail';
                option.value = 'True';
                option.name = 'is_approved';
                subject.value = '{{ approve_mail_subject }}';
                content.innerHTML = '{{ approve_mail_content }}';

                form.style.display = 'block';
                btns.style.display = 'none';
                console.log(selection);
                submit_btn.innerHTML = 'Approve';
                submit_btn.classList = 'btn btn-success';
            }
            else {
                // reject
                head.innerHTML = 'Sent rejection mail';
                option.value = 'True';
                option.name = 'is_rejected';
                subject.value = '{{ reject_mail_subject }}';
                content.innerHTML = '{{ reject_mail_content }}';

                form.style.display = 'block';
                btns.style.display = 'none';
                submit_btn.innerHTML = 'Reject';
                submit_btn.classList = 'btn btn-danger';
            }
        }
    </script>
{% endblock %}