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

{% load custom_filters %}
{% block content %}
<!-- Page Wrapper -->
<style>
    .settings-profile-upload .profile-pic img {
        height: 100px;
    }

    .settings-profile-upload .profile-pic {
        width: 100px;
        height: 100px;
    }
    .assignmodule,.assigncourse{
        max-width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* display: inline-block; */
    }
   
    .addedit{
        display: inline-block;
    position: absolute;
    right: 40px;
    }

</style>
<div class="page-wrapper">
    {% include 'partials/error-meg.html' %}
    <div class="content">
        <div class="d-md-flex d-block align-items-center justify-content-between border-bottom pb-3">
            {% block title %}
            {% include "partials/title.html" with title="Assign Class" text="Dashboard" textone="Teacher" texttwo="Assign Class"%}
            {% endblock title %}
            <!-- <div class="d-flex my-xl-auto right-content align-items-center flex-wrap">
                <div class="pe-1 mb-2">
                    <a href="#" class="btn btn-outline-light bg-white btn-icon" data-bs-toggle="tooltip"
                        data-bs-placement="top" aria-label="Refresh" data-bs-original-title="Refresh">
                        <i class="ti ti-refresh"></i>
                    </a>
                </div>
            </div> -->
        </div>
        <div class="d-md-flex d-block mt-3">
            <div class="flex-fill ps-0 border-0">
                <div class="card">
                    <div class="card-header justify-content-between d-flex">
                        <div class="card-title"> {% if username == 'visamanager' %}Visa Manager{% else %} {{username}} - {{profiledata.first_name}} {{profiledata.last_name}} {% endif %}</div>
                        <a href="{% url 'manage_user' user=username id=id %}" class="btn btn-primary btn-sm float-end"><i class="ti ti-edit me-2"></i>Back</a>
                   
                    </div>
                    
                    <div class="card-body align-items-start">
                        <div class="row">
                            <div class="col-md-12 pb-3">
                                <div class="nav nav-pills me-3 tab-style-7" id="v-pills-tab" role="tablist"
                                    aria-orientation="vertical">
                                    <a href="{% url 'manage_user' user=username id=id %}" class="nav-link text-start" aria-selected="false"><i
                                        class="feather-monitor me-1 align-middle d-inline-block"></i>Profile</a>
                                     
                                    <a class="nav-link text-start active" aria-selected="false"><i
                                            class="feather-monitor me-1 align-middle d-inline-block"></i>Assign Class</a>
                                    <a href="{% url 'admin_assign_leave' user_type=username id=id %}" class="nav-link text-start" aria-selected="false"><i
                                                class="feather-monitor me-1 align-middle d-inline-block"></i>Assign Leave</a>   
                                    <a href="{% url 'attendanceteacher' user_type=username id=id %}" class="nav-link text-start" aria-selected="false"><i
                                        class="feather-monitor me-1 align-middle d-inline-block"></i>Attendance</a>      
                                    <!-- <button class="nav-link text-start" id="main-team-tab" data-bs-toggle="pill"
                                        data-bs-target="#main-team" type="button" role="tab" aria-controls="main-team"
                                        aria-selected="false"><i
                                            class="feather-users me-1 align-middle d-inline-block"></i>Team</button>
                                    <button class="nav-link text-start" id="main-billing-tab" data-bs-toggle="pill"
                                        data-bs-target="#main-billing" type="button" role="tab"
                                        aria-controls="main-billing" aria-selected="false"><i
                                            class="feather-file me-1 align-middle d-inline-block"></i>Billing</button>
                                    <button class="nav-link text-start mb-1" id="main-email-tab" data-bs-toggle="pill"
                                        data-bs-target="#main-email" type="button" role="tab" aria-controls="main-email"
                                        aria-selected="false"><i
                                            class="feather-mail me-1 align-middle d-inline-block"></i>Email</button> -->
                                            <a href="#" class="btn btn-primary btn-sm float-end addedit" id="toggle-btn">
                                                <i class="ti ti-edit me-2"></i> Add
                                            </a>
                                </div>
                            </div>
                            
                            <div class="col-md-12">
                                
                                <div class="tab-content" id="v-pills-tabContent">
                                    <div class="tab-pane show active" id="main-profile" role="tabpanel" tabindex="0">
                                       
                                        <div class="view" id="view">

                                            {% if assign_data|length > 0 %}
                                            <div class="custom-datatable-filter table-responsive">
                                                <table class="table datatable">
                                                    <thead class="thead-light">
                                                        <tr>
                                                            <th>Sr. No.</th>
                                                            <th>Course</th>
                                                            <th>Classes</th>
                                                            <th>Modules</th>
                                                            <th>Intake Year & Month</th>
                                                            <th>Status</th>
                                                            <th>Action</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                            
                                                        {% for row in assign_data %}
                                                        <tr>
                                                            <!-- <td>
                                                                <div class="form-check form-check-md">
                                                                    <input class="form-check-input" type="checkbox">
                                                                </div>
                                                            </td> -->
                                                            <th><a href="#" class="link-primary">{{ forloop.counter }}</a></th>
                                                           
                                                            <td class="assigncourse">{{ row.course }}</td>
                                                            <td>{{ row.classes }}</td>
                                                            <td class="assignmodule">{{ row.modules }}</td>
                                                            <td>{{ row.intakemonth }}</td>
                                                            <td>
                                                                <span class="badge {% if row.is_deleted == False %}badge-soft-success{% else %}badge-soft-danger{% endif %} d-inline-flex align-items-center">
                                                                <i class="ti ti-circle-filled fs-5 me-1"></i>
                                                                {% if row.is_deleted == False %}
                                                                    Active
                                                                {% else %}
                                                                    Inactive
                                                                {% endif %}
                                                            </span>
                                                        </td>
                                                           <td> 
                                                            
                                                            <!-- <a class="rounded-1" href="{% url 'editassign_course' assignid=row.assignid %}"><i
                                                            class="ti ti-edit-circle me-2"></i></a> -->
                                                            <div class="d-flex align-items-center">
                                                                <div class="dropdown">
                                                                    <a href="#"
                                                                        class="btn btn-white btn-icon btn-sm d-flex align-items-center justify-content-center rounded-circle p-0"
                                                                        data-bs-toggle="dropdown" aria-expanded="false">
                                                                        <i class="ti ti-dots-vertical fs-14"></i>
                                                                    </a>
                                                                    <ul class="dropdown-menu dropdown-menu-right p-3">
                        
                                                                        <li>
                                                                            <a class="dropdown-item rounded-1" href="{% url 'editassign_course' assignid=row.assignid %}"><i
                                                                                    class="ti ti-edit-circle me-2"></i>Edit</a>
                                                                        </li>
                                                                        <li>                                                 
                                                                         {% if row.is_deleted == True %}
                                                                         <a class="dropdown-item rounded-1 activatemodelescourse" 
                                                                         href="#" data-coursemodules="assign" data-id="{{ row.assignid }}">
                                                                         <i class="ti ti-check me-2"></i>Activate
                                                                     </a>
                                                                        {% else %}
                                                                        <a class="dropdown-item rounded-1 deletemodelescourse" 
                                                                            href="#" data-coursemodules="assign" data-id="{{ row.assignid }}">
                                                                            <i class="ti ti-trash-x me-2"></i>Delete
                                                                        </a>
                                                                     
                                                                        {% endif %}
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        </tr>
                                                        {% empty %}
                                                        <tr><td colspan="4">No Assgin Class</td></tr>
                                                        {% endfor %}
                                                    </tbody>
                                                </table>
                                            </div>
                                            {% else %}
                                                <div class="row container">
                                                    <div class="col-md-12">No Assgin Class</div></div>
                                            {% endif %}
                                        </div>
                                        <div class="edit" id="edit" style="display:none">
                                            <form id="assigncoursedata" method="post" enctype="multipart/form-data">
                                                {% csrf_token %}
                                                <input type="hidden" name="teacher_id" value={{id}}>
                                                <input type="hidden" name="assign_id" value=>
                                                    <div class="mb-3">
                                                        <label class="form-label">Select Course <span class="text-danger">*</span></label>
                                                        <select class="selectcourse" name="course"  id="course"> 
                                                            <option disabled selected>Select Course</option>                                 
                                                            {% for course in courselist %}
                                                                    <option value="{{ course.encodedid }}">{{ course.name }}</option>
                                                            {% endfor %}
                                                        </select>
                                                    </div>   
                                                    <div class="mb-3">
                                                        <label class="form-label">Select Modules <span class="text-danger">*</span></label>
                                                        <select class="selectmodule" name="module[]" id="module" multiple disabled>
                                                            
                                                        </select>
                                                        
                                                    </div>
                                                    <div class="mb-3">
                                                        <label class="form-label">Select Class & section <span class="text-danger">*</span></label>
                                                        <select class="selectclass" name="class[]" id="class" multiple>
                                                            {% for classes in classlist %}
                                                            <option value="{{ classes.encodedid }}">{{ classes.class_name }} ({{ classes.section_name }})</option>
                                                            {% endfor %}
                                                        </select>
                                                        
                                                    </div>   
                                                    
                                                   
                                                    <div class="row">
                                                        <div class="col-xxl-4 col-xl-3 col-md-6">
                                                            <div class="mb-3">
                                                                <label class="form-label">Intake Month and Year <span class="text-danger">*</span></label>
                                                                <select class="select" name="intakemonth" id="intakemonth">
                                                                    <option disabled selected>Select Intake Month</option>
                                                                    {% for intake in intakelist %}
                                                                    <option value="{{ intake.encodedid }}">{{ intake.month }} {{intake.year}}</option>
                                                                    {% endfor %}
                                                                </select>
                                                                
                                                            </div>
                                                            </div>

                                                        <div class="col-xxl-4 col-xl-3 col-md-6">
                                                            <div class="mb-3">
                                                                <label class="form-label">Course Start Date <span class="text-danger">*</span></label>
                                                                <div class="input-icon position-relative">
                                                                    <span class="input-icon-addon">
                                                                        <i class="ti ti-calendar"></i>
                                                                    </span>
                                                                    <input type="text" class="form-control datetimepicker" name="start_date" placeholder="Select Date" value="">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-xxl-4 col-xl-3 col-md-6">
                                                            <div class="mb-3">
                                                                <label class="form-label">Course End Date <span class="text-danger">*</span></label>
                                                                <div class="input-icon position-relative">
                                                                    <span class="input-icon-addon">
                                                                        <i class="ti ti-calendar"></i>
                                                                    </span>
                                                                    <input type="text" class="form-control datetimepicker" name="end_date" placeholder="Select Date" value="">
                                                                </div>
                                                            </div>
                                                        </div> 
                                                    </div>  
                                                    <button type="button" class="btn btn-primary" id="assigncourse">submit</button>
                                            </form>
                                        </div>
                                    </div>
                                   
                                 
                                </div>

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

        </div>



    </div>
</div>


{% endblock content %}


{% block javascript %}
{{ block.super }}
<script>
    
$(document).ready(function(){
    $('.selectcourse').select2({       
        placeholder: 'Select Course',
        width: '100%',        
    });
    $('.selectmodule').select2({
			multiple: true,
            placeholder: 'Select Course Modules',
			width: '100%',
            allowClear: true
		});
        $('.selectmonth').select2({       
        placeholder: 'Select Course',
        width: '100%',        
    });
    $('.selectclass').select2({
			multiple: true,
            placeholder: 'Select Class',
			width: '100%',
            allowClear: true
		});

        $("#toggle-btn").click(function (e) {
            e.preventDefault(); 
            $("#view, #edit").toggle();             
            if ($("#edit").is(":visible")) {
                $(this).html('<i class="ti ti-eye me-2"></i> View');
            } else {
                $(this).html('<i class="ti ti-edit me-2"></i> Add');
            }
        });

});
</script>
{% endblock %}