@extends('ui-common.layouts.master')
@section('title')
@lang('Leave Management')
@endsection
@section('css')   
<!-- DataTable 1.11.5 -->
<link href="{{ url('css/DataTables_cdn/datatables.bootstrap5.min.css') }}" rel="stylesheet" />
<link href="{{ url('css/DataTables_cdn/datatables.responsive.min.css') }}" rel="stylesheet" />
<link href="{{ url('css/DataTables_cdn/datatables.buttons.min.css') }}" rel="stylesheet" />
<!-- 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" />
<!-- timepickr themes -->
<link rel="stylesheet" href="{{ url('css/@simonwep/pickr/themes/classic.min.css')}}"/> <!-- 'classic' theme -->
<link rel="stylesheet" href="{{ url('css/@simonwep/pickr/themes/monolith.min.css')}}"/> <!-- 'monolith' theme -->
<link rel="stylesheet" href="{{ url('css/@simonwep/pickr/themes/nano.min.css')}}"/> <!-- 'nano' theme -->
@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="card ctl-card-bor-rad ctl-pad-car-hea-bod mb-0">
            <div class="card-header ctl-bor-lne-non">
                <div class="row">
                    <div class="col-auto my-auto">
                        <div class="ctl-car-clo-hdr">
                            <h3>Leave Management</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-12 col-md-6 col-lg-4 col-xl-4 col-xxl-3 mb-3">
                        <div class="cmp-com-sel-cus-blo">
                            <label for="s_employee" class="ctl-lab-txt-frm">Employee</label>
                            <select id="s_employee" name="s_employee" class="ctl-com-sel-blo ctl-select2">
                                <option selected disabled>Select Employee</option>
                                <option value="All Users">All Users</option>
                                <option value="Diego">Diego</option>
                                <option value="Elena">Elena</option>
                                <option value="Jouri">Jouri</option>
                                <option value="Isabella">Isabella</option>
                                <option value="Olivia">Olivia</option>
                                <option value="Catalina">Catalina</option>
                                <option value="Martina">Martina</option>
                                <option value="Emilia">Emilia</option>
                                <option value="Delfina">Delfina</option>
                                <option value="Valentina">Valentina</option>
                                <option value="Charlotte">Charlotte</option>
                            </select>
                        </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-sel-cus-blo">
                            <label for="leave_type" class="ctl-lab-txt-frm">Leave Type</label>
                            <select id="leave_type" name="leave_type" class="ctl-com-sel-blo ctl-select2">
                                <option selected disabled>Please Select Leave Type</option>
                                <option value="All Leave">All Leave</option>
                                <option value="Sick Leave">Sick Leave</option>
                                <option value="Casual Leave">Casual Leave</option>
                                <option value="Maternity/Paternity Leave">Maternity/Paternity Leave</option>
                                <option value="Compassionate Leave">Compassionate Leave</option>
                            </select>
                        </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="date_range" class="ctl-lab-txt-frm">Date Range</label>
                            <div class="ctl-pos-rel-ico">
                                <input type="text" class="form-control" id="date_range" name="date_range" data-provider="flatpickr" data-date-format="d M, Y" readonly="readonly" placeholder="Select Service Date">
                            </div>
                        </div> 
                    </div>
                    <div class="col-auto mb-3 mb-lg-0">
                        <div class="cmp-lab-dis-non-res">
                            <label class="ctl-lab-txt-frm d-block"> &nbsp;</label>
                            <button type="button" class="cmp-can-com-btn">
                                Reset
                            </button>
                        </div>
                    </div>
                </div>
                <div class="cmp-lev-man-blo">
                    <div class="ctl-lev-man-blo">
                        <div class="ctl-man-blo-top">
                            <div class="ctl-uma-txt-lft text-danger">6</div>
                        </div>
                        <div class="ctl-man-blo-bot">
                            <div class="ctl-uma-pic-lft">
                             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                            <g clip-path="url(#clip0_2408_23274)">
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M7.49992 1.33203C7.49992 1.05589 7.72378 0.832031 7.99992 0.832031C11.958 0.832031 15.1666 4.04066 15.1666 7.9987C15.1666 11.9567 11.958 15.1654 7.99992 15.1654C4.04188 15.1654 0.833252 11.9567 0.833252 7.9987C0.833252 7.72256 1.05711 7.4987 1.33325 7.4987C1.60939 7.4987 1.83325 7.72256 1.83325 7.9987C1.83325 11.4045 4.59416 14.1654 7.99992 14.1654C11.4057 14.1654 14.1666 11.4045 14.1666 7.9987C14.1666 4.59294 11.4057 1.83203 7.99992 1.83203C7.72378 1.83203 7.49992 1.60817 7.49992 1.33203ZM7.99992 5.4987C8.27606 5.4987 8.49992 5.72256 8.49992 5.9987V8.16536H10.6666C10.9427 8.16536 11.1666 8.38922 11.1666 8.66536C11.1666 8.94151 10.9427 9.16537 10.6666 9.16537H7.99992C7.72378 9.16537 7.49992 8.94151 7.49992 8.66536V5.9987C7.49992 5.72256 7.72378 5.4987 7.99992 5.4987Z" fill="#525866"></path>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.0663 1.59706C6.16575 1.85467 6.03753 2.14413 5.77991 2.24357C5.68562 2.27997 5.59245 2.31862 5.50045 2.35946C5.24806 2.47151 4.95263 2.35774 4.84058 2.10535C4.72854 1.85296 4.84231 1.55752 5.0947 1.44548C5.2017 1.39798 5.31009 1.35301 5.41979 1.31067C5.6774 1.21122 5.96686 1.33944 6.0663 1.59706ZM3.76505 2.82554C3.9555 3.02551 3.94777 3.342 3.74781 3.53244C3.67469 3.60207 3.60329 3.67347 3.53366 3.74659C3.34322 3.94655 3.02673 3.95428 2.82676 3.76383C2.62679 3.57339 2.61907 3.2569 2.80951 3.05694C2.89036 2.97205 2.97327 2.88914 3.05816 2.80829C3.25812 2.61785 3.57461 2.62557 3.76505 2.82554ZM2.10657 4.83936C2.35896 4.95141 2.47273 5.24684 2.36068 5.49923C2.31984 5.59123 2.28119 5.6844 2.24479 5.77869C2.14535 6.03631 1.85589 6.16453 1.59828 6.06508C1.34066 5.96564 1.21244 5.67618 1.31189 5.41857C1.35423 5.30887 1.3992 5.20048 1.4467 5.09348C1.55874 4.84109 1.85418 4.72732 2.10657 4.83936Z" fill="#525866"></path>
                                            </g>
                                            <defs>
                                                <clipPath id="clip0_2408_23274">
                                                <rect width="16" height="16" fill="white"></rect>
                                                </clipPath>
                                            </defs>
                                        </svg>
                            </div>
                            <div class="ctl-uma-tit-rit just">Total Pending Approvals</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">
        <div class="card ctl-card-bor-rad ctl-pad-car-hea-bod mb-0">
            <div class="card-header ctl-bor-lne-non pb-0">
                <div class="row">
                    <div class="col-auto my-auto">
                        <div class="ctl-car-clo-hdr">
                            <h3>Employee Leave Request</h3>
                        </div>
                    </div>
                    <div class="col-sm-3 ms-lg-auto ms-auto ctl-ser-cus-wid mt-2 mt-sm-0">
                        <div class="cmp-ser-inp-blo ">
                            <div class="ctl-input-field">
                                <span class="icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
                                        <g clip-path="url(#clip0_224_12492)">
                                            <path d="M6.60568 0C2.96341 0 0 2.96341 0 6.60568C0 10.2482 2.96341 13.2114 6.60568 13.2114C10.2482 13.2114 13.2114 10.2482 13.2114 6.60568C13.2114 2.96341 10.2482 0 6.60568 0ZM6.60568 11.9919C3.63577 11.9919 1.21951 9.57562 1.21951 6.60571C1.21951 3.6358 3.63577 1.21951 6.60568 1.21951C9.57559 1.21951 11.9919 3.63577 11.9919 6.60568C11.9919 9.57559 9.57559 11.9919 6.60568 11.9919Z" fill="#868C98"></path>
                                            <path d="M14.8215 13.9588L11.3255 10.4628C11.0873 10.2246 10.7015 10.2246 10.4633 10.4628C10.2251 10.7008 10.2251 11.087 10.4633 11.325L13.9593 14.821C14.0158 14.8777 14.083 14.9227 14.157 14.9533C14.231 14.984 14.3103 14.9997 14.3904 14.9996C14.4705 14.9997 14.5498 14.984 14.6237 14.9533C14.6977 14.9227 14.7649 14.8777 14.8215 14.821C15.0597 14.583 15.0597 14.1968 14.8215 13.9588Z" fill="#868C98"></path>
                                        </g>
                                        <defs>
                                            <clipPath id="clip0_224_12492">
                                                <rect width="15" height="15" fill="white"></rect>
                                            </clipPath>
                                        </defs>
                                    </svg>
                                </span>
                                <input autocomplete="off" id="search" type="text" name="search" class="form-control" placeholder="Search" aria-label="search" aria-describedby="addon-wrapping">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body ctl-mar-tab-bot">
                <div class="d-flex flex-column flex-md-row align-items-center gap-2 mb-3 justify-content-center">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs nav-tabs-custom ctl-nav-fon-siz nav-success ctl-nav-cus" role="tablist">
                        <li class="nav-item" role="presentation">
                            <a class="nav-link ctl-tab-txt ps-md-0 ctl-pen-lea-lis active" data-bs-toggle="tab" href="#pending-leaves-list" role="tab" aria-selected="true">
                                Pending Leaves List
                            </a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link ctl-tab-txt ctl-his-lea-lis" data-bs-toggle="tab" href="#history-leaves-list" role="tab" aria-selected="false" tabindex="-1">
                                History Leaves List
                            </a>
                        </li>  
                    </ul>
                </div>
                <div class="tab-content">
                   <div class="tab-pane active" id="pending-leaves-list" role="tabpanel">
                        <div class="row">
                            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                <div class="common_datatable_theme table_search_custom common_search_emp scroll_box">
                                    <table id="leavePendingTable" class="table theme_table ctl-che-wid-sor dt-responsive nowrap align-middle" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th>
                                                    <div class="form-check text-center">
                                                        <input class="form-check-input fs-14" id="ctl-select-all" type="checkbox">
                                                    </div>
                                                </th>
                                                <th>Full Name</th>
                                                <th>Leave Type</th>
                                                <th>Date</th>
                                                <th>Duration</th>
                                                <th>Employment Type To</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <div class="form-check text-center">
                                                        <input class="form-check-input fs-14 ctl-select-row" type="checkbox">
                                                    </div>
                                                </td>
                                                <td>Elena - TrackForce-039</td>
                                                <td>Casual Leave</td>
                                                <td>09/23/2024 - 09/23/2024</td>
                                                <td>1 day</td>
                                                <td>Direct</td>
                                                <td>
                                                <div class="d-flex align-items-center gap-1">
                                                    <span class="badge badge-approved w-auto">
                                                        <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#employee-leave-approve">
                                                            <span>
                                                                Approved
                                                            </span>
                                                        </a>
                                                    </span>
                                                    <span class="badge badge-rejected w-auto">
                                                        <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#employee-leave-deny">
                                                            <span>
                                                                Deny
                                                            </span>
                                                        </a>
                                                    </span>
                                                    <span class="badge badge-primary w-auto">
                                                        <a href="{{url('ui/editleave')}}">
                                                            <span>
                                                                Edit
                                                            </span>
                                                        </a>
                                                    </span>
                                                </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check text-center">
                                                        <input class="form-check-input fs-14 ctl-select-row" type="checkbox">
                                                    </div>
                                                </td>
                                                <td>Alice - TrackForce-038</td>
                                                <td>Slick Leave</td>
                                                <td>09/23/2024 - 09/24/2024</td>
                                                <td>1 day</td>
                                                <td>Direct</td>
                                                <td>
                                                <div class="d-flex align-items-center gap-1">
                                                    <span class="badge badge-approved w-auto">
                                                        <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#employee-leave-approve">
                                                            <span>
                                                                Approved
                                                            </span>
                                                        </a>
                                                    </span>
                                                    <span class="badge badge-rejected w-auto">
                                                        <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#employee-leave-deny">
                                                            <span>
                                                                Deny
                                                            </span>
                                                        </a>
                                                    </span>
                                                    <span class="badge badge-primary w-auto">
                                                        <a href="{{url('ui/editleave')}}">
                                                            <span>
                                                                Edit
                                                            </span>
                                                        </a>
                                                    </span>
                                                </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                <div class="cmp-app-rej-btn-blo">
                                    <div class="cmp-pop-btn-blo justify-content-start cmp-res-app-rej-cus">
                                        <button type="button" class="btn ctl-btn-blue" data-bs-dismiss="modal">Approve</button>
                                        <button type="submit" class="btn ctl-btn-red" data-bs-dismiss="modal">Deny</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="history-leaves-list" role="tabpanel">
                        <div class="row">
                            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                <div class="common_datatable_theme table_search_custom common_search_emp scroll_box">
                                    <table id="leaveHistoryTable" class="table ctl-pad-rit-fir-col theme_table dt-responsive nowrap align-middle" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th>Full Name</th>
                                                <th>Leave Type</th>
                                                <th>Date</th>
                                                <th>Duration</th>
                                                <th>Employment Type To</th>
                                                <th>Status Changed Date</th>
                                                <th>Status Changed By</th>
                                                <th>Status</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Elena - TrackForce-039</td>
                                                <td>Casual Leave</td>
                                                <td>09/23/2024 - 09/23/2024</td>
                                                <td>1 day</td>
                                                <td>Direct</td>
                                                <td>09/19/2024</td>
                                                <td>Team Leader</td>
                                                <td>
                                                    <span class="ctl-sta-lea-txt">
                                                        <span>
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
                                                                <circle cx="4" cy="4" r="3" fill="#17B26A"></circle>
                                                            </svg>
                                                        </span>
                                                        Approved
                                                    </span>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center gap-1">
                                                        <span class="badge badge-primary w-auto">
                                                            <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#employee-leave-history-view">
                                                                <span class="text-success">
                                                                    View
                                                                </span>
                                                            </a>
                                                        </span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Alice - TrackForce-039</td>
                                                <td>Casual Leave</td>
                                                <td>09/23/2024 - 09/23/2024</td>
                                                <td>1 day</td>
                                                <td>Direct</td>
                                                <td>09/19/2024</td>
                                                <td>Team Leader</td>
                                                <td>
                                                    <span class="ctl-sta-lea-txt">
                                                        <span>
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
                                                                <circle cx="4" cy="4" r="3" fill="#17B26A"></circle>
                                                            </svg>
                                                        </span>
                                                        Approved
                                                    </span>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center gap-1">
                                                        <span class="badge badge-primary w-auto">
                                                            <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#employee-leave-history-view">
                                                                <span class="text-success">
                                                                    View
                                                                </span>
                                                            </a>
                                                        </span>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                
                
            </div>
        </div>
    </div>
</div>

<!-- employee-leave-approve popup -->
<div class="modal fade" id="employee-leave-approve" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-scrollable modal-lg modal-dialog-centered modal-dialog-bottom-center">
      <div class="modal-content cmp-mod-cus-tit cmp-mod-blo-cus">
         <div class="modal-header">
                <div class="d-flex gap-2 align-items-center">
                        <div class="flex-shrink-0 leave_profile"><div class="avatar-xs rounded-circle profile_img yellow emplopee-popup-icon-alphabet">EL</div></div>
                        <div class="lineHeightNormal">
                            <p class="fs-16 fc-primary font-weight-500 lineHeightNormal">ELena </p>
                            <span class="fs-12 fc-secondary font-weight-400 lineHeightNormal">elena@trackforceuser.com</span>
                        </div>
                    </div>
               <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body pb-0">
            <form>
                <div class="cmp-lea-view-bac">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-3">
                            <div class="cmp-com-inp-cus-blo cmp-vie-inp-dis">
                                <label class="ctl-lab-txt-frm">Reporting To</label>
                                <input type="text" value="Team Leader" disabled>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-3">
                            <div class="cmp-com-inp-cus-blo cmp-vie-inp-dis">
                                <label class="ctl-lab-txt-frm">Leave Type</label>
                                <input type="text"  value="Sick Leave" disabled>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cmp-lea-view-bac">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 mb-3">
                            <div class="cmp-com-inp-cus-blo cmp-vie-inp-dis">
                                <label class="ctl-lab-txt-frm">Date Range</label>
                                <input type="text" value="27/03/2025-28/03/2025" disabled>
                            </div>
                        </div>
                        
                        <div class="col-sm-12 col-md-12 col-lg-3 col-xl-3 col-xxl-3 mb-3">
                            <div class="cmp-com-inp-cus-blo cmp-vie-inp-dis">
                                <label class="ctl-lab-txt-frm">Leave Duration</label>
                                <input type="text"  value="1.5" disabled>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-3 col-xl-3 col-xxl-3 mb-3">
                            <div class="cmp-com-inp-cus-blo">
                                <label class="ctl-lab-txt-frm">Status</label>
                                <span class="ctl-sta-lea-txt ctl-sta-mot-pop">
                                    <span>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
                                            <circle cx="4" cy="4" r="3" fill="#17B26A"></circle>
                                        </svg>
                                    </span>
                                    Approved
                                </span>
                                <span class="ctl-sta-lea-txt ctl-sta-mot-pop d-none">
                                    <span>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
                                            <circle cx="4" cy="4" r="3" fill="#212121"></circle>
                                        </svg>
                                    </span>
                                    Pending
                                </span>
                                <span class="ctl-sta-lea-txt ctl-sta-mot-pop d-none">
                                    <span>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
                                            <circle cx="4" cy="4" r="3" fill="#f74850"></circle>
                                        </svg>
                                    </span>
                                    Rejected
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cmp-lea-view-bac">
                    <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-12 col-lg-12 col-xl-12 col-xxl-12">
                                    <label class="ctl-lab-txt-frm">Leave Details</label>
                                </div>
                            </div>
                            <ul class="cmp-lev-det-uol list-unstyled ps-0 mb-0">
                                <li>
                                    <div class="row">
                                        <div class="col-sm-12 col-md-12 col-lg-3 col-xl-3 col-xxl-3">
                                            <div class="ctl-lev-det-txt-blo">
                                                <h4>27/03/2025</h4>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-md-12 col-lg-7 col-xl-7 col-xxl-7">                           
                                            <div class="row">
                                                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                                                    <div class="cmp-com-inp-cus-blo cmp-vie-inp-dis">
                                                        <input type="text"  value="Half Day" disabled>
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 mt-3 mt-lg-0">
                                                    <div class="cmp-com-inp-cus-blo cmp-vie-inp-dis">
                                                        <input type="text"  value="Afternoon" disabled>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="row">
                                        <div class="col-sm-12 col-md-12 col-lg-3 col-xl-3 col-xxl-3">
                                            <div class="ctl-lev-det-txt-blo">
                                               <h4>28/03/2025</h4>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-md-12 col-lg-7 col-xl-7 col-xxl-7">                           
                                            <div class="row">
                                                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                                                    <div class="cmp-com-inp-cus-blo cmp-vie-inp-dis">
                                                        <input type="text"  value="Full Day" disabled>
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 mt-3 mt-lg-0">
                                                    <div class="cmp-com-inp-cus-blo cmp-vie-inp-dis">
                                                        <input type="text"  value="-" disabled>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>       
                        </div>
                    </div>
                </div>
                <div class="cmp-lea-view-bac">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                            <label for="report_to" class="ctl-lab-txt-frm">Inform To</label>
                            <div class="ctl-pos-rel-ico">
                                <div class="select-checkbox multiSelCheckBoxSubGroup mb-0">
                                    <div class="input-field multiple-select-custom ctl-mul-sel-pol">
                                        <select class="form-select select-multiple" multiple name="report_to">
                                            <option value="Fumio">Fumio</option>
                                            <option value="Alice">Alice</option>
                                            <option value="Marcello">Marcello</option>
                                            <option value="Brayden">Brayden</option>
                                            <option value="Fumio">Fumio</option>
                                            <option value="Alice">Alice</option>
                                            <option value="Marcello">Marcello</option>
                                            <option value="Brayden">Brayden</option>
                                            <option value="Fumio">Fumio</option>
                                            <option value="Alice">Alice</option>
                                            <option value="Marcello">Marcello</option>
                                            <option value="Brayden">Brayden</option>
                                        </select>
                                        <span class="ctl-ico-lft">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
                                                <path d="M7.57501 7.98828C7.53126 7.98203 7.47501 7.98203 7.42501 7.98828C6.32501 7.95078 5.45001 7.05078 5.45001 5.94453C5.45001 4.81328 6.36251 3.89453 7.50001 3.89453C8.63126 3.89453 9.55001 4.81328 9.55001 5.94453C9.54376 7.05078 8.67501 7.95078 7.57501 7.98828Z" stroke="#868C98" stroke-linecap="round" stroke-linejoin="round"></path>
                                                <path d="M11.7125 12.1121C10.6 13.1309 9.12501 13.7496 7.50001 13.7496C5.87501 13.7496 4.40001 13.1309 3.28751 12.1121C3.35001 11.5246 3.72501 10.9496 4.39376 10.4996C6.10626 9.36211 8.90625 9.36211 10.6063 10.4996C11.275 10.9496 11.65 11.5246 11.7125 12.1121Z" stroke="#868C98" stroke-linecap="round" stroke-linejoin="round"></path>
                                                <path d="M7.5 13.75C10.9518 13.75 13.75 10.9518 13.75 7.5C13.75 4.04822 10.9518 1.25 7.5 1.25C4.04822 1.25 1.25 4.04822 1.25 7.5C1.25 10.9518 4.04822 13.75 7.5 13.75Z" stroke="#868C98" stroke-linecap="round" stroke-linejoin="round"></path>
                                            </svg>
                                        </span>
                                    </div>
                                </div> 
                            </div>
                        </div>
                    </div>
                </div>


                <div class="cmp-lea-view-bac">
                    <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-tex-are-cus cmp-res-aut-txt cmp-vie-inp-dis">
                                <label class="ctl-lab-txt-frm">Reason for Leave</label>
                                <textarea class="form-control ctl-min-tex-hei ctl-tex-are-scr" rows="3" disabled>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</textarea>
                            </div>
                        </div>
                        
                    </div>
                </div>
                <div class="cmp-lea-view-bac">
                    <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-tex-are-cus cmp-res-aut-txt cmp-vie-inp-dis">
                                <label class="ctl-lab-txt-frm">Comments</label>
                                <textarea class="form-control ctl-min-tex-hei ctl-tex-are-scr" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                            <div class="cmp-com-inp-cus-blo">
                                <label class="ctl-lab-txt-frm">Supporting Documents</label>
                            </div>
                            <ul class="cmp-doc-vie-blo list-unstyled mb-0">
                                <li>
                                    <a href="javascript:void(0)" target="_blank" class="d-flex align-items-center gap-3">
                                        <div class="ctl-att-doc-typ">
                                            <img src="{{asset('img/assets/icon-jpg.png')}}">
                                        </div>
                                        <div class="ctl-att-doc-txt">
                                            <p>6c5c48927975.jpg</p>
                                        </div>
                                        <div class="cmp-rev-svg-con">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="">
                                                <path d="M18.2892 2.88976C17.2615 2.75159 15.9068 2.75 14 2.75C13.5858 2.75 13.25 2.41421 13.25 2C13.25 1.58579 13.5858 1.25 14 1.25H14.0564C15.8942 1.24998 17.3498 1.24997 18.489 1.40314C19.6615 1.56076 20.6104 1.89288 21.3588 2.64124C22.0432 3.32568 22.417 3.97665 22.5924 4.98199C22.7501 5.88571 22.7501 7.1045 22.75 8.90369L22.75 9C22.75 9.41422 22.4142 9.75 22 9.75C21.5858 9.75 21.25 9.41422 21.25 9C21.25 7.08092 21.2471 5.9986 21.1147 5.23984C20.9973 4.56666 20.7852 4.18904 20.2981 3.7019C19.8749 3.27869 19.2952 3.02503 18.2892 2.88976Z" fill="#000000"></path>
                                                <path d="M2.75001 15C2.75001 14.5858 2.41422 14.25 2.00001 14.25C1.58579 14.25 1.25001 14.5858 1.25001 15L1.25 15.0963C1.24995 16.8955 1.24992 18.1143 1.40762 19.018C1.58304 20.0233 1.95681 20.6743 2.64125 21.3588C3.38961 22.1071 4.33856 22.4392 5.51098 22.5969C6.6502 22.75 8.10583 22.75 9.94359 22.75H10C10.4142 22.75 10.75 22.4142 10.75 22C10.75 21.5858 10.4142 21.25 10 21.25C8.09318 21.25 6.73852 21.2484 5.71085 21.1102C4.70476 20.975 4.12512 20.7213 3.70191 20.2981C3.21477 19.811 3.00275 19.4333 2.88529 18.7602C2.75289 18.0014 2.75001 16.9191 2.75001 15Z" fill="#000000"></path>
                                                <path d="M22.75 15C22.75 14.5858 22.4142 14.25 22 14.25C21.5858 14.25 21.25 14.5858 21.25 15C21.25 16.9191 21.2471 18.0014 21.1147 18.7602C20.9973 19.4333 20.7852 19.811 20.2981 20.2981C19.8749 20.7213 19.2952 20.975 18.2892 21.1102C17.2615 21.2484 15.9068 21.25 14 21.25C13.5858 21.25 13.25 21.5858 13.25 22C13.25 22.4142 13.5858 22.75 14 22.75H14.0564C15.8942 22.75 17.3498 22.75 18.489 22.5969C19.6615 22.4392 20.6104 22.1071 21.3588 21.3588C22.0432 20.6743 22.417 20.0233 22.5924 19.018C22.7501 18.1143 22.7501 16.8955 22.75 15.0963L22.75 15Z" fill="#000000"></path>
                                                <path d="M10 1.25H9.94359C8.10584 1.24998 6.65019 1.24997 5.51098 1.40314C4.33856 1.56076 3.38961 1.89288 2.64125 2.64124C1.95681 3.32568 1.58304 3.97665 1.40762 4.98199C1.24992 5.8857 1.24995 7.10448 1.25 8.90364L1.25001 9C1.25001 9.41422 1.58579 9.75 2.00001 9.75C2.41422 9.75 2.75001 9.41422 2.75001 9C2.75001 7.08092 2.75289 5.9986 2.88529 5.23984C3.00275 4.56666 3.21477 4.18904 3.70191 3.7019C4.12512 3.27869 4.70476 3.02503 5.71085 2.88976C6.73852 2.75159 8.09319 2.75 10 2.75C10.4142 2.75 10.75 2.41421 10.75 2C10.75 1.58579 10.4142 1.25 10 1.25Z" fill="#000000"></path>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M12 9.25C10.4812 9.25 9.25001 10.4812 9.25001 12C9.25001 13.5188 10.4812 14.75 12 14.75C13.5188 14.75 14.75 13.5188 14.75 12C14.75 10.4812 13.5188 9.25 12 9.25ZM10.75 12C10.75 11.3096 11.3096 10.75 12 10.75C12.6904 10.75 13.25 11.3096 13.25 12C13.25 12.6904 12.6904 13.25 12 13.25C11.3096 13.25 10.75 12.6904 10.75 12Z" fill="#000000"></path>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.32438 9.45049C6.59435 7.97738 8.77637 6.25 12 6.25C15.2236 6.25 17.4057 7.97738 18.6756 9.45049L18.7079 9.48791C18.9789 9.80202 19.2576 10.125 19.4491 10.5121C19.6632 10.9448 19.75 11.4094 19.75 12C19.75 12.5906 19.6632 13.0552 19.4491 13.4879C19.2576 13.875 18.9789 14.198 18.7079 14.5121L18.6756 14.5495C17.4057 16.0226 15.2236 17.75 12 17.75C8.77637 17.75 6.59435 16.0226 5.32438 14.5495L5.29211 14.5121C5.0211 14.198 4.7424 13.875 4.5509 13.4879C4.33676 13.0552 4.25001 12.5906 4.25001 12C4.25001 11.4094 4.33676 10.9448 4.5509 10.5121C4.74241 10.125 5.02109 9.80202 5.2921 9.48791L5.32438 9.45049ZM12 7.75C9.369 7.75 7.56642 9.14707 6.46048 10.4299C6.14652 10.7941 5.99368 10.9785 5.89533 11.1773C5.81198 11.3457 5.75001 11.566 5.75001 12C5.75001 12.434 5.81198 12.6543 5.89533 12.8227C5.99368 13.0215 6.14652 13.2059 6.46048 13.5701C7.56642 14.8529 9.369 16.25 12 16.25C14.631 16.25 16.4336 14.8529 17.5395 13.5701C17.8535 13.2059 18.0063 13.0215 18.1047 12.8227C18.188 12.6543 18.25 12.434 18.25 12C18.25 11.566 18.188 11.3457 18.1047 11.1773C18.0063 10.9785 17.8535 10.7941 17.5395 10.4299C16.4336 9.14707 14.631 7.75 12 7.75Z" fill="#000000"></path>
                                            </svg>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" target="_blank" class="d-flex align-items-center gap-3">
                                        <div class="ctl-att-doc-typ">
                                            <img src="{{asset('img/assets/icon-pdf.png')}}">
                                        </div>
                                        <div class="ctl-att-doc-txt">
                                            <p>6c5c48927975.jpg</p>
                                        </div>
                                        <div class="cmp-rev-svg-con">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="">
                                                <path d="M18.2892 2.88976C17.2615 2.75159 15.9068 2.75 14 2.75C13.5858 2.75 13.25 2.41421 13.25 2C13.25 1.58579 13.5858 1.25 14 1.25H14.0564C15.8942 1.24998 17.3498 1.24997 18.489 1.40314C19.6615 1.56076 20.6104 1.89288 21.3588 2.64124C22.0432 3.32568 22.417 3.97665 22.5924 4.98199C22.7501 5.88571 22.7501 7.1045 22.75 8.90369L22.75 9C22.75 9.41422 22.4142 9.75 22 9.75C21.5858 9.75 21.25 9.41422 21.25 9C21.25 7.08092 21.2471 5.9986 21.1147 5.23984C20.9973 4.56666 20.7852 4.18904 20.2981 3.7019C19.8749 3.27869 19.2952 3.02503 18.2892 2.88976Z" fill="#000000"></path>
                                                <path d="M2.75001 15C2.75001 14.5858 2.41422 14.25 2.00001 14.25C1.58579 14.25 1.25001 14.5858 1.25001 15L1.25 15.0963C1.24995 16.8955 1.24992 18.1143 1.40762 19.018C1.58304 20.0233 1.95681 20.6743 2.64125 21.3588C3.38961 22.1071 4.33856 22.4392 5.51098 22.5969C6.6502 22.75 8.10583 22.75 9.94359 22.75H10C10.4142 22.75 10.75 22.4142 10.75 22C10.75 21.5858 10.4142 21.25 10 21.25C8.09318 21.25 6.73852 21.2484 5.71085 21.1102C4.70476 20.975 4.12512 20.7213 3.70191 20.2981C3.21477 19.811 3.00275 19.4333 2.88529 18.7602C2.75289 18.0014 2.75001 16.9191 2.75001 15Z" fill="#000000"></path>
                                                <path d="M22.75 15C22.75 14.5858 22.4142 14.25 22 14.25C21.5858 14.25 21.25 14.5858 21.25 15C21.25 16.9191 21.2471 18.0014 21.1147 18.7602C20.9973 19.4333 20.7852 19.811 20.2981 20.2981C19.8749 20.7213 19.2952 20.975 18.2892 21.1102C17.2615 21.2484 15.9068 21.25 14 21.25C13.5858 21.25 13.25 21.5858 13.25 22C13.25 22.4142 13.5858 22.75 14 22.75H14.0564C15.8942 22.75 17.3498 22.75 18.489 22.5969C19.6615 22.4392 20.6104 22.1071 21.3588 21.3588C22.0432 20.6743 22.417 20.0233 22.5924 19.018C22.7501 18.1143 22.7501 16.8955 22.75 15.0963L22.75 15Z" fill="#000000"></path>
                                                <path d="M10 1.25H9.94359C8.10584 1.24998 6.65019 1.24997 5.51098 1.40314C4.33856 1.56076 3.38961 1.89288 2.64125 2.64124C1.95681 3.32568 1.58304 3.97665 1.40762 4.98199C1.24992 5.8857 1.24995 7.10448 1.25 8.90364L1.25001 9C1.25001 9.41422 1.58579 9.75 2.00001 9.75C2.41422 9.75 2.75001 9.41422 2.75001 9C2.75001 7.08092 2.75289 5.9986 2.88529 5.23984C3.00275 4.56666 3.21477 4.18904 3.70191 3.7019C4.12512 3.27869 4.70476 3.02503 5.71085 2.88976C6.73852 2.75159 8.09319 2.75 10 2.75C10.4142 2.75 10.75 2.41421 10.75 2C10.75 1.58579 10.4142 1.25 10 1.25Z" fill="#000000"></path>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M12 9.25C10.4812 9.25 9.25001 10.4812 9.25001 12C9.25001 13.5188 10.4812 14.75 12 14.75C13.5188 14.75 14.75 13.5188 14.75 12C14.75 10.4812 13.5188 9.25 12 9.25ZM10.75 12C10.75 11.3096 11.3096 10.75 12 10.75C12.6904 10.75 13.25 11.3096 13.25 12C13.25 12.6904 12.6904 13.25 12 13.25C11.3096 13.25 10.75 12.6904 10.75 12Z" fill="#000000"></path>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.32438 9.45049C6.59435 7.97738 8.77637 6.25 12 6.25C15.2236 6.25 17.4057 7.97738 18.6756 9.45049L18.7079 9.48791C18.9789 9.80202 19.2576 10.125 19.4491 10.5121C19.6632 10.9448 19.75 11.4094 19.75 12C19.75 12.5906 19.6632 13.0552 19.4491 13.4879C19.2576 13.875 18.9789 14.198 18.7079 14.5121L18.6756 14.5495C17.4057 16.0226 15.2236 17.75 12 17.75C8.77637 17.75 6.59435 16.0226 5.32438 14.5495L5.29211 14.5121C5.0211 14.198 4.7424 13.875 4.5509 13.4879C4.33676 13.0552 4.25001 12.5906 4.25001 12C4.25001 11.4094 4.33676 10.9448 4.5509 10.5121C4.74241 10.125 5.02109 9.80202 5.2921 9.48791L5.32438 9.45049ZM12 7.75C9.369 7.75 7.56642 9.14707 6.46048 10.4299C6.14652 10.7941 5.99368 10.9785 5.89533 11.1773C5.81198 11.3457 5.75001 11.566 5.75001 12C5.75001 12.434 5.81198 12.6543 5.89533 12.8227C5.99368 13.0215 6.14652 13.2059 6.46048 13.5701C7.56642 14.8529 9.369 16.25 12 16.25C14.631 16.25 16.4336 14.8529 17.5395 13.5701C17.8535 13.2059 18.0063 13.0215 18.1047 12.8227C18.188 12.6543 18.25 12.434 18.25 12C18.25 11.566 18.188 11.3457 18.1047 11.1773C18.0063 10.9785 17.8535 10.7941 17.5395 10.4299C16.4336 9.14707 14.631 7.75 12 7.75Z" fill="#000000"></path>
                                            </svg>
                                        </div>
                                    </a>
                                </li>
                                
                            </ul>
                            <!-- no attachment found -->
                            <div class="cmp-noresult-attachment mt-3">
                                <h5 class="fs-14 font-weight-400 fc-primary mb-0 text-center">No attachments found</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
         </div>
         <div class="modal-footer">
                <div class="cmp-sin-btn-tim d-flex justify-content-end gap-2">
                  <button type="button" class="btn ctl-btn-light w-auto" data-bs-dismiss="modal">Discard</button>
                  <button type="button" class="btn ctl-btn-gre w-auto" data-bs-dismiss="modal">Approve Leave</button>
                </div>
         </div>
      </div>
   </div>
</div>
<!-- employee-leave-deny popup -->
<div class="modal fade" id="employee-leave-deny" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-scrollable modal-lg modal-dialog-centered modal-dialog-bottom-center">
      <div class="modal-content cmp-mod-cus-tit cmp-mod-blo-cus">
         <div class="modal-header">
                <div class="d-flex gap-2 align-items-center">
                        <div class="flex-shrink-0 leave_profile"><div class="avatar-xs rounded-circle profile_img yellow emplopee-popup-icon-alphabet">EL</div></div>
                        <div class="lineHeightNormal">
                            <p class="fs-16 fc-primary font-weight-500 lineHeightNormal">ELena </p>
                            <span class="fs-12 fc-secondary font-weight-400 lineHeightNormal">elena@trackforceuser.com</span>
                        </div>
                    </div>
               <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body pb-0">
            <form>
                <div class="cmp-lea-view-bac">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-3">
                            <div class="cmp-com-inp-cus-blo cmp-vie-inp-dis">
                                <label class="ctl-lab-txt-frm">Reporting To</label>
                                <input type="text" value="Team Leader" disabled>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-3">
                            <div class="cmp-com-inp-cus-blo cmp-vie-inp-dis">
                                <label class="ctl-lab-txt-frm">Leave Type</label>
                                <input type="text"  value="Sick Leave" disabled>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cmp-lea-view-bac">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 mb-3">
                            <div class="cmp-com-inp-cus-blo cmp-vie-inp-dis">
                                <label class="ctl-lab-txt-frm">Date Range</label>
                                <input type="text" value="27/03/2025-28/03/2025" disabled>
                            </div>
                        </div>
                        
                        <div class="col-sm-12 col-md-12 col-lg-3 col-xl-3 col-xxl-3 mb-3">
                            <div class="cmp-com-inp-cus-blo cmp-vie-inp-dis">
                                <label class="ctl-lab-txt-frm">Leave Duration</label>
                                <input type="text"  value="1.5" disabled>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-3 col-xl-3 col-xxl-3 mb-3">
                            <div class="cmp-com-inp-cus-blo">
                                <label class="ctl-lab-txt-frm">Status</label>
                                <span class="ctl-sta-lea-txt ctl-sta-mot-pop">
                                    <span>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
                                            <circle cx="4" cy="4" r="3" fill="#17B26A"></circle>
                                        </svg>
                                    </span>
                                    Approved
                                </span>
                                <span class="ctl-sta-lea-txt ctl-sta-mot-pop d-none">
                                    <span>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
                                            <circle cx="4" cy="4" r="3" fill="#212121"></circle>
                                        </svg>
                                    </span>
                                    Pending
                                </span>
                                <span class="ctl-sta-lea-txt ctl-sta-mot-pop d-none">
                                    <span>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
                                            <circle cx="4" cy="4" r="3" fill="#f74850"></circle>
                                        </svg>
                                    </span>
                                    Rejected
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cmp-lea-view-bac">
                    <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-12 col-lg-12 col-xl-12 col-xxl-12">
                                    <label class="ctl-lab-txt-frm">Leave Details</label>
                                </div>
                            </div>
                            <ul class="cmp-lev-det-uol list-unstyled ps-0 mb-0">
                                <li>
                                    <div class="row">
                                        <div class="col-sm-12 col-md-12 col-lg-3 col-xl-3 col-xxl-3">
                                            <div class="ctl-lev-det-txt-blo">
                                                <h4>27/03/2025</h4>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-md-12 col-lg-7 col-xl-7 col-xxl-7">                           
                                            <div class="row">
                                                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                                                    <div class="cmp-com-inp-cus-blo cmp-vie-inp-dis">
                                                        <input type="text"  value="Half Day" disabled>
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 mt-3 mt-lg-0">
                                                    <div class="cmp-com-inp-cus-blo cmp-vie-inp-dis">
                                                        <input type="text"  value="Afternoon" disabled>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="row">
                                        <div class="col-sm-12 col-md-12 col-lg-3 col-xl-3 col-xxl-3">
                                            <div class="ctl-lev-det-txt-blo">
                                               <h4>28/03/2025</h4>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-md-12 col-lg-7 col-xl-7 col-xxl-7">                           
                                            <div class="row">
                                                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                                                    <div class="cmp-com-inp-cus-blo cmp-vie-inp-dis">
                                                        <input type="text"  value="Full Day" disabled>
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 mt-3 mt-lg-0">
                                                    <div class="cmp-com-inp-cus-blo cmp-vie-inp-dis">
                                                        <input type="text"  value="-" disabled>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>       
                        </div>
                    </div>
                </div>
                <div class="cmp-lea-view-bac">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                            <label for="report_to" class="ctl-lab-txt-frm">Inform To</label>
                            <div class="ctl-pos-rel-ico">
                                <div class="select-checkbox multiSelCheckBoxSubGroup mb-0">
                                    <div class="input-field multiple-select-custom ctl-mul-sel-pol">
                                        <select class="form-select select-multiple" multiple name="report_to">
                                            <option value="Fumio">Fumio</option>
                                            <option value="Alice">Alice</option>
                                            <option value="Marcello">Marcello</option>
                                            <option value="Brayden">Brayden</option>
                                            <option value="Fumio">Fumio</option>
                                            <option value="Alice">Alice</option>
                                            <option value="Marcello">Marcello</option>
                                            <option value="Brayden">Brayden</option>
                                            <option value="Fumio">Fumio</option>
                                            <option value="Alice">Alice</option>
                                            <option value="Marcello">Marcello</option>
                                            <option value="Brayden">Brayden</option>
                                        </select>
                                        <span class="ctl-ico-lft">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
                                                <path d="M7.57501 7.98828C7.53126 7.98203 7.47501 7.98203 7.42501 7.98828C6.32501 7.95078 5.45001 7.05078 5.45001 5.94453C5.45001 4.81328 6.36251 3.89453 7.50001 3.89453C8.63126 3.89453 9.55001 4.81328 9.55001 5.94453C9.54376 7.05078 8.67501 7.95078 7.57501 7.98828Z" stroke="#868C98" stroke-linecap="round" stroke-linejoin="round"></path>
                                                <path d="M11.7125 12.1121C10.6 13.1309 9.12501 13.7496 7.50001 13.7496C5.87501 13.7496 4.40001 13.1309 3.28751 12.1121C3.35001 11.5246 3.72501 10.9496 4.39376 10.4996C6.10626 9.36211 8.90625 9.36211 10.6063 10.4996C11.275 10.9496 11.65 11.5246 11.7125 12.1121Z" stroke="#868C98" stroke-linecap="round" stroke-linejoin="round"></path>
                                                <path d="M7.5 13.75C10.9518 13.75 13.75 10.9518 13.75 7.5C13.75 4.04822 10.9518 1.25 7.5 1.25C4.04822 1.25 1.25 4.04822 1.25 7.5C1.25 10.9518 4.04822 13.75 7.5 13.75Z" stroke="#868C98" stroke-linecap="round" stroke-linejoin="round"></path>
                                            </svg>
                                        </span>
                                    </div>
                                </div> 
                            </div>
                        </div>
                    </div>
                </div>


                <div class="cmp-lea-view-bac">
                    <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-tex-are-cus cmp-res-aut-txt cmp-vie-inp-dis">
                                <label class="ctl-lab-txt-frm">Reason for Leave</label>
                                <textarea class="form-control ctl-min-tex-hei ctl-tex-are-scr" rows="3" disabled>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</textarea>
                            </div>
                        </div>
                        
                    </div>
                </div>
                <div class="cmp-lea-view-bac">
                    <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-tex-are-cus cmp-res-aut-txt cmp-vie-inp-dis">
                                <label class="ctl-lab-txt-frm">Comments</label>
                                <textarea class="form-control ctl-min-tex-hei ctl-tex-are-scr" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                            <div class="cmp-com-inp-cus-blo">
                                <label class="ctl-lab-txt-frm">Supporting Documents</label>
                            </div>
                            <ul class="cmp-doc-vie-blo list-unstyled mb-0">
                                <li>
                                    <a href="javascript:void(0)" target="_blank" class="d-flex align-items-center gap-3">
                                        <div class="ctl-att-doc-typ">
                                            <img src="{{asset('img/assets/icon-jpg.png')}}">
                                        </div>
                                        <div class="ctl-att-doc-txt">
                                            <p>6c5c48927975.jpg</p>
                                        </div>
                                        <div class="cmp-rev-svg-con">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="">
                                                <path d="M18.2892 2.88976C17.2615 2.75159 15.9068 2.75 14 2.75C13.5858 2.75 13.25 2.41421 13.25 2C13.25 1.58579 13.5858 1.25 14 1.25H14.0564C15.8942 1.24998 17.3498 1.24997 18.489 1.40314C19.6615 1.56076 20.6104 1.89288 21.3588 2.64124C22.0432 3.32568 22.417 3.97665 22.5924 4.98199C22.7501 5.88571 22.7501 7.1045 22.75 8.90369L22.75 9C22.75 9.41422 22.4142 9.75 22 9.75C21.5858 9.75 21.25 9.41422 21.25 9C21.25 7.08092 21.2471 5.9986 21.1147 5.23984C20.9973 4.56666 20.7852 4.18904 20.2981 3.7019C19.8749 3.27869 19.2952 3.02503 18.2892 2.88976Z" fill="#000000"></path>
                                                <path d="M2.75001 15C2.75001 14.5858 2.41422 14.25 2.00001 14.25C1.58579 14.25 1.25001 14.5858 1.25001 15L1.25 15.0963C1.24995 16.8955 1.24992 18.1143 1.40762 19.018C1.58304 20.0233 1.95681 20.6743 2.64125 21.3588C3.38961 22.1071 4.33856 22.4392 5.51098 22.5969C6.6502 22.75 8.10583 22.75 9.94359 22.75H10C10.4142 22.75 10.75 22.4142 10.75 22C10.75 21.5858 10.4142 21.25 10 21.25C8.09318 21.25 6.73852 21.2484 5.71085 21.1102C4.70476 20.975 4.12512 20.7213 3.70191 20.2981C3.21477 19.811 3.00275 19.4333 2.88529 18.7602C2.75289 18.0014 2.75001 16.9191 2.75001 15Z" fill="#000000"></path>
                                                <path d="M22.75 15C22.75 14.5858 22.4142 14.25 22 14.25C21.5858 14.25 21.25 14.5858 21.25 15C21.25 16.9191 21.2471 18.0014 21.1147 18.7602C20.9973 19.4333 20.7852 19.811 20.2981 20.2981C19.8749 20.7213 19.2952 20.975 18.2892 21.1102C17.2615 21.2484 15.9068 21.25 14 21.25C13.5858 21.25 13.25 21.5858 13.25 22C13.25 22.4142 13.5858 22.75 14 22.75H14.0564C15.8942 22.75 17.3498 22.75 18.489 22.5969C19.6615 22.4392 20.6104 22.1071 21.3588 21.3588C22.0432 20.6743 22.417 20.0233 22.5924 19.018C22.7501 18.1143 22.7501 16.8955 22.75 15.0963L22.75 15Z" fill="#000000"></path>
                                                <path d="M10 1.25H9.94359C8.10584 1.24998 6.65019 1.24997 5.51098 1.40314C4.33856 1.56076 3.38961 1.89288 2.64125 2.64124C1.95681 3.32568 1.58304 3.97665 1.40762 4.98199C1.24992 5.8857 1.24995 7.10448 1.25 8.90364L1.25001 9C1.25001 9.41422 1.58579 9.75 2.00001 9.75C2.41422 9.75 2.75001 9.41422 2.75001 9C2.75001 7.08092 2.75289 5.9986 2.88529 5.23984C3.00275 4.56666 3.21477 4.18904 3.70191 3.7019C4.12512 3.27869 4.70476 3.02503 5.71085 2.88976C6.73852 2.75159 8.09319 2.75 10 2.75C10.4142 2.75 10.75 2.41421 10.75 2C10.75 1.58579 10.4142 1.25 10 1.25Z" fill="#000000"></path>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M12 9.25C10.4812 9.25 9.25001 10.4812 9.25001 12C9.25001 13.5188 10.4812 14.75 12 14.75C13.5188 14.75 14.75 13.5188 14.75 12C14.75 10.4812 13.5188 9.25 12 9.25ZM10.75 12C10.75 11.3096 11.3096 10.75 12 10.75C12.6904 10.75 13.25 11.3096 13.25 12C13.25 12.6904 12.6904 13.25 12 13.25C11.3096 13.25 10.75 12.6904 10.75 12Z" fill="#000000"></path>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.32438 9.45049C6.59435 7.97738 8.77637 6.25 12 6.25C15.2236 6.25 17.4057 7.97738 18.6756 9.45049L18.7079 9.48791C18.9789 9.80202 19.2576 10.125 19.4491 10.5121C19.6632 10.9448 19.75 11.4094 19.75 12C19.75 12.5906 19.6632 13.0552 19.4491 13.4879C19.2576 13.875 18.9789 14.198 18.7079 14.5121L18.6756 14.5495C17.4057 16.0226 15.2236 17.75 12 17.75C8.77637 17.75 6.59435 16.0226 5.32438 14.5495L5.29211 14.5121C5.0211 14.198 4.7424 13.875 4.5509 13.4879C4.33676 13.0552 4.25001 12.5906 4.25001 12C4.25001 11.4094 4.33676 10.9448 4.5509 10.5121C4.74241 10.125 5.02109 9.80202 5.2921 9.48791L5.32438 9.45049ZM12 7.75C9.369 7.75 7.56642 9.14707 6.46048 10.4299C6.14652 10.7941 5.99368 10.9785 5.89533 11.1773C5.81198 11.3457 5.75001 11.566 5.75001 12C5.75001 12.434 5.81198 12.6543 5.89533 12.8227C5.99368 13.0215 6.14652 13.2059 6.46048 13.5701C7.56642 14.8529 9.369 16.25 12 16.25C14.631 16.25 16.4336 14.8529 17.5395 13.5701C17.8535 13.2059 18.0063 13.0215 18.1047 12.8227C18.188 12.6543 18.25 12.434 18.25 12C18.25 11.566 18.188 11.3457 18.1047 11.1773C18.0063 10.9785 17.8535 10.7941 17.5395 10.4299C16.4336 9.14707 14.631 7.75 12 7.75Z" fill="#000000"></path>
                                            </svg>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" target="_blank" class="d-flex align-items-center gap-3">
                                        <div class="ctl-att-doc-typ">
                                            <img src="{{asset('img/assets/icon-pdf.png')}}">
                                        </div>
                                        <div class="ctl-att-doc-txt">
                                            <p>6c5c48927975.jpg</p>
                                        </div>
                                        <div class="cmp-rev-svg-con">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="">
                                                <path d="M18.2892 2.88976C17.2615 2.75159 15.9068 2.75 14 2.75C13.5858 2.75 13.25 2.41421 13.25 2C13.25 1.58579 13.5858 1.25 14 1.25H14.0564C15.8942 1.24998 17.3498 1.24997 18.489 1.40314C19.6615 1.56076 20.6104 1.89288 21.3588 2.64124C22.0432 3.32568 22.417 3.97665 22.5924 4.98199C22.7501 5.88571 22.7501 7.1045 22.75 8.90369L22.75 9C22.75 9.41422 22.4142 9.75 22 9.75C21.5858 9.75 21.25 9.41422 21.25 9C21.25 7.08092 21.2471 5.9986 21.1147 5.23984C20.9973 4.56666 20.7852 4.18904 20.2981 3.7019C19.8749 3.27869 19.2952 3.02503 18.2892 2.88976Z" fill="#000000"></path>
                                                <path d="M2.75001 15C2.75001 14.5858 2.41422 14.25 2.00001 14.25C1.58579 14.25 1.25001 14.5858 1.25001 15L1.25 15.0963C1.24995 16.8955 1.24992 18.1143 1.40762 19.018C1.58304 20.0233 1.95681 20.6743 2.64125 21.3588C3.38961 22.1071 4.33856 22.4392 5.51098 22.5969C6.6502 22.75 8.10583 22.75 9.94359 22.75H10C10.4142 22.75 10.75 22.4142 10.75 22C10.75 21.5858 10.4142 21.25 10 21.25C8.09318 21.25 6.73852 21.2484 5.71085 21.1102C4.70476 20.975 4.12512 20.7213 3.70191 20.2981C3.21477 19.811 3.00275 19.4333 2.88529 18.7602C2.75289 18.0014 2.75001 16.9191 2.75001 15Z" fill="#000000"></path>
                                                <path d="M22.75 15C22.75 14.5858 22.4142 14.25 22 14.25C21.5858 14.25 21.25 14.5858 21.25 15C21.25 16.9191 21.2471 18.0014 21.1147 18.7602C20.9973 19.4333 20.7852 19.811 20.2981 20.2981C19.8749 20.7213 19.2952 20.975 18.2892 21.1102C17.2615 21.2484 15.9068 21.25 14 21.25C13.5858 21.25 13.25 21.5858 13.25 22C13.25 22.4142 13.5858 22.75 14 22.75H14.0564C15.8942 22.75 17.3498 22.75 18.489 22.5969C19.6615 22.4392 20.6104 22.1071 21.3588 21.3588C22.0432 20.6743 22.417 20.0233 22.5924 19.018C22.7501 18.1143 22.7501 16.8955 22.75 15.0963L22.75 15Z" fill="#000000"></path>
                                                <path d="M10 1.25H9.94359C8.10584 1.24998 6.65019 1.24997 5.51098 1.40314C4.33856 1.56076 3.38961 1.89288 2.64125 2.64124C1.95681 3.32568 1.58304 3.97665 1.40762 4.98199C1.24992 5.8857 1.24995 7.10448 1.25 8.90364L1.25001 9C1.25001 9.41422 1.58579 9.75 2.00001 9.75C2.41422 9.75 2.75001 9.41422 2.75001 9C2.75001 7.08092 2.75289 5.9986 2.88529 5.23984C3.00275 4.56666 3.21477 4.18904 3.70191 3.7019C4.12512 3.27869 4.70476 3.02503 5.71085 2.88976C6.73852 2.75159 8.09319 2.75 10 2.75C10.4142 2.75 10.75 2.41421 10.75 2C10.75 1.58579 10.4142 1.25 10 1.25Z" fill="#000000"></path>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M12 9.25C10.4812 9.25 9.25001 10.4812 9.25001 12C9.25001 13.5188 10.4812 14.75 12 14.75C13.5188 14.75 14.75 13.5188 14.75 12C14.75 10.4812 13.5188 9.25 12 9.25ZM10.75 12C10.75 11.3096 11.3096 10.75 12 10.75C12.6904 10.75 13.25 11.3096 13.25 12C13.25 12.6904 12.6904 13.25 12 13.25C11.3096 13.25 10.75 12.6904 10.75 12Z" fill="#000000"></path>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.32438 9.45049C6.59435 7.97738 8.77637 6.25 12 6.25C15.2236 6.25 17.4057 7.97738 18.6756 9.45049L18.7079 9.48791C18.9789 9.80202 19.2576 10.125 19.4491 10.5121C19.6632 10.9448 19.75 11.4094 19.75 12C19.75 12.5906 19.6632 13.0552 19.4491 13.4879C19.2576 13.875 18.9789 14.198 18.7079 14.5121L18.6756 14.5495C17.4057 16.0226 15.2236 17.75 12 17.75C8.77637 17.75 6.59435 16.0226 5.32438 14.5495L5.29211 14.5121C5.0211 14.198 4.7424 13.875 4.5509 13.4879C4.33676 13.0552 4.25001 12.5906 4.25001 12C4.25001 11.4094 4.33676 10.9448 4.5509 10.5121C4.74241 10.125 5.02109 9.80202 5.2921 9.48791L5.32438 9.45049ZM12 7.75C9.369 7.75 7.56642 9.14707 6.46048 10.4299C6.14652 10.7941 5.99368 10.9785 5.89533 11.1773C5.81198 11.3457 5.75001 11.566 5.75001 12C5.75001 12.434 5.81198 12.6543 5.89533 12.8227C5.99368 13.0215 6.14652 13.2059 6.46048 13.5701C7.56642 14.8529 9.369 16.25 12 16.25C14.631 16.25 16.4336 14.8529 17.5395 13.5701C17.8535 13.2059 18.0063 13.0215 18.1047 12.8227C18.188 12.6543 18.25 12.434 18.25 12C18.25 11.566 18.188 11.3457 18.1047 11.1773C18.0063 10.9785 17.8535 10.7941 17.5395 10.4299C16.4336 9.14707 14.631 7.75 12 7.75Z" fill="#000000"></path>
                                            </svg>
                                        </div>
                                    </a>
                                </li>
                                
                            </ul>
                            <!-- no attachment found -->
                            <div class="cmp-noresult-attachment mt-3">
                                <h5 class="fs-14 font-weight-400 fc-primary mb-0 text-center">No attachments found</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
         </div>
         <div class="modal-footer">
                <div class="cmp-sin-btn-tim d-flex justify-content-end gap-2">
                  <button type="button" class="btn ctl-btn-light w-auto" data-bs-dismiss="modal">Discard</button>
                  <button type="button" class="btn ctl-btn-red w-auto" data-bs-dismiss="modal">Reject Leave</button>
                </div>
         </div>
      </div>
   </div>
</div>

<!-- employee-leave-history-view popup -->
<div class="modal fade" id="employee-leave-history-view" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-scrollable modal-lg modal-dialog-centered modal-dialog-bottom-center">
      <div class="modal-content cmp-mod-cus-tit cmp-mod-blo-cus">
         <div class="modal-header">
                <div class="d-flex gap-2 align-items-center">
                        <div class="flex-shrink-0 leave_profile"><div class="avatar-xs rounded-circle profile_img yellow emplopee-popup-icon-alphabet">NG</div></div>
                        <div class="lineHeightNormal">
                            <p class="fs-16 fc-primary font-weight-500 lineHeightNormal">EL </p>
                            <span class="fs-12 fc-secondary font-weight-400 lineHeightNormal">elena@trackforceuser.com</span>
                        </div>
                    </div>
               <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body pb-0">
            <form>
                <div class="cmp-lea-view-bac">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-3">
                            <div class="cmp-com-inp-cus-blo cmp-vie-inp-dis">
                                <label class="ctl-lab-txt-frm">Reporting To</label>
                                <input type="text" value="Team Leader" disabled>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-3">
                            <div class="cmp-com-inp-cus-blo cmp-vie-inp-dis">
                                <label class="ctl-lab-txt-frm">Leave Type</label>
                                <input type="text"  value="Sick Leave" disabled>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cmp-lea-view-bac">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 mb-3">
                            <div class="cmp-com-inp-cus-blo cmp-vie-inp-dis">
                                <label class="ctl-lab-txt-frm">Date Range</label>
                                <input type="text" value="27/03/2025-28/03/2025" disabled>
                            </div>
                        </div>
                        
                        <div class="col-sm-12 col-md-12 col-lg-3 col-xl-3 col-xxl-3 mb-3">
                            <div class="cmp-com-inp-cus-blo cmp-vie-inp-dis">
                                <label class="ctl-lab-txt-frm">Leave Duration</label>
                                <input type="text"  value="1.5" disabled>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-3 col-xl-3 col-xxl-3 mb-3">
                            <div class="cmp-com-inp-cus-blo">
                                <label class="ctl-lab-txt-frm">Status</label>
                                <span class="ctl-sta-lea-txt ctl-sta-mot-pop">
                                    <span>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
                                            <circle cx="4" cy="4" r="3" fill="#17B26A"></circle>
                                        </svg>
                                    </span>
                                    Approved
                                </span>
                                <span class="ctl-sta-lea-txt ctl-sta-mot-pop d-none">
                                    <span>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
                                            <circle cx="4" cy="4" r="3" fill="#212121"></circle>
                                        </svg>
                                    </span>
                                    Pending
                                </span>
                                <span class="ctl-sta-lea-txt ctl-sta-mot-pop d-none">
                                    <span>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
                                            <circle cx="4" cy="4" r="3" fill="#f74850"></circle>
                                        </svg>
                                    </span>
                                    Rejected
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cmp-lea-view-bac">
                    <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-12 col-lg-12 col-xl-12 col-xxl-12">
                                    <label class="ctl-lab-txt-frm">Leave Details</label>
                                </div>
                            </div>
                            <ul class="cmp-lev-det-uol list-unstyled ps-0 mb-0">
                                <li>
                                    <div class="row">
                                        <div class="col-sm-12 col-md-12 col-lg-3 col-xl-3 col-xxl-3">
                                            <div class="ctl-lev-det-txt-blo">
                                                <h4>27/03/2025</h4>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-md-12 col-lg-7 col-xl-7 col-xxl-7">                           
                                            <div class="row">
                                                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                                                    <div class="cmp-com-inp-cus-blo cmp-vie-inp-dis">
                                                        <input type="text"  value="Half Day" disabled>
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 mt-3 mt-lg-0">
                                                    <div class="cmp-com-inp-cus-blo cmp-vie-inp-dis">
                                                        <input type="text"  value="Afternoon" disabled>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="row">
                                        <div class="col-sm-12 col-md-12 col-lg-3 col-xl-3 col-xxl-3">
                                            <div class="ctl-lev-det-txt-blo">
                                               <h4>28/03/2025</h4>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-md-12 col-lg-7 col-xl-7 col-xxl-7">                           
                                            <div class="row">
                                                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                                                    <div class="cmp-com-inp-cus-blo cmp-vie-inp-dis">
                                                        <input type="text"  value="Full Day" disabled>
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 mt-3 mt-lg-0">
                                                    <div class="cmp-com-inp-cus-blo cmp-vie-inp-dis">
                                                        <input type="text"  value="-" disabled>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>       
                        </div>
                    </div>
                </div>
                <div class="cmp-lea-view-bac">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-3">
                            <div class="cmp-com-inp-cus-blo cmp-vie-inp-dis">
                                <label class="ctl-lab-txt-frm">Status Changed Date</label>
                                <input type="text" value="09/19/2024" disabled>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-3">
                            <div class="cmp-com-inp-cus-blo cmp-vie-inp-dis">
                                <label class="ctl-lab-txt-frm">Status Changed By</label>
                                <input type="text"  value="Elena" disabled>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cmp-lea-view-bac">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                            <label for="report_to" class="ctl-lab-txt-frm">Inform To</label>
                            <div class="ctl-pos-rel-ico">
                                <div class="select-checkbox multiSelCheckBoxSubGroup mb-0">
                                    <div class="input-field multiple-select-custom ctl-mul-sel-pol">
                                        <select class="form-select select-multiple" multiple name="report_to">
                                            <option value="Fumio">Fumio</option>
                                            <option value="Alice">Alice</option>
                                            <option value="Marcello">Marcello</option>
                                            <option value="Brayden">Brayden</option>
                                            <option value="Fumio">Fumio</option>
                                            <option value="Alice">Alice</option>
                                            <option value="Marcello">Marcello</option>
                                            <option value="Brayden">Brayden</option>
                                            <option value="Fumio">Fumio</option>
                                            <option value="Alice">Alice</option>
                                            <option value="Marcello">Marcello</option>
                                            <option value="Brayden">Brayden</option>
                                        </select>
                                        <span class="ctl-ico-lft">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
                                                <path d="M7.57501 7.98828C7.53126 7.98203 7.47501 7.98203 7.42501 7.98828C6.32501 7.95078 5.45001 7.05078 5.45001 5.94453C5.45001 4.81328 6.36251 3.89453 7.50001 3.89453C8.63126 3.89453 9.55001 4.81328 9.55001 5.94453C9.54376 7.05078 8.67501 7.95078 7.57501 7.98828Z" stroke="#868C98" stroke-linecap="round" stroke-linejoin="round"></path>
                                                <path d="M11.7125 12.1121C10.6 13.1309 9.12501 13.7496 7.50001 13.7496C5.87501 13.7496 4.40001 13.1309 3.28751 12.1121C3.35001 11.5246 3.72501 10.9496 4.39376 10.4996C6.10626 9.36211 8.90625 9.36211 10.6063 10.4996C11.275 10.9496 11.65 11.5246 11.7125 12.1121Z" stroke="#868C98" stroke-linecap="round" stroke-linejoin="round"></path>
                                                <path d="M7.5 13.75C10.9518 13.75 13.75 10.9518 13.75 7.5C13.75 4.04822 10.9518 1.25 7.5 1.25C4.04822 1.25 1.25 4.04822 1.25 7.5C1.25 10.9518 4.04822 13.75 7.5 13.75Z" stroke="#868C98" stroke-linecap="round" stroke-linejoin="round"></path>
                                            </svg>
                                        </span>
                                    </div>
                                </div> 
                            </div>
                        </div>
                    </div>
                </div>


                <div class="cmp-lea-view-bac">
                    <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-tex-are-cus cmp-res-aut-txt cmp-vie-inp-dis">
                                <label class="ctl-lab-txt-frm">Reason for Leave</label>
                                <textarea class="form-control ctl-min-tex-hei ctl-tex-are-scr" rows="3" disabled>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</textarea>
                            </div>
                        </div>
                        
                    </div>
                </div>
                <div class="cmp-lea-view-bac">
                    <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-tex-are-cus cmp-res-aut-txt cmp-vie-inp-dis">
                                <label class="ctl-lab-txt-frm">Comments</label>
                                <textarea class="form-control ctl-min-tex-hei ctl-tex-are-scr" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                            <div class="cmp-com-inp-cus-blo">
                                <label class="ctl-lab-txt-frm">Supporting Documents</label>
                            </div>
                            <ul class="cmp-doc-vie-blo list-unstyled mb-0">
                                <li>
                                    <a href="javascript:void(0)" target="_blank" class="d-flex align-items-center gap-3">
                                        <div class="ctl-att-doc-typ">
                                            <img src="{{asset('img/assets/icon-jpg.png')}}">
                                        </div>
                                        <div class="ctl-att-doc-txt">
                                            <p>6c5c48927975.jpg</p>
                                        </div>
                                        <div class="cmp-rev-svg-con">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="">
                                                <path d="M18.2892 2.88976C17.2615 2.75159 15.9068 2.75 14 2.75C13.5858 2.75 13.25 2.41421 13.25 2C13.25 1.58579 13.5858 1.25 14 1.25H14.0564C15.8942 1.24998 17.3498 1.24997 18.489 1.40314C19.6615 1.56076 20.6104 1.89288 21.3588 2.64124C22.0432 3.32568 22.417 3.97665 22.5924 4.98199C22.7501 5.88571 22.7501 7.1045 22.75 8.90369L22.75 9C22.75 9.41422 22.4142 9.75 22 9.75C21.5858 9.75 21.25 9.41422 21.25 9C21.25 7.08092 21.2471 5.9986 21.1147 5.23984C20.9973 4.56666 20.7852 4.18904 20.2981 3.7019C19.8749 3.27869 19.2952 3.02503 18.2892 2.88976Z" fill="#000000"></path>
                                                <path d="M2.75001 15C2.75001 14.5858 2.41422 14.25 2.00001 14.25C1.58579 14.25 1.25001 14.5858 1.25001 15L1.25 15.0963C1.24995 16.8955 1.24992 18.1143 1.40762 19.018C1.58304 20.0233 1.95681 20.6743 2.64125 21.3588C3.38961 22.1071 4.33856 22.4392 5.51098 22.5969C6.6502 22.75 8.10583 22.75 9.94359 22.75H10C10.4142 22.75 10.75 22.4142 10.75 22C10.75 21.5858 10.4142 21.25 10 21.25C8.09318 21.25 6.73852 21.2484 5.71085 21.1102C4.70476 20.975 4.12512 20.7213 3.70191 20.2981C3.21477 19.811 3.00275 19.4333 2.88529 18.7602C2.75289 18.0014 2.75001 16.9191 2.75001 15Z" fill="#000000"></path>
                                                <path d="M22.75 15C22.75 14.5858 22.4142 14.25 22 14.25C21.5858 14.25 21.25 14.5858 21.25 15C21.25 16.9191 21.2471 18.0014 21.1147 18.7602C20.9973 19.4333 20.7852 19.811 20.2981 20.2981C19.8749 20.7213 19.2952 20.975 18.2892 21.1102C17.2615 21.2484 15.9068 21.25 14 21.25C13.5858 21.25 13.25 21.5858 13.25 22C13.25 22.4142 13.5858 22.75 14 22.75H14.0564C15.8942 22.75 17.3498 22.75 18.489 22.5969C19.6615 22.4392 20.6104 22.1071 21.3588 21.3588C22.0432 20.6743 22.417 20.0233 22.5924 19.018C22.7501 18.1143 22.7501 16.8955 22.75 15.0963L22.75 15Z" fill="#000000"></path>
                                                <path d="M10 1.25H9.94359C8.10584 1.24998 6.65019 1.24997 5.51098 1.40314C4.33856 1.56076 3.38961 1.89288 2.64125 2.64124C1.95681 3.32568 1.58304 3.97665 1.40762 4.98199C1.24992 5.8857 1.24995 7.10448 1.25 8.90364L1.25001 9C1.25001 9.41422 1.58579 9.75 2.00001 9.75C2.41422 9.75 2.75001 9.41422 2.75001 9C2.75001 7.08092 2.75289 5.9986 2.88529 5.23984C3.00275 4.56666 3.21477 4.18904 3.70191 3.7019C4.12512 3.27869 4.70476 3.02503 5.71085 2.88976C6.73852 2.75159 8.09319 2.75 10 2.75C10.4142 2.75 10.75 2.41421 10.75 2C10.75 1.58579 10.4142 1.25 10 1.25Z" fill="#000000"></path>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M12 9.25C10.4812 9.25 9.25001 10.4812 9.25001 12C9.25001 13.5188 10.4812 14.75 12 14.75C13.5188 14.75 14.75 13.5188 14.75 12C14.75 10.4812 13.5188 9.25 12 9.25ZM10.75 12C10.75 11.3096 11.3096 10.75 12 10.75C12.6904 10.75 13.25 11.3096 13.25 12C13.25 12.6904 12.6904 13.25 12 13.25C11.3096 13.25 10.75 12.6904 10.75 12Z" fill="#000000"></path>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.32438 9.45049C6.59435 7.97738 8.77637 6.25 12 6.25C15.2236 6.25 17.4057 7.97738 18.6756 9.45049L18.7079 9.48791C18.9789 9.80202 19.2576 10.125 19.4491 10.5121C19.6632 10.9448 19.75 11.4094 19.75 12C19.75 12.5906 19.6632 13.0552 19.4491 13.4879C19.2576 13.875 18.9789 14.198 18.7079 14.5121L18.6756 14.5495C17.4057 16.0226 15.2236 17.75 12 17.75C8.77637 17.75 6.59435 16.0226 5.32438 14.5495L5.29211 14.5121C5.0211 14.198 4.7424 13.875 4.5509 13.4879C4.33676 13.0552 4.25001 12.5906 4.25001 12C4.25001 11.4094 4.33676 10.9448 4.5509 10.5121C4.74241 10.125 5.02109 9.80202 5.2921 9.48791L5.32438 9.45049ZM12 7.75C9.369 7.75 7.56642 9.14707 6.46048 10.4299C6.14652 10.7941 5.99368 10.9785 5.89533 11.1773C5.81198 11.3457 5.75001 11.566 5.75001 12C5.75001 12.434 5.81198 12.6543 5.89533 12.8227C5.99368 13.0215 6.14652 13.2059 6.46048 13.5701C7.56642 14.8529 9.369 16.25 12 16.25C14.631 16.25 16.4336 14.8529 17.5395 13.5701C17.8535 13.2059 18.0063 13.0215 18.1047 12.8227C18.188 12.6543 18.25 12.434 18.25 12C18.25 11.566 18.188 11.3457 18.1047 11.1773C18.0063 10.9785 17.8535 10.7941 17.5395 10.4299C16.4336 9.14707 14.631 7.75 12 7.75Z" fill="#000000"></path>
                                            </svg>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" target="_blank" class="d-flex align-items-center gap-3">
                                        <div class="ctl-att-doc-typ">
                                            <img src="{{asset('img/assets/icon-pdf.png')}}">
                                        </div>
                                        <div class="ctl-att-doc-txt">
                                            <p>6c5c48927975.jpg</p>
                                        </div>
                                        <div class="cmp-rev-svg-con">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="">
                                                <path d="M18.2892 2.88976C17.2615 2.75159 15.9068 2.75 14 2.75C13.5858 2.75 13.25 2.41421 13.25 2C13.25 1.58579 13.5858 1.25 14 1.25H14.0564C15.8942 1.24998 17.3498 1.24997 18.489 1.40314C19.6615 1.56076 20.6104 1.89288 21.3588 2.64124C22.0432 3.32568 22.417 3.97665 22.5924 4.98199C22.7501 5.88571 22.7501 7.1045 22.75 8.90369L22.75 9C22.75 9.41422 22.4142 9.75 22 9.75C21.5858 9.75 21.25 9.41422 21.25 9C21.25 7.08092 21.2471 5.9986 21.1147 5.23984C20.9973 4.56666 20.7852 4.18904 20.2981 3.7019C19.8749 3.27869 19.2952 3.02503 18.2892 2.88976Z" fill="#000000"></path>
                                                <path d="M2.75001 15C2.75001 14.5858 2.41422 14.25 2.00001 14.25C1.58579 14.25 1.25001 14.5858 1.25001 15L1.25 15.0963C1.24995 16.8955 1.24992 18.1143 1.40762 19.018C1.58304 20.0233 1.95681 20.6743 2.64125 21.3588C3.38961 22.1071 4.33856 22.4392 5.51098 22.5969C6.6502 22.75 8.10583 22.75 9.94359 22.75H10C10.4142 22.75 10.75 22.4142 10.75 22C10.75 21.5858 10.4142 21.25 10 21.25C8.09318 21.25 6.73852 21.2484 5.71085 21.1102C4.70476 20.975 4.12512 20.7213 3.70191 20.2981C3.21477 19.811 3.00275 19.4333 2.88529 18.7602C2.75289 18.0014 2.75001 16.9191 2.75001 15Z" fill="#000000"></path>
                                                <path d="M22.75 15C22.75 14.5858 22.4142 14.25 22 14.25C21.5858 14.25 21.25 14.5858 21.25 15C21.25 16.9191 21.2471 18.0014 21.1147 18.7602C20.9973 19.4333 20.7852 19.811 20.2981 20.2981C19.8749 20.7213 19.2952 20.975 18.2892 21.1102C17.2615 21.2484 15.9068 21.25 14 21.25C13.5858 21.25 13.25 21.5858 13.25 22C13.25 22.4142 13.5858 22.75 14 22.75H14.0564C15.8942 22.75 17.3498 22.75 18.489 22.5969C19.6615 22.4392 20.6104 22.1071 21.3588 21.3588C22.0432 20.6743 22.417 20.0233 22.5924 19.018C22.7501 18.1143 22.7501 16.8955 22.75 15.0963L22.75 15Z" fill="#000000"></path>
                                                <path d="M10 1.25H9.94359C8.10584 1.24998 6.65019 1.24997 5.51098 1.40314C4.33856 1.56076 3.38961 1.89288 2.64125 2.64124C1.95681 3.32568 1.58304 3.97665 1.40762 4.98199C1.24992 5.8857 1.24995 7.10448 1.25 8.90364L1.25001 9C1.25001 9.41422 1.58579 9.75 2.00001 9.75C2.41422 9.75 2.75001 9.41422 2.75001 9C2.75001 7.08092 2.75289 5.9986 2.88529 5.23984C3.00275 4.56666 3.21477 4.18904 3.70191 3.7019C4.12512 3.27869 4.70476 3.02503 5.71085 2.88976C6.73852 2.75159 8.09319 2.75 10 2.75C10.4142 2.75 10.75 2.41421 10.75 2C10.75 1.58579 10.4142 1.25 10 1.25Z" fill="#000000"></path>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M12 9.25C10.4812 9.25 9.25001 10.4812 9.25001 12C9.25001 13.5188 10.4812 14.75 12 14.75C13.5188 14.75 14.75 13.5188 14.75 12C14.75 10.4812 13.5188 9.25 12 9.25ZM10.75 12C10.75 11.3096 11.3096 10.75 12 10.75C12.6904 10.75 13.25 11.3096 13.25 12C13.25 12.6904 12.6904 13.25 12 13.25C11.3096 13.25 10.75 12.6904 10.75 12Z" fill="#000000"></path>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.32438 9.45049C6.59435 7.97738 8.77637 6.25 12 6.25C15.2236 6.25 17.4057 7.97738 18.6756 9.45049L18.7079 9.48791C18.9789 9.80202 19.2576 10.125 19.4491 10.5121C19.6632 10.9448 19.75 11.4094 19.75 12C19.75 12.5906 19.6632 13.0552 19.4491 13.4879C19.2576 13.875 18.9789 14.198 18.7079 14.5121L18.6756 14.5495C17.4057 16.0226 15.2236 17.75 12 17.75C8.77637 17.75 6.59435 16.0226 5.32438 14.5495L5.29211 14.5121C5.0211 14.198 4.7424 13.875 4.5509 13.4879C4.33676 13.0552 4.25001 12.5906 4.25001 12C4.25001 11.4094 4.33676 10.9448 4.5509 10.5121C4.74241 10.125 5.02109 9.80202 5.2921 9.48791L5.32438 9.45049ZM12 7.75C9.369 7.75 7.56642 9.14707 6.46048 10.4299C6.14652 10.7941 5.99368 10.9785 5.89533 11.1773C5.81198 11.3457 5.75001 11.566 5.75001 12C5.75001 12.434 5.81198 12.6543 5.89533 12.8227C5.99368 13.0215 6.14652 13.2059 6.46048 13.5701C7.56642 14.8529 9.369 16.25 12 16.25C14.631 16.25 16.4336 14.8529 17.5395 13.5701C17.8535 13.2059 18.0063 13.0215 18.1047 12.8227C18.188 12.6543 18.25 12.434 18.25 12C18.25 11.566 18.188 11.3457 18.1047 11.1773C18.0063 10.9785 17.8535 10.7941 17.5395 10.4299C16.4336 9.14707 14.631 7.75 12 7.75Z" fill="#000000"></path>
                                            </svg>
                                        </div>
                                    </a>
                                </li>
                                
                            </ul>
                            <!-- no attachment found -->
                            <div class="cmp-noresult-attachment mt-3">
                                <h5 class="fs-14 font-weight-400 fc-primary mb-0 text-center">No attachments found</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
         </div>
         <div class="modal-footer">
                <div class="cmp-sin-btn-tim d-flex justify-content-end gap-2">
                  <button type="button" class="btn ctl-btn-light w-auto" data-bs-dismiss="modal">Discard</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/libs/flatpickr/flatpickr.min.js') }}"></script>
<script src="{{ url('js/jquery-validation/jquery.validate.min.js') }}"></script>
<script src="{{ url('js/datatable-1.11.5_cdn/datatables.jquery.min.js') }}"></script>
<script src="{{ url('js/datatable-1.11.5_cdn/datatables.bootstrap5.min.js') }}"></script>
<script src="{{ url('js/datatable-1.11.5_cdn/datatables.responsive.min.js') }}"></script>
<script src="{{ url('js/jquery-validate-1.19.3/jquery-validate.min.js') }}"></script>

<script>
    $(document).ready(function(){
        var table = $('#leavePendingTable').DataTable({
            paging: true,
            searching: false,
            pagingType: "simple_numbers",
            scrollCollapse: true,
            info: true,
            responsive: false,
            scrollX: true,
            ordering: true,
            columnDefs: [
                { 
                    targets: 0, 
                    orderable: false, // Disable sorting for the first column (index 0)
                    width: '40px' // Set width of the first column to auto
                },
                { 
                    targets: [4,5], 
                    orderable: false // Disable sorting for the second column (index 2)
                },
                
                { 
                    targets: -1, 
                    orderable: false // Disable sorting for the last column (index -1)
                }
            ],
            language: {
                paginate: {
                    previous: '<span class="fa fa-chevron-left"></span>',
                    next: '<span class="fa fa-chevron-right"></span>'
                }
            },
            "order": [],
            "initComplete": function() {
                // After DataTable initialization, auto-size columns based on content
                this.api().columns.adjust().draw();
            },
        });
        // Event listener for the "Select All" checkbox in the header
        $('#ctl-select-all').on('change', function() {
            var isChecked = $(this).prop('checked');
            $('#leavePendingTable tbody .ctl-select-row').prop('checked', isChecked);
        });

        // Event listener for individual row checkboxes
        $('#leavePendingTable tbody').on('change', '.ctl-select-row', function() {
            var totalCheckboxes = $('#leavePendingTable tbody .ctl-select-row').length;
            var checkedCheckboxes = $('#leavePendingTable tbody .ctl-select-row:checked').length;

            // If all checkboxes in tbody are checked, check the "ctl-select-all" checkbox in the header
            if (totalCheckboxes === checkedCheckboxes) {
                $('#ctl-select-all').prop('checked', true);
            } else {
                $('#ctl-select-all').prop('checked', false);
            }
        });
        $(document).on('click' , '.ctl-his-lea-lis' , function(){
            $('#leaveHistoryTable').DataTable().draw();
        });
        var table = $('#leaveHistoryTable').DataTable({
            paging: true,
            searching: false,
            pagingType: "simple_numbers",
            scrollCollapse: true,
            info: true,
            responsive: false,
            scrollX: true,
            ordering: true,
            columnDefs: [
                { 
                    targets: [3,4], 
                    orderable: false // Disable sorting for the second column (index 2)
                },
                
                { 
                    targets: -1, 
                    orderable: false // Disable sorting for the last column (index -1)
                }
            ],
            language: {
                paginate: {
                    previous: '<span class="fa fa-chevron-left"></span>',
                    next: '<span class="fa fa-chevron-right"></span>'
                }
            },
            "order": [],
            "initComplete": function() {
                // After DataTable initialization, auto-size columns based on content
                this.api().columns.adjust().draw();
            },
        });
        flatpickr("#date_range", {
            mode: "range",
            dateFormat: "m/d/Y",
            allowInput: true
        });
        $(document).on('click' , '.cmp-com-sel-cus-blo .select2' , function(){
            $('.select2-container').addClass('ctl-sel-cus-drp');
        });
        $('.ctl-select2').select2({
            minimumResultsForSearch: Infinity,
        });
        $(document).on('click' , '.cmp-fla-pic-clk input' , function(){
            $('.flatpickr-calendar').addClass('ctl-fla-pic-pop-zin')
        });
        $('.select-multiple').select2();  

    });
    function toggleCustomFocus(e, add = true) {
        const selection = e.target?.nextElementSibling?.querySelector('.select2-selection--single');
            if (selection) {
                selection.classList.toggle('custom-focus', add);
            }}
            $(document).on('select2:open', function (e) {
                toggleCustomFocus(e, true);
                requestAnimationFrame(() => {
                    document.querySelector('.select2-container--open .select2-search__field')?.focus();
            });});
            $(document).on('select2:close', function (e) {
            toggleCustomFocus(e, false);
    });
</script>
@endsection