<!DOCTYPE html>
<html lang="en" dir="ltr" data-nav-layout="vertical" data-theme-mode="light" data-header-styles="light" data-menu-styles="dark" data-toggled="close">
   <head>
      <!-- Meta Data --> 
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Account Soft | PROGRAMERS INTERNATIONAL</title>
      <meta name="Description" content="">
      <meta name="Author" content="">
      <meta name="keywords" content="">
      <!-- Favicon --> 
      <link rel="icon" href="images/favicon.png" type="image/x-icon">
      <!-- Choices JS --> <script src="js/choices.min.js"></script> <!-- Bootstrap Css --> 
      <link id="style" href="css/bootstrap.min.css" rel="stylesheet">
      <!-- Main Theme Js --> <script src="js/main.js"></script> <!-- Style Css --> 
      <link href="css/styles.min.css" rel="stylesheet">
      <!-- Icons Css --> 
      <link href="css/icons.css" rel="stylesheet">
      <!-- Node Waves Css --> 
      <link href="css/waves.min.css" rel="stylesheet">
      <!-- Simplebar Css --> 
      <link href="css/simplebar.min.css" rel="stylesheet">
      <!-- Color Picker Css --> 
      <link rel="stylesheet" href="css/flatpickr.min.css">
      <link rel="stylesheet" href="css/nano.min.css">
      <!-- Choices Css --> 
      <link rel="stylesheet" href="css/choices.min.css">
      <link rel="stylesheet" href="css/jsvectormap.min.css">
      <link rel="stylesheet" href="css/swiper-bundle.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <meta http-equiv="imagetoolbar" content="no">
      <style type="text/css">
         <!-- input,textarea{-webkit-touch-callout:default;-webkit-user-select:auto;-khtml-user-select:auto;-moz-user-select:text;-ms-user-select:text;user-select:text} *{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none;user-select:none} -->
      </style>
      <style type="text/css" media="print">
         <!-- body{display:none} -->
      </style>
      <!--[if gte IE 5]>
      <frame>
      </frame><![endif]-->
   </head>
   <body>
      <div class="offcanvas offcanvas-end" tabindex="-1" id="switcher-canvas" aria-labelledby="offcanvasRightLabel">
         <div class="offcanvas-header border-bottom">
            <h5 class="offcanvas-title text-default" id="offcanvasRightLabel">Switcher</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> 
         </div>
         <div class="offcanvas-body">
            <nav class="border-bottom border-block-end-dashed">
               <div class="nav nav-tabs nav-justified" id="switcher-main-tab" role="tablist"> <button class="nav-link active" id="switcher-home-tab" data-bs-toggle="tab" data-bs-target="#switcher-home" type="button" role="tab" aria-controls="switcher-home" aria-selected="true">Theme Styles</button> <button class="nav-link" id="switcher-profile-tab" data-bs-toggle="tab" data-bs-target="#switcher-profile" type="button" role="tab" aria-controls="switcher-profile" aria-selected="false">Theme Colors</button> </div>
            </nav>
            <div class="tab-content" id="nav-tabContent">
               <div class="tab-pane fade show active border-0" id="switcher-home" role="tabpanel" aria-labelledby="switcher-home-tab" tabindex="0">
                  <div class="">
                     <p class="switcher-style-head">Theme Color Mode:</p>
                     <div class="row switcher-style gx-0">
                        <div class="col-4">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-light-theme"> Light </label> <input class="form-check-input" type="radio" name="theme-style" id="switcher-light-theme" checked=""> </div>
                        </div>
                        <div class="col-4">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-dark-theme"> Dark </label> <input class="form-check-input" type="radio" name="theme-style" id="switcher-dark-theme"> </div>
                        </div>
                     </div>
                  </div>
                  <div class="">
                     <p class="switcher-style-head">Directions:</p>
                     <div class="row switcher-style gx-0">
                        <div class="col-4">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-ltr"> LTR </label> <input class="form-check-input" type="radio" name="direction" id="switcher-ltr" checked=""> </div>
                        </div>
                        <div class="col-4">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-rtl"> RTL </label> <input class="form-check-input" type="radio" name="direction" id="switcher-rtl"> </div>
                        </div>
                     </div>
                  </div>
                  <div class="">
                     <p class="switcher-style-head">Navigation Styles:</p>
                     <div class="row switcher-style gx-0">
                        <div class="col-4">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-vertical"> Vertical </label> <input class="form-check-input" type="radio" name="navigation-style" id="switcher-vertical" checked=""> </div>
                        </div>
                        <div class="col-4">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-horizontal"> Horizontal </label> <input class="form-check-input" type="radio" name="navigation-style" id="switcher-horizontal"> </div>
                        </div>
                     </div>
                  </div>
                  <div class="navigation-menu-styles">
                     <p class="switcher-style-head">Vertical & Horizontal Menu Styles:</p>
                     <div class="row switcher-style gx-0 pb-2 gy-2">
                        <div class="col-4">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-menu-click"> Menu Click </label> <input class="form-check-input" type="radio" name="navigation-menu-styles" id="switcher-menu-click"> </div>
                        </div>
                        <div class="col-4">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-menu-hover"> Menu Hover </label> <input class="form-check-input" type="radio" name="navigation-menu-styles" id="switcher-menu-hover"> </div>
                        </div>
                        <div class="col-4">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-icon-click"> Icon Click </label> <input class="form-check-input" type="radio" name="navigation-menu-styles" id="switcher-icon-click"> </div>
                        </div>
                        <div class="col-4">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-icon-hover"> Icon Hover </label> <input class="form-check-input" type="radio" name="navigation-menu-styles" id="switcher-icon-hover"> </div>
                        </div>
                     </div>
                  </div>
                  <div class="sidemenu-layout-styles">
                     <p class="switcher-style-head">Sidemenu Layout Styles:</p>
                     <div class="row switcher-style gx-0 pb-2 gy-2">
                        <div class="col-sm-6">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-default-menu"> Default Menu </label> <input class="form-check-input" type="radio" name="sidemenu-layout-styles" id="switcher-default-menu" checked=""> </div>
                        </div>
                        <div class="col-sm-6">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-closed-menu"> Closed Menu </label> <input class="form-check-input" type="radio" name="sidemenu-layout-styles" id="switcher-closed-menu"> </div>
                        </div>
                        <div class="col-sm-6">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-icontext-menu"> Icon Text </label> <input class="form-check-input" type="radio" name="sidemenu-layout-styles" id="switcher-icontext-menu"> </div>
                        </div>
                        <div class="col-sm-6">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-icon-overlay"> Icon Overlay </label> <input class="form-check-input" type="radio" name="sidemenu-layout-styles" id="switcher-icon-overlay"> </div>
                        </div>
                        <div class="col-sm-6">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-detached"> Detached </label> <input class="form-check-input" type="radio" name="sidemenu-layout-styles" id="switcher-detached"> </div>
                        </div>
                        <div class="col-sm-6">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-double-menu"> Double Menu </label> <input class="form-check-input" type="radio" name="sidemenu-layout-styles" id="switcher-double-menu"> </div>
                        </div>
                     </div>
                  </div>
                  <div class="">
                     <p class="switcher-style-head">Page Styles:</p>
                     <div class="row switcher-style gx-0">
                        <div class="col-4">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-regular"> Regular </label> <input class="form-check-input" type="radio" name="page-styles" id="switcher-regular" checked=""> </div>
                        </div>
                        <div class="col-4">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-classic"> Classic </label> <input class="form-check-input" type="radio" name="page-styles" id="switcher-classic"> </div>
                        </div>
                        <div class="col-4">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-modern"> Modern </label> <input class="form-check-input" type="radio" name="page-styles" id="switcher-modern"> </div>
                        </div>
                     </div>
                  </div>
                  <div class="">
                     <p class="switcher-style-head">Layout Width Styles:</p>
                     <div class="row switcher-style gx-0">
                        <div class="col-4">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-full-width"> Full Width </label> <input class="form-check-input" type="radio" name="layout-width" id="switcher-full-width" checked=""> </div>
                        </div>
                        <div class="col-4">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-boxed"> Boxed </label> <input class="form-check-input" type="radio" name="layout-width" id="switcher-boxed"> </div>
                        </div>
                     </div>
                  </div>
                  <div class="">
                     <p class="switcher-style-head">Menu Positions:</p>
                     <div class="row switcher-style gx-0">
                        <div class="col-4">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-menu-fixed"> Fixed </label> <input class="form-check-input" type="radio" name="menu-positions" id="switcher-menu-fixed" checked=""> </div>
                        </div>
                        <div class="col-4">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-menu-scroll"> Scrollable </label> <input class="form-check-input" type="radio" name="menu-positions" id="switcher-menu-scroll"> </div>
                        </div>
                     </div>
                  </div>
                  <div class="">
                     <p class="switcher-style-head">Header Positions:</p>
                     <div class="row switcher-style gx-0">
                        <div class="col-4">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-header-fixed"> Fixed </label> <input class="form-check-input" type="radio" name="header-positions" id="switcher-header-fixed" checked=""> </div>
                        </div>
                        <div class="col-4">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-header-scroll"> Scrollable </label> <input class="form-check-input" type="radio" name="header-positions" id="switcher-header-scroll"> </div>
                        </div>
                     </div>
                  </div>
                  <div class="">
                     <p class="switcher-style-head">Loader:</p>
                     <div class="row switcher-style gx-0">
                        <div class="col-4">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-loader-enable"> Enable </label> <input class="form-check-input" type="radio" name="page-loader" id="switcher-loader-enable"> </div>
                        </div>
                        <div class="col-4">
                           <div class="form-check switch-select"> <label class="form-check-label" for="switcher-loader-disable"> Disable </label> <input class="form-check-input" type="radio" name="page-loader" id="switcher-loader-disable" checked=""> </div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="tab-pane fade border-0" id="switcher-profile" role="tabpanel" aria-labelledby="switcher-profile-tab" tabindex="0">
                  <div>
                     <div class="theme-colors">
                        <p class="switcher-style-head">Menu Colors:</p>
                        <div class="d-flex switcher-style pb-2">
                           <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-white" data-bs-toggle="tooltip" data-bs-placement="top" title="Light Menu" type="radio" name="menu-colors" id="switcher-menu-light"> </div>
                           <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-dark" data-bs-toggle="tooltip" data-bs-placement="top" title="Dark Menu" type="radio" name="menu-colors" id="switcher-menu-dark" checked=""> </div>
                           <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Color Menu" type="radio" name="menu-colors" id="switcher-menu-primary"> </div>
                           <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-gradient" data-bs-toggle="tooltip" data-bs-placement="top" title="Gradient Menu" type="radio" name="menu-colors" id="switcher-menu-gradient"> </div>
                           <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-transparent" data-bs-toggle="tooltip" data-bs-placement="top" title="Transparent Menu" type="radio" name="menu-colors" id="switcher-menu-transparent"> </div>
                        </div>
                        <div class="px-4 pb-3 text-muted fs-11">Note:If you want to change color Menu dynamically change from below Theme Primary color picker</div>
                     </div>
                     <div class="theme-colors">
                        <p class="switcher-style-head">Header Colors:</p>
                        <div class="d-flex switcher-style pb-2">
                           <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-white" data-bs-toggle="tooltip" data-bs-placement="top" title="Light Header" type="radio" name="header-colors" id="switcher-header-light" checked=""> </div>
                           <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-dark" data-bs-toggle="tooltip" data-bs-placement="top" title="Dark Header" type="radio" name="header-colors" id="switcher-header-dark"> </div>
                           <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Color Header" type="radio" name="header-colors" id="switcher-header-primary"> </div>
                           <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-gradient" data-bs-toggle="tooltip" data-bs-placement="top" title="Gradient Header" type="radio" name="header-colors" id="switcher-header-gradient"> </div>
                           <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-transparent" data-bs-toggle="tooltip" data-bs-placement="top" title="Transparent Header" type="radio" name="header-colors" id="switcher-header-transparent"> </div>
                        </div>
                        <div class="px-4 pb-3 text-muted fs-11">Note:If you want to change color Header dynamically change from below Theme Primary color picker</div>
                     </div>
                     <div class="theme-colors">
                        <p class="switcher-style-head">Theme Primary:</p>
                        <div class="d-flex flex-wrap align-items-center switcher-style">
                           <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-primary-1" type="radio" name="theme-primary" id="switcher-primary"> </div>
                           <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-primary-2" type="radio" name="theme-primary" id="switcher-primary1"> </div>
                           <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-primary-3" type="radio" name="theme-primary" id="switcher-primary2"> </div>
                           <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-primary-4" type="radio" name="theme-primary" id="switcher-primary3"> </div>
                           <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-primary-5" type="radio" name="theme-primary" id="switcher-primary4"> </div>
                           <div class="form-check switch-select ps-0 mt-1 color-primary-light">
                              <div class="theme-container-primary"></div>
                              <div class="pickr-container-primary"></div>
                           </div>
                        </div>
                     </div>
                     <div class="theme-colors">
                        <p class="switcher-style-head">Theme Background:</p>
                        <div class="d-flex flex-wrap align-items-center switcher-style">
                           <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-bg-1" type="radio" name="theme-background" id="switcher-background"> </div>
                           <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-bg-2" type="radio" name="theme-background" id="switcher-background1"> </div>
                           <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-bg-3" type="radio" name="theme-background" id="switcher-background2"> </div>
                           <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-bg-4" type="radio" name="theme-background" id="switcher-background3"> </div>
                           <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-bg-5" type="radio" name="theme-background" id="switcher-background4"> </div>
                           <div class="form-check switch-select ps-0 mt-1 tooltip-static-demo color-bg-transparent">
                              <div class="theme-container-background"></div>
                              <div class="pickr-container-background"></div>
                           </div>
                        </div>
                     </div>
                     <div class="menu-image mb-3">
                        <p class="switcher-style-head">Menu With Background Image:</p>
                        <div class="d-flex flex-wrap align-items-center switcher-style">
                           <div class="form-check switch-select m-2"> <input class="form-check-input bgimage-input bg-img1" type="radio" name="theme-background" id="switcher-bg-img"> </div>
                           <div class="form-check switch-select m-2"> <input class="form-check-input bgimage-input bg-img2" type="radio" name="theme-background" id="switcher-bg-img1"> </div>
                           <div class="form-check switch-select m-2"> <input class="form-check-input bgimage-input bg-img3" type="radio" name="theme-background" id="switcher-bg-img2"> </div>
                           <div class="form-check switch-select m-2"> <input class="form-check-input bgimage-input bg-img4" type="radio" name="theme-background" id="switcher-bg-img3"> </div>
                           <div class="form-check switch-select m-2"> <input class="form-check-input bgimage-input bg-img5" type="radio" name="theme-background" id="switcher-bg-img4"> </div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="d-flex justify-content-between canvas-footer flex-wrap"> <a href="https://themeforest.net/item/spruha-html-dashboard-template/29387837" target="_blank" class="btn btn-primary m-1">Buy Now</a> <a href="https://themeforest.net/user/spruko/portfolio" target="_blank" class="btn btn-info m-1">Our Portfolio</a> <a href="javascript:void(0);" id="reset-all" class="btn btn-secondary m-1">Reset</a> </div>
            </div>
         </div>
      </div>
      <!-- End Switcher --> <!-- Loader --> 
      <div id="loader"> <img src="images/media-79.svg" alt=""> </div>
      <!-- Loader --> 
      <div class="page">
      <!-- app-header --> 
      <?php
         $title = "Php Header Footer";                   
         include "header.php";     
         ?>
      <!-- End::app-sidebar --> <!-- Start::app-content --> 
      <div class="main-content app-content">
         <div class="container-fluid">
            <!-- Start::page-header --> 
            <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
               <div>
                  <h2 class="main-content-title fs-24 mb-1">Project Technical Datasheet</h2>
               </div>
               <ol class="breadcrumb mb-0">
                  <li class="breadcrumb-item"><a href="index.php">Home</a></li>
                  <li class="breadcrumb-item active" aria-current="page">PTD</li>
               </ol>
               <!-- <div class="d-flex">
                  <div class="justify-content-center"> <button type="button" class="btn btn-white btn-icon-text my-2 me-2 d-inline-flex align-items-center"> <i class="fe fe-download me-2 fs-14"></i> Import </button> <button type="button" class="btn btn-white btn-icon-text my-2 me-2 d-inline-flex align-items-center"> <i class="fe fe-filter me-2 fs-14"></i> Filter </button> <button type="button" class="btn btn-primary my-2 btn-icon-text d-inline-flex align-items-center"> <i class="fe fe-download-cloud me-2 fs-14"></i> Download Report </button> </div>
                  </div> -->
            </div>
            <!-- End::page-header --> <!-- Start::row-1 --> 
            <div class="row">
               <div class="col-xl-5">
                  <div class="card custom-card">
                     <div class="card-body">
                        <div class="row">
                           <div class="col-md-4">
                              <div class="mb-3"> <input type="text" class="form-control" id="form-text" placeholder="PTDS#."> </div>
                           </div>
                           <div class="col-md-4">
                              <div class="mb-3"> <input
                                 placeholder="PTDS Date"
                                 class="form-control"
                                 type="text"
                                 onfocus="(this.type='date')"
                                 onblur="(this.type='text')"
                                 id="date" /> </div>
                           </div>
                           <div class="col-md-4">
                              <div class="mb-3"> <input type="text" class="form-control" id="form-text" placeholder="Work#"> </div>
                           </div>
                        </div>
                        <div class="row">
                        </div>
                        <div class="row">
                           <div class="col-md-6">
                              <div class="mb-3"> <input type="text" class="form-control" id="form-text" placeholder="Man Hours"> </div>
                           </div>
                           <div class="col-md-6">
                              <div class="mb-3"> <input
                                 placeholder="C.Date"
                                 class="form-control"
                                 type="text"
                                 onfocus="(this.type='date')"
                                 onblur="(this.type='text')"
                                 id="date" /> </div>
                           </div>
                        </div>
                        <div class="row">
                           <div class="col-md-12">
                              <div class="input-group mb-3"> </div>
                           </div>
                           <button class="btn btn-primary" type="submit">Submit</button> 
                        </div>
                     </div>
                  </div>
               </div>
               <!-- End::row-1 --> 
               <div class="col-md-7">
                  <div class="d-flex justify-content-end " style="gap: 10px;margin-bottom: 15px;">
                     <span class="sortbytext"><small>Sort By</small></span>
                     <span>
                        <select name="cars" id="cars">
                           <option value="mercedes">Newest</option>
                           <option value="volvo">PTDS#</option>
                           <option value="saab">Date</option>
                        </select>
                     </span>
                  </div>
                  <div class="table table-responsive" style="overflow: scroll!important;">
                     <table class="table ">
                        <thead class="thead-light">
                           <tr>
                              <th scope="col">PTDS #</th>
                              <th scope="col">PTDS.Date</th>
                              <th scope="col">Work #</th>
                              <th scope="col">Man Hrs</th>
                              <th scope="col">Age</th>
                              <!-- <th scope="col">Used</th> -->
                              <th scope="col">C.Date</th>
                              <th scope="col">Status</th>
                              <th></th>
                           </tr>
                        </thead>
                        <tbody>
                           <tr>
                              <th scope="row"><a href="#!" data-bs-toggle="modal" data-bs-target="#staticBackdrop">25051</a></th>
                              <th scope="row">21/04/2025</th>
                              <td>3</td>
                              <td>10</td>
                              <td>2days</td>
                              <!-- <td>0</td> -->
                              <td>30/04/2025</td>
                              <td class="" style="color: #007bff!important;">Waiting</td>
                              <td></td>
                           </tr>
                           <tr>
                              <th scope="row"><a href="#!" data-bs-toggle="modal" data-bs-target="#staticBackdrop">25051</a></th>
                              <th scope="row">21/04/2025</th>
                              <td>4</td>
                              <td>10</td>
                              <td>2days</td>
                              <!-- <td>0</td> -->
                              <td>30/04/2025</td>
                              <td class="text-success">Accepted</td>
                              <td></td>
                           </tr>
                           <tr>
                              <th scope="row"><a href="#!" data-bs-toggle="modal" data-bs-target="#staticBackdrop">25051</a></th>
                              <th scope="row">21/04/2025</th>
                              <td>4</td>
                              <td>10</td>
                              <td>2days</td>
                              <!-- <td>0</td> -->
                              <td>30/04/2025</td>
                              <td class="" style="color:#ffcd39;">Progress</td>
                              <td></td>
                           </tr>
                           <tr>
                              <th scope="row"><a href="#!" data-bs-toggle="modal" data-bs-target="#staticBackdrop">25051</a></th>
                              <th scope="row">21/04/2025</th>
                              <td>4</td>
                              <td>10</td>
                              <td>2days</td>
                              <!-- <td>0</td> -->
                              <td>30/04/2025</td>
                              <td class="" style="color:#fd7e14;">QC</td>
                              <td></td>
                           </tr>
                           <tr>
                              <th scope="row"><a href="#!" data-bs-toggle="modal" data-bs-target="#staticBackdrop">25051</a></th>
                              <th scope="row">21/04/2025</th>
                              <td>4</td>
                              <td>10</td>
                              <td>2days</td>
                              <!-- <td>0</td> -->
                              <td>30/04/2025</td>
                              <td class="text-danger">Completed</td>
                              <td></td>
                           </tr>
                        </tbody>
                     </table>
                  </div>
               </div>
            </div>
         </div>
         <!-- End::app-content --> 
         <!-- Modal -->
         <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl">
               <div class="modal-content">
                  <div class="modal-header">
                     <h5 class="modal-title d-flex justify-content-between align-items-center w-100" id="staticBackdropLabel"><span>PTD#:25051</span><small>Total Hrs:30</small></h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                     <div class="table table-responsive" style="overflow: scroll!important;">
                        <table class="table ">
                           <thead class="thead-light">
                              <tr>
                                 <th scope="col">W.#</th>
                                 <th scope="col">W.Date</th>
                                 <th scope="col">W.ID</th>
                                 <th scope="col">M.Hrs</th>
                                 <th scope="col">U.Hrs</th>
                                 <th scope="col">B.Hrs</th>
                                 <th scope="col">Description</th>
                                 <th scope="col">Assigned</th>
                                 <th scope="col">Status</th>
                              </tr>
                           </thead>
                           <tbody>
                              <tr>
                                 <td>25051</td>
                                 <td>25/05/25</td>
                                 <td>25051-01</td>
                                 <td>1</td>
                                 <td>1</td>
                                 <td>0</td>
                                 <td>Domain Booking</td>
                                 <td>Dharsana</td>
                                 <td>Completed</td>
                              </tr>
                              <tr>
                                 <td>25051</td>
                                 <td>25/05/25</td>
                                 <td>25051-01</td>
                                 <td>9</td>
                                 <td>9</td>
                                 <td>0</td>
                                 <td>Web Designing</td>
                                 <td>Azeem</td>
                                 <td>Completed</td>
                              </tr>
                              <tr>
                                 <td>25051</td>
                                 <td>25/05/25</td>
                                 <td>25051-01</td>
                                 <td>20</td>
                                 <td>20</td>
                                 <td>0</td>
                                 <td>Domain Booking</td>
                                 <td>Dharsana</td>    
                                 <td>Completed</td>
                              </tr>
                           </tbody>
                        </table>
                     </div>
                  </div>
                  <!-- <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                     <button type="button" class="btn btn-primary">Understood</button>
                     </div> -->
               </div>
            </div>
         </div>
         <!-- Footer Start --> 
         <footer class="footer mt-auto py-3 bg-white text-center">
            <div class="container"> <span class="text-muted"> Copyright © <span id="year"></span> <a href="javascript:void(0);" class="text-dark fw-semibold">Account Soft</a>. Designed with <span class="bi bi-heart-fill text-danger"></span> by <a href="javascript:void(0);"> <span class="fw-semibold text-primary text-decoration-underline">PROGRAMERS</span> </a> All rights reserved </span> </div>
         </footer>
         <!-- Footer End --> <!-- Start Right-Sidebar --> 
         <!-- End Right-Sidebar --> 
      </div>
      <!-- Scroll To Top --> 
      <div class="scrollToTop"> <span class="arrow"><i class="fe fe-arrow-up"></i></span> </div>
      <div id="responsive-overlay"></div>
      <script src="js/popper.min.js"></script><script type="text/javascript"><!--
         s71h("nI,l|u>mGeiqE=XA\'OCW,Lb");
         -->
      </script> <!-- Bootstrap JS --> 
      <noscript>
         <p>To display this page you need a browser that supports JavaScript.</p>
      </noscript>
      <script src="js/bootstrap.bundle.min.js"></script><script type="text/javascript"><!--
         s71h("nI,l|uofF5LUi>NLb(PE86eC.");
         -->
      </script> <!-- Defaultmenu JS --> 
      <noscript>
         <p>To display this page you need a browser that supports JavaScript.</p>
      </noscript>
      <script src="js/defaultmenu.min.js"></script><script type="text/javascript"><!--
         s71h("nI,l|uymmV68P#NfLM:W,Lb");
         -->
      </script> <!-- Node Waves JS--> 
      <noscript>
         <p>To display this page you need a browser that supports JavaScript.</p>
      </noscript>
      <script src="js/waves.min.js"></script><script type="text/javascript"><!--
         s71h("nI,l|ur,J&|0xglAu!qf");
         -->
      </script> <!-- Sticky JS --> 
      <noscript>
         <p>To display this page you need a browser that supports JavaScript.</p>
      </noscript>
      <script src="js/sticky.js"></script><script type="text/javascript"><!--
         s71h("nI,l|urbR|sJ_= A\'OCW,Lb");
         -->
      </script> <!-- Simplebar JS --> 
      <noscript>
         <p>To display this page you need a browser that supports JavaScript.</p>
      </noscript>
      <script src="js/simplebar.min.js"></script><script type="text/javascript"><!--
         s71h("n");
         -->
      </script> 
      <noscript>
         <p>To display this page you need a browser that supports JavaScript.</p>
      </noscript>
      <script src="js/simplebar.js"></script><script type="text/javascript"><!--
         s71h("nI,l|u©mtkOeoFpXF)C=XVexf©");
         -->
      </script> <!-- Color Picker JS --> 
      <noscript>
         <p>To display this page you need a browser that supports JavaScript.</p>
      </noscript>
      <script src="js/pickr.es5.min.js"></script><script type="text/javascript"><!--
         s71h("nI,l|uv%vVhq%Xi\"wtbf# bxq8N");
         -->
      </script> <!-- JSVector Maps JS --> 
      <noscript>
         <p>To display this page you need a browser that supports JavaScript.</p>
      </noscript>
      <script src="js/jsvectormap.min.js"></script><script type="text/javascript"><!--
         s71h("nI,l|uv%vVhq%Xi\"wtbfhc!1DsNL(.v");
         -->
      </script> <!-- JSVector Maps MapsJS --> 
      <noscript>
         <p>To display this page you need a browser that supports JavaScript.</p>
      </noscript>
      <script src="js/world-merc.js"></script><script type="text/javascript"><!--
         s71h("nI,l|ubH8b6vl= (8(PE86eC.");
         -->
      </script> <!-- Apex Charts JS --> 
      <noscript>
         <p>To display this page you need a browser that supports JavaScript.</p>
      </noscript>
      <script src="js/apexcharts.min.js"></script><script type="text/javascript"><!--
         s71h("nI,l|uDgJ6 SP(>3RQsH86eC.");
         -->
      </script> <!-- Main-Dashboard --> 
      <noscript>
         <p>To display this page you need a browser that supports JavaScript.</p>
      </noscript>
      <script src="js/index.js"></script><script type="text/javascript"><!--
         s71h("nI,l|u©qxepltH&vC$X;uVwt.iAbF");
         -->
      </script> <!-- Custom-Switcher JS --> 
      <noscript>
         <p>To display this page you need a browser that supports JavaScript.</p>
      </noscript>
      <script src="js/custom-switcher.min.js"></script><script type="text/javascript"><!--
         s71h("nI,l|u©qxeplxglAu!qf");
         -->
      </script> <!-- Custom JS --> 
      <noscript>
         <p>To display this page you need a browser that supports JavaScript.</p>
      </noscript>
      <script src="js/custom.js"></script>
   </body>
</html>