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

{% block contentbody %}

<div class="collapse" id="collapseExample">
    <div class="card card-body">
        <form action="{% url 'enq:abroad-study-list' %}" method="GET">
            <div class="row">
                <div class="col-md-2">
                    <select class="form-control countrySelect" name="country">
                        <option value="">Select Country</option>
                        {% for each in countrys %}
                        <option value="{{each.id}}">{{each.name}}</option>
                        {% endfor %}

                    </select>
                </div>
                <div class="col-md-2">
                    <input class="programName form-control" name="username" placeholder="Search Name" type="text">
                </div>
                <div class="col-md-3">
                    <input class="programName form-control" name="contact" placeholder="Search Mobile Number"
                        type="number" min="10">
                </div>
                <div class="col-md-2">
                    <input class="programName form-control" name="enquiry" placeholder="Search by Enq id" type="text">
                </div>
                <div class="col-md-2">
                    <select class="form-control categorySelect" name="category">
                        <option value="">Select Category</option>
                        <option value="New">New</option>
                        <option value="High Preference">High Preference</option>
                        <option value="Keep Warm">Keep Warm</option>
                        <option value="Doc. Submitting">Doc. Submitting</option>
                        <option value="Case Closed">Case Closed</option>
                        <option value="Office Visited">Office Visited</option>
                        <option value="Upcoming Intake">Upcoming Intake</option>
                        <option value="Start Application">Start Application</option>
                    </select>
                </div>
                <input type="submit" class="btn btn-info btn-sm" value="Search">
            </div>
        </form>
    </div>
</div>

<div class="d-flex py-3 align-items-center justify-content-between">
    <div>
        {% if archive %}
        <h4>Archive Enquiry List</h4>
        {% else %}
        <h4>Enquiry List</h4>
        {% endif %}
    </div>
    <div>
        <a class="btn btn-primary btn-sm" data-toggle="collapse" href="#collapseExample" role="button"
            aria-expanded="false" aria-controls="collapseExample">
            Filter <i class="m-r-10 mdi mdi-filter"></i>
        </a>
        {% if archive %}
        <a class="unarchiveAction btn btn-info btn-sm" href="">
            Unrchive Folder
        </a>
        {% else %}
        <a class="archiveAction btn btn-info btn-sm" href="">
            Archive Folder
        </a>
        {% endif %}
        <span onclick="send_bulk_sms()" data-toggle="modal" data-target="#exampleModalLong"
            class="archiveAction1 btn btn-warning btn-sm">
            Bulk Sms
        </span>
        {% if perms.enquiry.add_personalinfo %}
        <a href="{% url 'enq:abroad-study-create' %}" class="btn btn-success btn-sm">Add
            <i class="mdi mdi-plus-outline"></i>
        </a>
        {%endif%}
    </div>
</div>

<div class="table-responsive">
    <table class="table table-striped">
        <thead class="bg-secondary text-white">
            <tr>
                <th></th>
                <th>Enquiry Info</th>
                <th>Student Details</th>
                <th>Previous Academic Information</th>
                <th>Program Interested For </th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>

            {% for enq in obj %}
            <tr>
                <td><input type="checkbox" name="selectEnquiry" value="{{enq.id}}" data-id="{{enq.id}}"
                        id="selectEnquiry-{{enq.id}}" data-name="{{enq.student_name}}"
                        data-number="{{enq.mobile_number}}" class="selectEnquiry"></td>

                <td>
                    <div style="height: 150px; max-height: 150px;">
                        <p style="color: green;"><b>ENQ-{{enq.id}}</b></p>
                        Enq. Date: {{enq.enq_date|date:"M d, Y"}} <br>
                        Enq. Mode: {{enq.otherdetails.enquiry_mode}}
                        <br>
                        <p style="color: #488bab">{{enq.otherdetails.agent}}
                        </p>
                    </div>
                    <div>
                        <p style="color: #ffbc34;" id="comm-{{ forloop.counter }} "> Categories: </p>
                        <a>{{enq.category}}</a>
                    </div>
                </td>
                <td>
                    <div style="height: 150px; max-height: 150px;">
                        <span>
                            {{enq.student_name|upper}}
                        </span>
                        <br>
                        <span>
                            {{enq.dob}}
                        </span>
                        <br>
                        <span>
                            Phone: {{enq.mobile_number}}
                        </span>
                        <br>
                        <span>
                            City: {{enq.address}}
                        </span>
                        <br>
                        <span>
                            Email: <a href="mailto:{{enq.email}}">{{enq.email}}</a>
                        </span>
                    </div>
                    <div>
                        <p style="color: #ffbc34;" id="comm-{{ forloop.counter }} "> Updates By:</p>
                        <a>{{enq.comment_set.first.created_by}}</a>
                    </div>
                </td>
                <td>
                    <div style="height: 150px; max-height: 150px;">
                        <!-- Previous Academic Detail -->
                        {% if enq.previousacademicdetail_set.first.program_level == "10 Plus 2 | A Level" %}
                        Last Q: {{enq.previousacademicdetail_set.first.program_level}}<br>
                        Grade: {{enq.previousacademicdetail_set.first.grade_percentage}}<br>
                        Pass Year: {{enq.previousacademicdetail_set.first.passed_year}}<br>
                        Stream: {{enq.previousacademicdetail_set.first.stream}}<br>
                        {% elif enq.previousacademicdetail_set.first.program_level == "Diploma | PCL" %}
                        Last Q: {{enq.previousacademicdetail_set.first.program_level}}<br>
                        Grade: {{enq.previousacademicdetail_set.first.grade_percentage}}<br>
                        Pass Year: {{enq.previousacademicdetail_set.first.passed_year}}<br>
                        Stream: {{enq.previousacademicdetail_set.first.stream}}<br>
                        Degree: {{enq.previousacademicdetail_set.first.degree_name}}<br>
                        Awarding body: {{enq.previousacademicdetail_set.first.awarding_body}}<br>
                        Duration: {{enq.previousacademicdetail_set.first.duration}} years<br>
                        {% else %}
                        Last Q: {{enq.previousacademicdetail_set.first.program_level}}<br>
                        Grade: {{enq.previousacademicdetail_set.first.grade_percentage}}<br>
                        Pass year: {{enq.previousacademicdetail_set.first.passed_year}}<br>
                        Degree: {{enq.previousacademicdetail_set.first.degree_name}}<br>
                        Uni: {{enq.previousacademicdetail_set.first.awarding_body}}<br>
                        Duration: {{enq.previousacademicdetail_set.first.duration}} years<br>
                        {% endif %}
                    </div>
                    <div>
                        <!-- Test Score: {{enq.marital_status}}<br> -->
                        <p style="color: #ffbc34;" id="comm-{{ forloop.counter }} "> Assigned to:</p>
                        {% if enq.assign_to %}
                        <a>{{enq.assign_to}}</a>
                        {% else %}
                        <a>-</a>
                        {% endif %}
                        <!-- <p style="padding-top: 15%;color: #ffbc34;" id="comm-{{ forloop.counter }} "> Assigned to:</p> <a>{{enq.comment_set.last}}</a>                                                   -->
                    </div>
                </td>
                <td>
                    <div style="height: 150px; max-height: 150px;">
                        <table class="table table-striped">
                            <thead class="bg-secondary text-white">
                                <tr>
                                    <th>Country</th>
                                    <th>Level</th>
                                    <th>
                                        Program Details
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>


                                    <td>{{ enq.programinterestedfor.first.country}}</td>
                                    <td>{{ enq.programinterestedfor.first.pg_level}}</td>
                                    <td>
                                        {% for course in enq.programinterestedfor.first.pgcoursedetail.all %}
                                        - {{course}}<br>
                                        {% endfor %}
                                    </td>

                                </tr>

                            </tbody>
                        </table>
                    </div>
                    <div>
                        <p style="color: #ffbc34;" id="comm-{{ forloop.counter }} ">Last Comment:</p>
                        <a>{{enq.comment_set.last}}</a>
                    </div>
                </td>
                <td style="vertical-align: middle;">
                    {% if perms.enquiry.add_personalinfo %}
                        
                        <a class="delete-item btn btn-info w-100" href=""><i
                                class="icon icon-eye"></i></a><br />
                        {% if enq.assign_to.id == request.user.id or request.user.is_superuser == True %}
                        {% endif %}
                    {% endif %}
                    {% if perms.enquiry.change_personalinfo %}
                    
                    <a href=""
                        class="delete-item btn btn-secondary my-3 w-100"><i class="icon icon-pencil"></i></a>
                        {% if enq.assign_to.id == request.user.id or request.user.is_superuser == True %}
                        {% endif %}
                    {% endif %}
                    {% if perms.enquiry.delete_personalinfo %}
                    
                    <form action="" method="GET">
                        {% csrf_token %}
                        <a href="#" class="deleteobject btn btn-danger w-100">
                            <i class="icon icon-trash" url="" data-toggle="modal"
                                data-target="#verticalcenter"></i>
                        </a>
                    </form>
                        {% if enq.assign_to.id == request.user.id or request.user.is_superuser == True %}
                        {% endif %}
                    {% endif %}

                </td>
            </tr>

            {% endfor %}
        </tbody>
    </table>

</div>
</div>
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Create Message</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="text_for_message">
                    <h5 id="count">
                        <span id="length_cout">
                            300
                        </span>
                        characters remaining
                    </h5>
                    <textarea name="my_text" id="my_message" cols="60" rows="10" value="">

                </textarea>
                </div>
                <div id="users_selected">

                </div>

            </div>
            <div class="modal-footer">
                <!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
                <button type="button" class="btn btn-primary" onclick="send_messages()">Send Message</button>
            </div>
        </div>
    </div>
</div>
{% include 'pages/pagination.html' %}

<!-- TABLE END -->
<!-- <div id="verticalcenter" class="modal" tabindex="-1" role="dialog" aria-labelledby="vcenter" aria-modal="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <h4>Are you sure you want to delete?</h4>
                <div>  
                    <input class="btn btn-danger" type="submit" value="Yes, I’m sure">
                    </div>
                    <button type="button" class="btn btn-primary button cancel-link" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div> -->

{% endblock%}

{% block js%}
<script>
    // $(document).ready(function () {

    //     var comments = `{{comments}}`;
    //     console.log(comments);
    //     var my_obj = JSON.parse(comments);
    //     console.log(my_obj);
    // for(i=0;i<my_obj.comm.length;i++){
    //     alert(my_obj.comm[i]);
    //     // document.getElementById("comm"+i.toString()).innerHTML = comments[i];
    // }
    // });



    $('.archiveAction').on('click', function (e) {
        let url;
        e.preventDefault();
        let allVals = [];
        $('input[name="selectEnquiry"]:checked').each(function () {
            allVals.push($(this).data('id'));
        });
        if (allVals.length == 0) {
            // swal('Please Select Enquiry !!', '', 'warning');
            alert('Plese select enquiry');
            return false;
        }
        let currentURL = $(location).attr('href')
        console.log(currentURL);
        let result = confirm('Are You Sure you want to archive Selected Enquiry ?');
        if (result) {
            // url = text+temp;
            url = `/enquiry/archive/?id=${allVals}`;
            $.ajax({
                type: "POST",
                url: url,
                data: { allVals: allVals, csrfmiddlewaretoken: '{{ csrf_token }}' },
                dataType: 'JSON',
                success: function (res) {
                    if (res.success == true) {
                        window.location.reload(true);
                    } else {
                        window.location.reload(true);
                    }
                }
            });
        }
    });

    $('.unarchiveAction').on('click', function (e) {
        let url;
        e.preventDefault();
        let allVals = [];
        $('input[name="selectEnquiry"]:checked').each(function () {
            allVals.push($(this).data('id'));
        });
        if (allVals.length == 0) {
            // swal('Please Select Enquiry !!', '', 'warning');
            alert('Plese select enquiry');
            return false;
        }
        let currentURL = $(location).attr('href')
        console.log(currentURL);
        let result = confirm('Are You Sure you want to archive Selected Enquiry ?');
        if (result) {
            // url = text+temp;
            url = `/enquiry/unarchive/?id=${allVals}`;
            $.ajax({
                type: "POST",
                url: url,
                data: { allVals: allVals, csrfmiddlewaretoken: '{{ csrf_token }}' },
                dataType: 'JSON',
                success: function (res) {
                    console.log(res);
                    if (res.success == true) {
                        window.location.reload(true);
                    } else {
                        // console.log(res.errorMsg);
                        window.location.reload(true);
                    }
                }
            });
        }

    });

    function send_bulk_sms() {
        $('#users_selected').html('');
        // alert(1)
        let allVals = [];
        $('input[name="selectEnquiry"]:checked').each(function () {
            allVals.push({ "id": $(this).data('id'), "name": $(this).data('name'), "mobile": $(this).data('number') });
        });
        console.log(allVals);
        for (i = 0; i < allVals.length; i++) {
            $('#users_selected').append(`<div class="user_selected"><span>${allVals[i].name} :  </span><span>${allVals[i].mobile}</span></div>`);
        }
        return allVals

    }

    function send_messages() {
        // alert(1)
        // let allVals = [];
        var allVals = ""
        $('input[name="selectEnquiry"]:checked').each(function () {
            allVals += $(this).data('number') + ",";
        });

        if (allVals.length == 0) {
            // swal('Please Select Enquiry !!', '', 'warning');
            alert('Plese select enquiry');
            return false;
        }
        if ($('#my_message').val() == '') {
            alert('Please enter message');
            return false;
        }
        // change number here
        if (($("#my_message").val()).length > 300) {
            alert('too long message');
            return false;
        }
        var data = {
            'allVals': allVals,
            'message': $('#my_message').val(),
            'csrfmiddlewaretoken': '{{ csrf_token }}'
        }
        $.ajax({
            type: "POST",
            url: '/sms/bulk/',
            data: {
                'allVals': allVals,
                'message': $('#my_message').val(),
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            dataType: 'JSON',
            success: function (res) {
                // console.log(res);
                notification_msg("message sent successfully");

                // if (res.success == true) {
                // window.location.reload(true);
                // } else {
                // window.location.reload(true);
                // }
            }
        });
    }



    $("#my_message").bind("input propertychange", function () {
        var total_length = ($("#my_message").val()).length
        $("#length_cout").html(300 - total_length)
        // alert(total_length)
    })

</script>

{% endblock %}