@extends('tenants.layouts.master')
@section('title')
    @lang('Cost code 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/costcode/costcode.index.css') }}" rel="stylesheet" /> -->
   
    <!-- SweetAlert2 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.20/dist/sweetalert2.min.css">

@endsection
@section('content')
    @component('tenants.components.breadcrumb')
        @slot('li_1')
            Cost code
        @endslot
        @slot('title')
            Cost code List
        @endslot
    @endcomponent

                <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">
                                            Cost Code
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-xl-3 col-xxl-2 col-md-4 col-lg-2 ps-lg-0 ms-lg-auto ms-md-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" type="text" id="search-input" 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">Select</span>
                                            </button>
                                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                <li><a class="dropdown-item" href="#">Delete</a></li>
                                            </ul>
                                        </div>    -->
                                    <!-- <div class="col-8 col-md-4 col-lg-3 ms-lg-auto mb-3">
                                        <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" type="text" id="search-input" class="form-control"
                                                placeholder="Search" aria-label="search" aria-describedby="addon-wrapping">
                                        </div>
                                    </div> -->
                                    <!-- <div class="col-sm-12 col-md-3 col-lg-3 col-xl-2 mb-3">
                                        <div class="common_select2">
                                            <select class="js-example-basic-single" id="bulk-action" name="state" 
                                                @cannot('costcode delete') disabled @endcannot>
                                                <option selected value="">Bulk Action</option>
                                                <option value="delete">Delete</option>
                                            </select>
                                        </div>
                                    </div>  -->
                                    <div class="col-auto mb-2">
                                            @can('costcode create')
                                            <button class="btn btn_primary cost" id="addCostModalBtn" data-bs-toggle="modal" data-bs-target="#editModal">                                                                                            
                                                Add  Cost Code
                                                <span>
                                                    <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_966)">
                                                            <path d="M15.8333 19.102H4.16667C1.86917 19.102 0 17.2329 0 14.9354V6.60203C0 4.30453 1.86917 2.43536 4.16667 2.43536H15.8333C18.1308 2.43536 20 4.30453 20 6.60203V14.9354C20 17.2329 18.1308 19.102 15.8333 19.102ZM4.16667 4.10203C2.78833 4.10203 1.66667 5.2237 1.66667 6.60203V14.9354C1.66667 16.3137 2.78833 17.4354 4.16667 17.4354H15.8333C17.2117 17.4354 18.3333 16.3137 18.3333 14.9354V6.60203C18.3333 5.2237 17.2117 4.10203 15.8333 4.10203H4.16667ZM5 14.9354V6.60203C5 6.14203 4.6275 5.7687 4.16667 5.7687C3.70583 5.7687 3.33333 6.14203 3.33333 6.60203V14.9354C3.33333 15.3962 3.70583 15.7687 4.16667 15.7687C4.6275 15.7687 5 15.3962 5 14.9354ZM8.33333 14.9354V6.60203C8.33333 6.14203 7.96083 5.7687 7.5 5.7687C7.03917 5.7687 6.66667 6.14203 6.66667 6.60203V14.9354C6.66667 15.3962 7.03917 15.7687 7.5 15.7687C7.96083 15.7687 8.33333 15.3962 8.33333 14.9354ZM16.6667 14.9354V6.60203C16.6667 6.14203 16.2942 5.7687 15.8333 5.7687C15.3725 5.7687 15 6.14203 15 6.60203V14.9354C15 15.3962 15.3725 15.7687 15.8333 15.7687C16.2942 15.7687 16.6667 15.3962 16.6667 14.9354ZM11.6667 14.5187V7.0187C11.6667 6.32786 11.1067 5.7687 10.4167 5.7687C9.72667 5.7687 9.16667 6.32786 9.16667 7.0187V14.5187C9.16667 15.2087 9.72667 15.7687 10.4167 15.7687C11.1067 15.7687 11.6667 15.2087 11.6667 14.5187ZM12.9167 15.7687C12.6867 15.7687 12.5 15.582 12.5 15.352V6.18536C12.5 5.95536 12.6867 5.7687 12.9167 5.7687C13.1467 5.7687 13.3333 5.95536 13.3333 6.18536V15.352C13.3333 15.582 13.1467 15.7687 12.9167 15.7687Z" fill="#fff"/>
                                                        </g>
                                                        <defs>
                                                            <clipPath id="clip0_184_966">
                                                            <rect width="20" height="20" fill="white" transform="translate(0 0.768677)"/>
                                                            </clipPath>
                                                        </defs>
                                                    </svg>
                                                </span>
                                            </button>
                                            @endcan
                                    </div>
                                </div>
                            </div>
                            <div class="card-body common_datatable_theme table_search_custom common_search_emp scroll_box">
                                <table id="cost_code_list_table" class=" table theme_table dt-responsive nowrap align-middle serialsortdisabled my-0 head-top-left-radius head-top-right-radius  " style="width:100%">
                                    <thead>
                                    <tr>
                                        <th scope="col" style="width: 10px;" class="head-bottom-left-radius">
                                            <div class="form-check ctl-tab-hdr-che">
                                                <input class="form-check-input fs-14 cursor-pointer check_All" type="checkbox" id="checkAll" value="option">
                                            </div>
                                        </th>   
                                        <th data-ordering="false">Created Date</th>        
                                        <th data-ordering="false">Cost Code Name</th>
                                        <th data-ordering="false">Cost Code ID</th>              
                                        <th class="head-bottom-right-radius">Action</th>
                                    </tr>
                                    </thead>
                                    {{-- <tbody>
                                        @foreach($cost_codes ?? [] as $cost_code)
                                            <tr>
                                                <td><input class="form-check-input fs-14 cursor-pointer individual" type="checkbox" name="checkAll" value="{{ $cost_code->id }}"></td>
                                                <td>{{$cost_code->created_at->format('m/d/Y')}}</td>
                                                <td>{{ $cost_code->cost_code_name}}</td>
                                                <td>{{ $cost_code->costcode_code}}</td>
                                                <td>
                                                    <div class="d-flex gap-1">
                                                        @can('cost_code edit')
                                                        <button class="btn_edit_icon costedit-btn" data-id="{{ $cost_code->id }}" data-toggle="tooltip" title="Edit" data-bs-placement="top"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12" fill="none" >
                                                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.74815 0.492402C9.23242 -0.0211792 8.39657 -0.0208645 7.88123 0.493105L3.8954 4.46904C3.57661 4.78698 3.38918 5.2126 3.37022 5.66166L3.31348 7.005C3.28764 7.61668 3.77824 8.12665 4.39257 8.12667L5.71422 8.12673C6.19945 8.12675 6.66415 7.93155 7.00296 7.58538L10.9567 3.53329C11.4614 3.0176 11.4561 2.19326 10.9448 1.68406L9.74815 0.492402ZM8.39058 1.00033C8.62483 0.766712 9.00476 0.766569 9.23918 1.00002L10.4358 2.19167C10.6683 2.42313 10.6707 2.79782 10.4412 3.03223L9.64718 3.84355L7.59192 1.79687L8.39058 1.00033ZM7.08295 2.30448L4.40475 4.97627C4.21348 5.16704 4.10102 5.4224 4.08964 5.69185L4.0329 7.03518C4.02429 7.23908 4.18782 7.40906 4.3926 7.40907L5.71425 7.40913C6.00539 7.40914 6.28421 7.29202 6.48749 7.08432L9.14437 4.35729L7.08295 2.30448Z" fill="#1E66E9"/>
                                                                    <path d="M10.256 5.98834V8.12683C10.256 9.60314 9.05919 10.7999 7.58288 10.7999H3.30591C1.8296 10.7999 0.632812 9.60314 0.632812 8.12683V3.84986C0.632812 2.37355 1.8296 1.17676 3.30592 1.17676H5.4444" stroke="#1E66E9" stroke-width="0.801931" stroke-linecap="round"/>
                                                                    </svg>
                                                        </button>
                                                        @endcan
                                                        @can('cost_code delete')
                                                        <button class="btn_delete_icon costdel-btn" data-id="{{ $cost_code->id }}" data-toggle="tooltip" title="Delete" data-bs-placement="top"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 11 11" fill="none">
                                                            <g clip-path="url(#clip0_281_10181)">
                                                                <path d="M10.3068 2.39336C10.3068 1.83498 9.8525 1.38071 9.29412 1.38071H7.54533V1.18519C7.54533 0.531695 7.01364 0 6.36008 0H4.6342C3.98065 0 3.44895 0.531695 3.44895 1.18521V1.38074H1.70012C1.14177 1.38074 0.6875 1.835 0.6875 2.39338C0.6875 2.83907 0.977066 3.21817 1.37786 3.35311V9.81477C1.37786 10.4683 1.90955 11 2.56309 11H8.43118C9.08471 11 9.61638 10.4683 9.61638 9.81477V3.35311C10.0172 3.21817 10.3068 2.83907 10.3068 2.39336ZM4.09348 1.18521C4.09348 0.88709 4.33606 0.644531 4.6342 0.644531H6.36008C6.65824 0.644531 6.9008 0.88709 6.9008 1.18521V1.38074H4.09348V1.18521ZM8.43118 10.3555H2.56311C2.26497 10.3555 2.02241 10.1129 2.02241 9.81477V3.40598H8.97187V9.81477C8.97185 10.1129 8.72932 10.3555 8.43118 10.3555ZM9.29412 2.76145H1.70012C1.49716 2.76145 1.33203 2.59632 1.33203 2.39336C1.33203 2.19038 1.49716 2.02525 1.70012 2.02525H9.29412C9.4971 2.02525 9.66225 2.19038 9.66225 2.39336C9.66225 2.59634 9.49712 2.76145 9.29412 2.76145Z" fill="#F04438"/>
                                                                <path d="M3.5957 4.14258C3.41773 4.14258 3.27344 4.28687 3.27344 4.46484V9.29741C3.27344 9.47539 3.41773 9.61968 3.5957 9.61968C3.77368 9.61968 3.91797 9.47539 3.91797 9.29741V4.46484C3.91797 4.28687 3.77368 4.14258 3.5957 4.14258Z" fill="#F04438"/>
                                                                <path d="M5.49414 4.14258C5.31616 4.14258 5.17188 4.28687 5.17188 4.46484V9.29741C5.17188 9.47539 5.31616 9.61968 5.49414 9.61968C5.67212 9.61968 5.81641 9.47539 5.81641 9.29741V4.46484C5.81641 4.28687 5.67212 4.14258 5.49414 4.14258Z" fill="#F04438"/>
                                                                <path d="M7.39258 4.14258C7.2146 4.14258 7.07031 4.28687 7.07031 4.46484V9.29741C7.07031 9.47539 7.2146 9.61968 7.39258 9.61968C7.57055 9.61968 7.71484 9.47539 7.71484 9.29741V4.46484C7.71484 4.28687 7.57055 4.14258 7.39258 4.14258Z" fill="#F04438"/>
                                                            </g>
                                                            <defs>
                                                                <clipPath id="clip0_281_10181">
                                                                <rect width="11" height="11" fill="white"/>
                                                                </clipPath>
                                                            </defs>
                                                            </svg>
                                                        </button>
                                                        @endcan
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody> --}}
                                    <tbody></tbody>
                                </table>
                            </div>
                      </div>
                    </div>
                </div>
    <!-- Edit/Add CostCode Modal -->

<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel"  aria-hidden="true">
    <div class="modal-dialog modal-md modal-dialog-centered">
        <div class="modal-content popup-radius py-2">
            <div class="modal-header close-btn-svg ctl-pad-mod-hdr pt-2">
                <h6 class="modal-title d-flex align-items-center" id="exampleModalgridLabel">                      
                    <span class="modal_popup_header">
                        Add  Cost Code
                    </span>
                </h6>
                <button type="button " class="btn mt-1 px-0 close" data-bs-dismiss="modal" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="23" viewBox="0 0 24 23" fill="none">
                        <g clip-path="url(#clip0_299_7281)">
                            <path d="M11.9998 2.3998C14.4133 2.3998 16.7279 3.35855 18.4345 5.06513C20.1411 6.77171 21.0998 9.08634 21.0998 11.4998C21.0998 13.9133 20.1411 16.2279 18.4345 17.9345C16.7279 19.6411 14.4133 20.5998 11.9998 20.5998C9.58634 20.5998 7.27171 19.6411 5.56513 17.9345C3.85855 16.2279 2.8998 13.9133 2.8998 11.4998C2.8998 9.08634 3.85855 6.77171 5.56513 5.06513C7.27171 3.35855 9.58634 2.3998 11.9998 2.3998ZM11.9998 22.6998C14.9702 22.6998 17.819 21.5198 19.9194 19.4194C22.0198 17.319 23.1998 14.4702 23.1998 11.4998C23.1998 8.52938 22.0198 5.68062 19.9194 3.58021C17.819 1.4798 14.9702 0.299805 11.9998 0.299805C9.02938 0.299805 6.18062 1.4798 4.08021 3.58021C1.9798 5.68062 0.799805 8.52938 0.799805 11.4998C0.799805 14.4702 1.9798 17.319 4.08021 19.4194C6.18062 21.5198 9.02938 22.6998 11.9998 22.6998ZM8.45606 7.95606C8.04481 8.3673 8.04481 9.0323 8.45606 9.43918L10.5123 11.4954L8.45606 13.5517C8.04481 13.9629 8.04481 14.6279 8.45606 15.0348C8.8673 15.4417 9.5323 15.4461 9.93918 15.0348L11.9954 12.9786L14.0517 15.0348C14.4629 15.4461 15.1279 15.4461 15.5348 15.0348C15.9417 14.6236 15.9461 13.9586 15.5348 13.5517L13.4786 11.4954L15.5348 9.43918C15.9461 9.02793 15.9461 8.36293 15.5348 7.95606C15.1236 7.54918 14.4586 7.54481 14.0517 7.95606L11.9954 10.0123L9.93918 7.95606C9.52793 7.54481 8.86293 7.54481 8.45606 7.95606Z" fill="#96A5B8"/>
                        </g>
                        <defs>
                            <clipPath id="clip0_299_7281">
                            <rect width="22.4" height="22.4" fill="white" transform="translate(0.799805 0.299805)"/>
                            </clipPath>
                        </defs>
                        </svg>
                 </button>
            </div>
            <form role="form" id="costform" method="POST" action="javascript:void(0);" novalidate="novalidate" autocomplete="off">
                @csrf
                <input type="hidden" id="cost_code_id" name="cost_code_id" value="">
                <div class="modal-body  ctl-pad-mod-bod pt-1">
                    <div class="row">                          
                        <div class="col-12 ctl-com-mod-bot ">
                            <div class="form-group">
                                <div class="input-field">
                                <label class="form-label cost_code_name"> Cost Code Name<sup class="required-start-icon">*</sup></label>
                                   <span class="icon">
                                   <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>
                                   <input type="text" id="cost_code_name" name="cost_code_name" class="form-control group-border3" placeholder="Enter cost code Name">
                                </div>
                            </div>
                        </div>
                        <div class="col-12 ctl-com-mod-bot py-2">
                        <div class="form-group ">
                                <div class="input-field">
                                <label class="form-label costcode_code">Cost Code ID<sup class="required-start-icon">*</sup></label>
                                   <span class="icon">
                                   <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
                                        <path d="M13.625 1.25C12.7466 1.2498 11.8804 1.45535 11.0958 1.85019C10.3111 2.24503 9.62991 2.81818 9.10666 3.5237C8.58342 4.22922 8.23271 5.0475 8.08264 5.91296C7.93257 6.77842 7.98732 7.66701 8.2425 8.5075L1.75 15V18.75H5.5L11.9925 12.2575C12.7662 12.4923 13.5814 12.5576 14.3826 12.4489C15.1838 12.3402 15.9522 12.06 16.6353 11.6275C17.3184 11.195 17.9003 10.6203 18.3412 9.94256C18.7822 9.26483 19.0718 8.5 19.1904 7.70021C19.3091 6.90041 19.2539 6.08444 19.0286 5.3079C18.8033 4.53137 18.4133 3.81252 17.8851 3.20035C17.3569 2.58818 16.703 2.09708 15.9678 1.76051C15.2326 1.42394 14.4335 1.24981 13.625 1.25ZM13.625 11.25C13.1947 11.2499 12.7667 11.1863 12.355 11.0612L11.6381 10.8438L11.1088 11.3731L9.12063 13.3612L8.25875 12.5L7.375 13.3837L8.23687 14.2456L7.24563 15.2369L6.38375 14.375L5.5 15.2587L6.36187 16.1206L4.9825 17.5H3V15.5175L9.12625 9.39125L9.65625 8.86188L9.43875 8.145C9.17161 7.26437 9.18897 6.32193 9.48834 5.45173C9.78772 4.58153 10.3539 3.82789 11.1063 3.29802C11.8587 2.76814 12.759 2.48901 13.6792 2.50033C14.5994 2.51165 15.4926 2.81285 16.2317 3.36107C16.9708 3.9093 17.5183 4.67664 17.7961 5.55394C18.074 6.43124 18.0682 7.37382 17.7795 8.24761C17.4907 9.12141 16.9338 9.88191 16.188 10.4209C15.4421 10.96 14.5453 11.2501 13.625 11.25Z" fill="#96A5B8"/>
                                        <path d="M14.25 7.5C14.9404 7.5 15.5 6.94036 15.5 6.25C15.5 5.55964 14.9404 5 14.25 5C13.5596 5 13 5.55964 13 6.25C13 6.94036 13.5596 7.5 14.25 7.5Z" fill="#96A5B8"/>
                                        </svg>
                                   </span>
                                   <input type="text" id="costcode_code" name="costcode_code" class="form-control" placeholder="Enter cost code ID">
                                </div>
                            </div>
                        </div>
                        <div class="col-12 ctl-com-mod-bot">
                            <div class="form-group">
                                <div class="input-field">
                                    <span class="icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
                                            <path d="M7.50029 15.75H13.5007C13.6434 15.75 13.7624 15.7023 13.8577 15.607C13.9531 15.5117 14.0007 15.3927 14.0007 15.25C14.0007 15.1073 13.9531 14.9883 13.8577 14.893C13.7624 14.7977 13.6434 14.75 13.5007 14.75H7.50029C7.35828 14.75 7.23927 14.7977 7.14326 14.893C7.04725 14.9883 6.99958 15.1073 7.00025 15.25C7.00092 15.3927 7.04859 15.5117 7.14326 15.607C7.23793 15.7023 7.35694 15.75 7.50029 15.75ZM7.50029 11.75H13.5007C13.6434 11.75 13.7624 11.7023 13.8577 11.607C13.9531 11.5117 14.0007 11.3927 14.0007 11.25C14.0007 11.1073 13.9531 10.9883 13.8577 10.893C13.7624 10.7977 13.6434 10.75 13.5007 10.75H7.50029C7.35828 10.75 7.23927 10.7977 7.14326 10.893C7.04725 10.9883 6.99958 11.1073 7.00025 11.25C7.00092 11.3927 7.04859 11.5117 7.14326 11.607C7.23793 11.7023 7.35694 11.75 7.50029 11.75ZM5.11612 19.25C4.65542 19.25 4.27105 19.096 3.96303 18.788C3.65501 18.48 3.50067 18.0957 3.5 17.635V2.865C3.5 2.405 3.65434 2.021 3.96303 1.713C4.27172 1.405 4.65608 1.25067 5.11612 1.25H12.3296C12.545 1.25 12.7543 1.29333 12.9577 1.38C13.161 1.46667 13.335 1.583 13.4797 1.729L17.021 5.27C17.1656 5.41533 17.2817 5.58933 17.369 5.792C17.4563 5.99467 17.5 6.204 17.5 6.42V17.634C17.5 18.094 17.3457 18.4783 17.037 18.787C16.7283 19.0957 16.3446 19.25 15.8859 19.25H5.11612ZM12.5006 5.442V2.25H5.11612C4.9621 2.25 4.82076 2.314 4.69209 2.442C4.56341 2.57 4.4994 2.711 4.50007 2.865V17.635C4.50007 17.7883 4.56408 17.9293 4.69209 18.058C4.82009 18.1867 4.9611 18.2507 5.11512 18.25H15.8859C16.0392 18.25 16.1802 18.186 16.3089 18.058C16.4376 17.93 16.5016 17.7887 16.5009 17.634V6.25H13.3087C13.076 6.25 12.8833 6.17333 12.7307 6.02C12.578 5.86667 12.5013 5.674 12.5006 5.442Z" fill="#96A5B8"/>
                                            </svg>
                                    </span>
                                    <label class="form-label description"> Description</label>
                                    <textarea class="form-control modal_description description" id="description" name="description" placeholder="Enter Description"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                            <div class="gap-2 d-flex justify-content-end my-0 pt-3">
                                <button type="button"  class="btn btn_discard  rounded sweetDeptSubmit discard" data-bs-dismiss="modal">
                                    <span class="fs-16">
                                        Discard
                                    </span>
                                </button>
                                <button type="submit" name="submit" class="btn btn_primary submit1" >
                                    <span class="fs-16 edit_btn">
                                        Submit
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>                  
                </div>
            </form>
        </div>
    </div>
</div>

  <!-- filter canva rightside CostCode -->
  <div class="offcanvas offcanvas-end"  tabindex="-1" id="costcode_canva" aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header ">
            <button class="back_btn" data-bs-dismiss="offcanvas" aria-label="Close">
                <svg xmlns="http://www.w3.org/2000/svg" fili="#181d27" id="Layer_1" data-name="Layer 1"
                    viewBox="0 0 24 24" width="24" height="24">
                    <path
                    d="M19,11H9l3.293-3.293L10.879,6.293,6.586,10.586a2,2,0,0,0,0,2.828l4.293,4.293,1.414-1.414L9,13H19Z" />
                </svg>
                Back
            </button>
        </div>
        <div class="offcanvas-body" data-bs-focus="false" >
            <div class="col-12">
                <div class="form-group ">
                    <label for="" class="form-label">
                    Cost </label>
                    <div class="input-field">
                    <span class="icon z-index">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
                            fill="none">
                            <path
                                d="M2.5 1.875V18.125H9.375V15.625H10.625V18.125H17.5V1.875H2.5ZM3.75 3.125H16.25V16.875H11.875V14.375H8.125V16.875H3.75V3.125ZM5 4.375V5.625H7.5V4.375H5ZM8.75 4.375V5.625H11.25V4.375H8.75ZM12.5 4.375V5.625H15V4.375H12.5ZM5 6.875V8.125H7.5V6.875H5ZM8.75 6.875V8.125H11.25V6.875H8.75ZM12.5 6.875V8.125H15V6.875H12.5ZM5 9.375V10.625H7.5V9.375H5ZM8.75 9.375V10.625H11.25V9.375H8.75ZM12.5 9.375V10.625H15V9.375H12.5ZM5 11.875V13.125H7.5V11.875H5ZM8.75 11.875V13.125H11.25V11.875H8.75ZM12.5 11.875V13.125H15V11.875H12.5ZM5 14.375V15.625H7.5V14.375H5ZM12.5 14.375V15.625H15V14.375H12.5Z"
                                fill="#96A5B8" />
                        </svg>
                    </span>
                    <select 
                        class="form-select js-example-basic-single select2 select-2"
                        aria-label="Default select example" name="department" >
                        <option selected value="">Please select </option>
                        <option value="1">one</option>
                        <option value="2">two</option>
                        <option value="1">three</option>
                    </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 btn_clear">Clear</button>
            </div>
        </div>
</div>
<!-- filter canva rightside CostCode-->

@endsection
@section('script')
      {{-- <script src="{{ url('js/select2.init.js') }}"></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="{{ url('js/select2@4.1.0/select2.min.js') }}"></script>
        
        <script src="{{ url('js/jquery-validate-1.19.3/jquery-validate.min.js') }}"></script>
        {{-- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.20/dist/sweetalert2.all.min.js"></script> --}}

        <script>
    
    window.userPermissions = @json([
    'canCostcodeEdit' => auth()->user()->can('costcode edit'),
    'canCostcodeDelete' => auth()->user()->can('costcode delete'),  // ✅ Missing comma added
    
]);
</script>

    <script>


    $(document).ready(function () {
    let table = $('#cost_code_list_table').DataTable({
        responsive: false,
        processing: true,
        serverSide: true,
        searching: true,
        info: true,
        lengthChange: true,
        scrollX: true,
        scrollCollapse: true,
        pagingType: "simple_numbers",
        language: {
             "paginate": {
                 "previous": '<span class="fa fa-chevron-left"></span>',
                 "next": '<span class="fa fa-chevron-right"></span>',
             },
             "search": ""  
         },
        ajax: {
            url: "{{ route('costcode.list') }}", // Route to fetch data
            type: "GET"
        },
        columns: [
            { 
                data: 'id',
                render: function (data, type, row) {
                    return `<div class="form-check ctl-tab-hdr-che">
                                <input class="form-check-input fs-14 cursor-pointer individual" type="checkbox" name="checkAll" value="${row.id}">
                            </div>`;
                },
                orderable: false
            },
            { 
                data: 'created_at', 
                render: function (data) {
                    return data ? new Date(data).toLocaleDateString() : 'N/A';
                } 
            },
            {    
                data: 'cost_code_name',  
                render: function (data) {
                return `<div class="url-text">${data}</div>`;
                }
            },
            { data: 'costcode_code' },
            // { 
            //     data: 'id', 
            //     render: function (data, type, row) {
            //         return `<div class="d-flex gap-1">
            //                     @can('costcode edit')
            //                     <button class="btn_edit_icon costedit-btn" data-id="${row.id}" data-toggle="tooltip" title="Edit" data-bs-placement="top"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12" fill="none" >
            //                                 <path fill-rule="evenodd" clip-rule="evenodd" d="M9.74815 0.492402C9.23242 -0.0211792 8.39657 -0.0208645 7.88123 0.493105L3.8954 4.46904C3.57661 4.78698 3.38918 5.2126 3.37022 5.66166L3.31348 7.005C3.28764 7.61668 3.77824 8.12665 4.39257 8.12667L5.71422 8.12673C6.19945 8.12675 6.66415 7.93155 7.00296 7.58538L10.9567 3.53329C11.4614 3.0176 11.4561 2.19326 10.9448 1.68406L9.74815 0.492402ZM8.39058 1.00033C8.62483 0.766712 9.00476 0.766569 9.23918 1.00002L10.4358 2.19167C10.6683 2.42313 10.6707 2.79782 10.4412 3.03223L9.64718 3.84355L7.59192 1.79687L8.39058 1.00033ZM7.08295 2.30448L4.40475 4.97627C4.21348 5.16704 4.10102 5.4224 4.08964 5.69185L4.0329 7.03518C4.02429 7.23908 4.18782 7.40906 4.3926 7.40907L5.71425 7.40913C6.00539 7.40914 6.28421 7.29202 6.48749 7.08432L9.14437 4.35729L7.08295 2.30448Z" fill="#1E66E9"/>
            //                                 <path d="M10.256 5.98834V8.12683C10.256 9.60314 9.05919 10.7999 7.58288 10.7999H3.30591C1.8296 10.7999 0.632812 9.60314 0.632812 8.12683V3.84986C0.632812 2.37355 1.8296 1.17676 3.30592 1.17676H5.4444" stroke="#1E66E9" stroke-width="0.801931" stroke-linecap="round"/>
            //                                 </svg>
            //                     </button>
            //                     @endcan
            //                     @can('costcode delete')
            //                     <button class="btn_delete_icon costdel-btn" data-id="${row.id}" data-toggle="tooltip" title="Delete" data-bs-placement="top"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 11 11" fill="none">
            //                         <g clip-path="url(#clip0_281_10181)">
            //                             <path d="M10.3068 2.39336C10.3068 1.83498 9.8525 1.38071 9.29412 1.38071H7.54533V1.18519C7.54533 0.531695 7.01364 0 6.36008 0H4.6342C3.98065 0 3.44895 0.531695 3.44895 1.18521V1.38074H1.70012C1.14177 1.38074 0.6875 1.835 0.6875 2.39338C0.6875 2.83907 0.977066 3.21817 1.37786 3.35311V9.81477C1.37786 10.4683 1.90955 11 2.56309 11H8.43118C9.08471 11 9.61638 10.4683 9.61638 9.81477V3.35311C10.0172 3.21817 10.3068 2.83907 10.3068 2.39336ZM4.09348 1.18521C4.09348 0.88709 4.33606 0.644531 4.6342 0.644531H6.36008C6.65824 0.644531 6.9008 0.88709 6.9008 1.18521V1.38074H4.09348V1.18521ZM8.43118 10.3555H2.56311C2.26497 10.3555 2.02241 10.1129 2.02241 9.81477V3.40598H8.97187V9.81477C8.97185 10.1129 8.72932 10.3555 8.43118 10.3555ZM9.29412 2.76145H1.70012C1.49716 2.76145 1.33203 2.59632 1.33203 2.39336C1.33203 2.19038 1.49716 2.02525 1.70012 2.02525H9.29412C9.4971 2.02525 9.66225 2.19038 9.66225 2.39336C9.66225 2.59634 9.49712 2.76145 9.29412 2.76145Z" fill="#F04438"/>
            //                             <path d="M3.5957 4.14258C3.41773 4.14258 3.27344 4.28687 3.27344 4.46484V9.29741C3.27344 9.47539 3.41773 9.61968 3.5957 9.61968C3.77368 9.61968 3.91797 9.47539 3.91797 9.29741V4.46484C3.91797 4.28687 3.77368 4.14258 3.5957 4.14258Z" fill="#F04438"/>
            //                             <path d="M5.49414 4.14258C5.31616 4.14258 5.17188 4.28687 5.17188 4.46484V9.29741C5.17188 9.47539 5.31616 9.61968 5.49414 9.61968C5.67212 9.61968 5.81641 9.47539 5.81641 9.29741V4.46484C5.81641 4.28687 5.67212 4.14258 5.49414 4.14258Z" fill="#F04438"/>
            //                             <path d="M7.39258 4.14258C7.2146 4.14258 7.07031 4.28687 7.07031 4.46484V9.29741C7.07031 9.47539 7.2146 9.61968 7.39258 9.61968C7.57055 9.61968 7.71484 9.47539 7.71484 9.29741V4.46484C7.71484 4.28687 7.57055 4.14258 7.39258 4.14258Z" fill="#F04438"/>
            //                         </g>
            //                         <defs>
            //                             <clipPath id="clip0_281_10181">
            //                             <rect width="11" height="11" fill="white"/>
            //                             </clipPath>
            //                         </defs>
            //                         </svg>
            //                     </button>
            //                     @endcan
            //                 </div>`;
            //     },
            //     orderable: false
            // }
            { 
    data: 'id', 
    render: function (data, type, row) {
        return `<div class="dropdown d-inline-block ctl-pos-revert">
                                <button class="btn dropdown ps-0 pe-0 h-auto" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <svg class="align-middle" xmlns="http://www.w3.org/2000/svg" width="4" height="12" viewBox="0 0 4 12" fill="none">
                                        <path d="M2 9.125C2.69036 9.125 3.25 9.68464 3.25 10.375C3.25 11.0654 2.69036 11.625 2 11.625C1.30964 11.625 0.75 11.0654 0.75 10.375C0.75 9.68464 1.30964 9.125 2 9.125Z" fill="#212529"/>
                                        <path d="M2 4.75C2.69036 4.75 3.25 5.30964 3.25 6C3.25 6.69036 2.69036 7.25 2 7.25C1.30964 7.25 0.75 6.69036 0.75 6C0.75 5.30964 1.30964 4.75 2 4.75Z" fill="#212529"/>
                                        <path d="M2 0.375C2.69036 0.375 3.25 0.934644 3.25 1.625C3.25 2.31536 2.69036 2.875 2 2.875C1.30964 2.875 0.75 2.31536 0.75 1.625C0.75 0.934644 1.30964 0.375 2 0.375Z" fill="#212529"/>
                                    </svg>
                                </button>

                                <ul class="dropdown-menu table_action dropdown-menu-end justify-content-start flex-column widthfitcontent actionblock-custom">
                                    ${window.userPermissions.canCostcodeEdit ? `
                                        <li>
                                            <a href="javascript:void(0)" class="edit-item-btn d-flex align-items-center gap-2 costedit-btn"  data-id="${row.id}" aria-label="Edit">
                                                <span>
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20" fill="none">
                                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.11965 1.0415H10.8803C12.4118 1.04149 13.6248 1.04148 14.5742 1.16912C15.5512 1.30047 16.342 1.57724 16.9656 2.20087C17.2097 2.44495 17.2097 2.84068 16.9656 3.08476C16.7216 3.32883 16.3258 3.32883 16.0817 3.08476C15.7291 2.73208 15.246 2.52069 14.4076 2.40797C13.5512 2.29283 12.4224 2.2915 10.8333 2.2915H9.16667C7.57765 2.2915 6.44876 2.29283 5.59237 2.40797C4.75397 2.52069 4.27093 2.73208 3.91825 3.08476C3.56558 3.43743 3.35419 3.92047 3.24147 4.75888C3.12633 5.61526 3.125 6.74415 3.125 8.33317V11.6665C3.125 13.2555 3.12633 14.3844 3.24147 15.2408C3.35419 16.0792 3.56558 16.5622 3.91825 16.9149C4.27093 17.2676 4.75397 17.479 5.59237 17.5917C6.44876 17.7068 7.57765 17.7082 9.16667 17.7082H10.8333C12.4224 17.7082 13.5512 17.7068 14.4076 17.5917C15.246 17.479 15.7291 17.2676 16.0817 16.9149C16.6617 16.335 16.8373 15.4339 16.8678 13.3241C16.8728 12.979 17.1567 12.7032 17.5018 12.7082C17.8469 12.7132 18.1227 12.9971 18.1177 13.3422C18.0884 15.3651 17.9575 16.8069 16.9656 17.7988C16.342 18.4224 15.5512 18.6992 14.5742 18.8306C13.6248 18.9582 12.4118 18.9582 10.8803 18.9582H9.11966C7.58819 18.9582 6.37516 18.9582 5.42581 18.8306C4.4488 18.6992 3.65801 18.4224 3.03437 17.7988C2.41073 17.1752 2.13397 16.3844 2.00261 15.4074C1.87498 14.458 1.87499 13.245 1.875 11.7135V8.28616C1.87499 6.75469 1.87498 5.54166 2.00261 4.59232C2.13397 3.6153 2.41073 2.82451 3.03437 2.20087C3.65801 1.57724 4.4488 1.30047 5.42581 1.16912C6.37516 1.04148 7.58819 1.04149 9.11965 1.0415ZM15.0943 5.87114C15.9782 4.98718 17.4114 4.98718 18.2954 5.87114C19.1793 6.75509 19.1793 8.18826 18.2954 9.07222L14.3326 13.035C14.117 13.2506 13.9712 13.3965 13.8078 13.5239C13.6156 13.6739 13.4077 13.8024 13.1876 13.9072C13.0006 13.9964 12.8049 14.0616 12.5156 14.158L10.7792 14.7367C10.3959 14.8645 9.97323 14.7648 9.68749 14.479C9.40175 14.1933 9.30197 13.7706 9.42976 13.3873L9.99689 11.6859C10.0008 11.6741 10.0047 11.6624 10.0085 11.6509C10.1049 11.3616 10.1701 11.1659 10.2593 10.9789C10.3641 10.7589 10.4927 10.5509 10.6426 10.3587C10.77 10.1954 10.9159 10.0495 11.1315 9.83393C11.1401 9.82535 11.1488 9.81666 11.1576 9.80785L15.0943 5.87114ZM17.4115 6.75502C17.0157 6.35922 16.374 6.35922 15.9782 6.75502L15.8267 6.90651C15.8349 6.93441 15.8443 6.96409 15.8552 6.99527C15.9335 7.22121 16.0823 7.52006 16.3644 7.80214C16.6464 8.08421 16.9453 8.23296 17.1712 8.31135C17.2024 8.32217 17.2321 8.3316 17.26 8.33982L17.4115 8.18834C17.8073 7.79254 17.8073 7.15082 17.4115 6.75502ZM16.3054 9.29446C16.0405 9.15532 15.7544 8.95995 15.4805 8.68602C15.2066 8.41208 15.0112 8.12605 14.872 7.86115L12.0415 10.6917C11.7906 10.9426 11.7025 11.0322 11.6282 11.1275C11.5341 11.2481 11.4535 11.3786 11.3877 11.5167C11.3357 11.6258 11.295 11.7445 11.1827 12.0812L10.8492 13.0819L11.0846 13.3173L12.0854 12.9838C12.422 12.8716 12.5408 12.8308 12.6499 12.7788C12.7879 12.713 12.9184 12.6324 13.039 12.5383C13.1343 12.464 13.2239 12.376 13.4748 12.1251L16.3054 9.29446ZM6.04167 7.49984C6.04167 7.15466 6.32149 6.87484 6.66667 6.87484H12.0833C12.4285 6.87484 12.7083 7.15466 12.7083 7.49984C12.7083 7.84502 12.4285 8.12484 12.0833 8.12484H6.66667C6.32149 8.12484 6.04167 7.84502 6.04167 7.49984ZM6.04167 10.8332C6.04167 10.488 6.32149 10.2082 6.66667 10.2082H8.75C9.09518 10.2082 9.375 10.488 9.375 10.8332C9.375 11.1783 9.09518 11.4582 8.75 11.4582H6.66667C6.32149 11.4582 6.04167 11.1783 6.04167 10.8332ZM6.04167 14.1665C6.04167 13.8213 6.32149 13.5415 6.66667 13.5415H7.91667C8.26184 13.5415 8.54167 13.8213 8.54167 14.1665C8.54167 14.5117 8.26184 14.7915 7.91667 14.7915H6.66667C6.32149 14.7915 6.04167 14.5117 6.04167 14.1665Z" fill="#525866"></path>
                                                        </svg>
                                                        </span> 
                                                        <span class="fs-12 font-weight-500 fc-secondary ctledit">Edit</span>
                                            </a>
                                        </li>` : ''}

                                    ${window.userPermissions.canCostcodeDelete ? `
                                        <li>
                                            <a class="remove-item-btn d-flex align-items-center gap-2 costdel-btn" href="javascript:void(0);"   data-id="${row.id}" aria-label="Delete">
                                                <span>
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20" fill="none">
                                                            <path d="M9.99995 2.2915C9.18454 2.2915 8.48918 2.81236 8.23148 3.54145C8.11645 3.8669 7.75937 4.03747 7.43393 3.92245C7.10848 3.80742 6.9379 3.45034 7.05293 3.12489C7.48163 1.91199 8.63833 1.0415 9.99995 1.0415C11.3616 1.0415 12.5183 1.91199 12.947 3.12489C13.062 3.45034 12.8914 3.80742 12.566 3.92245C12.2405 4.03747 11.8834 3.8669 11.7684 3.54145C11.5107 2.81236 10.8154 2.2915 9.99995 2.2915Z" fill="#525866"/>
                                                            <path d="M2.29159 4.99984C2.29159 4.65466 2.57141 4.37484 2.91659 4.37484H17.0833C17.4285 4.37484 17.7083 4.65466 17.7083 4.99984C17.7083 5.34502 17.4285 5.62484 17.0833 5.62484H2.91659C2.57141 5.62484 2.29159 5.34502 2.29159 4.99984Z" fill="#525866"/>
                                                            <path d="M4.92916 7.04159C4.9062 6.69718 4.60839 6.43659 4.26397 6.45955C3.91956 6.48251 3.65897 6.78033 3.68193 7.12474L4.06814 12.9179C4.13938 13.9868 4.19693 14.8503 4.33191 15.5278C4.47224 16.2322 4.71093 16.8206 5.20392 17.2819C5.69692 17.7431 6.29987 17.9421 7.01208 18.0353C7.69712 18.1249 8.56249 18.1249 9.63381 18.1248H10.3662C11.4375 18.1249 12.3029 18.1249 12.9879 18.0353C13.7001 17.9421 14.3031 17.7431 14.7961 17.2819C15.2891 16.8206 15.5277 16.2322 15.6681 15.5278C15.803 14.8503 15.8606 13.9868 15.9318 12.9179L16.318 7.12474C16.341 6.78033 16.0804 6.48251 15.736 6.45955C15.3916 6.43659 15.0938 6.69718 15.0708 7.04159L14.6875 12.7909C14.6127 13.9141 14.5593 14.6956 14.4422 15.2836C14.3285 15.854 14.1699 16.1559 13.9421 16.369C13.7142 16.5822 13.4024 16.7204 12.8258 16.7958C12.2313 16.8736 11.4479 16.8748 10.3222 16.8748H9.67776C8.55205 16.8748 7.76872 16.8736 7.17421 16.7958C6.59755 16.7204 6.28575 16.5822 6.0579 16.369C5.83006 16.1559 5.67145 15.854 5.55782 15.2836C5.44068 14.6956 5.38733 13.9141 5.31245 12.7909L4.92916 7.04159Z" fill="#525866"/>
                                                            <path d="M7.85447 8.54461C8.19794 8.51026 8.50421 8.76085 8.53856 9.10431L8.95523 13.271C8.98957 13.6144 8.73899 13.9207 8.39552 13.9551C8.05206 13.9894 7.74578 13.7388 7.71143 13.3954L7.29476 9.22869C7.26042 8.88523 7.51101 8.57895 7.85447 8.54461Z" fill="#525866"/>
                                                            <path d="M12.7052 9.22869C12.7396 8.88523 12.489 8.57895 12.1455 8.54461C11.8021 8.51026 11.4958 8.76085 11.4614 9.10431L11.0448 13.271C11.0104 13.6144 11.261 13.9207 11.6045 13.9551C11.9479 13.9894 12.2542 13.7388 12.2886 13.3954L12.7052 9.22869Z" fill="#525866"/>
                                                        </svg>
                                                    </span>
                                                    <span class="fs-12 font-weight-500 fc-secondary ctledit">Delete</span>
                                            </a>
                                        </li>` : ''}
                                </ul>
                            </div>`;
    },
    orderable: false
}
        ],
        dom: '<"top"f>rt<"footer-content bottom d-flex justify-content-between align-items-center flex-wrap mt-3 gap-2"<"infoDiv"i><"paginateDiv"p><"lengthDiv"l>><"clear">',
         initComplete: function () {
                $('#cost_code_list_table_filter input').attr('placeholder', 'Search...');
                $('#cost_code_list_table_filter').parent().removeClass('col-md-6 ');
                $('#cost_code_list_table_filter').parent().addClass('ps-lg-1');
                $('#cost_code_list_table_filter').parent().parent().addClass('datatable_search ');
                $('#cost_code_list_table').parent().addClass('col-sm-12 datatable_margin_top scroll_box ');
                var svgIcon = '<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.3059 2.93994C6.5142 2.93994 3.44043 6.01372 3.44043 9.80541C3.44043 13.5971 6.5142 16.6709 10.3059 16.6709C14.0976 16.6709 17.1714 13.5971 17.1714 9.80541C17.1714 6.01372 14.0976 2.93994 10.3059 2.93994ZM2.19043 9.80541C2.19043 5.32336 5.82385 1.68994 10.3059 1.68994C14.7879 1.68994 18.4214 5.32336 18.4214 9.80541C18.4214 14.2875 14.7879 17.9209 10.3059 17.9209C5.82385 17.9209 2.19043 14.2875 2.19043 9.80541Z" fill="#111827"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15.0731 14.9628C15.3169 14.7184 15.7126 14.7179 15.957 14.9617L18.8937 17.8907C19.1381 18.1345 19.1386 18.5302 18.8949 18.7746C18.6511 19.019 18.2554 19.0195 18.011 18.7758L15.0743 15.8467C14.8299 15.6029 14.8294 15.2072 15.0731 14.9628Z" fill="#111827"/></svg>';
                $('#cost_code_list_table_filter input').before(svgIcon);
                $("#cost_code_list_table_length").parent().addClass('datatable_margin_entires');
            }
    });
    $('.dataTables_filter').hide();
    $('#search-input').on('keyup', function () { 
       $('#cost_code_list_table').DataTable().search(this.value).draw();
    });
});
    $(document).ready(function () {
    $("#costform").validate({
        errorElement: "span",
        errorClass: "text-danger",
        rules: {
            cost_code_name: {
                required: true,
                minlength: 3,
            },
            costcode_code: {
                required: true,
            },
            description: {
                required: false,
                minlength: 5,
            },
        },
        messages: {
            cost_code_name: {
                required: "Please Enter the costcode name",
                minlength: "Cost Code Name must be at least 3 characters long",
            },
            costcode_code: {
                required: "Please Enter the costcode code",
            },
        },
        errorPlacement: function (error, element) {
            if (element.is("textarea") || element.is("select")) {
                error.insertAfter(element);
            } else {
                error.addClass("invalid-feedback");
                error.insertAfter(element);
            }
        },
        submitHandler: function (form) {
            let cost_codeId = $("#cost_code_id").val().trim();
            let formData = new FormData(form);
            let url;

            if (cost_codeId === "") {
                // Add new Cost Code
                url = "{{ route('cost-code.store') }}";
            } else {
                // Update Cost Code
                url = "{{ route('cost-code.update', ':id') }}".replace(":id", cost_codeId);
            }

            $("#costform").attr("action", url);
            $.ajax({
                url: url,
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
                success: function (response) {
                    if (response.success) {
                        Swal.fire({
                            title: "Success!",
                            text: response.success,
                            icon: "success",
                            confirmButtonText: "OK",
                        }).then(() => {
                            $("#costform")[0].reset();
                            $("#cost_code_id").val("");
                            $("#cost_codeModal").modal("hide");
                            location.reload();
                        });
                    } else {
                        Swal.fire({
                            title: "Error!",
                            text: "Something went wrong. Please try again.",
                            icon: "error",
                            confirmButtonText: "OK",
                        });
                    }
                },
                error: function (xhr) {
                    let errors = xhr.responseJSON?.errors;
                    let errorMessage = "An error occurred. Please try again.";
                    if (errors) {
                        errorMessage = Object.values(errors).map((error) => error[0]).join("\n");
                    }
                    Swal.fire({
                        title: "Error!",
                        text: errorMessage,
                        icon: "warning",
                        confirmButtonText: "OK",
                    });
                },
            });
            return false;
        },
    });
    // Reset form when Add button is clicked
    $("#addCostCodeBtn").click(function () {
        $("#costform")[0].reset();
        $("#cost_code_id").val("");
        $("#costform").validate().resetForm(); // Reset validation messages
        $(".text-danger").html(""); // Clear any error text
        $("#cost_codeModal").modal("show");
    });
    // Reset form on modal close
    $("#cost_codeModal").on("hidden.bs.modal", function () {
        $("#costform")[0].reset();
        $("#cost_code_id").val("");
        $("#costform").validate().resetForm();
    });
    // Open Edit CostCode Modal
    $(document).on("click",'.costedit-btn',function(e){
    // $(".costedit-btn").on("click", function (e) {
        e.preventDefault();
        var cost_codeId = $(this).data("id");
        $("#costform").validate().resetForm();
        $(".text-danger").html(""); 
        $.ajax({
            url: "{{ route('cost-code.edit', '') }}/" + cost_codeId,
            method: "GET",
            success: function (response) {
                $("#cost_code_name").val(response.cost_code_name);
                $("#costcode_code").val(response.costcode_code);
                $("#description").val(response.description);
                $("#cost_code_id").val(cost_codeId);
                $("#editModal").modal("show");
                $('.modal_popup_header').text('Edit Cost Code');
                $('.edit_btn').text('Update');
            },
            error: function () {
                alert("Something went wrong, please try again.");
            },
        });
    });
});
    $("#addCostModalBtn").click(function(){
        $('#editModal').modal('show');
        $('#costform')[0].reset();
        $('#costform').validate().resetForm();
        $('.is-invalid').removeClass('is-invalid');
   });
    

    //delete using delete icon
    $(document).on('click', '.costdel-btn', function (e) {
        e.preventDefault();
    
        let selectedIds = []; 
        let cost_codeId = $(this).data('id'); 

        // Collect selected department IDs from checkboxes
        $('.individual:checked').each(function () {
            selectedIds.push($(this).val()); 
        });

        if (selectedIds.length === 0 && !cost_codeId) {
            Swal.fire({
                title: "Warning",
                text: "Please select at least one cost code to delete.",
                icon: "warning",
                confirmButtonText: "OK"
            });
            return;
        }
        if (cost_codeId && selectedIds.length === 0) {
            selectedIds.push(cost_codeId);
        }
        let message = selectedIds.length > 1
            ? "Are you sure you want to delete the selected cost codes?"
            : "Are you sure you want to delete this cost code?";
        Swal.fire({
            title: "Confirm Deletion",
            text: message,
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes, delete",
            cancelButtonText: "Cancel"
        }).then((result) => {
            if (result.isConfirmed) {
                let token = document.getElementsByName("_token")[0].value;
                $.ajax({
                    url: '{{ route('cost-code.multiDelete') }}',
                    headers: { "X-CSRF-TOKEN": token },
                    type: 'POST',
                    data: {
                        cost_code_ids: selectedIds, 
                        is_delete: 1 
                    },
                    beforeSend: function () {
                        $(".costdel-btn").prop("disabled", true); 
                    },
                    success: function (response) {
                        if (response.success) {
                            Swal.fire({
                                title: "Success!",
                                text: "cost code(s) deleted successfully!",
                                icon: "success",
                                confirmButtonText: "OK"
                            }).then(() => {
                                location.reload(); 
                            });
                        } else {
                            Swal.fire({
                                title: "Error!",
                                text: "Error deleting cost codes.",
                                icon: "error",
                                confirmButtonText: "OK"
                            });
                        }
                    },
                    error: function (xhr) {
                        console.log(xhr.responseText);
                        Swal.fire({
                            title: "Error!",
                            text: "Something went wrong! Please try again.",
                            icon: "error",
                            confirmButtonText: "OK"
                        });
                    },
                    complete: function () {
                        $(".costdel-btn").prop("disabled", false); 
                    }
                });
            }
        });
    });

    //delete using dropdown
    $(document).on('change', '#bulk-action', function () {
        let action = $(this).val(); 

        if (action === "delete") {
            let selectedIds = [];

        // Collect all selected checkboxes
        $('.individual:checked').each(function () {
            selectedIds.push($(this).val());
        });

        if (selectedIds.length === 0) {
            Swal.fire({
                title: "Warning",
                text: "Please select at least one cost code to delete.",
                icon: "warning",
                confirmButtonText: "OK"
            });
            $(this).val(""); // Reset dropdown selection
            return;
        }

        let message = selectedIds.length > 1
            ? "Are you sure you want to delete the selected cost codes?"
            : "Are you sure you want to delete this cost code?";

        Swal.fire({
            title: "Confirm Deletion",
            text: message,
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes, delete",
            cancelButtonText: "Cancel"
        }).then((result) => {
            if (result.isConfirmed) {
                let token = document.getElementsByName("_token")[0].value;
                $.ajax({
                    url: '{{ route('cost-code.multiDelete') }}',
                    headers: { "X-CSRF-TOKEN": token },
                    type: 'POST',
                    data: {
                        cost_code_ids: selectedIds, 
                        is_delete: 1 
                    },
                    beforeSend: function () {
                        $("#bulk-action").prop("disabled", true);
                    },
                    success: function (response) {
                        if (response.success) {
                            Swal.fire({
                                title: "Success!",
                                text: "Cost code(s) deleted successfully!",
                                icon: "success",
                                confirmButtonText: "OK"
                            }).then(() => {
                                location.reload();
                            });
                        } else {
                            Swal.fire({
                                title: "Error!",
                                text: "Error deleting cost codes.",
                                icon: "error",
                                confirmButtonText: "OK"
                            });
                        }
                    },
                    error: function (xhr) {
                        console.log(xhr.responseText);
                        Swal.fire({
                            title: "Error!",
                            text: "Something went wrong! Please try again.",
                            icon: "error",
                            confirmButtonText: "OK"
                        });
                    },
                    complete: function () {
                        $("#bulk-action").prop("disabled", false);
                        $("#bulk-action").val(""); 
                    }
                });
            } else {
                $("#bulk-action").val(""); 
            }
        });
        }
    });


    $(document).ready(function () {
        $('.close, .discard').on('click', function () {
            // Reset form fields
            $('#costform')[0].reset();
            $('#cost_code_id').val('');
            $('#cost_code_name').val('');
            $('#costcode_code').val('');
            $('#description').val('');
            // Close the modal
            $('#editModal').modal('hide');
            $('#costform').validate().resetForm();
            $('.is-invalid').removeClass('is-invalid');
        });
    });
  
    $(document).on("change", ".individual", function () {
         if ($(".individual:checked").length === $(".individual").length) {
            $("#checkAll").prop("checked", true); 
         } else {
            $("#checkAll").prop("checked", false); 
         }
      });
      $(document).on("click", "#checkAll", function () {
         $(".individual").prop("checked", $(this).prop("checked"));
      });

        $(".check_All").click(function(){
            $(".individual").prop("checked",$(this).prop("checked"));
        });   
        $(".check_Allone").click(function(){
            $(".individualone").prop("checked",$(this).prop("checked"));
        });   
    // $(document).ready(function() {
    //     $('.dataTables_wrapper .bottom').addClass('row');
    //     $('.dataTables_wrapper .bottom .dataTables_length').addClass('col-md-5 mt-1');
    //     $('.dataTables_wrapper .bottom .dataTables_paginate').addClass('col-md-6 mt-1');
    // });
    // $(document).ready(function() {
    //     $('.dataTables_wrapper .row:nth-child(3) div:nth-child(2)').removeClass('col-md-7');
    //     $('.dataTables_wrapper .row:nth-child(3) div:nth-child(2)').addClass('col-md-12 mt-3');
    // });
    $(document).ready(function() {
        $('.js-example-basic-single').select2();
        $('.select-2').each(function () {
                $(this).select2({
                    dropdownParent: $(this).parent(),
                });
            });
    });
    
    $(function () {
    setTimeout(function () {
        $('[data-toggle="tooltip"]').tooltip();
    }, 1000); 

    $(".dropdown").each(function () {
        let dropdown = $(this);
        dropdown.find(".dropdown-item").click(function (event) {
            event.preventDefault();
            let selectedText = $(this).text();
            let button = dropdown.find(".dropdown-toggle");
            let iconHtml = button.find("svg").prop("outerHTML");
            if (button.find("span.selected-text").length === 0) {
                button.append(' <span class="selected-text"></span>');
            }
            button.find("span.selected-text").text(selectedText);
            button.addClass("selected");
            dropdown.find(".dropdown-item").removeClass("selected-option").find(".tick-mark").remove();
            $(this).addClass("selected-option").append(`
                <span class="tick-mark">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20" fill="none">
                        <path d="M16.6666 5L7.49992 14.1667L3.33325 10" stroke="#1F5EFF" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </span>
            `);
        });
    });
});
    

</script>
@endsection