{% extends 'base.html' %}

{% load static %}

{% block body %}

{% include 'navbar.html' %}

<style>

    body{
        background: #f4f7fb;
    }

    .custom-card{
        border: none;
        border-radius: 24px;
        overflow: hidden;
        background: #ffffff;
        box-shadow: 0 10px 35px rgba(0,0,0,0.06);
    }

    .nav-pills{
        background: #f5f7ff;
        padding: 12px;
        border-radius: 18px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .nav-pills .nav-link{
        border-radius: 14px;
        padding: 14px 24px;
        color: #6c757d;
        font-weight: 600;
        transition: 0.3s;
        display: flex;
        align-items: center;
    }

    .nav-pills .nav-link i{
        margin-right: 10px;
        font-size: 16px;
    }

    .nav-pills .nav-link.active{
        background: linear-gradient(135deg,#7367f0,#9e95f5);
        color: #fff;
        box-shadow: 0 8px 20px rgba(115,103,240,0.25);
    }

    .tab-pane{
        padding-top: 25px;
    }

    .detail-box{
        background: linear-gradient(180deg,#ffffff 0%,#f8f9fc 100%);
        border-radius: 22px;
        padding: 24px;
        height: 100%;
        border: 1px solid #eef1f7;
        transition: 0.3s;
    }

    .detail-box:hover{
        transform: translateY(-4px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    }

    .detail-label{
        color: #98a0b3;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 10px;
    }

    .detail-value{
        color: #2c2f48;
        font-size: 18px;
        font-weight: 700;
    }

    .description-box{
        background: #fff;
        border-radius: 16px;
        padding: 18px;
        line-height: 1.9;
        color: #5c6278;
        border: 1px dashed #dfe3eb;
        margin-top: 10px;
    }

    .status-badge{
        padding: 10px 18px;
        border-radius: 40px;
        font-size: 13px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
    }

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

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

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

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

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

    .progress{
        height: 16px;
        border-radius: 50px;
        overflow: hidden;
        background: #eceff5;
    }

    .progress-bar{
        border-radius: 50px;
        background: linear-gradient(90deg,#7367f0,#9e95f5);
    }

    .rating-number{
        font-size: 60px;
        font-weight: 800;
        color: #ff9f43;
        line-height: 1;
    }

    .rating-stars{
        margin-top: 15px;
    }

    .rating-stars i{
        font-size: 22px;
        margin: 0 2px;
    }

    .gallery-card{
        position: relative;
        overflow: hidden;
        border-radius: 20px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.08);
        background: #fff;
    }

    .gallery-card img{
        width: 100%;
        height: 250px;
        object-fit: cover;
        transition: 0.4s;
    }

    .gallery-card:hover img{
        transform: scale(1.08);
    }

    .gallery-overlay{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 18px;
        background: linear-gradient(transparent,rgba(0,0,0,0.8));
        color: #fff;
        font-weight: 600;
    }

    .video-card{
        overflow: hidden;
        border-radius: 20px;
        background: #000;
        box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    }

    .video-card video{
        width: 100%;
        height: 260px;
        object-fit: cover;
    }

    .empty-box{
        text-align: center;
        padding: 80px 20px;
        color: #98a0b3;
    }

    .empty-box i{
        font-size: 50px;
        margin-bottom: 15px;
    }

    .profile-avatar{
        width: 75px;
        height: 75px;
        border-radius: 50%;
        background: linear-gradient(135deg,#7367f0,#9e95f5);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 28px;
        font-weight: 700;
        flex-shrink: 0;
    }

    .user-info h5{
        font-weight: 700;
        color: #2c2f48;
    }

    .user-info p{
        margin-bottom: 7px;
        color: #7b8198;
    }

</style>





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

    <div class="pcoded-content">


        <!-- PAGE HEADER -->

        <div class="page-header">

            <div class="page-block">

                <div class="row align-items-center">

                    <div class="col-md-8">

                        <div class="page-header-title">

                            <h3 class="m-b-10 font-weight-bold">

                                <i class="feather icon-briefcase text-primary mr-2"></i>
                                {{work_sub_category.work.name}}

                            </h3>

                        </div>

                        <ul class="breadcrumb">

                            <li class="breadcrumb-item">

                                <a href="/admin/dashboard">
                                    <i class="feather icon-home"></i>
                                </a>

                            </li>

                            <li class="breadcrumb-item">

                                <a href="/admin/works">
                                    Works
                                </a>

                            </li>

                            <li class="breadcrumb-item text-muted">

                                {{work_sub_category.sub_category.name}} • Manage project progress, contractors and work status.

                            </li>

                        </ul>

                    </div>



                    <div class="col-md-4 text-md-right mt-3 mt-md-0">

                        {% if work_sub_category.status == 0 %}
                            <span class="status-badge status-pending">Pending</span>

                        {% elif work_sub_category.status == 1 %}
                            <span class="status-badge status-assigned">Assigned</span>

                        {% elif work_sub_category.status == 2 %}
                            <span class="status-badge status-started">Started</span>

                        {% elif work_sub_category.status == 3 %}
                            <span class="status-badge status-completed">Completed</span>

                        {% else %}
                            <span class="status-badge status-cancelled">Cancelled</span>
                        {% endif %}

                    </div>

                </div>

            </div>

        </div>





        <!-- MAIN CARD -->

        <div class="card custom-card">

            <div class="card-body p-4">


                <!-- TABS -->

                <ul class="nav nav-pills" role="tablist">

                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="pill" href="#overview">
                            <i class="feather icon-info"></i>
                            Overview
                        </a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" data-toggle="pill" href="#customer">
                            <i class="feather icon-user"></i>
                            Customer
                        </a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" data-toggle="pill" href="#contractor">
                            <i class="feather icon-users"></i>
                            Contractor
                        </a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" data-toggle="pill" href="#progress">
                            <i class="feather icon-activity"></i>
                            Progress
                        </a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" data-toggle="pill" href="#reviews">
                            <i class="feather icon-star"></i>
                            Reviews
                        </a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" data-toggle="pill" href="#images">
                            <i class="feather icon-image"></i>
                            Images
                        </a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" data-toggle="pill" href="#videos">
                            <i class="feather icon-video"></i>
                            Videos
                        </a>
                    </li>

                </ul>





                <div class="tab-content">



                    <!-- OVERVIEW -->

                    <div class="tab-pane fade show active" id="overview">

                        <div class="row">

                            <div class="col-lg-6 mb-4">

                                <div class="detail-box">

                                    <div class="detail-label">
                                        Work Name
                                    </div>

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

                                </div>

                            </div>



                            <div class="col-lg-6 mb-4">

                                <div class="detail-box">

                                    <div class="detail-label">
                                        Sub Category
                                    </div>

                                    <div class="detail-value">
                                        {{work_sub_category.sub_category.name}}
                                    </div>

                                </div>

                            </div>



                            <div class="col-lg-6 mb-4">

                                <div class="detail-box">

                                    <div class="detail-label">
                                        Material
                                    </div>

                                    <div class="detail-value">
                                        {{work_sub_category.work.material}}
                                    </div>

                                </div>

                            </div>



                            <div class="col-lg-6 mb-4">

                                <div class="detail-box">

                                    <div class="detail-label">
                                        Budget
                                    </div>

                                    <div class="detail-value text-success">
                                        ₹ {{work_sub_category.work.budget}}
                                    </div>

                                </div>

                            </div>



                            <!-- CUSTOMER DETAILS -->

                            <div class="col-lg-6 mb-4">

                                <div class="detail-box">

                                    <div class="detail-label mb-4">
                                        Customer Details
                                    </div>

                                    <div class="d-flex align-items-center">

                                        {% if work_sub_category.work.user.image %}

                                            <img src="{{work_sub_category.work.user.image.url}}"
                                                 class="rounded-circle mr-3"
                                                 style="width:75px;height:75px;object-fit:cover;">

                                        {% else %}

                                            <div class="profile-avatar mr-3">

                                                {{work_sub_category.work.user.name|slice:":1"}}

                                            </div>

                                        {% endif %}



                                        <div class="user-info">

                                            <h5 class="mb-1">

                                                {{work_sub_category.work.user.name}}

                                            </h5>

                                            {% if work_sub_category.work.user.email %}
                                                <p>
                                                    <i class="feather icon-mail mr-2"></i>
                                                    {{work_sub_category.work.user.email}}
                                                </p>
                                            {% endif %}

                                            {% if work_sub_category.work.user.phone %}
                                                <p>
                                                    <i class="feather icon-phone mr-2"></i>
                                                    {{work_sub_category.work.user.phone}}
                                                </p>
                                            {% endif %}

                                        </div>

                                    </div>

                                </div>

                            </div>





                            <!-- CONTRACTOR DETAILS -->

                            <div class="col-lg-6 mb-4">

                                <div class="detail-box">

                                    <div class="detail-label mb-4">
                                        Contractor Details
                                    </div>

                                    {% if work_sub_category.contractor %}

                                        <div class="d-flex align-items-center">

                                            {% if work_sub_category.contractor.image %}

                                                <img src="{{work_sub_category.contractor.image.url}}"
                                                     class="rounded-circle mr-3"
                                                     style="width:75px;height:75px;object-fit:cover;">

                                            {% else %}

                                                <div class="profile-avatar mr-3">

                                                    {{work_sub_category.contractor.name|slice:":1"}}

                                                </div>

                                            {% endif %}



                                            <div class="user-info">

                                                <h5 class="mb-1">

                                                    {{work_sub_category.contractor.name}}

                                                </h5>

                                                {% if work_sub_category.contractor.email %}
                                                    <p>
                                                        <i class="feather icon-mail mr-2"></i>
                                                        {{work_sub_category.contractor.email}}
                                                    </p>
                                                {% endif %}

                                                {% if work_sub_category.contractor.phone %}
                                                    <p>
                                                        <i class="feather icon-phone mr-2"></i>
                                                        {{work_sub_category.contractor.phone}}
                                                    </p>
                                                {% endif %}

                                            </div>

                                        </div>

                                    {% else %}

                                        <div class="empty-box py-4">

                                            <i class="feather icon-user-x"></i>

                                            <h6 class="mb-0">
                                                No Contractor Assigned
                                            </h6>

                                        </div>

                                    {% endif %}

                                </div>

                            </div>





                            <!-- DESCRIPTION -->

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

                                <div class="detail-box">

                                    <div class="detail-label">
                                        Description
                                    </div>

                                    <div class="description-box">

                                        {{work_sub_category.work.description}}

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>



                    <!-- PROGRESS -->

                    <div class="tab-pane fade" id="progress">

                        <div class="detail-box">

                            <div class="detail-label mb-3">
                                Project Completion
                            </div>

                            <h2 class="font-weight-bold text-primary mb-4">
                                {{work_sub_category.progress}}%
                            </h2>

                            <div class="progress">

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

                                </div>

                            </div>

                        </div>

                    </div>





                    <!-- REVIEWS -->

                    <div class="tab-pane fade" id="reviews">

                        <div class="row">

                            <div class="col-lg-4 mb-4">

                                <div class="detail-box text-center">

                                    <div class="detail-label">
                                        Overall Rating
                                    </div>

                                    <div class="rating-number">
                                        {{work_sub_category.rating}}.0
                                    </div>

                                    <div class="rating-stars">

                                        {% for i in "12345" %}

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

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

                                            {% else %}

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

                                            {% endif %}

                                        {% endfor %}

                                    </div>

                                </div>

                            </div>



                            <div class="col-lg-8 mb-4">

                                <div class="detail-box">

                                    <div class="detail-label">
                                        Customer Review
                                    </div>

                                    <div class="description-box">

                                        {% if work_sub_category.review %}

                                            "{{work_sub_category.review}}"

                                        {% else %}

                                            No review submitted yet.

                                        {% endif %}

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>





                    <!-- IMAGES -->

                    <div class="tab-pane fade" id="images">

                        <div class="row">

                            {% for image in work_sub_category.work_progress_images.all %}

                                <div class="col-lg-3 col-md-4 col-sm-6 mb-4">

                                    <div class="gallery-card">

                                        <img src="{{image.image.url}}">

                                        <div class="gallery-overlay">
                                            Progress Image
                                        </div>

                                    </div>

                                </div>

                            {% empty %}

                                <div class="col-12">

                                    <div class="empty-box">

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

                                        <h5>No Images Found</h5>

                                    </div>

                                </div>

                            {% endfor %}

                        </div>

                    </div>





                    <!-- VIDEOS -->

                    <div class="tab-pane fade" id="videos">

                        <div class="row">

                            {% for video in work_sub_category.work_progress_videos.all %}

                                <div class="col-lg-4 col-md-6 mb-4">

                                    <div class="video-card">

                                        <video controls>

                                            <source src="{{video.video.url}}">

                                        </video>

                                    </div>

                                </div>

                            {% empty %}

                                <div class="col-12">

                                    <div class="empty-box">

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

                                        <h5>No Videos Found</h5>

                                    </div>

                                </div>

                            {% endfor %}

                        </div>

                    </div>



                </div>

            </div>

        </div>

    </div>

</div>



{% for message in messages %}

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

{% endfor %}

{% endblock %}