{% extends 'base.html' %}

{% load static %}

{% block body %}

{% include 'navbar.html' %}

<style>

    .works-card{
        border: none;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 4px 25px rgba(0,0,0,0.06);
    }

    .works-header{
        background: linear-gradient(135deg, #7367f0 0%, #9e95f5 100%);
        padding: 25px;
        border-radius: 18px;
        color: #fff;
    }

    .works-header h3{
        color: #fff;
        font-weight: 700;
        margin-bottom: 5px;
    }

    .works-header p{
        margin-bottom: 0;
        opacity: 0.9;
    }

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

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

    .work-name{
        font-weight: 600;
        color: #343a40;
        margin-bottom: 3px;
    }

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

    .budget-badge{
        background: rgba(40, 199, 111, 0.12);
        color: #28c76f;
        padding: 8px 14px;
        border-radius: 30px;
        font-size: 12px;
        font-weight: 600;
    }

    .material-badge{
        background: rgba(115, 103, 240, 0.12);
        color: #7367f0;
        padding: 8px 14px;
        border-radius: 30px;
        font-size: 12px;
        font-weight: 600;
    }

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

    .user-avatar{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #7367f0;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        margin-right: 10px;
        text-transform: uppercase;
    }

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

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

    .dataTables_wrapper .dataTables_filter input{
        border-radius: 10px;
        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;
    }

</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="#!">Works</a>
                            </li>
                        </ul>
                    </div>

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


        <div class="row mt-4">

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

                <div class="card works-card">

                    <div class="card-body">


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

                            <div>

                                <h4 class="mb-1 font-weight-bold">
                                    All Works
                                </h4>

                                <p class="text-muted mb-0">
                                    Total Works : {{works|length}}
                                </p>

                            </div>

                        </div>



                        <div class="table-responsive">

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

                                <thead>

                                    <tr>
                                        <th>#</th>
                                        <th>Work Details</th>
                                        <th>Material</th>
                                        <th>Budget</th>
                                        <th>User</th>
                                        <th>Created</th>
                                        <th class="text-right">Action</th>
                                    </tr>

                                </thead>

                                <tbody>

                                    {% for work in works %}

                                        <tr>

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

                                            <td>

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

                                                <div class="work-id">
                                                    Work ID : #{{work.id}}
                                                </div>

                                            </td>

                                            <td>

                                                <span class="material-badge">
                                                    {{work.material}}
                                                </span>

                                            </td>

                                            <td>

                                                <span class="budget-badge">
                                                    ₹ {{work.budget}}
                                                </span>

                                            </td>

                                            <td>

                                                <div class="user-box">

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

                                                    <div>

                                                        <div class="font-weight-bold">
                                                            {{work.user.name}}
                                                        </div>

                                                    </div>

                                                </div>

                                            </td>

                                            <td>

                                                <div class="font-weight-bold">
                                                    {{work.created_at|date:"d M Y"}}
                                                </div>

                                                <small class="text-muted">
                                                    {{work.created_at|time:"h:i A"}}
                                                </small>

                                            </td>

                                            <td class="text-right">

                                                <a href="/admin/works/sub-categories/{{work.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 %}