{% extends 'layout/app.html' %}

{% block title %} Customer List {% endblock %}

{% load i18n %}

{% load static %}

{% block content %}
<div class="container-fluid">
    
    <div class="row">
        <div class="col-lg-12">
            <div class="contact-breadcrumb">

                <div class="breadcrumb-main add-contact justify-content-sm-between ">
                    <div class=" d-flex flex-wrap justify-content-center breadcrumb-main__wrapper">
                        <div class="d-flex align-items-center add-contact__title justify-content-center me-sm-25">
                            <h4 class="text-capitalize fw-500 breadcrumb-title">Data List</h4>
                            <span class="sub-title ms-sm-25 ps-sm-25"></span>
                        </div>
                        <div class="action-btn mt-sm-0 mt-15">
                            <a href="{% url 'customer:new_customer' %}" class="btn px-20 btn-primary ">
                                <i class="las la-plus fs-16"></i>Add New
                            </a>
                        </div>
                    </div>
                    <div class="breadcrumb-main__wrapper">

                        <form action="/" class="d-flex align-items-center add-contact__form my-sm-0 my-2">
                            <img src="{% static 'img/svg/search.svg' %}" alt="search" class="svg">
                            <input class="form-control me-sm-2 border-0 box-shadow-none" type="search" placeholder="Search by Name" aria-label="Search">
                        </form>

                    </div>
                </div>

            </div>
            <!-- ends: contact-breadcrumb -->
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 mb-30">
            <div class="card">
                <div class="card-header color-dark fw-500">
                    User List
                </div>
                <div class="card-body">

                    <div class="userDatatable global-shadow border-light-0 w-100">
                        <div class="table-responsive">
                            <table class="table mb-0 table-borderless">
                                <thead>
                                    <tr class="userDatatable-header">
                                        <th>
                                            <div class="d-flex align-items-center">
                                                <div class="custom-checkbox  check-all">
                                                    <input class="checkbox" type="checkbox" id="check-45">
                                                    <label for="check-45">
                                                        <span class="checkbox-text userDatatable-title">user</span>
                                                    </label>
                                                </div>
                                            </div>
                                        </th>
                                        <th>
                                            <span class="userDatatable-title">Email</span>
                                        </th>
                                        <th>
                                            <span class="userDatatable-title">phone</span>
                                        </th>
                                        <th>
                                            <span class="userDatatable-title">company</span>
                                        </th>
                                        <th>
                                            <span class="userDatatable-title">position</span>
                                        </th>
                                        <th>
                                            <span class="userDatatable-title">join date</span>
                                        </th>
                                        <th>
                                            <span class="userDatatable-title">status</span>
                                        </th>
                                        <th>
                                            <span class="userDatatable-title float-end">action</span>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% if count_customers == 0 %}
                                        <tr>
                                            <td colspan="7"><p class="text-center">No Customer Found !</p></td>
                                         </tr>
                                    {% else %}
                                    {% for customer in customers %}
                                    <tr>
                                        <td>
                                            <div class="d-flex">
                                                <div class="userDatatable__imgWrapper d-flex align-items-center">
                                                    <div class="checkbox-group-wrapper">
                                                        <div class="checkbox-group d-flex">
                                                            <div class="checkbox-theme-default custom-checkbox checkbox-group__single d-flex">
                                                                <input class="checkbox" type="checkbox" id="check-grp-<%- index %>">
                                                                <label for="check-grp-<%- index %>"></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <a href="#" class="profile-image rounded-circle d-block m-0 wh-38" style="background-image:url('{% if customer.image %} {{customer.image}} {% else %} {% static "img/author/profile.png" %}{% endif %}'); background-size: cover;"></a>
                                                </div>
                                                <div class="userDatatable-inline-title">
                                                    <a href="#" class="text-dark fw-500">
                                                        <h6>{{ customer.name }}</h6>
                                                    </a>
                                                    <p class="d-block mb-0">
                                                        {{ customer.countryOption }}                                                       
                                                    </p>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="userDatatable-content">
                                                {{ customer.email }}                                                  
                                            </div>
                                        </td>
                                        <td>
                                            <div class="userDatatable-content">
                                                {{ customer.phone }}                                                      
                                            </div>
                                        </td>
                                        <td>
                                            <div class="userDatatable-content">
                                                {{ customer.company }}      
                                            </div>
                                        </td>
                                        <td>
                                            <div class="userDatatable-content">
                                                {{ customer.position }}      
                                            </div>
                                        </td>
                                        <td>
                                            <div class="userDatatable-content">
                                                {{ customer.join }}      
                                            </div>
                                        </td>
                                        <td>
                                            <div class="userDatatable-content d-inline-block">
                                                <span class="{% if customer.status == 'active' %} bg-opacity-success  color-success {% elif customer.status == 'deactivate' %} bg-opacity-warning  color-warning {% else %} bg-opacity-danger  color-danger {% endif %} rounded-pill userDatatable-content-status active">{{ customer.status }}</span>
                                            </div>
                                        </td>
                                        <td>
                                            <ul class="orderDatatable_actions mb-0 d-flex flex-wrap">
                                                <li>
                                                    <a href="#" class="view">
                                                        <i class="uil uil-eye"></i>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'customer:show' customer.id %}" class="edit">
                                                        <i class="uil uil-edit"></i>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="
                                                    if(confirm('Are you sure you want to delete ?')){                                    
                                                       event.preventDefault();
                                                       document.getElementById('delete-{{ customer.id }}').submit();
                                                    }else{
                                                       event.preventDefault();
                                                    }
                                                 " class="remove">
                                                        <i class="uil uil-trash-alt"></i>
                                                    </a>
                                                    <form style="display:none;" id="delete-{{ customer.id }}" action="{% url 'customer:destroy' customer.id %}" method="POST">
                                                        {% csrf_token %}
                                                    </form>
                                                </li>
                                            </ul>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                    {% endif %}       
                                </tbody>
                            </table>
                        </div>
                    </div>                        
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}