<?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>Employee Profile — 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{
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);
object-fit:cover;
}

.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:4px;
}

.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;
}

.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-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;
}

.tab:not(.active):hover{
background:#f4f4f6;
color:var(--ink);
}

.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;
}

.sub-head{
font-size:11px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--accent);
margin-bottom:14px;
display:flex;
align-items:center;
gap:6px;
}

.sub-head::after{
content:'';
flex:1;
height:1px;
background:var(--accent-light);
}

.addr-block{
border:1px solid var(--line);
border-radius:14px;
padding:16px 18px;
background:#fafafa;
height:100%;
}

.addr-title{
font-size:10px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.06em;
color:var(--muted);
margin-bottom:6px;
display:flex;
align-items:center;
gap:5px;
}

.addr-text{
font-size:13px;
color:var(--ink);
line-height:1.6;
}

/* PROJECT TABLE */

.project-table-wrap{
width:100%;
overflow-x:auto;
border:1px solid var(--line);
border-radius:16px;
}

.project-table{
width:100%;
border-collapse:collapse;
min-width:900px;
background:#fff;
}

.project-table thead{
background:#f8f8fc;
}

.project-table th{
padding:14px 16px;
text-align:left;
font-size:11px;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--muted);
border-bottom:1px solid var(--line);
white-space:nowrap;
}

.project-table td{
padding:14px 16px;
font-size:13px;
color:var(--ink);
border-bottom:1px solid var(--line);
white-space:nowrap;
}

.project-table tbody tr:last-child td{
border-bottom:none;
}

.project-table tbody tr:hover{
background:#fafaff;
}

.status-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:5px 10px;
border-radius:20px;
font-size:11px;
font-weight:600;
}

.status-active{
background:#dcfce7;
color:#15803d;
}

.status-pending{
background:#fef3c7;
color:#b45309;
}

.status-completed{
background:#dbeafe;
color:#2563eb;
}

.action-btn{
width:32px;
height:32px;
border:none;
border-radius:8px;
background:var(--accent-light);
color:var(--accent);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:.2s;
}

.action-btn:hover{
background:var(--accent);
color:#fff;
}

@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;
flex-wrap:wrap;
}

.hero-actions .btn{
flex:1;
min-width:130px;
}

.field-grid{
grid-template-columns:1fr 1fr;
gap:14px 16px;
}

.section-body{
padding:16px;
}

}

@media(max-width:520px){

.page{
padding:10px;
}

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

.hero-name{
font-size:24px;
}

.hero-meta{
flex-direction:column;
gap:8px;
}

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

.section-head{
padding:14px 16px;
}

.section-body{
padding:14px;
}

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

.hero-actions .btn{
width:100%;
}

.tab{
padding:8px 13px;
font-size:11px;
}

}

</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 Project Details
    </h1>

</div>

<div class="page">

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

    <div class="hero-inner">

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

        <div class="hero-info">

            <div class="hero-name">
                Arjun Mehta
            </div>

            <div class="hero-meta">

                <div class="hero-meta-item">
                    <i class="ri-mail-line"></i>
                    arjun.mehta@company.com
                </div>

                <div class="hero-meta-item">
                    <i class="ri-phone-line"></i>
                    +91 98765 43210
                </div>

            </div>

        </div>

        <div class="hero-actions">

            <a href="project_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('Client Info',this)">
            <i class="ri-user-3-line"></i>
            Client Info
        </button>

        <button class="tab" onclick="switchTab('Contact Info',this)">
            <i class="ri-briefcase-line"></i>
            Contact Info
        </button>

        <button class="tab" onclick="switchTab('Address',this)">
            <i class="ri-map-pin-line"></i>
            Address
        </button>

        <button class="tab" onclick="switchTab('Other Details',this)">
            <i class="ri-bank-line"></i>
            Other Details
        </button>

        <!-- NEW TAB -->
        <button class="tab" onclick="switchTab('Project List',this)">
            <i class="ri-folder-2-line"></i>
            Project List
        </button>

    </div>

</div>

<!-- TAB 1 -->

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

    <div class="section-card">

        <div class="section-head">

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

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

        </div>

        <div class="section-body">

            <div class="field-grid">

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

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

                <div class="field-group">
                    <div class="field-label">Client Type</div>
                    <div class="field-value">Existing</div>
                </div>

                <div class="field-group">
                    <div class="field-label">Industry Type</div>
                    <div class="field-value">IT Services</div>
                </div>

                <div class="field-group">
                    <div class="field-label">Company Size</div>
                    <div class="field-value">50 Employees</div>
                </div>

                <div class="field-group">
                    <div class="field-label">Website</div>
                    <div class="field-value">www.technosoft.com</div>
                </div>

                <div class="field-group">
                    <div class="field-label">GST Number</div>
                    <div class="field-value">24ABCDE1234F1Z5</div>
                </div>

                <div class="field-group">
                    <div class="field-label">PAN Number</div>
                    <div class="field-value">ABCDE1234F</div>
                </div>

                <div class="field-group">
                    <div class="field-label">Client Code</div>
                    <div class="field-value">AMC-2024-001</div>
                </div>

            </div>

        </div>

    </div>

</div>

<!-- TAB 2 -->

<div id="tab-Contact Info" class="tab-content">

    <div class="section-card">

        <div class="section-head">

            <div class="section-head-icon">
                <i class="ri-contacts-book-line"></i>
            </div>

            <div class="section-head-title">
                Contact Info
            </div>

        </div>

        <div class="section-body">

            <div class="field-grid">

                <div class="field-group">
                    <div class="field-label">Primary Contact Person</div>
                    <div class="field-value">Rahul Sharma</div>
                </div>

                <div class="field-group">
                    <div class="field-label">Email Address</div>
                    <div class="field-value">rahul@technosoft.com</div>
                </div>

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

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

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

                <div class="field-group">
                    <div class="field-label">Designation</div>
                    <div class="field-value">Project Manager</div>
                </div>

            </div>

        </div>

    </div>

</div>

<!-- TAB 3 -->

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

    <div class="section-card">

        <div class="section-head">

            <div class="section-head-icon">
                <i class="ri-map-pin-line"></i>
            </div>

            <div class="section-head-title">
                Address
            </div>

        </div>

        <div class="section-body">

            <div class="sub-head">
                <i class="ri-home-line"></i>
                Addresses
            </div>

            <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:20px;">

                <div class="addr-block">

                    <div class="addr-title">
                        <i class="ri-building-line"></i>
                        Office Address
                    </div>

                    <div class="addr-text">
                        201 Silver Business Hub,<br>
                        Ring Road, Surat,<br>
                        Gujarat - 395002
                    </div>

                </div>

                <div class="addr-block">

                    <div class="addr-title">
                        <i class="ri-bank-card-line"></i>
                        Billing Address
                    </div>

                    <div class="addr-text">
                        201 Silver Business Hub,<br>
                        Ring Road, Surat,<br>
                        Gujarat - 395002
                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<!-- TAB 4 -->

<div id="tab-Other Details" class="tab-content">

    <div class="section-card">

        <div class="section-head">

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

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

        </div>

        <div class="section-body">

            <div class="field-grid">

                <div class="field-group">
                    <div class="field-label">Client Category</div>
                    <div class="field-value">Premium</div>
                </div>

                <div class="field-group">
                    <div class="field-label">Payment Terms</div>
                    <div class="field-value">Monthly</div>
                </div>

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

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

                <div class="field-group">
                    <div class="field-label">Account Manager</div>
                    <div class="field-value">Amit Patel</div>
                </div>

                <div class="field-group">
                    <div class="field-label">Reference Source</div>
                    <div class="field-value">Website</div>
                </div>

            </div>

        </div>

    </div>

</div>

<!-- NEW TAB : PROJECT LIST -->

<div id="tab-Project List" class="tab-content">

    <div class="section-card">

        <div class="section-head">

            <div class="section-head-icon">
                <i class="ri-folder-2-line"></i>
            </div>

            <div class="section-head-title">
                View Project List
            </div>

        </div>

        <div class="section-body">

            <div class="project-table-wrap">

                <table class="project-table">

                    <thead>

                        <tr>
                            <th>Project Code</th>
                            <th>Project Name</th>
                            <th>Start Date</th>
                            <th>End Date</th>
                            <th>Project Manager</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>

                    </thead>

                    <tbody>

                        <tr>

                            <td>PRJ-001</td>
                            <td>ERP Management System</td>
                            <td>01 Jan 2026</td>
                            <td>30 Jun 2026</td>
                            <td>Amit Patel</td>

                            <td>
                                <span class="status-badge status-active">
                                    Active
                                </span>
                            </td>

                            <td>
                                <button class="action-btn">
                                    <i class="ri-eye-line"></i>
                                </button>
                            </td>

                        </tr>

                        <tr>

                            <td>PRJ-002</td>
                            <td>AMC Support Portal</td>
                            <td>10 Feb 2026</td>
                            <td>20 Aug 2026</td>
                            <td>Rahul Sharma</td>

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

                            <td>
                                <button class="action-btn">
                                    <i class="ri-eye-line"></i>
                                </button>
                            </td>

                        </tr>

                        <tr>

                            <td>PRJ-003</td>
                            <td>HR Management Software</td>
                            <td>15 Mar 2026</td>
                            <td>25 Dec 2026</td>
                            <td>Neha Joshi</td>

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

                            <td>
                                <button class="action-btn">
                                    <i class="ri-eye-line"></i>
                                </button>
                            </td>

                        </tr>

                    </tbody>

                </table>

            </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'; ?>