@extends('tenants.layouts.master')
@section('title')
    @lang('Employee List')
@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" />
    <link href="{{ url('css/employee-new/employee.css') }}" rel="stylesheet" />
@endsection
@section('content')

    <div class="row">
        <div class="col-12 p-0">
            <div class="card">
                <div class="px-3 pt-3 flex-wrap">
                    <div class="row">
                        <div class="col-auto mb-3 d-flex align-items-center">
                            <div class="ctl-pag-tit-con">
                               Employee List
                            </div>
                        </div>
                        <div class="ms-lg-auto mb-3 w-225 filter_list">
                        <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 class="dropdown dropdown_content w-135 filter_list">
                        <button class="dropdown-toggle toggle_btn" type="button" id="dropdownMenuButton"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            <svg width="15" height="15" viewBox="0 0 15 15" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M5.0302 1.55517C5.20684 1.74442 5.19661 2.04104 5.00735 2.21768L2.32878 4.71768C2.23371 4.80642 2.10604 4.85167 1.97631 4.84261C1.84658 4.83356 1.72644 4.77102 1.64461 4.66994L0.885682 3.73244C0.722793 3.53122 0.753863 3.23606 0.955079 3.07317C1.15629 2.91028 1.45146 2.94135 1.61435 3.14257L2.05681 3.68913L4.36768 1.53232C4.55694 1.35568 4.85356 1.36591 5.0302 1.55517ZM7.03127 3.125C7.03127 2.86612 7.24113 2.65625 7.50002 2.65625H13.75C14.0089 2.65625 14.2188 2.86612 14.2188 3.125C14.2188 3.38389 14.0089 3.59375 13.75 3.59375H7.50002C7.24113 3.59375 7.03127 3.38389 7.03127 3.125ZM5.0302 5.93017C5.20684 6.11942 5.19661 6.41604 5.00735 6.59268L2.32878 9.09268C2.23371 9.18142 2.10604 9.22667 1.97631 9.21761C1.84658 9.20856 1.72644 9.14602 1.64461 9.04494L0.885682 8.10744C0.722793 7.90622 0.753863 7.61106 0.955079 7.44817C1.15629 7.28528 1.45146 7.31635 1.61435 7.51756L2.05681 8.06413L4.36768 5.90732C4.55694 5.73068 4.85356 5.74091 5.0302 5.93017ZM7.03127 7.5C7.03127 7.24112 7.24113 7.03125 7.50002 7.03125H13.75C14.0089 7.03125 14.2188 7.24112 14.2188 7.5C14.2188 7.75889 14.0089 7.96875 13.75 7.96875H7.50002C7.24113 7.96875 7.03127 7.75889 7.03127 7.5ZM5.0302 10.3052C5.20684 10.4944 5.19661 10.791 5.00735 10.9677L2.32878 13.4677C2.23371 13.5564 2.10604 13.6017 1.97631 13.5926C1.84658 13.5836 1.72644 13.521 1.64461 13.4199L0.885682 12.4824C0.722793 12.2812 0.753863 11.9861 0.955079 11.8232C1.15629 11.6603 1.45146 11.6913 1.61435 11.8926L2.05681 12.4391L4.36768 10.2823C4.55694 10.1057 4.85356 10.1159 5.0302 10.3052ZM7.03127 11.875C7.03127 11.6161 7.24113 11.4063 7.50002 11.4063H13.75C14.0089 11.4063 14.2188 11.6161 14.2188 11.875C14.2188 12.1339 14.0089 12.3438 13.75 12.3438H7.50002C7.24113 12.3438 7.03127 12.1339 7.03127 11.875Z"
                                    fill="#525866"></path>
                            </svg> <span class="selected-text">Export</span>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <li><a class="dropdown-item" href="#">Excel</a></li>
                        </ul>
                    </div>
                        <!-- <div class="col-auto ps-lg-0">
                            <div class="common_select2" style="width:165px">
                                <select class="js-example-basic-single form-control" name="state">
                                    <option value=''>Choose</option>
                                    <option value="1">Export Excel</option>
                                </select>
                            </div>
                        </div> -->
                        <div class="col-auto">
                            <div class="filter_tab pt-0">
                                <button class="btn ctl-bor-fil-col ctl-bor-rad-8 gap-2" type="button" data-bs-toggle="offcanvas"
                                    data-bs-target="#offcanvasRight" aria-controls="offcanvasRight"><svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" height="12" viewBox="0 0 24 24" width="12" data-name="Layer 1"><path fill="#667085" d="m14 24a1 1 0 0 1 -.6-.2l-4-3a1 1 0 0 1 -.4-.8v-5.62l-7.016-7.893a3.9 3.9 0 0 1 2.916-6.487h14.2a3.9 3.9 0 0 1 2.913 6.488l-7.013 7.892v8.62a1 1 0 0 1 -1 1zm-3-4.5 2 1.5v-7a1 1 0 0 1 .253-.664l7.268-8.177a1.9 1.9 0 0 0 -1.421-3.159h-14.2a1.9 1.9 0 0 0 -1.421 3.158l7.269 8.178a1 1 0 0 1 .252.664z"/></svg>Filter</button>
                            </div>
                        </div>
                        <div class="col-auto ps-lg-0 mb-2">
                                @can('employee create')
                                <div class=" add_employee">
                                    <a href="{{ route('employee.add') }}"><button id="addRow" class="btn btn_primary addRow"> Add
                                            Employee
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 21" fill="none">
                                                <g clip-path="url(#clip0_184_955)">
                                                    <path d="M10 10.4353C12.7575 10.4353 15 8.19283 15 5.43533C15 2.67783 12.7575 0.435333 10 0.435333C7.2425 0.435333 5 2.67783 5 5.43533C5 8.19283 7.2425 10.4353 10 10.4353ZM10 2.102C11.8383 2.102 13.3333 3.597 13.3333 5.43533C13.3333 7.27367 11.8383 8.76867 10 8.76867C8.16167 8.76867 6.66667 7.27367 6.66667 5.43533C6.66667 3.597 8.16167 2.102 10 2.102ZM17.5 19.602C17.5 20.062 17.1275 20.4353 16.6667 20.4353C16.2058 20.4353 15.8333 20.062 15.8333 19.602C15.8333 17.0862 14.2292 14.9437 11.9925 14.127L10.7283 16.0237L11.6392 19.3487C11.7917 19.9037 11.3017 20.4362 10.6383 20.4362H9.36167C8.69833 20.4362 8.20917 19.9037 8.36083 19.3487L9.27167 16.0237L8.0075 14.127C5.77083 14.9437 4.16667 17.0862 4.16667 19.6028C4.16667 20.0628 3.79333 20.4362 3.33333 20.4362C2.87333 20.4362 2.5 20.0628 2.5 19.6028C2.5 15.4678 5.865 12.1028 10 12.1028C14.135 12.1028 17.5 15.467 17.5 19.602Z" fill="#fff"/>
                                                </g>
                                                <defs>
                                                    <clipPath id="clip0_184_955">
                                                    <rect width="20" height="20" fill="white" transform="translate(0 0.435333)"/>
                                                    </clipPath>
                                                </defs>
                                                </svg>
                                        </button></a>
                                </div>
                            @endcan
                        </div>
                    </div>
                    <input value="{{ route('employee.fetch') }}" type="hidden" id="employeefetch">
                    <input value="{{ route('employee.add') }}/" type="hidden" id="employeeadd">
                    <input value="{{ route('employee.delete') }}/" type="hidden" id="employeedelete">
                    <input value="{{ route('employee.update-status') }}" type="hidden" id="employeeactive">
                    
                    
                   
                </div>
                <div class="card-body common_datatable_theme table_search_custom common_search_emp scroll_box  ctl-pad-dat-pot">
                    <!-- <table id="employeeTable" class="table theme_table dt-responsive nowrap align-middle"
                        style="width:100%">
                        <thead>
                            <tr>
                                <th class="profile-img-th p-0 no-sortorder"></th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Mobile</th>
                                <th>Email</th>
                                <th>Role</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table> -->
                    <table id="employeeTable" class="table theme_table dt-responsive nowrap align-middle line_height" style="width: 100%">
                        <thead>
                            <tr>
                                <th class="ctl-pad-lft-hea">Name</th>
                                <th>Phone/Email</th>
                                <th>User ID</th>
                                 
                                <th>Department</th>
                                <th>Supervisor</th>
                              <!--   <th>Division</th> -->
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>

                      

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!--end col-->
    </div>
    <!-- filter canva rightside -->
    <div class="offcanvas offcanvas-end ctl-can-cus-blo ctl-sid-exp-zin" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header ctl-off-bac-col">
            <div class="d-flex justify-content-between w-100">
                <div class="ctl-edi-tit-lft my-auto">
                    <h3>Filter</h3>
                </div>
                <div class="ctl-clo-ico-rit">
                    <button class="back_btn" data-bs-dismiss="offcanvas" aria-label="Close"><svg height="16" width="16" enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" id="fi_5254940"><path d="m292.2 256 109.9-109.9c10-10 10-26.2 0-36.2s-26.2-10-36.2 0l-109.9 109.9-109.9-109.9c-10-10-26.2-10-36.2 0s-10 26.2 0 36.2l109.9 109.9-109.9 109.9c-10 10-10 26.2 0 36.2 5 5 11.55 7.5 18.1 7.5s13.1-2.5 18.1-7.5l109.9-109.9 109.9 109.9c5 5 11.55 7.5 18.1 7.5s13.1-2.5 18.1-7.5c10-10 10-26.2 0-36.2z" fill="#121212"></path></svg></button>
                </div>
            </div>
            
        </div>
        <div class="offcanvas-body ctl-off-pad-bod">
            <div class="col-12 mb-3">
                <div class="form-group">
                    <label for="supervisor" class="form-label">Report to</label>
                    <div class="input-field cmp-clk-fil-sec">
                        <span class="icon z-index">
                            <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20"
                                fill="none">
                                <path
                                    d="M14.2498 12.917C15.6832 12.917 17.3748 13.5837 17.5832 13.9837V14.5837H10.9165V13.9837C11.1248 13.5837 12.8165 12.917 14.2498 12.917ZM14.2498 11.667C12.7248 11.667 9.6665 12.4337 9.6665 13.9587V15.8337H18.8332V13.9587C18.8332 12.4337 15.7748 11.667 14.2498 11.667ZM7.99984 10.8337C6.05817 10.8337 2.1665 11.8087 2.1665 13.7503V15.8337H7.99984V14.5837H3.4165V13.7503C3.4165 13.2253 5.7415 11.9503 8.68317 12.0837C9.0411 11.6549 9.48002 11.301 9.97484 11.042C9.3248 10.9088 8.66336 10.839 7.99984 10.8337ZM7.99984 5.41699C8.24706 5.41699 8.48874 5.4903 8.6943 5.62766C8.89986 5.76501 9.06008 5.96023 9.15469 6.18864C9.2493 6.41705 9.27405 6.66838 9.22582 6.91086C9.17759 7.15333 9.05854 7.37606 8.88372 7.55088C8.70891 7.72569 8.48618 7.84474 8.2437 7.89297C8.00122 7.94121 7.74989 7.91645 7.52148 7.82184C7.29308 7.72723 7.09785 7.56702 6.9605 7.36145C6.82315 7.15589 6.74984 6.91422 6.74984 6.66699C6.74984 6.33547 6.88153 6.01753 7.11595 5.78311C7.35037 5.54869 7.66832 5.41699 7.99984 5.41699ZM7.99984 4.16699C7.50538 4.16699 7.02203 4.31361 6.61091 4.58832C6.19979 4.86302 5.87936 5.25347 5.69014 5.71028C5.50092 6.1671 5.45141 6.66977 5.54787 7.15472C5.64434 7.63967 5.88244 8.08513 6.23207 8.43476C6.5817 8.78439 7.02716 9.02249 7.51211 9.11896C7.99706 9.21542 8.49973 9.16591 8.95655 8.97669C9.41336 8.78747 9.80381 8.46704 10.0785 8.05592C10.3532 7.6448 10.4998 7.16145 10.4998 6.66699C10.4998 6.00395 10.2364 5.36807 9.7676 4.89923C9.29876 4.43038 8.66288 4.16699 7.99984 4.16699ZM14.2498 7.08366C14.4147 7.08366 14.5758 7.13253 14.7128 7.2241C14.8499 7.31567 14.9567 7.44582 15.0197 7.59809C15.0828 7.75036 15.0993 7.91792 15.0672 8.07957C15.035 8.24122 14.9556 8.3897 14.8391 8.50625C14.7225 8.62279 14.5741 8.70216 14.4124 8.73431C14.2508 8.76647 14.0832 8.74997 13.9309 8.68689C13.7787 8.62382 13.6485 8.51701 13.5569 8.37997C13.4654 8.24293 13.4165 8.08181 13.4165 7.91699C13.4165 7.69598 13.5043 7.48402 13.6606 7.32774C13.8169 7.17146 14.0288 7.08366 14.2498 7.08366ZM14.2498 5.83366C13.8378 5.83366 13.435 5.95584 13.0924 6.18476C12.7498 6.41368 12.4828 6.73906 12.3251 7.11974C12.1674 7.50041 12.1261 7.9193 12.2065 8.32343C12.2869 8.72756 12.4853 9.09877 12.7767 9.39013C13.0681 9.68149 13.4393 9.87991 13.8434 9.9603C14.2475 10.0407 14.6664 9.99942 15.0471 9.84174C15.4278 9.68406 15.7531 9.41703 15.9821 9.07443C16.211 8.73183 16.3332 8.32904 16.3332 7.91699C16.3332 7.36446 16.1137 6.83455 15.723 6.44385C15.3323 6.05315 14.8024 5.83366 14.2498 5.83366Z"
                                    fill="#96A5B8" />
                            </svg>
                        </span>
                        <select id="supervisor" name="supervisor" class="form-control js-example-basic-single">
                            <option value="">Select Reporter</option>
                            @if ($report_to)
                                @foreach ($report_to as $data)
                                    <option value="{{ $data->id }}"
                                        {{ isset($edit_list['reporting_user_id']) && $edit_list['reporting_user_id'] == $data->id ? 'selected' : '' }}>
                                        {{ $data->f_name . ' ' . $data->l_name }}
                                    </option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-12 mb-3">
                <div class="form-group">
                    <label for="role" class="form-label">Role</label>
                    <div class="input-field cmp-clk-fil-sec">
                        <span class="icon z-index"><svg xmlns="http://www.w3.org/2000/svg" width="21" height="20"
                                viewBox="0 0 21 20" fill="none">
                                <path
                                    d="M9.67234 17.5007H8.504C5.5165 17.5007 4.02317 17.5007 3.09484 16.5548C2.1665 15.609 2.1665 14.0865 2.1665 11.0423C2.1665 7.99815 2.1665 6.47565 3.09484 5.52982C4.02317 4.58398 5.5165 4.58398 8.504 4.58398H11.6732C14.6607 4.58398 16.1548 4.58398 17.0832 5.52982C17.7973 6.25732 17.9615 7.32648 17.9998 9.16732"
                                    stroke="#96A5B8" stroke-width="1.5" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path
                                    d="M13.833 4.58366L13.7497 4.32533C13.3372 3.04199 13.1313 2.40033 12.6405 2.03366C12.1488 1.66699 11.4972 1.66699 10.1913 1.66699H9.97217C8.66801 1.66699 8.01551 1.66699 7.52467 2.03366C7.03301 2.40033 6.82717 3.04199 6.41467 4.32533L6.33301 4.58366M14.7588 11.0462C14.913 10.9045 14.9897 10.8337 15.083 10.8337C15.1763 10.8337 15.253 10.9045 15.4072 11.0462L16.0013 11.5937C16.073 11.6595 16.1088 11.6928 16.153 11.7087C16.198 11.7253 16.2463 11.7237 16.3447 11.7195L17.1463 11.6878C17.353 11.6795 17.4563 11.6762 17.5272 11.7353C17.598 11.7945 17.6122 11.897 17.6397 12.102L17.7497 12.9237C17.763 13.0187 17.7688 13.0653 17.7922 13.107C17.8155 13.147 17.853 13.1762 17.928 13.2353L18.5747 13.7437C18.7347 13.8703 18.8147 13.9328 18.8305 14.0228C18.8463 14.1128 18.7922 14.1995 18.6855 14.3728L18.2472 15.0787C18.1972 15.1595 18.1722 15.2003 18.1638 15.2453C18.1555 15.2903 18.1655 15.3378 18.1855 15.4312L18.3597 16.2462C18.4013 16.4462 18.423 16.5462 18.3772 16.6262C18.3313 16.7062 18.2338 16.7378 18.0397 16.8012L17.268 17.052C17.1763 17.082 17.1297 17.097 17.0938 17.127C17.058 17.1578 17.0355 17.2012 16.9913 17.287L16.6147 18.0128C16.5188 18.1987 16.4705 18.2912 16.383 18.3228C16.2955 18.3545 16.1997 18.3145 16.0063 18.2345L15.2663 17.9278C15.1755 17.8903 15.1305 17.8712 15.083 17.8712C15.0355 17.8712 14.9905 17.8903 14.8997 17.9278L14.1597 18.2345C13.9663 18.3145 13.8705 18.3545 13.783 18.3228C13.6955 18.2912 13.6472 18.1978 13.5513 18.0128L13.1747 17.287C13.1297 17.2012 13.108 17.1578 13.0722 17.1278C13.0363 17.0978 12.9897 17.082 12.898 17.0528L12.1263 16.8012C11.9322 16.7378 11.8347 16.7062 11.7888 16.6262C11.743 16.5462 11.7638 16.447 11.8063 16.2462L11.9813 15.4312C12.0005 15.3378 12.0105 15.2912 12.0022 15.2462C11.9851 15.1859 11.9568 15.1293 11.9188 15.0795L11.4813 14.3728C11.373 14.1995 11.3197 14.1128 11.3355 14.0228C11.3513 13.9328 11.4313 13.8703 11.5913 13.7445L12.238 13.2362C12.313 13.1762 12.3505 13.147 12.3738 13.1062C12.3972 13.0653 12.403 13.0187 12.4155 12.9228L12.5263 12.102C12.5538 11.8978 12.568 11.7945 12.6388 11.7353C12.7097 11.6762 12.813 11.6795 13.0197 11.6878L13.8222 11.7195C13.9197 11.7237 13.968 11.7253 14.013 11.7087C14.0572 11.692 14.093 11.6595 14.1647 11.5937L14.7588 11.0462Z"
                                    stroke="#96A5B8" stroke-width="1.5" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg></span>
                        <select name="role" id="role" class="form-control js-example-basic-single">
                            <option value="">Select Role</option>
                            @foreach ($roles as $k => $role)
                                <option value="{{ $k }}" @if (!empty($edit_list) && $edit_list->hasRole($k)) selected @endif>
                                    {{ ucfirst($k) }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="form-group">
                    <label for="department" class="form-label">Department</label>
                    <div class="input-field  cmp-clk-fil-sec">
                        <span class="icon z-index">
                            <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20"
                                fill="none">
                                <path
                                    d="M3 1.875V18.125H9.875V15.625H11.125V18.125H18V1.875H3ZM4.25 3.125H16.75V16.875H12.375V14.375H8.625V16.875H4.25V3.125ZM5.5 4.375V5.625H8V4.375H5.5ZM9.25 4.375V5.625H11.75V4.375H9.25ZM13 4.375V5.625H15.5V4.375H13ZM5.5 6.875V8.125H8V6.875H5.5ZM9.25 6.875V8.125H11.75V6.875H9.25ZM13 6.875V8.125H15.5V6.875H13ZM5.5 9.375V10.625H8V9.375H5.5ZM9.25 9.375V10.625H11.75V9.375H9.25ZM13 9.375V10.625H15.5V9.375H13ZM5.5 11.875V13.125H8V11.875H5.5ZM9.25 11.875V13.125H11.75V11.875H9.25ZM13 11.875V13.125H15.5V11.875H13ZM5.5 14.375V15.625H8V14.375H5.5ZM13 14.375V15.625H15.5V14.375H13Z"
                                    fill="#96A5B8" />
                            </svg>
                        </span>
                        <select name="department" id="department" class="form-control js-example-basic-single">
                            <option value="">Select Department</option>
                            @if ($department)
                                @foreach ($department as $data)
                                    <option value="{{ $data->id }}"
                                        {{ isset($edit_list['department_id']) && $edit_list['department_id'] == $data->id ? 'selected' : '' }}>
                                        {{ $data->dept_name }}
                                    </option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-end gap-3 pt-4">
                {{-- <button type="button" class="btn btn_primary">Update</button> --}}
                <button type="button" class="btn ctl-clr-btn-fil btn_clear_new">Clear All</button>
            </div>
            
        </div>
    </div>
    <!-- filter canva rightside -->
    <!-- Right Sidebar (Off-Canvas) -->
    <!-- Right Sidebar (Off-Canvas) -->
    <div id="userDetailSidebar" class="offcanvas offcanvas-end ctl-can-cus-blo ctl-sid-exp-zin" tabindex="-1" aria-labelledby="userDetailSidebarLabel">
        <div class="offcanvas-header ctl-off-bac-col">
            <div class="d-flex justify-content-between w-100">
                <div class="ctl-edi-tit-lft">
                    <h3>Edit Profile</h3>
                    <span class="sidebarName">Loading...</span>
                </div>
                <div class="ctl-clo-ico-rit">
                    <a id="edit_btn" href="javascript:void(0)" class="ctl-edi-btn-bot">Edit</a>
                    <button class="back_btn" data-bs-dismiss="offcanvas" aria-label="Close"><svg height="16" width="16" enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" id="fi_5254940"><path d="m292.2 256 109.9-109.9c10-10 10-26.2 0-36.2s-26.2-10-36.2 0l-109.9 109.9-109.9-109.9c-10-10-26.2-10-36.2 0s-10 26.2 0 36.2l109.9 109.9-109.9 109.9c-10 10-10 26.2 0 36.2 5 5 11.55 7.5 18.1 7.5s13.1-2.5 18.1-7.5l109.9-109.9 109.9 109.9c5 5 11.55 7.5 18.1 7.5s13.1-2.5 18.1-7.5c10-10 10-26.2 0-36.2z" fill="#121212"></path></svg></button>
                </div>
            </div>
            
        </div>
        <div class="offcanvas-body ctl-off-pad-bod">
            <div class="cmp-can-inf-top">
                    <div class="flex-shrink-0">
                            <img id="sidebarProfileImage" src="{{ url('img/assets/avatar-3.jpg') }}" alt="" class="avatar-xs rounded-circle ctl-h24">
                    </div>
                    <div class="ctl-can-emp-txt mt-1">
                        <h3 class="designation">Loading...</h3>
                        <h4 class="sidebarName">Loading...</h4>
                        <span class="ctl-emp-typ-blo">Full-time</span>
                    </div>
            </div>
            <div class="cmp-can-inf-bot">
                <div class="cmp-bas-inf-tit">
                    <h3>Basic Information</h3>
                </div>
                <div class="cmp-inf-blo-con">
                    <div class="form-group ctl-frm-grp-txt">
                        <label>Name</label>
                        <p class="sidebarName">Loading...</p>
                    </div>
                    <div class="form-group ctl-frm-grp-txt">
                        <label>Phone / Email</label>
                        <p class="phone_email">(303) 555-0105 / tanya.hill@example.com</p>
                    </div>
                   

                    <div class="form-group ctl-frm-grp-txt">
                        <label>User ID</label>
                        <p class="user_id">18</p>
                    </div>
                    <div class="form-group ctl-frm-grp-txt">
                        <label>Designation</label>
                        <p class="designation">Lead Cardiologist</p>
                    </div>
                    <div class="form-group ctl-frm-grp-txt">
                        <label>Department</label>
                        <p class="dept_name">Management</p>
                    </div>
                    <div class="form-group ctl-frm-grp-txt">
                        <label>Supervisor</label>
                        <p>Jose Machado</p>
                    </div>
                   <!--  <div class="form-group ctl-frm-grp-txt">
                        <label>Division</label>
                        <p class="sidebarDivision">Drops</p>
                    </div> -->
                    <div class="form-group ctl-frm-grp-txt">
                        <label>Status</label>
                        <p class="active"><span class="ctl-emp-sta-txt ctl-available">
                                        <span>
                                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 16 15" fill="none">
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M14.25 7.5C14.25 10.9518 11.4518 13.75 8 13.75C4.54822 13.75 1.75 10.9518 1.75 7.5C1.75 4.04822 4.54822 1.25 8 1.25C11.4518 1.25 14.25 4.04822 14.25 7.5ZM10.519 5.60604C10.702 5.7891 10.702 6.0859 10.519 6.26896L7.39396 9.39396C7.2109 9.57701 6.9141 9.57701 6.73104 9.39396L5.48104 8.14396C5.29799 7.9609 5.29799 7.6641 5.48104 7.48104C5.6641 7.29799 5.9609 7.29799 6.14396 7.48104L7.0625 8.39959L8.45927 7.00282L9.85604 5.60604C10.0391 5.42299 10.3359 5.42299 10.519 5.60604Z" fill="#00AE1D"></path>
                                            </svg>
                                        </span>
                                        Active
                                    </span></p>

                        <p class="inactive"><span class="ctl-emp-sta-txt ctl-unavailable">
                                        <span>
                                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M13.75 7.5C13.75 10.9518 10.9518 13.75 7.5 13.75C4.04822 13.75 1.25 10.9518 1.25 7.5C1.25 4.04822 4.04822 1.25 7.5 1.25C10.9518 1.25 13.75 4.04822 13.75 7.5ZM5.60602 5.60603C5.78908 5.42297 6.08587 5.42297 6.26893 5.60603L7.49998 6.83708L8.73102 5.60604C8.91408 5.42299 9.21087 5.42299 9.39393 5.60604C9.57699 5.7891 9.57699 6.0859 9.39393 6.26896L8.16289 7.49999L9.39392 8.73102C9.57698 8.91408 9.57698 9.21087 9.39392 9.39393C9.21086 9.57699 8.91406 9.57699 8.731 9.39393L7.49998 8.16291L6.26894 9.39394C6.08589 9.577 5.78909 9.577 5.60603 9.39394C5.42297 9.21089 5.42297 8.91409 5.60603 8.73103L6.83707 7.49999L5.60602 6.26894C5.42296 6.08589 5.42296 5.78909 5.60602 5.60603Z" fill="#F74850"></path>
                                            </svg>
                                        </span>
                                        
                                        In-active
                                    </span></p>
                    </div>
                    <div class="form-group ctl-frm-grp-txt">
                        <label>Birth Date </label>
                        <p id="sidebarBirthDate"></p>
                    </div>
                    <div class="form-group ctl-frm-grp-txt">
                        <label>Date of Joining</label>
                        <p id="sidebarDateOfJoining"></p>
                    </div>
                    <div class="form-group ctl-frm-grp-txt">
                        <label>Gender </label>
                        <p id="sidebarGender"></p>
                    </div>
                    <div class="form-group ctl-frm-grp-txt">
                        <label>Secondary Email </label>
                        <p id="sidebarSecondaryEmail"></p>
                    </div>
                    <div class="form-group ctl-frm-grp-txt">
                        <label>City  </label>
                        <p id="sidebarCity"></p>
                    </div>
                    <div class="form-group ctl-frm-grp-txt">
                        <label>State   </label>
                        <p id="sidebarState"></p>
                    </div>
                    <div class="form-group ctl-frm-grp-txt">
                        <label>Permanent Address   </label>
                        <p id="sidebarPermanentAddress"></p>
                    </div>
                    <div class="form-group ctl-frm-grp-txt">
                        <label>Billing Type </label>
                        <p id="sidebarBillingType"></p>
                    </div>
                    <div class="form-group ctl-frm-grp-txt">
                        <label>Reporting User</label>
                        <p id="sidebarReportingUser"></p>
                    </div>
                    <div class="form-group ctl-frm-grp-txt">
                        <label>Timesheet Type</label>
                        <p id="sidebarTimesheetType"></p>
                    </div>
                    <div class="form-group ctl-frm-grp-txt">
                        <label>Pay Schedule</label>
                        <p id="sidebarPaySchedule"></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="offcanvas-header ctl-off-bac-col ctl-can-btn-bot">
            <button class="btn" data-bs-dismiss="offcanvas" aria-label="Close">Close</button>
                
        </div>
    </div>
@endsection
@section('script')
    <script src="{{ url('js/jquery-3.6.0_cdn/jquery.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="{{ asset('js/datatables-1.11.5_cdn/datatables.buttons.min.js') }}"></script>
    <script src="{{ url('js/select2@4.1.0/select2.min.js') }}"></script>
    <script src="{{ url('js/sweetalert-2@11.20/sweetalert2.all.min.js') }}"></script>
    <script src="{{ url('js/employee/employee_list.js') }}"></script>
 

@endsection