{% extends 'base.html' %}

{% load static %}

{% block body %}

{% include 'navbar.html' %}

<style>

    .sub-card{
        border: none;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 4px 30px rgba(0,0,0,0.05);
    }

    .top-banner{
        background: linear-gradient(135deg, #5f72ff 0%, #9b23ea 100%);
        border-radius: 20px;
        padding: 30px;
        color: #fff;
        position: relative;
        overflow: hidden;
    }

    .top-banner::before{
        content: "";
        position: absolute;
        width: 250px;
        height: 250px;
        background: rgba(255,255,255,0.08);
        border-radius: 50%;
        top: -100px;
        right: -80px;
    }

    .top-banner h3{
        color: #fff;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .top-banner p{
        margin-bottom: 0;
        opacity: 0.9;
    }

    .table thead th{
        border: none !important;
        background: #f8f9fc;
        color: #6c757d;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        padding: 18px 15px;
    }

    .table tbody td{
        padding: 18px 15px;
        vertical-align: middle !important;
        border-color: #f2f2f2;
    }

    .sub-category-box{
        display: flex;
        align-items: center;
    }

    .sub-icon{
        width: 45px;
        height: 45px;
        border-radius: 14px;
        background: rgba(115,103,240,0.12);
        color: #7367f0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        font-size: 18px;
    }

    .sub-name{
        font-weight: 700;
        color: #343a40;
        margin-bottom: 2px;
    }

    .sub-id{
        font-size: 12px;
        color: #999;
    }

    .status-badge{
        padding: 8px 15px;
        border-radius: 30px;
        font-size: 12px;
        font-weight: 700;
    }

    .status-pending{
        background: rgba(255,159,67,0.12);
        color: #ff9f43;
    }

    .status-assigned{
        background: rgba(0,207,232,0.12);
        color: #00cfe8;
    }

    .status-started{
        background: rgba(115,103,240,0.12);
        color: #7367f0;
    }

    .status-completed{
        background: rgba(40,199,111,0.12);
        color: #28c76f;
    }

    .status-cancelled{
        background: rgba(234,84,85,0.12);
        color: #ea5455;
    }

    .progress{
        height: 10px;
        border-radius: 20px;
        background: #edf1f7;
    }

    .progress-bar{
        border-radius: 20px;
    }

    .contractor-box{
        display: flex;
        align-items: center;
    }

    .contractor-avatar{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg,#7367f0,#9e95f5);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        margin-right: 10px;
        text-transform: uppercase;
    }

    .rating-stars{
        color: #ff9f43;
        font-size: 15px;
    }

    .view-btn{
        border-radius: 12px;
        padding: 8px 18px;
        font-weight: 600;
        transition: 0.3s;
    }

    .view-btn:hover{
        transform: translateY(-2px);
        box-shadow: 0 5px 18px rgba(0,0,0,0.12);
    }

    .dataTables_wrapper .dataTables_filter input{
        border-radius: 12px;
        border: 1px solid #ddd;
        padding: 8px 12px;
        margin-left: 10px;
    }

    .dataTables_wrapper .dataTables_length select{
        border-radius: 10px;
        border: 1px solid #ddd;
        padding: 5px 10px;
    }

    .custom-progress{
        height: 14px;
        border-radius: 30px;
        background: #e9edf7;
        overflow: hidden;
    }

    .custom-progress-bar{
        border-radius: 30px;
        background: linear-gradient(90deg, #7367f0, #9e95f5);
        transition: width 0.5s ease;
    }

</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">Homylio</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="#!">{{work.name}} • Manage project progress, contractors and work status.</a>
                            </li>
                        </ul>
                    </div>

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

        
        <div class="row mt-4">

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

                <div class="card sub-card">

                    <div class="card-body">


                        <div class="d-flex justify-content-between align-items-center mb-4">

                            <div>

                                <h4 class="font-weight-bold mb-1">
                                    Sub Categories
                                </h4>

                                <p class="text-muted mb-0">
                                    Total Sub Categories : {{work_sub_categories|length}}
                                </p>

                            </div>

                        </div>




                        <div class="table-responsive">

                            <table id="report-table" class="table">

                                <thead>

                                    <tr>
                                        <th>#</th>
                                        <th>Sub Category</th>
                                        <th>Status</th>
                                        <th>Progress</th>
                                        <th>Contractor</th>
                                        <th>Rating</th>
                                        <th class="text-right">Action</th>
                                    </tr>

                                </thead>

                                <tbody>

                                    {% for sub_category in work_sub_categories %}

                                        <tr>

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


                                            <td>

                                                <div class="sub-category-box">

                                                    <div class="sub-icon">
                                                        <i class="feather icon-grid"></i>
                                                    </div>

                                                    <div>

                                                        <div class="sub-name">
                                                            {{sub_category.sub_category.name}}
                                                        </div>

                                                        <div class="sub-id">
                                                            ID : #{{sub_category.id}}
                                                        </div>

                                                    </div>

                                                </div>

                                            </td>



                                            <td>

                                                {% if sub_category.status == 0 %}

                                                    <span class="status-badge status-pending">
                                                        Pending
                                                    </span>

                                                {% elif sub_category.status == 1 %}

                                                    <span class="status-badge status-assigned">
                                                        Assigned
                                                    </span>

                                                {% elif sub_category.status == 2 %}

                                                    <span class="status-badge status-started">
                                                        Started
                                                    </span>

                                                {% elif sub_category.status == 3 %}

                                                    <span class="status-badge status-completed">
                                                        Completed
                                                    </span>

                                                {% else %}

                                                    <span class="status-badge status-cancelled">
                                                        Cancelled
                                                    </span>

                                                {% endif %}

                                            </td>



                                           <td style="min-width:220px;">

                                                <div class="d-flex justify-content-between mb-2">

                                                    <span class="font-weight-bold text-dark">
                                                        {{sub_category.progress}}%
                                                    </span>

                                                </div>

                                                <div class="progress custom-progress">

                                                    <div class="progress-bar custom-progress-bar"
                                                        role="progressbar"
                                                        style="width: {{sub_category.progress}}%;">

                                                    </div>

                                                </div>

                                            </td>



                                            <td>

                                                {% if sub_category.contractor %}

                                                    <div class="contractor-box">

                                                        <div class="contractor-avatar">
                                                            {{sub_category.contractor.name|slice:":1"}}
                                                        </div>

                                                        <div>

                                                            <div class="font-weight-bold">
                                                                {{sub_category.contractor.name}}
                                                            </div>

                                                        </div>

                                                    </div>

                                                {% else %}

                                                    <span class="text-muted">
                                                        Not Assigned
                                                    </span>

                                                {% endif %}

                                            </td>



                                            <td>

                                                <div class="rating-stars">

                                                    {% for i in "12345" %}

                                                        {% if forloop.counter <= sub_category.rating %}

                                                            <i class="feather icon-star" style="fill:#ff9f43;"></i>

                                                        {% else %}

                                                            <i class="feather icon-star"></i>

                                                        {% endif %}

                                                    {% endfor %}

                                                </div>

                                            </td>



                                            <td class="text-right">

                                                <a href="/admin/works/details/{{sub_category.id}}"
                                                   class="btn btn-primary btn-sm view-btn">

                                                    <i class="feather icon-eye"></i>
                                                    View Details

                                                </a>

                                            </td>

                                        </tr>

                                    {% endfor %}

                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>



<script>

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

</script>



{% for message in messages %}

<script>
    showNotification('{{message}}', '{{message.tags}}')
</script>

{% endfor %}

{% endblock %}