<?php include 'header.php'; ?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Task View</title>

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com"></script>

<style>

:root{
--ink:#0f0e17;
--muted:#6b6b80;
--line:#e8e8f0;
--accent:#5b4fcf;
--accent-light:#ede9ff;
--accent-mid:#8b7ee8;
--surface:#fafafa;
--white:#ffffff;
--green:#16a34a;
--green-light:#dcfce7;
--amber:#d97706;
--amber-light:#fef3c7;
}

*{
box-sizing:border-box;
margin:0;
padding:0;
}

html,body{
width:100%;
overflow-x:hidden;
}

body{
font-family:'DM Sans',sans-serif;
background:var(--surface);
color:var(--ink);
min-height:100vh;
-webkit-font-smoothing:antialiased;
line-height:1.5;
font-size:14px;
}

.page{
max-width:1360px;
width:100%;
margin:0 auto;
padding:clamp(12px,2vw,28px);
}

/* HERO */

.hero{
background:var(--white);
border:1px solid var(--line);
border-radius:22px;
padding:clamp(20px,3vw,32px);
margin-bottom:20px;
position:relative;
overflow:hidden;
}

.hero::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:5px;
background:linear-gradient(90deg,var(--accent) 0%,var(--accent-mid) 60%,#c4b5fd 100%);
}

.hero-inner{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:24px;
flex-wrap:wrap;
}

.avatar-wrap{
position:relative;
flex-shrink:0;
}

.avatar{
width:clamp(80px,11vw,110px);
height:clamp(80px,11vw,110px);
border-radius:20px;
border:3px solid var(--line);
background:var(--accent-light);
display:flex;
align-items:center;
justify-content:center;
font-family:'Playfair Display',serif;
font-size:clamp(28px,4vw,40px);
font-weight:700;
color:var(--accent);
}

.avatar-status{
position:absolute;
bottom:5px;
right:5px;
width:14px;
height:14px;
border-radius:50%;
background:var(--green);
border:2px solid var(--white);
}

.hero-info{
flex:1;
min-width:240px;
}

.hero-name{
font-family:'Playfair Display',serif;
font-size:clamp(24px,4vw,32px);
font-weight:700;
color:var(--ink);
line-height:1.2;
margin-bottom:8px;
}

.hero-designation{
font-size:14px;
color:var(--muted);
margin-bottom:14px;
}

.hero-pills{
display:flex;
flex-wrap:wrap;
gap:7px;
margin-bottom:16px;
}

.pill{
display:inline-flex;
align-items:center;
gap:5px;
height:26px;
padding:0 11px;
border-radius:18px;
font-size:11px;
font-weight:600;
white-space:nowrap;
}

.pill-accent{
background:var(--accent-light);
color:var(--accent);
}

.pill-green{
background:var(--green-light);
color:var(--green);
}

.pill-amber{
background:var(--amber-light);
color:var(--amber);
}

.hero-meta{
display:flex;
flex-wrap:wrap;
gap:16px;
}

.hero-meta-item{
display:flex;
align-items:center;
gap:6px;
font-size:12px;
color:var(--muted);
}

.hero-meta-item i{
font-size:14px;
color:var(--accent-mid);
}

.hero-actions{
display:flex;
flex-direction:column;
gap:8px;
flex-shrink:0;
}

/* BUTTONS */

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
height:36px;
padding:0 15px;
border-radius:10px;
font-size:12px;
font-weight:600;
cursor:pointer;
transition:all .18s ease;
border:none;
text-decoration:none;
white-space:nowrap;
}

.btn-ghost{
background:transparent;
border:1px solid var(--line);
color:var(--muted);
}

.btn-ghost:hover{
border-color:var(--accent-mid);
background:var(--accent-light);
color:var(--accent);
}

/* TABS */

.tabs-wrap{
background:var(--white);
border:1px solid var(--line);
border-radius:16px;
margin-bottom:18px;
overflow:hidden;
}

.tabs{
display:flex;
overflow-x:auto;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
padding:5px;
gap:4px;
}

.tabs::-webkit-scrollbar{
display:none;
}

.tab{
display:inline-flex;
align-items:center;
gap:6px;
padding:9px 16px;
border-radius:10px;
font-size:12px;
font-weight:500;
border:none;
background:transparent;
color:var(--muted);
cursor:pointer;
white-space:nowrap;
transition:all .18s ease;
flex-shrink:0;
}

.tab.active{
background:var(--accent-light);
color:var(--accent);
font-weight:600;
}

/* CONTENT */

.tab-content{
display:none;
}

.tab-content.active{
display:block;
}

.section-card{
background:var(--white);
border:1px solid var(--line);
border-radius:18px;
margin-bottom:18px;
overflow:hidden;
}

.section-head{
padding:16px 20px;
border-bottom:1px solid var(--line);
display:flex;
align-items:center;
gap:10px;
}

.section-head-icon{
width:32px;
height:32px;
border-radius:9px;
background:var(--accent-light);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}

.section-head-icon i{
font-size:16px;
color:var(--accent);
}

.section-head-title{
font-family:'Playfair Display',serif;
font-size:15px;
font-weight:600;
color:var(--ink);
}

.section-body{
padding:20px;
}

.field-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:18px 24px;
}

.field-group{
min-width:0;
}

.field-label{
font-size:10px;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--muted);
margin-bottom:4px;
}

.field-value{
font-size:14px;
font-weight:500;
color:var(--ink);
line-height:1.5;
word-break:break-word;
}

/* DESCRIPTION BOX */

.desc-box{
background:#fafafa;
border:1px solid var(--line);
padding:18px;
border-radius:14px;
line-height:1.8;
font-size:14px;
color:var(--ink);
}

/* RESPONSIVE */

@media(max-width:768px){

.page{
padding:12px;
}

.hero{
padding:18px;
border-radius:18px;
}

.hero-inner{
flex-direction:column;
gap:18px;
}

.hero-actions{
width:100%;
flex-direction:row;
}

.hero-actions .btn{
flex:1;
}

.field-grid{
grid-template-columns:1fr;
}

.section-body{
padding:16px;
}

}

</style>
</head>

<body>

<div class="max-w-[1800px] mx-auto mt-6 mb-5 flex items-center justify-between gap-3">

    <h1 class="text-[18px] sm:text-2xl font-bold text-black leading-tight">
       View Task Details
    </h1>

</div>

<div class="page">

    <!-- HERO -->
    <div class="hero">

        <div class="hero-inner">

            <div class="avatar-wrap">

                <div class="avatar">
                    TS
                </div>

                <div class="avatar-status"></div>

            </div>

            <div class="hero-info">

                <div class="hero-name">
                    Raj Patel
                </div>

                <div class="hero-designation">
                    Annual Maintenance Task
                </div>

                <div class="hero-pills">


                    <div class="pill pill-green">
                        <i class="ri-checkbox-circle-line"></i>
                        Completed
                    </div>

                    <div class="pill pill-amber">
                        <i class="ri-time-line"></i>
                        High Priority
                    </div>

                </div>

                <div class="hero-meta">

                    <div class="hero-meta-item">
                        <i class="ri-calendar-line"></i>
                        21 May 2026
                    </div>

                    <div class="hero-meta-item">
                        <i class="ri-user-line"></i>
                        Assigned To : Rahul Sharma
                    </div>



                </div>

            </div>

            <div class="hero-actions">

                <a href="task_list.php">
                    <button class="btn btn-ghost">
                        <i class="ri-arrow-left-line"></i>
                        Back
                    </button>
                </a>

            </div>

        </div>

    </div>

    <!-- TABS -->

    <div class="tabs-wrap">

        <div class="tabs">

            <button class="tab active" onclick="switchTab('Task Info',this)">
                <i class="ri-file-list-line"></i>
                Task Info
            </button>

            <button class="tab" onclick="switchTab('Assignment',this)">
                <i class="ri-user-settings-line"></i>
                Assignment
            </button>

            <button class="tab" onclick="switchTab('Schedule',this)">
                <i class="ri-calendar-check-line"></i>
                Schedule
            </button>

            <button class="tab" onclick="switchTab('Remarks',this)">
                <i class="ri-chat-1-line"></i>
                Remarks
            </button>

        </div>

    </div>

    <!-- TAB 1 -->

    <div id="tab-Task Info" class="tab-content active">

        <div class="section-card">

            <div class="section-head">

                <div class="section-head-icon">
                    <i class="ri-file-list-line"></i>
                </div>

                <div class="section-head-title">
                    Task Information
                </div>

            </div>

            <div class="section-body">

                <div class="field-grid">

                    <div class="field-group">
                        <div class="field-label">Task Title</div>
                        <div class="field-value">AMC Server Maintenance</div>
                    </div>

                    <div class="field-group">
                        <div class="field-label">Task Code</div>
                        <div class="field-value">TASK-2026-001</div>
                    </div>

                    <div class="field-group">
                        <div class="field-label">Task Type</div>
                        <div class="field-value">AMC Support</div>
                    </div>

                    <div class="field-group">
                        <div class="field-label">Priority</div>
                        <div class="field-value">High</div>
                    </div>

                    <div class="field-group">
                        <div class="field-label">Status</div>
                        <div class="field-value">Completed</div>
                    </div>

                    <div class="field-group">
                        <div class="field-label">Department</div>
                        <div class="field-value">IT Department</div>
                    </div>

                </div>

            </div>

        </div>

    </div>

    <!-- TAB 2 -->

    <div id="tab-Assignment" class="tab-content">

        <div class="section-card">

            <div class="section-head">

                <div class="section-head-icon">
                    <i class="ri-user-settings-line"></i>
                </div>

                <div class="section-head-title">
                    Assignment Details
                </div>

            </div>

            <div class="section-body">

                <div class="field-grid">

                    <div class="field-group">
                        <div class="field-label">Assigned By</div>
                        <div class="field-value">Amit Patel</div>
                    </div>

                    <div class="field-group">
                        <div class="field-label">Assigned To</div>
                        <div class="field-value">Rahul Sharma</div>
                    </div>

                    <div class="field-group">
                        <div class="field-label">Client Name</div>
                        <div class="field-value">TechnoSoft Pvt Ltd</div>
                    </div>

                    <div class="field-group">
                        <div class="field-label">Team</div>
                        <div class="field-value">Technical Support</div>
                    </div>

                    <div class="field-group">
                        <div class="field-label">Contact Person</div>
                        <div class="field-value">Arjun Mehta</div>
                    </div>

                    <div class="field-group">
                        <div class="field-label">Contact Number</div>
                        <div class="field-value">+91 98765 43210</div>
                    </div>

                </div>

            </div>

        </div>

    </div>

    <!-- TAB 3 -->

    <div id="tab-Schedule" class="tab-content">

        <div class="section-card">

            <div class="section-head">

                <div class="section-head-icon">
                    <i class="ri-calendar-check-line"></i>
                </div>

                <div class="section-head-title">
                    Schedule Details
                </div>

            </div>

            <div class="section-body">

                <div class="field-grid">

                    <div class="field-group">
                        <div class="field-label">Start Date</div>
                        <div class="field-value">20 May 2026</div>
                    </div>

                    <div class="field-group">
                        <div class="field-label">Due Date</div>
                        <div class="field-value">25 May 2026</div>
                    </div>

                    <div class="field-group">
                        <div class="field-label">Completion Date</div>
                        <div class="field-value">21 May 2026</div>
                    </div>

                    <div class="field-group">
                        <div class="field-label">Working Hours</div>
                        <div class="field-value">5 Hours</div>
                    </div>

                    <div class="field-group">
                        <div class="field-label">Task Location</div>
                        <div class="field-value">Surat Office</div>
                    </div>

                    <div class="field-group">
                        <div class="field-label">Meeting Type</div>
                        <div class="field-value">On Site</div>
                    </div>

                </div>

            </div>

        </div>

    </div>

    <!-- TAB 4 -->

    <div id="tab-Remarks" class="tab-content">

        <div class="section-card">

            <div class="section-head">

                <div class="section-head-icon">
                    <i class="ri-chat-1-line"></i>
                </div>

                <div class="section-head-title">
                    Task Remarks
                </div>

            </div>

            <div class="section-body">

                <div class="field-group">

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

                    <div class="desc-box">
                        Server maintenance completed successfully. 
                        System performance optimized, backup verification done, 
                        and security updates installed properly. 
                        Client approved all maintenance work.
                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<script>

function switchTab(name, el) {

document.querySelectorAll('.tab-content').forEach(t => {
t.classList.remove('active');
});

document.querySelectorAll('.tab').forEach(t => {
t.classList.remove('active');
});

document.getElementById('tab-' + name).classList.add('active');

el.classList.add('active');

}

</script>

</body>
</html>

<?php include 'footer.php'; ?>