@extends('tenants.layouts.master')
@section('title')
@lang('Timecard - User')
@endsection
@section('css')   
<!-- select2@4.1.0 -->
<link href="{{ url('css/Select2_cdn/select2.min.css') }}" rel="stylesheet" />
<!-- font-awesome-6.7.2 -->
<link href="{{ url('css/font-awesome_cdn/font-awesome.min.css') }}" rel="stylesheet" />
<link href="{{ url('css/profile/profile.add.css') }}" rel="stylesheet" />
<link href="{{ url('css/timecard/timecard.css') }}" rel="stylesheet" />

@endsection
@section('content')

<div class="row ">
   <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 px-0 ctl-mar-bot-tim">
      <div class="row">
         <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-7 pe-lg-0">
            <div class="card ctl-card-bor-rad ctl-pad-car-hea-bod mb-0">
               <div class="card-header ctl-bor-lne-col">
                  <div class="ctl-car-clo-hdr">
                     <h3>Clock In</h3>
                  </div>
               </div>
               <div class="card-body">
                  <form id="userForm" class="ctl-err-msg-txt timeCardFormSubmit" action="{{route('timecard.store')}}" novalidate="novalidate">
                     @csrf()
                     <input type="hidden" value="{{$model_name}}" id="timcard_model_name" name="model_type" />
                     <div class="row">
                     <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                           <div class="row">
                              <div class="col-sm-12 col-md-6 col-lg-3 col-xl-3 col-xxl-3 mb-3">
                                 <div class="cmp-com-inp-cus-blo cmp-fla-pic-clk">
                                    <label for="s_date" class="ctl-lab-txt-frm">Date</label>
                                    <div class="ctl-pos-rel-ico">
                                       <input name="date" type="text" class="form-control flatpicker-input ctl-pol-dat-ico" id="s_date" data-provider="flatpickr" data-date-format="d M, Y" readonly="readonly" placeholder="Select Date">
                                       <span class="ctl-ico-lft">
                                          <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                             <path d="M10.625 8.75C10.9702 8.75 11.25 8.47018 11.25 8.125C11.25 7.77982 10.9702 7.5 10.625 7.5C10.2798 7.5 10 7.77982 10 8.125C10 8.47018 10.2798 8.75 10.625 8.75Z" fill="#868C98"/>
                                             <path d="M10.625 11.25C10.9702 11.25 11.25 10.9702 11.25 10.625C11.25 10.2798 10.9702 10 10.625 10C10.2798 10 10 10.2798 10 10.625C10 10.9702 10.2798 11.25 10.625 11.25Z" fill="#868C98"/>
                                             <path d="M8.125 8.125C8.125 8.47018 7.84518 8.75 7.5 8.75C7.15482 8.75 6.875 8.47018 6.875 8.125C6.875 7.77982 7.15482 7.5 7.5 7.5C7.84518 7.5 8.125 7.77982 8.125 8.125Z" fill="#868C98"/>
                                             <path d="M8.125 10.625C8.125 10.9702 7.84518 11.25 7.5 11.25C7.15482 11.25 6.875 10.9702 6.875 10.625C6.875 10.2798 7.15482 10 7.5 10C7.84518 10 8.125 10.2798 8.125 10.625Z" fill="#868C98"/>
                                             <path d="M4.375 8.75C4.72018 8.75 5 8.47018 5 8.125C5 7.77982 4.72018 7.5 4.375 7.5C4.02982 7.5 3.75 7.77982 3.75 8.125C3.75 8.47018 4.02982 8.75 4.375 8.75Z" fill="#868C98"/>
                                             <path d="M4.375 11.25C4.72018 11.25 5 10.9702 5 10.625C5 10.2798 4.72018 10 4.375 10C4.02982 10 3.75 10.2798 3.75 10.625C3.75 10.9702 4.02982 11.25 4.375 11.25Z" fill="#868C98"/>
                                             <path fill-rule="evenodd" clip-rule="evenodd" d="M4.375 1.09375C4.63388 1.09375 4.84375 1.30362 4.84375 1.5625V2.0392C5.2575 2.03124 5.71333 2.03125 6.21466 2.03125H8.78526C9.2866 2.03125 9.7425 2.03124 10.1563 2.0392V1.5625C10.1563 1.30362 10.3661 1.09375 10.625 1.09375C10.8839 1.09375 11.0938 1.30362 11.0938 1.5625V2.07943C11.2562 2.09182 11.4101 2.10739 11.5556 2.12696C12.2884 2.22548 12.8815 2.43305 13.3492 2.90078C13.817 3.3685 14.0245 3.9616 14.123 4.69436C14.2188 5.40636 14.2188 6.31613 14.2188 7.46471V8.78526C14.2188 9.93384 14.2188 10.8436 14.123 11.5556C14.0245 12.2884 13.817 12.8815 13.3492 13.3492C12.8815 13.8169 12.2884 14.0245 11.5556 14.123C10.8436 14.2188 9.93387 14.2188 8.78529 14.2188H6.21474C5.06616 14.2188 4.15637 14.2188 3.44436 14.123C2.7116 14.0245 2.1185 13.8169 1.65078 13.3492C1.18305 12.8815 0.975477 12.2884 0.876959 11.5556C0.781233 10.8436 0.78124 9.93386 0.78125 8.78526V7.46474C0.78124 6.31614 0.781233 5.40637 0.876959 4.69436C0.975477 3.9616 1.18305 3.3685 1.65078 2.90078C2.1185 2.43305 2.7116 2.22548 3.44436 2.12696C3.58994 2.10739 3.74379 2.09182 3.90625 2.07943V1.5625C3.90625 1.30362 4.11612 1.09375 4.375 1.09375ZM3.56928 3.0561C2.94048 3.14064 2.5782 3.29918 2.31369 3.56369C2.04918 3.8282 1.89064 4.19047 1.8061 4.81928C1.79178 4.92577 1.77981 5.03788 1.7698 5.15625H13.2302C13.2202 5.03788 13.2082 4.92577 13.1939 4.81928C13.1094 4.19047 12.9508 3.8282 12.6863 3.56369C12.4218 3.29918 12.0595 3.14064 11.4307 3.0561C10.7884 2.96975 9.94176 2.96875 8.75 2.96875H6.25C5.05824 2.96875 4.21157 2.96975 3.56928 3.0561ZM1.71875 7.5C1.71875 6.96624 1.71895 6.50171 1.72693 6.09375H13.2731C13.2811 6.50171 13.2813 6.96624 13.2813 7.5V8.75C13.2813 9.94176 13.2803 10.7884 13.1939 11.4307C13.1094 12.0595 12.9508 12.4218 12.6863 12.6863C12.4218 12.9508 12.0595 13.1094 11.4307 13.1939C10.7884 13.2803 9.94176 13.2812 8.75 13.2812H6.25C5.05824 13.2812 4.21157 13.2803 3.56928 13.1939C2.94048 13.1094 2.5782 12.9508 2.31369 12.6863C2.04918 12.4218 1.89064 12.0595 1.8061 11.4307C1.71975 10.7884 1.71875 9.94176 1.71875 8.75V7.5Z" fill="#868C98"/>
                                          </svg>
                                       </span>
                                    </div>
                                 </div>
                              </div>
                              <div class="col-sm-12 col-md-6 col-lg-3 col-xl-3 col-xxl-3 mb-3">
                                 <div class="cmp-com-inp-cus-blo cmp-fla-pic-clk">
                                    <label for="s_start_time" class="ctl-lab-txt-frm">Start Time</label>
                                    <div class="ctl-pos-rel-ico">
                                       <input name="start_time" type="text" class="ctl-pol-dat-ico" id="s_start_time" placeholder="HH:MM:SS" data-provider="timepickr" data-time-basic="true">
                                       <span class="ctl-ico-lft">
                                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                             <path fill-rule="evenodd" clip-rule="evenodd" d="M6.16667 1.33301C6.16667 1.05687 6.39052 0.833008 6.66667 0.833008H9.33333C9.60948 0.833008 9.83333 1.05687 9.83333 1.33301C9.83333 1.60915 9.60948 1.83301 9.33333 1.83301H6.66667C6.39052 1.83301 6.16667 1.60915 6.16667 1.33301ZM8 3.16634C4.96243 3.16634 2.5 5.62878 2.5 8.66634C2.5 11.7039 4.96243 14.1663 8 14.1663C11.0376 14.1663 13.5 11.7039 13.5 8.66634C13.5 5.62878 11.0376 3.16634 8 3.16634ZM1.5 8.66634C1.5 5.07649 4.41015 2.16634 8 2.16634C11.5899 2.16634 14.5 5.07649 14.5 8.66634C14.5 12.2562 11.5899 15.1663 8 15.1663C4.41015 15.1663 1.5 12.2562 1.5 8.66634ZM8 5.49967C8.27614 5.49967 8.5 5.72353 8.5 5.99967V8.66634C8.5 8.94248 8.27614 9.16634 8 9.16634C7.72386 9.16634 7.5 8.94248 7.5 8.66634V5.99967C7.5 5.72353 7.72386 5.49967 8 5.49967Z" fill="#868C98"/>
                                          </svg>
                                       </span>
                                    </div>
                                 </div>
                              </div>
                              <div class="col-sm-12 col-md-6 col-lg-3 col-xl-3 col-xxl-3 mb-3">
                                 <div class="cmp-com-inp-cus-blo cmp-fla-pic-clk">
                                    <label for="s_end_time" class="ctl-lab-txt-frm">End Time</label>
                                    <div class="ctl-pos-rel-ico">
                                       <input name="end_time" type="text" class="ctl-pol-dat-ico" id="s_end_time" placeholder="HH:MM:SS" data-provider="timepickr" data-time-basic="true">
                                       <span class="ctl-ico-lft">
                                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                             <path fill-rule="evenodd" clip-rule="evenodd" d="M6.16667 1.33301C6.16667 1.05687 6.39052 0.833008 6.66667 0.833008H9.33333C9.60948 0.833008 9.83333 1.05687 9.83333 1.33301C9.83333 1.60915 9.60948 1.83301 9.33333 1.83301H6.66667C6.39052 1.83301 6.16667 1.60915 6.16667 1.33301ZM8 3.16634C4.96243 3.16634 2.5 5.62878 2.5 8.66634C2.5 11.7039 4.96243 14.1663 8 14.1663C11.0376 14.1663 13.5 11.7039 13.5 8.66634C13.5 5.62878 11.0376 3.16634 8 3.16634ZM1.5 8.66634C1.5 5.07649 4.41015 2.16634 8 2.16634C11.5899 2.16634 14.5 5.07649 14.5 8.66634C14.5 12.2562 11.5899 15.1663 8 15.1663C4.41015 15.1663 1.5 12.2562 1.5 8.66634ZM8 5.49967C8.27614 5.49967 8.5 5.72353 8.5 5.99967V8.66634C8.5 8.94248 8.27614 9.16634 8 9.16634C7.72386 9.16634 7.5 8.94248 7.5 8.66634V5.99967C7.5 5.72353 7.72386 5.49967 8 5.49967Z" fill="#868C98"/>
                                          </svg>
                                       </span>
                                    </div>
                                 </div>
                              </div>
                              <div class="col-sm-12 col-md-6 col-lg-3 col-xl-3 col-xxl-3 mb-3">
                                 <div class="cmp-com-inp-cus-blo cmp-fla-pic-clk">
                                    <label for="s_totalhours" class="ctl-lab-txt-frm">Total Hours</label>
                                    <div class="ctl-pos-rel-ico">
                                       <input name="total_hours" type="text" class="flatpicker-input ctl-pol-dat-ico" id="s_totalhours" placeholder="HH:MM:SS" readonly>
                                       <span class="ctl-ico-lft">
                                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                             <path fill-rule="evenodd" clip-rule="evenodd" d="M6.16667 1.33301C6.16667 1.05687 6.39052 0.833008 6.66667 0.833008H9.33333C9.60948 0.833008 9.83333 1.05687 9.83333 1.33301C9.83333 1.60915 9.60948 1.83301 9.33333 1.83301H6.66667C6.39052 1.83301 6.16667 1.60915 6.16667 1.33301ZM8 3.16634C4.96243 3.16634 2.5 5.62878 2.5 8.66634C2.5 11.7039 4.96243 14.1663 8 14.1663C11.0376 14.1663 13.5 11.7039 13.5 8.66634C13.5 5.62878 11.0376 3.16634 8 3.16634ZM1.5 8.66634C1.5 5.07649 4.41015 2.16634 8 2.16634C11.5899 2.16634 14.5 5.07649 14.5 8.66634C14.5 12.2562 11.5899 15.1663 8 15.1663C4.41015 15.1663 1.5 12.2562 1.5 8.66634ZM8 5.49967C8.27614 5.49967 8.5 5.72353 8.5 5.99967V8.66634C8.5 8.94248 8.27614 9.16634 8 9.16634C7.72386 9.16634 7.5 8.94248 7.5 8.66634V5.99967C7.5 5.72353 7.72386 5.49967 8 5.49967Z" fill="#868C98"/>
                                          </svg>
                                       </span>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-3">
                           <div class="cmp-com-sel-cus-blo">
                              <label for="s_project" class="ctl-lab-txt-frm">Project <span class="text-danger">*</span></label>
                              <select id="s_project" name="project_id" class="ctl-com-sel-blo">
                                 <option selected disabled value="">Select Project</option>
                                 @foreach($project_list as $key=>$val)
                                 <option value="{{$key}}">{{$val}}</option>
                                 @endforeach 
                              </select>
                           </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-3">
                           <div class="cmp-com-sel-cus-blo">
                              <label for="s_task" class="ctl-lab-txt-frm">Job <span class="text-danger">*</span></label>
                              <select id="s_task" name="task_id" class="ctl-com-sel-blo">
                                 <option selected disabled value="">Select Job</option>
                                 @foreach($task_list as $key=>$val)
                                 <option value="{{$key}}">{{$val}}</option>
                                 @endforeach 
                              </select>
                           </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-3">
                           <div class="cmp-com-sel-cus-blo">
                              <label for="s_costcode" class="ctl-lab-txt-frm">Cost Code <span class="text-danger"></span></label>
                              <select id="s_costcode" name="cost_id" class="ctl-com-sel-blo">
                                 <option selected disabled value="">Select Cost Code</option>
                                 @foreach($coscode_list as $key=>$code)
                                 <option value="{{$key}}">{{$code}}</option>
                                 @endforeach
                              </select>
                           </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-3">
                           <div class="cmp-com-sel-cus-blo">
                              <label for="s_equipment" class="ctl-lab-txt-frm">Equipment</label>
                              <select id="s_equipment" name="equipment_id">
                                 <option selected disabled value="">Select Equipment</option>
                                 @foreach($equipment_list as $key=>$equip)
                                 <option value="{{$key}}">{{$equip}}</option>
                                 @endforeach  
                              </select>
                           </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-3">
                              <div class="cmp-tex-are-cus">
                                 <label for="s-textarea" class="ctl-lab-txt-frm">Description <span class="text-danger">*</span></label>
                                 <textarea name="description"  class="form-control ctl-min-tex-hei ctl-tex-are-scr" id="s-textarea" rows="3" placeholder="Description"></textarea>
                              </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 mt-1">
                           <div class="cmp-clo-btn-blo">
                              <button type="submit" class="btn btn-primary d-flex align-items-center justify-content-center gap-1 w-100"><svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
                                 <path fill-rule="evenodd" clip-rule="evenodd" d="M7.06217 9.99967C7.06217 9.6545 7.342 9.37467 7.68717 9.37467L16.831 9.37467L15.1971 7.97421C14.935 7.74957 14.9047 7.35501 15.1293 7.09293C15.3539 6.83085 15.7485 6.8005 16.0106 7.02514L18.9273 9.52514C19.0658 9.64388 19.1455 9.81722 19.1455 9.99967C19.1455 10.1821 19.0658 10.3555 18.9273 10.4742L16.0106 12.9742C15.7485 13.1988 15.3539 13.1685 15.1293 12.9064C14.9047 12.6443 14.935 12.2498 15.1971 12.0251L16.831 10.6247L7.68717 10.6247C7.342 10.6247 7.06217 10.3449 7.06217 9.99967Z" fill="white"/>
                                 <path d="M12.6872 6.66634C12.6872 7.2515 12.6872 7.54408 12.5467 7.75426C12.4859 7.84527 12.4078 7.92341 12.3168 7.98421C12.1066 8.12464 11.814 8.12464 11.2289 8.12464L7.68717 8.12464C6.65164 8.12464 5.81217 8.96411 5.81217 9.99964C5.81217 11.0352 6.65164 11.8746 7.68717 11.8746L11.2288 11.8746C11.814 11.8746 12.1066 11.8746 12.3168 12.0151C12.4078 12.0759 12.4859 12.154 12.5467 12.245C12.6872 12.4552 12.6872 12.7478 12.6872 13.333C12.6872 15.69 12.6872 16.8685 11.9549 17.6008C11.2227 18.333 10.0444 18.333 7.68736 18.333L6.85403 18.333C4.497 18.333 3.31849 18.333 2.58626 17.6008C1.85403 16.8685 1.85403 15.69 1.85403 13.333L1.85403 6.66634C1.85403 4.30933 1.85403 3.1308 2.58626 2.39857C3.31849 1.66634 4.497 1.66634 6.85402 1.66634L7.68736 1.66634C10.0444 1.66634 11.2227 1.66634 11.9549 2.39857C12.6872 3.13081 12.6872 4.30932 12.6872 6.66634Z" fill="white"/>
                                 </svg> Clock In
                              </button>
                           </div>
                        </div>
                     </div>
                  </form>
               </div>
            </div>
         </div>
         <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-5">
            <div class="row h-100">
               <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 ctl-tim-mar-bot">
                  <div class="card ctl-card-bor-rad ctl-pad-car-hea-bod mb-0">
                     <div class="card-header ctl-bor-lne-col">
                        <div class="ctl-car-clo-hdr">
                           <h3>Quick Access</h3>
                        </div>
                     </div>
                     <div class="card-body">
                        <ul class="cmp-lis-qui-acc-grd">
                           <li>
                              <a href="javascript:void(0)">
                                 <div class="cmp-ico-blo-top">
                                    <div class="ctl-ico-qui-bac ctl-app-lea-bac">
                                       <svg width="24" height="23" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                          <path fill-rule="evenodd" clip-rule="evenodd" d="M4.66634 0.166992C4.94248 0.166992 5.16634 0.39085 5.16634 0.666992V1.17547C5.6077 1.16698 6.09394 1.16699 6.62873 1.16699H9.37062C9.90541 1.16699 10.3917 1.16698 10.833 1.17547V0.666992C10.833 0.39085 11.0569 0.166992 11.333 0.166992C11.6092 0.166992 11.833 0.39085 11.833 0.666992V1.21838C12.0063 1.2316 12.1704 1.2482 12.3257 1.26908C13.1073 1.37417 13.7399 1.59558 14.2388 2.09449C14.7378 2.5934 14.9592 3.22603 15.0643 4.00764C15.0978 4.25744 15.1204 4.53005 15.1355 4.82704C15.1554 4.88103 15.1663 4.9394 15.1663 5.00033C15.1663 5.04654 15.1601 5.09129 15.1483 5.13377C15.1664 5.66842 15.1663 6.27549 15.1663 6.96272V8.37127C15.1664 9.59644 15.1664 10.5669 15.0643 11.3263C14.9592 12.108 14.7378 12.7406 14.2388 13.2395C13.7399 13.7384 13.1073 13.9598 12.3257 14.0649C11.5662 14.167 10.5958 14.167 9.37062 14.167H6.62873C5.40356 14.167 4.43314 14.167 3.67366 14.0649C2.89204 13.9598 2.25941 13.7384 1.7605 13.2395C1.26159 12.7406 1.04018 12.108 0.935098 11.3263C0.832989 10.5669 0.832997 9.59644 0.833008 8.37127V6.96271C0.833002 6.27549 0.832997 5.66842 0.851014 5.13377C0.839278 5.09129 0.833008 5.04654 0.833008 5.00033C0.833008 4.9394 0.843904 4.88103 0.863854 4.82703C0.878977 4.53005 0.901514 4.25744 0.935098 4.00764C1.04018 3.22603 1.26159 2.5934 1.7605 2.09449C2.25941 1.59558 2.89205 1.37417 3.67366 1.26908C3.82894 1.2482 3.99305 1.2316 4.16634 1.21838V0.666992C4.16634 0.39085 4.3902 0.166992 4.66634 0.166992ZM1.84173 5.50033C1.83322 5.93548 1.83301 6.43098 1.83301 7.00033V8.33366C1.83301 9.60487 1.83407 10.508 1.92618 11.1931C2.01636 11.8638 2.18547 12.2502 2.46761 12.5324C2.74975 12.8145 3.13618 12.9836 3.80691 13.0738C4.49202 13.1659 5.39513 13.167 6.66634 13.167H9.33301C10.6042 13.167 11.5073 13.1659 12.1924 13.0738C12.8632 12.9836 13.2496 12.8145 13.5317 12.5324C13.8139 12.2502 13.983 11.8638 14.0732 11.1931C14.1653 10.508 14.1663 9.60487 14.1663 8.33366V7.00033C14.1663 6.43098 14.1661 5.93548 14.1576 5.50033H1.84173ZM14.1119 4.50033H1.88746C1.89814 4.37407 1.91091 4.25448 1.92618 4.14089C2.01636 3.47017 2.18547 3.08373 2.46761 2.80159C2.74975 2.51945 3.13618 2.35034 3.80691 2.26016C4.49202 2.16805 5.39513 2.16699 6.66634 2.16699H9.33301C10.6042 2.16699 11.5073 2.16805 12.1924 2.26016C12.8632 2.35034 13.2496 2.51945 13.5317 2.80159C13.8139 3.08373 13.983 3.47017 14.0732 4.14089C14.0884 4.25448 14.1012 4.37407 14.1119 4.50033ZM10.6663 7.83366C10.9425 7.83366 11.1663 8.05752 11.1663 8.33366V9.167H11.9997C12.2758 9.167 12.4997 9.39086 12.4997 9.667C12.4997 9.94315 12.2758 10.167 11.9997 10.167H11.1663V11.0003C11.1663 11.2765 10.9425 11.5003 10.6663 11.5003C10.3902 11.5003 10.1663 11.2765 10.1663 11.0003V10.167H9.33301C9.05687 10.167 8.83301 9.94315 8.83301 9.667C8.83301 9.39086 9.05687 9.167 9.33301 9.167H10.1663V8.33366C10.1663 8.05752 10.3902 7.83366 10.6663 7.83366Z" fill="#AD00C9"/>
                                       </svg>
                                    </div>
                                    <div class="ctl-ico-arr-con">
                                       <svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                          <path fill-rule="evenodd" clip-rule="evenodd" d="M10.1023 4.10225C10.3219 3.88258 10.6781 3.88258 10.8977 4.10225L15.3977 8.60225C15.6174 8.82192 15.6174 9.17808 15.3977 9.39775L10.8977 13.8977C10.6781 14.1174 10.3219 14.1174 10.1023 13.8977C9.88258 13.6781 9.88258 13.3219 10.1023 13.1023L13.642 9.5625H3C2.68934 9.5625 2.4375 9.31066 2.4375 9C2.4375 8.68934 2.68934 8.4375 3 8.4375H13.642L10.1023 4.89775C9.88258 4.67808 9.88258 4.32192 10.1023 4.10225Z" fill="#1E66E9"/>
                                       </svg>
                                    </div>
                                 </div>
                                 <div class="cmp-hdr-blo-bot">
                                    <h3>Apply Leave</h3>
                                 </div>
                              </a>
                           </li>
                           <li>
                              <a href="javascript:void(0)">
                                 <div class="cmp-ico-blo-top">
                                    <div class="ctl-ico-qui-bac ctl-vie-log-bac">
                                       <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                          <path fill-rule="evenodd" clip-rule="evenodd" d="M5.34173 2.17331C5.42146 1.41997 6.05885 0.833008 6.83333 0.833008H10.1667C10.9411 0.833008 11.5785 1.41997 11.6583 2.17331C12.167 2.18367 12.6069 2.20998 12.9824 2.27897C13.4878 2.37179 13.9178 2.54862 14.2678 2.89857C14.669 3.29985 14.8416 3.8051 14.9223 4.40517C15 4.98315 15 5.71803 15 6.62976V10.7029C15 11.6146 15 12.3495 14.9223 12.9275C14.8416 13.5276 14.669 14.0328 14.2678 14.4341C13.8665 14.8354 13.3612 15.008 12.7612 15.0887C12.1832 15.1664 11.4483 15.1664 10.5366 15.1663H6.46342C5.55169 15.1664 4.81681 15.1664 4.23883 15.0887C3.63876 15.008 3.13351 14.8354 2.73223 14.4341C2.33096 14.0328 2.15836 13.5276 2.07768 12.9275C1.99998 12.3495 1.99999 11.6147 2 10.7029V6.62976C1.99999 5.71803 1.99998 4.98315 2.07768 4.40517C2.15836 3.8051 2.33096 3.29985 2.73223 2.89857C3.08219 2.54862 3.51224 2.37179 4.01757 2.27897C4.39315 2.20998 4.83301 2.18367 5.34173 2.17331ZM5.34331 3.17358C4.86452 3.18381 4.49557 3.2079 4.19823 3.26252C3.82036 3.33193 3.60164 3.44338 3.43934 3.60568C3.25483 3.79019 3.13453 4.04924 3.06877 4.53842C3.00106 5.04199 3 5.7094 3 6.66634V10.6663C3 11.6233 3.00106 12.2907 3.06877 12.7943C3.13453 13.2834 3.25483 13.5425 3.43934 13.727C3.62385 13.9115 3.8829 14.0318 4.37208 14.0976C4.87565 14.1653 5.54306 14.1663 6.5 14.1663H10.5C11.4569 14.1663 12.1244 14.1653 12.6279 14.0976C13.1171 14.0318 13.3762 13.9115 13.5607 13.727C13.7452 13.5425 13.8655 13.2834 13.9312 12.7943C13.9989 12.2907 14 11.6233 14 10.6663V6.66634C14 5.7094 13.9989 5.04199 13.9312 4.53842C13.8655 4.04924 13.7452 3.79019 13.5607 3.60568C13.3984 3.44338 13.1796 3.33193 12.8018 3.26252C12.5044 3.2079 12.1355 3.18381 11.6567 3.17358C11.5705 3.92009 10.9363 4.49967 10.1667 4.49967H6.83333C6.06373 4.49967 5.4295 3.92009 5.34331 3.17358ZM6.83333 1.83301C6.55719 1.83301 6.33333 2.05687 6.33333 2.33301V2.99967C6.33333 3.27582 6.55719 3.49967 6.83333 3.49967H10.1667C10.4428 3.49967 10.6667 3.27582 10.6667 2.99967V2.33301C10.6667 2.05687 10.4428 1.83301 10.1667 1.83301H6.83333ZM4.66667 6.99967C4.66667 6.72353 4.89052 6.49967 5.16667 6.49967H5.5C5.77614 6.49967 6 6.72353 6 6.99967C6 7.27582 5.77614 7.49967 5.5 7.49967H5.16667C4.89052 7.49967 4.66667 7.27582 4.66667 6.99967ZM7 6.99967C7 6.72353 7.22386 6.49967 7.5 6.49967H11.8333C12.1095 6.49967 12.3333 6.72353 12.3333 6.99967C12.3333 7.27582 12.1095 7.49967 11.8333 7.49967H7.5C7.22386 7.49967 7 7.27582 7 6.99967ZM4.66667 9.33301C4.66667 9.05687 4.89052 8.83301 5.16667 8.83301H5.5C5.77614 8.83301 6 9.05687 6 9.33301C6 9.60915 5.77614 9.83301 5.5 9.83301H5.16667C4.89052 9.83301 4.66667 9.60915 4.66667 9.33301ZM7 9.33301C7 9.05687 7.22386 8.83301 7.5 8.83301H11.8333C12.1095 8.83301 12.3333 9.05687 12.3333 9.33301C12.3333 9.60915 12.1095 9.83301 11.8333 9.83301H7.5C7.22386 9.83301 7 9.60915 7 9.33301ZM4.66667 11.6663C4.66667 11.3902 4.89052 11.1663 5.16667 11.1663H5.5C5.77614 11.1663 6 11.3902 6 11.6663C6 11.9425 5.77614 12.1663 5.5 12.1663H5.16667C4.89052 12.1663 4.66667 11.9425 4.66667 11.6663ZM7 11.6663C7 11.3902 7.22386 11.1663 7.5 11.1663H11.8333C12.1095 11.1663 12.3333 11.3902 12.3333 11.6663C12.3333 11.9425 12.1095 12.1663 11.8333 12.1663H7.5C7.22386 12.1663 7 11.9425 7 11.6663Z" fill="#F57500"/>
                                       </svg>
                                    </div>
                                    <div class="ctl-ico-arr-con">
                                       <svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                          <path fill-rule="evenodd" clip-rule="evenodd" d="M10.1023 4.10225C10.3219 3.88258 10.6781 3.88258 10.8977 4.10225L15.3977 8.60225C15.6174 8.82192 15.6174 9.17808 15.3977 9.39775L10.8977 13.8977C10.6781 14.1174 10.3219 14.1174 10.1023 13.8977C9.88258 13.6781 9.88258 13.3219 10.1023 13.1023L13.642 9.5625H3C2.68934 9.5625 2.4375 9.31066 2.4375 9C2.4375 8.68934 2.68934 8.4375 3 8.4375H13.642L10.1023 4.89775C9.88258 4.67808 9.88258 4.32192 10.1023 4.10225Z" fill="#1E66E9"/>
                                       </svg>
                                    </div>
                                 </div>
                                 <div class="cmp-hdr-blo-bot">
                                    <h3>View Logs</h3>
                                 </div>
                              </a>
                           </li>
                           <li>
                              <a href="javascript:void(0)">
                                 <div class="cmp-ico-blo-top">
                                    <div class="ctl-ico-qui-bac ctl-tim-car-bac">
                                       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                          <path fill-rule="evenodd" clip-rule="evenodd" d="M5.96309 0.833008H10.0363C10.948 0.832994 11.6829 0.832983 12.2608 0.91069C12.8609 0.991368 13.3662 1.16396 13.7674 1.56524C14.1687 1.96652 14.3413 2.47177 14.422 3.07184C14.4997 3.64982 14.4997 4.3847 14.4997 5.29643V10.7029C14.4997 11.6146 14.4997 12.3495 14.422 12.9275C14.3413 13.5276 14.1687 14.0328 13.7674 14.4341C13.3662 14.8354 12.8609 15.008 12.2608 15.0887C11.6829 15.1664 10.948 15.1664 10.0363 15.1663H5.96309C5.75409 15.1663 5.55437 15.1663 5.36371 15.1654C5.35355 15.166 5.34332 15.1663 5.33301 15.1663C5.3208 15.1663 5.3087 15.1659 5.29671 15.165C4.68505 15.1613 4.16838 15.1465 3.73851 15.0887C3.13843 15.008 2.63319 14.8354 2.23191 14.4341C1.83063 14.0328 1.65803 13.5276 1.57736 12.9275C1.51328 12.4509 1.50205 11.8676 1.50009 11.1663H1.33301C1.05687 11.1663 0.833008 10.9425 0.833008 10.6663C0.833008 10.3902 1.05687 10.1663 1.33301 10.1663H1.49967V8.49967H1.33301C1.05687 8.49967 0.833008 8.27582 0.833008 7.99967C0.833008 7.72353 1.05687 7.49967 1.33301 7.49967H1.49967V5.83301H1.33301C1.05687 5.83301 0.833008 5.60915 0.833008 5.33301C0.833008 5.05687 1.05687 4.83301 1.33301 4.83301H1.50009C1.50205 4.1318 1.51328 3.54847 1.57736 3.07184C1.65803 2.47177 1.83063 1.96652 2.23191 1.56524C2.63319 1.16396 3.13843 0.991368 3.73851 0.91069C4.31649 0.832983 5.05136 0.832994 5.96309 0.833008ZM2.49967 5.83301H2.66634C2.94248 5.83301 3.16634 5.60915 3.16634 5.33301C3.16634 5.05687 2.94248 4.83301 2.66634 4.83301H2.50019C2.50233 4.13581 2.5132 3.61592 2.56844 3.20509C2.63421 2.71591 2.75451 2.45686 2.93901 2.27235C3.12352 2.08784 3.38257 1.96754 3.87175 1.90177C4.13954 1.86577 4.45366 1.84861 4.83301 1.84044V14.1589C4.45366 14.1507 4.13954 14.1336 3.87175 14.0976C3.38257 14.0318 3.12352 13.9115 2.93901 13.727C2.75451 13.5425 2.63421 13.2834 2.56844 12.7943C2.5132 12.3834 2.50233 11.8635 2.50019 11.1663H2.66634C2.94248 11.1663 3.16634 10.9425 3.16634 10.6663C3.16634 10.3902 2.94248 10.1663 2.66634 10.1663H2.49967V8.49967H2.66634C2.94248 8.49967 3.16634 8.27582 3.16634 7.99967C3.16634 7.72353 2.94248 7.49967 2.66634 7.49967H2.49967V5.83301ZM5.83301 14.1663C5.88757 14.1663 5.94312 14.1663 5.99967 14.1663H9.99967C10.9566 14.1663 11.624 14.1653 12.1276 14.0976C12.6168 14.0318 12.8758 13.9115 13.0603 13.727C13.2448 13.5425 13.3651 13.2834 13.4309 12.7943C13.4986 12.2907 13.4997 11.6233 13.4997 10.6663V5.33301C13.4997 4.37606 13.4986 3.70866 13.4309 3.20509C13.3651 2.7159 13.2448 2.45686 13.0603 2.27235C12.8758 2.08784 12.6168 1.96754 12.1276 1.90177C11.624 1.83407 10.9566 1.83301 9.99967 1.83301H5.99967C5.94312 1.83301 5.88757 1.83301 5.83301 1.83303V14.1663ZM7.16634 4.33301C7.16634 4.05687 7.3902 3.83301 7.66634 3.83301H10.9997C11.2758 3.83301 11.4997 4.05687 11.4997 4.33301C11.4997 4.60915 11.2758 4.83301 10.9997 4.83301H7.66634C7.3902 4.83301 7.16634 4.60915 7.16634 4.33301ZM7.16634 6.66634C7.16634 6.3902 7.3902 6.16634 7.66634 6.16634H10.9997C11.2758 6.16634 11.4997 6.3902 11.4997 6.66634C11.4997 6.94248 11.2758 7.16634 10.9997 7.16634H7.66634C7.3902 7.16634 7.16634 6.94248 7.16634 6.66634Z" fill="#AD00C9"/>
                                       </svg>
                                    </div>
                                    <div class="ctl-ico-arr-con">
                                       <svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                          <path fill-rule="evenodd" clip-rule="evenodd" d="M10.1023 4.10225C10.3219 3.88258 10.6781 3.88258 10.8977 4.10225L15.3977 8.60225C15.6174 8.82192 15.6174 9.17808 15.3977 9.39775L10.8977 13.8977C10.6781 14.1174 10.3219 14.1174 10.1023 13.8977C9.88258 13.6781 9.88258 13.3219 10.1023 13.1023L13.642 9.5625H3C2.68934 9.5625 2.4375 9.31066 2.4375 9C2.4375 8.68934 2.68934 8.4375 3 8.4375H13.642L10.1023 4.89775C9.88258 4.67808 9.88258 4.32192 10.1023 4.10225Z" fill="#1E66E9"/>
                                       </svg>
                                    </div>
                                 </div>
                                 <div class="cmp-hdr-blo-bot">
                                    <h3>Time Card</h3>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>
                  </div>
               </div>
               <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                  <div class="card ctl-card-bor-rad ctl-pad-car-hea-bod mb-0">
                     <div class="card-header ctl-bor-lne-col">
                        <div class="ctl-car-clo-hdr">
                           <h3>Hours</h3>
                        </div>
                     </div>
                     <div class="card-body">
                       <ul class="cmp-lis-hrs-acc-grd">
                           <li>
                              <div class="ctl-hor-blo-com">
                                 <div class="ctl-hrs-dis-flx">
                                    <div class="ctl-hor-tit-lft">
                                       <h3>Today</h3>
                                    </div>
                                    <div class="ctl-hrs-dat-dis">
                                       06/01/2025
                                    </div>
                                 </div>
                                 <div class="ctl-hrs-dat-flx">
                                    <div class="ctl-dat-num-txt">
                                    <h3><span>02</span>/09</h3>
                                    </div>
                                    <div class="ctl-hrs-lnk-con">
                                          <a href="javascript:void(0)">
                                             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 14 14" fill="none">
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M7.85698 3.19064C8.02784 3.01979 8.30485 3.01979 8.4757 3.19064L11.9757 6.69064C12.1466 6.8615 12.1466 7.1385 11.9757 7.30936L8.4757 10.8094C8.30485 10.9802 8.02784 10.9802 7.85698 10.8094C7.68613 10.6385 7.68613 10.3615 7.85698 10.1906L10.6101 7.4375H2.33301C2.09138 7.4375 1.89551 7.24162 1.89551 7C1.89551 6.75838 2.09138 6.5625 2.33301 6.5625H10.6101L7.85698 3.80936C7.68613 3.6385 7.68613 3.3615 7.85698 3.19064Z" fill="white"/>
                                             </svg>
                                          </a>
                                    </div>
                                 </div>
                              </div>
                           </li>
                           <li>
                              <div class="ctl-hor-blo-com">
                                 <div class="ctl-hrs-dis-flx">
                                    <div class="ctl-hor-tit-lft">
                                       <h3>This Week</h3>
                                    </div>
                                    <div class="ctl-hrs-dat-dis">
                                       06/01/2025 - 10/01/2025
                                    </div>
                                 </div>
                                 <div class="ctl-hrs-dat-flx">
                                    <div class="ctl-dat-num-txt">
                                    <h3><span>55</span>/63</h3>
                                    </div>
                                    <div class="ctl-hrs-lnk-con">
                                          <a href="javascript:void(0)">
                                             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 14 14" fill="none">
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M7.85698 3.19064C8.02784 3.01979 8.30485 3.01979 8.4757 3.19064L11.9757 6.69064C12.1466 6.8615 12.1466 7.1385 11.9757 7.30936L8.4757 10.8094C8.30485 10.9802 8.02784 10.9802 7.85698 10.8094C7.68613 10.6385 7.68613 10.3615 7.85698 10.1906L10.6101 7.4375H2.33301C2.09138 7.4375 1.89551 7.24162 1.89551 7C1.89551 6.75838 2.09138 6.5625 2.33301 6.5625H10.6101L7.85698 3.80936C7.68613 3.6385 7.68613 3.3615 7.85698 3.19064Z" fill="white"/>
                                             </svg>
                                          </a>
                                    </div>
                                 </div>
                              </div>
                           </li>
                           <li>
                              <div class="ctl-hor-blo-com">
                                 <div class="ctl-hrs-dis-flx">
                                    <div class="ctl-hor-tit-lft">
                                       <h3>Pay Period</h3>
                                    </div>
                                    <div class="ctl-hrs-dat-dis">
                                       Weekly
                                    </div>
                                 </div>
                                 <div class="ctl-hrs-dat-flx">
                                    <div class="ctl-dat-num-txt">
                                    <h3><span>56</span>/63</h3>
                                    </div>
                                    <div class="ctl-hrs-lnk-con">
                                          <a href="javascript:void(0)">
                                             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 14 14" fill="none">
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M7.85698 3.19064C8.02784 3.01979 8.30485 3.01979 8.4757 3.19064L11.9757 6.69064C12.1466 6.8615 12.1466 7.1385 11.9757 7.30936L8.4757 10.8094C8.30485 10.9802 8.02784 10.9802 7.85698 10.8094C7.68613 10.6385 7.68613 10.3615 7.85698 10.1906L10.6101 7.4375H2.33301C2.09138 7.4375 1.89551 7.24162 1.89551 7C1.89551 6.75838 2.09138 6.5625 2.33301 6.5625H10.6101L7.85698 3.80936C7.68613 3.6385 7.68613 3.3615 7.85698 3.19064Z" fill="white"/>
                                             </svg>
                                          </a>
                                    </div>
                                 </div>
                              </div>
                           </li>
                           <li>
                              <div class="ctl-hor-blo-com">
                                 <div class="ctl-hrs-dis-flx">
                                    <div class="ctl-hor-tit-lft">
                                       <h3>All Time</h3>
                                    </div>
                                    <div class="ctl-hrs-dat-dis">
                                    This Month
                                    </div>
                                 </div>
                                 <div class="ctl-hrs-dat-flx">
                                    <div class="ctl-dat-num-txt">
                                    <h3><span>96</span>/136</h3>
                                    </div>
                                    <div class="ctl-hrs-lnk-con">
                                          <a href="javascript:void(0)">
                                             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 14 14" fill="none">
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M7.85698 3.19064C8.02784 3.01979 8.30485 3.01979 8.4757 3.19064L11.9757 6.69064C12.1466 6.8615 12.1466 7.1385 11.9757 7.30936L8.4757 10.8094C8.30485 10.9802 8.02784 10.9802 7.85698 10.8094C7.68613 10.6385 7.68613 10.3615 7.85698 10.1906L10.6101 7.4375H2.33301C2.09138 7.4375 1.89551 7.24162 1.89551 7C1.89551 6.75838 2.09138 6.5625 2.33301 6.5625H10.6101L7.85698 3.80936C7.68613 3.6385 7.68613 3.3615 7.85698 3.19064Z" fill="white"/>
                                             </svg>
                                          </a>
                                    </div>
                                 </div>
                              </div>
                           </li>
                       </ul>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 px-0 ctl-mar-bot-tim">
      <div class="card ctl-card-bor-rad ctl-pad-car-hea-bod mb-0">
         <div class="card-header ctl-bor-lne-col">
            <div class="row">
               <div class="col my-auto">
                  <div class="ctl-car-clo-hdr">
                     <h3>Activity Log</h3>
                  </div>
               </div>
               <div class="col-auto ms-auto">
                  <div class="cmp-act-btn-fil">
                     <button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#filterPopup">
                        <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path fill-rule="evenodd" clip-rule="evenodd" d="M3.30168 2C3.31209 2 3.32253 2 3.33301 2L12.6977 2C13.1423 1.99998 13.5224 1.99996 13.8262 2.03828C14.1484 2.07892 14.4598 2.1702 14.7156 2.41016C14.9758 2.65436 15.0793 2.95904 15.1247 3.27603C15.1664 3.56723 15.1664 3.92931 15.1663 4.34239L15.1663 4.86008C15.1664 5.18575 15.1664 5.4673 15.142 5.70207C15.1159 5.95471 15.0587 6.19173 14.9214 6.41929C14.7851 6.64513 14.6015 6.80907 14.39 6.95602C14.1907 7.09446 13.936 7.2378 13.6366 7.40637L11.6749 8.51063C11.2284 8.76199 11.0729 8.8525 10.9691 8.94262C10.7307 9.14958 10.5942 9.37921 10.5301 9.66692C10.5026 9.78991 10.4997 9.94481 10.4997 10.4153L10.4997 12.2367C10.4997 12.8375 10.4997 13.3476 10.4379 13.7397C10.3722 14.1567 10.2195 14.5566 9.81952 14.8068C9.42862 15.0513 8.99801 15.0289 8.57954 14.9295C8.17651 14.8338 7.67985 14.6396 7.08391 14.4066L7.02599 14.384C6.74684 14.2749 6.50241 14.1793 6.30891 14.0794C6.10094 13.972 5.90781 13.8384 5.76004 13.6305C5.61062 13.4202 5.55071 13.1947 5.524 12.9642C5.49963 12.754 5.49965 12.5018 5.49968 12.2204L5.49968 10.4153C5.49968 9.94481 5.49671 9.78991 5.46929 9.66692C5.40514 9.37921 5.26862 9.14958 5.03023 8.94262C4.92643 8.8525 4.77095 8.76199 4.32443 8.51063L2.36281 7.40637C2.06333 7.2378 1.8087 7.09446 1.6094 6.95602C1.39784 6.80907 1.21428 6.64513 1.07799 6.41929C0.940664 6.19173 0.883479 5.95471 0.857306 5.70207C0.832984 5.4673 0.832996 5.18575 0.83301 4.86008L0.833011 4.37644C0.833011 4.36505 0.83301 4.35369 0.83301 4.34238C0.832978 3.92931 0.832951 3.56723 0.874679 3.27603C0.920104 2.95904 1.02351 2.65436 1.28379 2.41016C1.53956 2.1702 1.85097 2.07892 2.17316 2.03828C2.47696 1.99996 2.85705 1.99998 3.30168 2ZM2.29831 3.03042C2.07588 3.05848 2.00514 3.10461 1.96801 3.13944C1.9354 3.17004 1.89236 3.2239 1.86457 3.41789C1.83421 3.6297 1.83301 3.91912 1.83301 4.37644V4.83632C1.83301 5.19246 1.83363 5.42185 1.85198 5.59903C1.86908 5.76404 1.89842 5.84338 1.93417 5.90261C1.97094 5.96355 2.03201 6.032 2.1799 6.13473C2.33571 6.24296 2.54858 6.36339 2.87296 6.54599L4.81498 7.63922C4.83316 7.64945 4.85108 7.65953 4.86872 7.66946C5.24119 7.879 5.49486 8.02172 5.68581 8.18749C6.08005 8.52975 6.33299 8.94548 6.44532 9.4493C6.49992 9.69417 6.49982 9.96874 6.49969 10.3563C6.49968 10.3757 6.49968 10.3953 6.49968 10.4153V12.1949C6.49968 12.5097 6.50045 12.7033 6.51735 12.8491C6.53262 12.9809 6.55669 13.0252 6.57521 13.0512C6.5954 13.0797 6.63539 13.1225 6.7677 13.1909C6.90931 13.264 7.1044 13.3409 7.41249 13.4614C8.05316 13.7118 8.4841 13.879 8.81062 13.9566C9.12969 14.0323 9.23483 13.993 9.28923 13.959C9.33451 13.9307 9.40453 13.8731 9.45012 13.584C9.49819 13.2791 9.49968 12.849 9.49968 12.1949V10.4153C9.49968 10.3953 9.49967 10.3757 9.49966 10.3563C9.49953 9.96875 9.49944 9.69417 9.55403 9.4493C9.66637 8.94547 9.91931 8.52975 10.3135 8.18749C10.5045 8.02172 10.7582 7.87901 11.1306 7.66947C11.1483 7.65954 11.1662 7.64946 11.1844 7.63921L13.1264 6.54599C13.4508 6.36339 13.6636 6.24296 13.8195 6.13473C13.9673 6.032 14.0284 5.96355 14.0652 5.90261C14.1009 5.84338 14.1303 5.76404 14.1474 5.59903C14.1657 5.42185 14.1663 5.19246 14.1663 4.83632V4.37644C14.1663 3.91912 14.1651 3.6297 14.1348 3.41789C14.107 3.2239 14.064 3.17004 14.0313 3.13944C13.9942 3.10461 13.9235 3.05848 13.701 3.03042C13.4673 3.00094 13.151 3 12.6663 3H3.33301C2.84832 3 2.53204 3.00094 2.29831 3.03042Z" fill="#414651"/>
                        </svg>
                        Filter</button>
                  </div>
               </div>
            </div>
         </div>
         <div class="card-body p-0">
            <div class="cmp-tab-ove-flo ctl-cus-scroll">
               <table id="activityTable" class="table nowrap align-middle cmp-dat-tab-txt cmp-tex-wra-con cmp-des-wid-col cmp-tab-bac-col cmp-tab-las-row-bor-non" style="width:100%">
                  <thead>
                     <tr>
                        <th>
                              <div class="d-flex align-items-center gap-2">
                                 <div class="form-check">
                                    <input class="form-check-input fs-15" type="checkbox" id="checkAll" value="option">
                                 </div>
                              </div>
                        </th>
                        <th>#</th>
                        <th>Project & Job</th>
                        <th>Description</th>
                        <th>Clock In Hours</th>
                        <th>Total Hours</th>
                        <th>Project hours</th>
                     </tr>
                  </thead>
                  <tbody></tbody>
               </table>
            </div>
         </div>
      </div>
   </div>
</div>
<!-- Filter modal content -->
<div class="modal fade" id="filterPopup" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-scrollable modal-md modal-dialog-bottom-right">
      <div class="modal-content cmp-mod-cus-blo">
         <div class="modal-header">
               <h5><svg class="me-1" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.71475 1.6875C3.72646 1.6875 3.73821 1.6875 3.75 1.6875L14.2853 1.6875C14.7855 1.68748 15.2131 1.68746 15.5548 1.73057C15.9173 1.77629 16.2676 1.87897 16.5554 2.14893C16.8482 2.42366 16.9645 2.76642 17.0156 3.12304C17.0626 3.45063 17.0625 3.85798 17.0625 4.32269L17.0625 4.90509C17.0625 5.27147 17.0625 5.58821 17.0352 5.85233C17.0057 6.13655 16.9414 6.4032 16.7869 6.6592C16.6336 6.91328 16.4271 7.0977 16.1891 7.26303C15.9649 7.41877 15.6784 7.58002 15.3415 7.76966L13.1347 9.01196C12.6323 9.29474 12.4574 9.39657 12.3406 9.49795C12.0724 9.73078 11.9189 9.98911 11.8467 10.3128C11.8158 10.4511 11.8125 10.6254 11.8125 11.1547L11.8125 13.2037C11.8125 13.8797 11.8126 14.4535 11.743 14.8947C11.6691 15.3638 11.4974 15.8137 11.0473 16.0952C10.6076 16.3702 10.1231 16.345 9.65235 16.2332C9.19894 16.1255 8.6402 15.9071 7.96977 15.6449L7.90461 15.6195C7.59057 15.4967 7.31558 15.3892 7.09788 15.2768C6.86392 15.156 6.64665 15.0057 6.48042 14.7718C6.31231 14.5352 6.24491 14.2815 6.21486 14.0222C6.18746 13.7858 6.18748 13.502 6.1875 13.1855L6.1875 11.1547C6.1875 10.6254 6.18416 10.4512 6.15331 10.3128C6.08115 9.98912 5.92757 9.73078 5.65938 9.49795C5.5426 9.39657 5.36769 9.29474 4.86535 9.01196L2.65853 7.76967C2.32162 7.58002 2.03515 7.41877 1.81094 7.26303C1.57293 7.0977 1.36643 6.91328 1.2131 6.6592C1.05861 6.4032 0.99428 6.13655 0.964836 5.85233C0.937473 5.58821 0.937487 5.27147 0.937503 4.90509L0.937504 4.361C0.937504 4.34818 0.937503 4.33541 0.937502 4.32268C0.937467 3.85797 0.937436 3.45063 0.98438 3.12304C1.03548 2.76642 1.15182 2.42366 1.44463 2.14893C1.73237 1.87897 2.08271 1.77629 2.44518 1.73057C2.78694 1.68746 3.21455 1.68748 3.71475 1.6875ZM2.58597 2.84672C2.33573 2.87829 2.25615 2.93018 2.21438 2.96937C2.17769 3.00379 2.12928 3.06439 2.098 3.28262C2.06386 3.52091 2.0625 3.84651 2.0625 4.361V4.87836C2.0625 5.27902 2.0632 5.53708 2.08385 5.73641C2.10308 5.92204 2.13609 6.0113 2.1763 6.07793C2.21768 6.14649 2.28638 6.2235 2.45275 6.33907C2.62804 6.46083 2.86752 6.59631 3.23245 6.80174L5.41722 8.03162C5.43768 8.04313 5.45783 8.05447 5.47768 8.06564C5.89671 8.30138 6.18209 8.46193 6.3969 8.64842C6.84042 9.03347 7.12498 9.50116 7.25135 10.068C7.31277 10.3434 7.31267 10.6523 7.31252 11.0884C7.31251 11.1102 7.3125 11.1323 7.3125 11.1547V13.1568C7.3125 13.5109 7.31338 13.7287 7.33238 13.8927C7.34957 14.041 7.37664 14.0908 7.39748 14.1201C7.42019 14.1521 7.46518 14.2004 7.61402 14.2772C7.77333 14.3595 7.99281 14.446 8.33942 14.5815C9.06018 14.8633 9.54498 15.0514 9.91232 15.1386C10.2713 15.2239 10.3896 15.1797 10.4508 15.1414C10.5017 15.1095 10.5805 15.0448 10.6317 14.7195C10.6858 14.3764 10.6875 13.8926 10.6875 13.1568V11.1547C10.6875 11.1323 10.6875 11.1102 10.6875 11.0884C10.6873 10.6523 10.6872 10.3434 10.7487 10.068C10.875 9.50116 11.1596 9.03347 11.6031 8.64842C11.8179 8.46194 12.1033 8.30139 12.5223 8.06565C12.5422 8.05448 12.5623 8.04314 12.5828 8.03162L14.7676 6.80174C15.1325 6.59631 15.372 6.46083 15.5473 6.33907C15.7136 6.2235 15.7823 6.14649 15.8237 6.07793C15.8639 6.0113 15.8969 5.92204 15.9162 5.73641C15.9368 5.53708 15.9375 5.27902 15.9375 4.87836V4.361C15.9375 3.84651 15.9361 3.52091 15.902 3.28262C15.8707 3.06439 15.8223 3.00379 15.7856 2.96937C15.7439 2.93018 15.6643 2.87829 15.414 2.84672C15.1511 2.81356 14.7953 2.8125 14.25 2.8125H3.75C3.20473 2.8125 2.84891 2.81356 2.58597 2.84672Z" fill="#181D27"/>
                  </svg> Filter by</h5>
               <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body pb-2">
            <form id="formFilter">
               <div class="row">
                  <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-3">
                     <div class="cmp-com-sel-cus-blo">
                        <label for="f_employee" class="ctl-txt-lab-frm">Employee</label>
                        <select id="f_employee" name="f_employee">
                           <option selected disabled>Select Employee</option>
                           <option value="Antonio">Antonio</option>
                           <option value="Adrian">Adrian</option>
                           <option value="Marco">Marco</option>
                           <option value="Diego">Diego</option>
                        </select>
                     </div>
                  </div>
                  <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-3">
                        <div class="cmp-com-sel-cus-blo">
                           <label for="f_project" class="ctl-txt-lab-frm">Project</label>
                           <select id="f_project" name="f_project">
                              <option selected disabled>Select Project</option>
                              <option value="Track Force">Track Force</option>
                           </select>
                        </div>
                     </div>
                     <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-3">
                        <div class="cmp-com-sel-cus-blo">
                           <label for="f_task" class="ctl-txt-lab-frm">Job</label>
                           <select id="f_task" name="f_task">
                              <option selected disabled>Select Job</option>
                              <option value="Milestone List">Milestone List</option>
                           </select>
                        </div>
                     </div>
                     <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                        <div class="row">
                           <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                              <label for="f_task" class="ctl-txt-lab-frm">Date Range</label>
                           </div>
                           <div class="cmp-dat-ran-blo">
                              <div>
                                 <div class="cmp-com-inp-cus-blo cmp-fla-pic-clk">
                                    <label for="f_fromdate" class="ctl-txt-lab-to-frm">From</label>
                                    <div class="ctl-pos-rel-ico">
                                       <input type="text" class="flatpicker-input ctl-por-dat-ico" id="f_fromdate" data-provider="flatpickr" data-date-format="d M, Y" readonly="readonly" placeholder="Select Date">
                                       <span class="ctl-ico-rit">
                                          <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                             <path d="M10.625 8.75C10.9702 8.75 11.25 8.47018 11.25 8.125C11.25 7.77982 10.9702 7.5 10.625 7.5C10.2798 7.5 10 7.77982 10 8.125C10 8.47018 10.2798 8.75 10.625 8.75Z" fill="#868C98"/>
                                             <path d="M10.625 11.25C10.9702 11.25 11.25 10.9702 11.25 10.625C11.25 10.2798 10.9702 10 10.625 10C10.2798 10 10 10.2798 10 10.625C10 10.9702 10.2798 11.25 10.625 11.25Z" fill="#868C98"/>
                                             <path d="M8.125 8.125C8.125 8.47018 7.84518 8.75 7.5 8.75C7.15482 8.75 6.875 8.47018 6.875 8.125C6.875 7.77982 7.15482 7.5 7.5 7.5C7.84518 7.5 8.125 7.77982 8.125 8.125Z" fill="#868C98"/>
                                             <path d="M8.125 10.625C8.125 10.9702 7.84518 11.25 7.5 11.25C7.15482 11.25 6.875 10.9702 6.875 10.625C6.875 10.2798 7.15482 10 7.5 10C7.84518 10 8.125 10.2798 8.125 10.625Z" fill="#868C98"/>
                                             <path d="M4.375 8.75C4.72018 8.75 5 8.47018 5 8.125C5 7.77982 4.72018 7.5 4.375 7.5C4.02982 7.5 3.75 7.77982 3.75 8.125C3.75 8.47018 4.02982 8.75 4.375 8.75Z" fill="#868C98"/>
                                             <path d="M4.375 11.25C4.72018 11.25 5 10.9702 5 10.625C5 10.2798 4.72018 10 4.375 10C4.02982 10 3.75 10.2798 3.75 10.625C3.75 10.9702 4.02982 11.25 4.375 11.25Z" fill="#868C98"/>
                                             <path fill-rule="evenodd" clip-rule="evenodd" d="M4.375 1.09375C4.63388 1.09375 4.84375 1.30362 4.84375 1.5625V2.0392C5.2575 2.03124 5.71333 2.03125 6.21466 2.03125H8.78526C9.2866 2.03125 9.7425 2.03124 10.1563 2.0392V1.5625C10.1563 1.30362 10.3661 1.09375 10.625 1.09375C10.8839 1.09375 11.0938 1.30362 11.0938 1.5625V2.07943C11.2562 2.09182 11.4101 2.10739 11.5556 2.12696C12.2884 2.22548 12.8815 2.43305 13.3492 2.90078C13.817 3.3685 14.0245 3.9616 14.123 4.69436C14.2188 5.40636 14.2188 6.31613 14.2188 7.46471V8.78526C14.2188 9.93384 14.2188 10.8436 14.123 11.5556C14.0245 12.2884 13.817 12.8815 13.3492 13.3492C12.8815 13.8169 12.2884 14.0245 11.5556 14.123C10.8436 14.2188 9.93387 14.2188 8.78529 14.2188H6.21474C5.06616 14.2188 4.15637 14.2188 3.44436 14.123C2.7116 14.0245 2.1185 13.8169 1.65078 13.3492C1.18305 12.8815 0.975477 12.2884 0.876959 11.5556C0.781233 10.8436 0.78124 9.93386 0.78125 8.78526V7.46474C0.78124 6.31614 0.781233 5.40637 0.876959 4.69436C0.975477 3.9616 1.18305 3.3685 1.65078 2.90078C2.1185 2.43305 2.7116 2.22548 3.44436 2.12696C3.58994 2.10739 3.74379 2.09182 3.90625 2.07943V1.5625C3.90625 1.30362 4.11612 1.09375 4.375 1.09375ZM3.56928 3.0561C2.94048 3.14064 2.5782 3.29918 2.31369 3.56369C2.04918 3.8282 1.89064 4.19047 1.8061 4.81928C1.79178 4.92577 1.77981 5.03788 1.7698 5.15625H13.2302C13.2202 5.03788 13.2082 4.92577 13.1939 4.81928C13.1094 4.19047 12.9508 3.8282 12.6863 3.56369C12.4218 3.29918 12.0595 3.14064 11.4307 3.0561C10.7884 2.96975 9.94176 2.96875 8.75 2.96875H6.25C5.05824 2.96875 4.21157 2.96975 3.56928 3.0561ZM1.71875 7.5C1.71875 6.96624 1.71895 6.50171 1.72693 6.09375H13.2731C13.2811 6.50171 13.2813 6.96624 13.2813 7.5V8.75C13.2813 9.94176 13.2803 10.7884 13.1939 11.4307C13.1094 12.0595 12.9508 12.4218 12.6863 12.6863C12.4218 12.9508 12.0595 13.1094 11.4307 13.1939C10.7884 13.2803 9.94176 13.2812 8.75 13.2812H6.25C5.05824 13.2812 4.21157 13.2803 3.56928 13.1939C2.94048 13.1094 2.5782 12.9508 2.31369 12.6863C2.04918 12.4218 1.89064 12.0595 1.8061 11.4307C1.71975 10.7884 1.71875 9.94176 1.71875 8.75V7.5Z" fill="#868C98"/>
                                          </svg>
                                       </span>
                                    </div>
                                 </div>
                              </div>
                              <div>
                                 <div class="cmp-com-inp-cus-blo cmp-fla-pic-clk">
                                    <label for="f_todate" class="ctl-txt-lab-to-frm">To</label>
                                    <div class="ctl-pos-rel-ico">
                                       <input type="text" class="flatpicker-input ctl-por-dat-ico" id="f_todate" data-provider="flatpickr" data-date-format="d M, Y" readonly="readonly" placeholder="Select Date">
                                       <span class="ctl-ico-rit">
                                          <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                             <path d="M10.625 8.75C10.9702 8.75 11.25 8.47018 11.25 8.125C11.25 7.77982 10.9702 7.5 10.625 7.5C10.2798 7.5 10 7.77982 10 8.125C10 8.47018 10.2798 8.75 10.625 8.75Z" fill="#868C98"/>
                                             <path d="M10.625 11.25C10.9702 11.25 11.25 10.9702 11.25 10.625C11.25 10.2798 10.9702 10 10.625 10C10.2798 10 10 10.2798 10 10.625C10 10.9702 10.2798 11.25 10.625 11.25Z" fill="#868C98"/>
                                             <path d="M8.125 8.125C8.125 8.47018 7.84518 8.75 7.5 8.75C7.15482 8.75 6.875 8.47018 6.875 8.125C6.875 7.77982 7.15482 7.5 7.5 7.5C7.84518 7.5 8.125 7.77982 8.125 8.125Z" fill="#868C98"/>
                                             <path d="M8.125 10.625C8.125 10.9702 7.84518 11.25 7.5 11.25C7.15482 11.25 6.875 10.9702 6.875 10.625C6.875 10.2798 7.15482 10 7.5 10C7.84518 10 8.125 10.2798 8.125 10.625Z" fill="#868C98"/>
                                             <path d="M4.375 8.75C4.72018 8.75 5 8.47018 5 8.125C5 7.77982 4.72018 7.5 4.375 7.5C4.02982 7.5 3.75 7.77982 3.75 8.125C3.75 8.47018 4.02982 8.75 4.375 8.75Z" fill="#868C98"/>
                                             <path d="M4.375 11.25C4.72018 11.25 5 10.9702 5 10.625C5 10.2798 4.72018 10 4.375 10C4.02982 10 3.75 10.2798 3.75 10.625C3.75 10.9702 4.02982 11.25 4.375 11.25Z" fill="#868C98"/>
                                             <path fill-rule="evenodd" clip-rule="evenodd" d="M4.375 1.09375C4.63388 1.09375 4.84375 1.30362 4.84375 1.5625V2.0392C5.2575 2.03124 5.71333 2.03125 6.21466 2.03125H8.78526C9.2866 2.03125 9.7425 2.03124 10.1563 2.0392V1.5625C10.1563 1.30362 10.3661 1.09375 10.625 1.09375C10.8839 1.09375 11.0938 1.30362 11.0938 1.5625V2.07943C11.2562 2.09182 11.4101 2.10739 11.5556 2.12696C12.2884 2.22548 12.8815 2.43305 13.3492 2.90078C13.817 3.3685 14.0245 3.9616 14.123 4.69436C14.2188 5.40636 14.2188 6.31613 14.2188 7.46471V8.78526C14.2188 9.93384 14.2188 10.8436 14.123 11.5556C14.0245 12.2884 13.817 12.8815 13.3492 13.3492C12.8815 13.8169 12.2884 14.0245 11.5556 14.123C10.8436 14.2188 9.93387 14.2188 8.78529 14.2188H6.21474C5.06616 14.2188 4.15637 14.2188 3.44436 14.123C2.7116 14.0245 2.1185 13.8169 1.65078 13.3492C1.18305 12.8815 0.975477 12.2884 0.876959 11.5556C0.781233 10.8436 0.78124 9.93386 0.78125 8.78526V7.46474C0.78124 6.31614 0.781233 5.40637 0.876959 4.69436C0.975477 3.9616 1.18305 3.3685 1.65078 2.90078C2.1185 2.43305 2.7116 2.22548 3.44436 2.12696C3.58994 2.10739 3.74379 2.09182 3.90625 2.07943V1.5625C3.90625 1.30362 4.11612 1.09375 4.375 1.09375ZM3.56928 3.0561C2.94048 3.14064 2.5782 3.29918 2.31369 3.56369C2.04918 3.8282 1.89064 4.19047 1.8061 4.81928C1.79178 4.92577 1.77981 5.03788 1.7698 5.15625H13.2302C13.2202 5.03788 13.2082 4.92577 13.1939 4.81928C13.1094 4.19047 12.9508 3.8282 12.6863 3.56369C12.4218 3.29918 12.0595 3.14064 11.4307 3.0561C10.7884 2.96975 9.94176 2.96875 8.75 2.96875H6.25C5.05824 2.96875 4.21157 2.96975 3.56928 3.0561ZM1.71875 7.5C1.71875 6.96624 1.71895 6.50171 1.72693 6.09375H13.2731C13.2811 6.50171 13.2813 6.96624 13.2813 7.5V8.75C13.2813 9.94176 13.2803 10.7884 13.1939 11.4307C13.1094 12.0595 12.9508 12.4218 12.6863 12.6863C12.4218 12.9508 12.0595 13.1094 11.4307 13.1939C10.7884 13.2803 9.94176 13.2812 8.75 13.2812H6.25C5.05824 13.2812 4.21157 13.2803 3.56928 13.1939C2.94048 13.1094 2.5782 12.9508 2.31369 12.6863C2.04918 12.4218 1.89064 12.0595 1.8061 11.4307C1.71975 10.7884 1.71875 9.94176 1.71875 8.75V7.5Z" fill="#868C98"/>
                                          </svg>
                                       </span>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
               </div>
            </form>
         </div>
         <div class="modal-footer">
               <div class="cmp-fil-btn-blo">
                  <button type="button" class="btn ctl-btn-light" data-bs-dismiss="modal">Reset</button>
                  <button type="button" class="btn ctl-btn-blue">Apply Now</button>
               </div>
         </div>
      </div>
   </div>
</div>

@endsection
@section('script')   
<script src="{{ url('js/jquery-3.6.0_cdn/jquery.min.js') }}"></script>
<script src="http://sat.localhost/ets-saas/public/js/app.js"></script>
<script src="{{ url('js/select2@4.1.0/select2.min.js') }}"></script>
<script src="{{ url('js/select2.init.js') }}"></script>
<script src="{{ url('js/libs/flatpickr/flatpickr.min.js') }}"></script>
<script src="{{ url('js/jquery-validation/jquery.validate.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="{{ url('js/timecard/index.js') }}"></script>
<script>
   let activityLog = '{{ route("timecard.list") }}';
</script>
@endsection