{%include "header.html"%}
{% load static %}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

<!-- Header Layout Content -->
<div class="mdk-header-layout__content">

    <div class="mdk-drawer-layout js-mdk-drawer-layout" data-push data-responsive-width="992px">
        <div class="mdk-drawer-layout__content page">

            <div class="container-fluid page__heading-container">
                <div class="page__heading">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="#"><i class="material-icons icon-20pt">home</i></a>
                            </li>
                            <li class="breadcrumb-item">Profile Page</li>
                            <!-- <li class="breadcrumb-item active" aria-current="page">Exam Category</li> -->
                        </ol>
                    </nav>
                </div>

               

                <div class="mdk-header-layout__content page">

                    <div class="container-fluid page__container">

                        <section class="demo">
                            <div class="container-fluid">
                    
                                <div class="card card-body">
                                    <div class="row w-100">
                                        <div class="col-md-2 d-flex justify-content-center">
                                            <img src="{% static 'assets/images/avatar/profile-user.png'%}" alt="user-profile"  class="rounded-circle"
                                            title="user-profile">
                                        </div>
                                        <div class="col-md-10">

                                       
                                        <div class="text-content  mt-md-0 mt-4">
                                            <div class="name fs-20">
                                                <h5>{{student_list.first_name}} {{student_list.last_name}}</h5>
                                                <!-- <a href="#">New</a> -->
                                            </div>
                                            <div class="email-date-phone d-flex">
                                                <p> <i class="fa-regular fa-clock"></i>
                                                    <span>{{student_list.updated_at|date:"d/m/Y"}}&nbsp;&nbsp;</span>
                                                </p>
                                                <p> <i class="fa-regular fa-envelope"></i>
                                                    <span>{{student_list.email}}&nbsp;&nbsp;</span>
                                                </p>
                                                <p> <i class="fa fa-key"></i>
                                                    <span>{{student_list.password}}&nbsp;&nbsp;</span>
                                                </p>
                                                <p> <i class="fa-solid fa-phone"></i>
                                                    <span>{{student_list.mobile}}</span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    </div>
                                   
                                   
                                </div>
                                <div class="row bottom-card p-0">
                                    <div class="col-lg-8 col-md-12 col-sm-12 mt-4">
                                        
                                        <div class="row">
                                            <div class="col-12">
                                                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                                    <li class="nav-item" role="presentation">
                                                        <button class="nav-link  first-btn" id="New-comment-tab" data-bs-toggle="pill"
                                                            data-bs-target="#New-comment" type="button" role="tab" aria-controls="New-comment"
                                                            aria-selected="true">New comment</button>
                                                    </li>
                                                    <li class="nav-item" role="presentation">
                                                        <button class="nav-link active" id="Follow-up-tab" data-bs-toggle="pill"
                                                            data-bs-target="#Follow-up" type="button" role="tab" aria-controls="Follow-up"
                                                            aria-selected="false">Follow up</button>
                                                    </li>
                                                    
                                                </ul>
                                            </div>
                                          
                                        <div class="card card-body" style="border: none;">
                                           
                                            <div class="tab-content" id="pills-tabContent">
                                                <div class="tab-pane fade " id="New-comment" role="tabpanel"
                                                    aria-labelledby="New-comment-tab">

                                                    <div class="">

                                                   

                                                    <form id="add_comments_form" method="post" enctype="multipart/form-data">
                                                        {% csrf_token %}

                                                        <input type="hidden" name="id" value="{{student_list.id}}" id="">
                                                        <div class="row">
                                                            <div class="col-lg-12">
                                                                <div class="mb-3">
                                                                    <label for="tast-title" class="form-label">Message</label>
                                                                    <!-- <input type="text" name="message" class="form-control" > -->

                                                                    <textarea name="message" class="form-control"cols="30" rows="5"></textarea>
                                                                </div>
                                                            </div>
                                                            
                                                        </div>
                    
                                                        <button type="submit" class="btn btn-primary">Submit</button>
                                                    </form>
                                                </div>

                                                    <div class="row mt-4">

                                                        <div class="card w-100 p-0">
                                                            <div class="card-header">
                                                                <h5>New Comments</h5>
                                                            </div>
                                                            <div class="card-body ">
                                                                {% for comment in all_comment  %}
                                                                <div class="row">
                                                                    <div class="col-1"><i class="fas fa-comment-dots"></i></div>
                                                                    <div class="col-10">
                                                                        <p class="mb-1 fs-16">{{comment.message}}</p>
                                                                        <p class="fs-12"><i class="fa-regular fa-clock mr-2"></i><span > {{comment.updated_at|date:"d/m/Y"}}</span></p>
                                                                    </div>
                                                                </div>
                                                                {% endfor %}
                                                            </div>
                                                        </div>
                                                    </div>
                                                   
                                                </div>
                                                <div class="tab-pane fade show active" id="Follow-up" role="tabpanel"
                                                    aria-labelledby="Follow-up-tab">
                                                    <form id="add_followup_form" method="post" enctype="multipart/form-data">
                                                        {% csrf_token %}

                                                        <input type="hidden" name="id" value="{{student_list.id}}" id="">
                                                        <div class="row">
                                                            <div class="col-lg-12">
                                                                <div class="mb-3">
                                                                    <label for="tast-title" class="form-label">Task Title</label>
                                                                    <input type="text" name="task_title" class="form-control" >
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6">
                                                                <div class="mb-3">
                                                                    <label for="date" class="form-label">Date </label>
                                                                    <input type="date" class="form-control" name="date">
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6">
                                                                <div class="mb-3">
                                                                    <label for="time" class="form-label">Time</label>
                                                                    <input type="time" class="form-control" name="time">
                                                                </div>
                                                            </div>

                                                            <input type="hidden" name="is_completed" value="false" id="">
                                                        </div>
                    
                                                        <button type="submit" class="btn btn-primary">Submit</button>
                                                    </form>


                                                    <div class="row mt-4">

                                                        <div class="card w-100 p-0">
                                                            <div class="card-header">
                                                                <h5>All Tasks</h5>
                                                            </div>
                                                            <div class="card-body ">
                                                                {% for task in all_task  %}

                                                                <h5>{{task.task_title}}</h5>
                                                                <p class="fs-12"> <i class="fa-regular fa-clock"></i> {{task.follwup_date|date:"d/m/Y"}} {{task.follwup_time}}</p>
                                                                {% endfor %}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                               
                                            </div>
                                        </div>
                                    </div>
                                   
                                    </div>
                    
                                    <div class="col-lg-4 col-md-12 col-sm-12 mt-4 bottom-side-card">
                                        <div class="hedaer bg-danger">
                                            Due Task
                                        </div>
                                        <div class="card card-body ">

                                            {% for task in due_task  %}

                                            <h5>{{task.task_title}}</h5>
                                            <p class="fs-12"> <i class="fa-regular fa-clock"></i> {{task.follwup_date|date:"d/m/Y"}} {{task.follwup_time}}</p>
                                            {% endfor %}
                                        </div>
                    
                                        <div class="hedaer ">
                                            upcoming tasks.
                                        </div>
                                        <div class="card card-body ">
                                            
                                            {% for task in upcoming_task  %}
                                             
                                             <h5>{{task.task_title}}</h5>
                                            <p class="fs-12"> <i class="fa-regular fa-clock"></i>  {{task.follwup_date|date:"d/m/Y"}} {{task.follwup_time}}</p>
                                        
                                            {% endfor %}
                                        </div>


                    
                    
                                    </div>

                                   
                                </div>
                            </div>
                        </section>

                    </div>

                </div>
            </div>





        </div>
        <!-- // END drawer-layout__content -->

        <!-- drawer -->
        {%include "sidebar.html"%}
        <!-- // END drawer -->
    </div>
    <!-- // END drawer-layout -->

</div>
<!-- // END header-layout__content -->

</div>
<!-- // END header-layout -->

{%include "footer.html"%}
<script>
    (function () {
        'use strict';
        // ENABLE sidebar menu tabs
        $('#sidebar-mini-tabs [data-toggle="tab"]').on('click', function (e) {
            e.preventDefault()
            $(this).tab('show')
        })
    })()
</script>

<script>
    // Listen for the form submission event
    $('#add_followup_form').submit(function (event) {
        // Prevent the default form submission behavior
        event.preventDefault();
        var formData = new FormData($(this)[0]);

        // Send the Ajax request
        $.ajax({
            url: '{% url "addFollowUp" %}',
            type: 'POST',
            data: formData,
            processData: false,
            dataType: 'json',
            contentType: false,
            success: function (response) {
                if (response.status == 'success') {
                    setTimeout(function () {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: 'task created successfully.',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                        });
                    }, 1000);
                    setTimeout(function () {
                        location.reload();
                    }, 2000);
                    // $('#msg').html('<div class="text-success">'+response.msg+'</div>');
                }
                else {

                    $('#msg').html('<div class="text-danger">' + response.msg + '</div>');
                }
            },
            error: function (xhr, status, error) {
                // Handle the error response
                console.log(error);
            }
        });

    });
</script>


<script>
    // Listen for the form submission event
    $('#add_comments_form').submit(function (event) {
        // Prevent the default form submission behavior
        event.preventDefault();
        var formData = new FormData($(this)[0]);

        // Send the Ajax request
        $.ajax({
            url: '{% url "addComments" %}',
            type: 'POST',
            data: formData,
            processData: false,
            dataType: 'json',
            contentType: false,
            success: function (response) {
                if (response.status == 'success') {
                    setTimeout(function () {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: 'Comment successfully.',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                        });
                    }, 1000);
                    setTimeout(function () {
                        location.reload();
                    }, 2000);
                    // $('#msg').html('<div class="text-success">'+response.msg+'</div>');
                }
                else {

                    $('#msg').html('<div class="text-danger">' + response.msg + '</div>');
                }
            },
            error: function (xhr, status, error) {
                // Handle the error response
                console.log(error);
            }
        });

    });
</script>

</body>
<script src=" https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js">
   
</script>




</html>