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

{% block body %}

{% include 'navbar.html' %}

<!-- <style>
    .custom-switch .custom-control-label::before {
        width: 2.5rem;
        height: 1.2rem;
        border-radius: 1rem;
    }

    .custom-switch .custom-control-label::after {
        width: calc(1.2rem - 4px);
        height: calc(1.2rem - 4px);
    }

    .custom-control-input:checked~.custom-control-label::before {
        background-color: #28a745;
        border-color: #28a745;
    }
</style> -->

<div class="pcoded-main-container">
    <div class="pcoded-content">

        <div class="page-header">
            <div class="page-block">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="page-header-title">
                            <h5 class="m-b-10">Contractors</h5>
                        </div>

                        <ul class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="#">
                                    <i class="feather icon-home"></i>
                                </a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="#">Contractors</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">

            <div class="col-xl-12">
                <div class="card">

                    <div class="card-header">
                        <h5>Contractor List</h5>
                    </div>

                    <div class="card-body">

                        <div class="table-responsive">

                            <table id="report-table" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>S.No</th>
                                        <th>Profile</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Mobile</th>
                                        <th>Verified</th>
                                        <!-- <th>Location</th> -->
                                        <th>Created At</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    {% for contractor in contractors %}
                                    <tr>

                                        <td>{{ forloop.counter }}</td>

                                        <td>
                                            {% if contractor.profile_pic %}
                                            <img src="{{ contractor.profile_pic.url }}" alt="Profile"
                                                style="width:50px;height:50px;border-radius:50%;object-fit:cover;">
                                            {% else %}
                                            <img src="{% static 'admin/images/user_placeholder.png' %}" alt="Profile"
                                                style="width:50px;height:50px;border-radius:50%;object-fit:cover;">
                                            {% endif %}
                                        </td>

                                        <td>{{ contractor.name|default:"-" }}</td>

                                        <td>{{ contractor.email|default:"-" }}</td>

                                        <td>{{ contractor.mobile|default:"-" }}</td>

                                        <td class="justify-content-center d-flex align-items-center">
                                            <div class="custom-control custom-switch justify-content-center d-flex align-items-center">
                                                <input
                                                    type="checkbox"
                                                    class="custom-control-input verify-switch"
                                                    id="verify{{ contractor.id }}"
                                                    data-id="{{ contractor.id }}"
                                                    {% if contractor.contractor_profile.is_verified %}checked{% endif %}
                                                >
                                                <label class="custom-control-label" for="verify{{ contractor.id }}"></label>
                                            </div>
                                        </td>

                                        <!-- <td>
                                            {{ contractor.contractor_profile.location|default:"-" }}
                                        </td> -->

                                        <td>
                                            {% if contractor.contractor_profile %}
                                            {{ contractor.contractor_profile.created_at|date:"d M Y h:i A" }}
                                            {% else %}
                                            -
                                            {% endif %}
                                        </td>

                                        <td>
                                            <a href="{% url 'contractor_details' contractor.id %}"
                                                class="btn btn-info btn-sm">
                                                <i class="feather icon-eye"></i> View
                                            </a>
                                        </td>

                                    </tr>
                                    {% empty %}
                                    <tr>
                                        <td colspan="9" class="text-center">
                                            No Users Found
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>

                        </div>

                    </div>

                </div>
            </div>

        </div>

    </div>
</div>

<script>
    $(document).ready(function () {

        $('#report-table').DataTable({
            stateSave: true,
            pageLength: 25,
            responsive: true,
            ordering: true
        });

    });


    $(document).on('change', '.verify-switch', function () {

        let contractor_id = $(this).data('id');
        let is_verified = $(this).is(':checked');

        $.ajax({
            url: '/admin/contractor/verification',
            type: 'POST',
            data: {
                contractor_id: contractor_id,
                is_verified: is_verified,
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            success: function(response){
                showNotification('Verification status updated', 'success');
            },
            error: function(){
                showNotification('Something went wrong', 'danger');
            }
        });

    });

</script>

{% for message in messages %}
<script>
    showNotification('{{ message }}', '{{ message.tags }}');
</script>
{% endfor %}

{% endblock %}