@extends('ui-common.layouts.master')
@section('title')
@lang('Incident Management Report')
@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" />
<!-- SweetAlert2 CSS -->
<link href="{{ url('css/sweetalert-2@11.0.20/sweetalert2.min.css') }}" rel="stylesheet">
<link href="{{ url('css/equipment/equipment.index.css') }}" rel="stylesheet" />

@endsection
@section('content')
@component('tenants.components.breadcrumb')
@slot('li_1')
Incident Management Report
@endslot
@slot('title')
Incident Management Report
@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 my-auto d-flex gap-2 mb-3">
                        <div class="ctl-pag-tit-con mb-2">
                            Incident Management Report
                        </div>
                        <!-- <button class="btn_delete_icon" data-toggle="tooltip" data-bs-placement="top" aria-label="Dete"
                            data-bs-original-title="Delete">
                            <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>
                                    <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>
                                    <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>
                                    <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"></path>
                                </g>
                                <defs>
                                    <clipPath id="clip0_281_10181">
                                        <rect width="11" height="11" fill="white"></rect>
                                    </clipPath>
                                </defs>
                            </svg>
                        </button> -->
                    </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" type="text" name="search" class="form-control"
                                placeholder="Search" aria-label="search" aria-describedby="addon-wrapping">
                        </div>
                    </div>
                    <div class="p-0 filter_list w-145">
                        <div class="form-group">
                            <div class="input-field">
                                <span class="icon list_icons">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"
                                        fill="none">
                                        <path
                                            d="M10.625 8.75C10.9702 8.75 11.25 8.47018 11.25 8.125C11.25 7.77982 10.9702 7.5 10.625 7.5C10.2798 7.5 10 7.77982 10 8.125C10 8.47018 10.2798 8.75 10.625 8.75Z"
                                            fill="#868C98"></path>
                                        <path
                                            d="M10.625 11.25C10.9702 11.25 11.25 10.9702 11.25 10.625C11.25 10.2798 10.9702 10 10.625 10C10.2798 10 10 10.2798 10 10.625C10 10.9702 10.2798 11.25 10.625 11.25Z"
                                            fill="#868C98"></path>
                                        <path
                                            d="M8.125 8.125C8.125 8.47018 7.84518 8.75 7.5 8.75C7.15482 8.75 6.875 8.47018 6.875 8.125C6.875 7.77982 7.15482 7.5 7.5 7.5C7.84518 7.5 8.125 7.77982 8.125 8.125Z"
                                            fill="#868C98"></path>
                                        <path
                                            d="M8.125 10.625C8.125 10.9702 7.84518 11.25 7.5 11.25C7.15482 11.25 6.875 10.9702 6.875 10.625C6.875 10.2798 7.15482 10 7.5 10C7.84518 10 8.125 10.2798 8.125 10.625Z"
                                            fill="#868C98"></path>
                                        <path
                                            d="M4.375 8.75C4.72018 8.75 5 8.47018 5 8.125C5 7.77982 4.72018 7.5 4.375 7.5C4.02982 7.5 3.75 7.77982 3.75 8.125C3.75 8.47018 4.02982 8.75 4.375 8.75Z"
                                            fill="#868C98"></path>
                                        <path
                                            d="M4.375 11.25C4.72018 11.25 5 10.9702 5 10.625C5 10.2798 4.72018 10 4.375 10C4.02982 10 3.75 10.2798 3.75 10.625C3.75 10.9702 4.02982 11.25 4.375 11.25Z"
                                            fill="#868C98"></path>
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M4.375 1.09375C4.63388 1.09375 4.84375 1.30362 4.84375 1.5625V2.0392C5.2575 2.03124 5.71333 2.03125 6.21466 2.03125H8.78526C9.2866 2.03125 9.7425 2.03124 10.1563 2.0392V1.5625C10.1563 1.30362 10.3661 1.09375 10.625 1.09375C10.8839 1.09375 11.0938 1.30362 11.0938 1.5625V2.07943C11.2562 2.09182 11.4101 2.10739 11.5556 2.12696C12.2884 2.22548 12.8815 2.43305 13.3492 2.90078C13.817 3.3685 14.0245 3.9616 14.123 4.69436C14.2188 5.40636 14.2188 6.31613 14.2188 7.46471V8.78526C14.2188 9.93384 14.2188 10.8436 14.123 11.5556C14.0245 12.2884 13.817 12.8815 13.3492 13.3492C12.8815 13.8169 12.2884 14.0245 11.5556 14.123C10.8436 14.2188 9.93387 14.2188 8.78529 14.2188H6.21474C5.06616 14.2188 4.15637 14.2188 3.44436 14.123C2.7116 14.0245 2.1185 13.8169 1.65078 13.3492C1.18305 12.8815 0.975477 12.2884 0.876959 11.5556C0.781233 10.8436 0.78124 9.93386 0.78125 8.78526V7.46474C0.78124 6.31614 0.781233 5.40637 0.876959 4.69436C0.975477 3.9616 1.18305 3.3685 1.65078 2.90078C2.1185 2.43305 2.7116 2.22548 3.44436 2.12696C3.58994 2.10739 3.74379 2.09182 3.90625 2.07943V1.5625C3.90625 1.30362 4.11612 1.09375 4.375 1.09375ZM3.56928 3.0561C2.94048 3.14064 2.5782 3.29918 2.31369 3.56369C2.04918 3.8282 1.89064 4.19047 1.8061 4.81928C1.79178 4.92577 1.77981 5.03788 1.7698 5.15625H13.2302C13.2202 5.03788 13.2082 4.92577 13.1939 4.81928C13.1094 4.19047 12.9508 3.8282 12.6863 3.56369C12.4218 3.29918 12.0595 3.14064 11.4307 3.0561C10.7884 2.96975 9.94176 2.96875 8.75 2.96875H6.25C5.05824 2.96875 4.21157 2.96975 3.56928 3.0561ZM1.71875 7.5C1.71875 6.96624 1.71895 6.50171 1.72693 6.09375H13.2731C13.2811 6.50171 13.2813 6.96624 13.2813 7.5V8.75C13.2813 9.94176 13.2803 10.7884 13.1939 11.4307C13.1094 12.0595 12.9508 12.4218 12.6863 12.6863C12.4218 12.9508 12.0595 13.1094 11.4307 13.1939C10.7884 13.2803 9.94176 13.2812 8.75 13.2812H6.25C5.05824 13.2812 4.21157 13.2803 3.56928 13.1939C2.94048 13.1094 2.5782 12.9508 2.31369 12.6863C2.04918 12.4218 1.89064 12.0595 1.8061 11.4307C1.71975 10.7884 1.71875 9.94176 1.71875 8.75V7.5Z"
                                            fill="#868C98"></path>
                                    </svg>
                                </span>
                                <input type="text" data-provider="flatpickr" data-date-format="m/d/Y"
                                    class="form-control flatpickr-input" id="date_range" name="date_range"
                                    placeholder="Date " value="">
                            </div>
                        </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"> Incident Type</span>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <li><a class="dropdown-item" href="#">Personal Injury</a></li>
                            <li><a class="dropdown-item" href="#">Vehicle Accident</a></li>
                            <li><a class="dropdown-item" href="#">Utility Strike</a></li>
                            <li><a class="dropdown-item" href="#">Onsite Incident</a></li>
                        </ul>
                    </div>
                    <div class="dropdown dropdown_content w-135 filter_list me-2">
                        <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">
                                <g clip-path="url(#clip0_1336_18362)">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M3.28125 9.06253C3.28125 8.80365 3.49112 8.59378 3.75 8.59378H8.75C9.00888 8.59378 9.21875 8.80365 9.21875 9.06253C9.21875 9.32141 9.00888 9.53128 8.75 9.53128H3.75C3.49112 9.53128 3.28125 9.32141 3.28125 9.06253Z"
                                        fill="#868C98"></path>
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M3.28125 11.25C3.28125 10.9911 3.49112 10.7813 3.75 10.7813H7.1875C7.44638 10.7813 7.65625 10.9911 7.65625 11.25C7.65625 11.5089 7.44638 11.7188 7.1875 11.7188H3.75C3.49112 11.7188 3.28125 11.5089 3.28125 11.25Z"
                                        fill="#868C98"></path>
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M7.65625 1.77139C7.3685 1.72249 6.97623 1.71878 6.26862 1.71878C5.07069 1.71878 4.21922 1.71977 3.57366 1.80617C2.94123 1.89081 2.57783 2.04958 2.31369 2.31372C2.04918 2.57823 1.89064 2.94051 1.8061 3.56931C1.71975 4.2116 1.71875 5.05827 1.71875 6.25003V8.75003C1.71875 9.94179 1.71975 10.7885 1.8061 11.4308C1.89064 12.0596 2.04918 12.4218 2.31369 12.6863C2.5782 12.9508 2.94047 13.1094 3.56928 13.1939C4.21157 13.2803 5.05824 13.2813 6.25 13.2813H8.75C9.94176 13.2813 10.7884 13.2803 11.4307 13.1939C12.0595 13.1094 12.4218 12.9508 12.6863 12.6863C12.9508 12.4218 13.1094 12.0596 13.1939 11.4308C13.2803 10.7885 13.2812 9.94179 13.2812 8.75003V8.47684C13.2812 7.51684 13.2745 7.06174 13.1726 6.71878H11.2164C10.5084 6.7188 9.92984 6.71881 9.47305 6.6574C8.99558 6.5932 8.58162 6.45428 8.25119 6.12384C7.92076 5.79341 7.78183 5.37945 7.71764 4.90198C7.65622 4.44519 7.65623 3.86661 7.65625 3.15859V1.77139ZM8.59375 2.25594V3.12503C8.59375 3.87485 8.59475 4.39006 8.64678 4.77706C8.69699 5.15057 8.78689 5.33372 8.9141 5.46093C9.04131 5.58814 9.22446 5.67804 9.59797 5.72826C9.98497 5.78029 10.5002 5.78128 11.25 5.78128H12.5122C12.3269 5.60157 12.0895 5.38623 11.7812 5.10879L9.30701 2.88198C9.00365 2.60895 8.77787 2.40742 8.59375 2.25594ZM6.35966 0.781266C7.22503 0.781034 7.78412 0.780885 8.2987 0.978346C8.81327 1.17581 9.22698 1.54834 9.86705 2.12472C9.88915 2.14462 9.91152 2.16476 9.93417 2.18514L12.4084 4.41195C12.4347 4.43566 12.4608 4.45906 12.4865 4.48218C13.2263 5.14759 13.7046 5.57786 13.962 6.15564C14.2193 6.73341 14.2191 7.37682 14.2188 8.37183C14.2188 8.4064 14.2187 8.4414 14.2187 8.47684V8.78529C14.2188 9.93389 14.2188 10.8437 14.123 11.5557C14.0245 12.2884 13.8169 12.8815 13.3492 13.3493C12.8815 13.817 12.2884 14.0246 11.5556 14.1231C10.8436 14.2188 9.93386 14.2188 8.78526 14.2188H6.21474C5.06614 14.2188 4.15637 14.2188 3.44436 14.1231C2.7116 14.0246 2.1185 13.817 1.65078 13.3493C1.18305 12.8815 0.975477 12.2884 0.876959 11.5557C0.781232 10.8437 0.78124 9.93389 0.78125 8.78529V6.21477C0.78124 5.06617 0.781232 4.1564 0.876959 3.44439C0.975477 2.71163 1.18305 2.11854 1.65078 1.65081C2.11887 1.18272 2.71395 0.975369 3.44929 0.876953C4.16427 0.781264 5.07856 0.781272 6.23345 0.781281L6.26862 0.781282C6.29934 0.781282 6.32968 0.781274 6.35966 0.781266Z"
                                        fill="#868C98"></path>
                                </g>
                                <defs>
                                    <clipPath id="clip0_1336_18362">
                                        <rect width="15" height="15" fill="white"></rect>
                                    </clipPath>
                                </defs>
                            </svg><span class="selected-text">Export</span> 
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <li><a class="dropdown-item" href="#">Excel</a></li>
                            <li><a class="dropdown-item" href="#">PDF</a></li>
                            <li><a class="dropdown-item" href="#">CSV</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row px-3 mt-2">
                <div class="col-xxl-3 col-md-6 col-lg-3">
                    <div class="incidents_report_details">
                        <h5>Total Incidents</h5>
                        <h3 id="totalIncidents">26</h3>
                    </div>
                </div>
                <div class="col-xxl-3 col-md-6 col-lg-3">
                    <div class="incidents_report_details">
                        <h5>Pending Reports</h5>
                        <h3 id="pendingReports">5</h3>
                    </div>
                </div>
                <div class="col-xxl-3 col-md-6 col-lg-3">
                    <div class="incidents_report_details">
                        <h5>Resolved Cases</h5>
                        <h3 id="resolvedCases">18</h3>
                    </div>
                </div>
                <div class="col-xxl-3 col-md-6 col-lg-3">
                    <div class="incidents_report_details">
                        <h5>Critical Cases</h5>
                        <h3 id="criticalCases">3</h3>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xxl-4 col-md-6 col-lg-4">
                    <div class="p-3">
                        <div id="timesheetChart"></div>
                    </div>
                </div>
                <div class="col-xxl-4 col-md-6 col-lg-4">
                    <div class="p-3">
                        <div id="lineChart"></div>
                    </div>
                </div>
                <div class="col-xxl-4 col-md-6 col-lg-4">
                    <div class="p-3">
                        <div id="pieChart"></div>
                    </div>
                </div>
            </div>
            <div class="card-body common_datatable_theme table_search_custom common_search_emp scroll_box">
                <table id="equipment-table-list" class=" table theme_table dt-responsive nowrap align-middle  "
                    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">ID</th>
                            <th data-ordering="false">Incident Type</th>
                            <th data-ordering="false">Date</th>
                            <th data-ordering="false">Details</th>
                            <th data-ordering="false">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="ctl-row-information">
                            <td>
                                <div class="form-check ctl-tab-hdr-che">
                                    <input class="form-check-input fs-14 cursor-pointer individual" type="checkbox"
                                        name="checkAll" value="1">
                                </div>
                            </td>
                            <td>887</td>
                            <td>Personal Injury</td>
                            <td>12/02/2023</td>
                            <td>Employee slipped on wet floor.</td>
                            <td><span class="ctl-emp-sta-txt ctl-available">
                                    <span>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"
                                            fill="none">
                                            <circle cx="4" cy="4" r="3" fill="#17B26A" />
                                        </svg>
                                    </span>
                                    Resolved
                                </span></td>
                        </tr>
                        <tr class="ctl-row-information">
                            <td>
                                <div class="form-check ctl-tab-hdr-che">
                                    <input class="form-check-input fs-14 cursor-pointer individual" type="checkbox"
                                        name="checkAll" value="1">
                                </div>
                            </td>
                            <td>887</td>
                            <td>Personal Injury</td>
                            <td>12/02/2023</td>
                            <td>Employee slipped on wet floor.</td>
                            <td><span class="ctl-emp-sta-txt ctl-upcommming ">
                                    <span>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"
                                            fill="none">
                                            <circle cx="4" cy="4" r="3" fill="#f74850" />
                                        </svg>
                                    </span>
                                    Open
                                </span></td>
                        </tr>
                        <tr class="ctl-row-information">
                            <td>
                                <div class="form-check ctl-tab-hdr-che">
                                    <input class="form-check-input fs-14 cursor-pointer individual" type="checkbox"
                                        name="checkAll" value="1">
                                </div>
                            </td>
                            <td>887</td>
                            <td>Personal Injury</td>
                            <td>12/02/2023</td>
                            <td>Employee slipped on wet floor.</td>
                            <td><span class="ctl-emp-sta-txt ctl-upcommming">
                                    <span>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"
                                            fill="none">
                                            <circle cx="4" cy="4" r="3" fill="#1E66E9" />
                                        </svg>
                                    </span>
                                    In Progress</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!--end col-->
</div>
@endsection
@section('script')
<script src="{{ url('js/jquery-3.6.0_cdn/jquery.min.js') }}"></script>
<script src="{{ url('js/select2@4.1.0/select2.min.js') }}"></script>
<script src="http://sat.localhost/ets-saas/public/js/app.js"></script>
<script src="{{ url('js/datatable-1.11.5_cdn/datatables.jquery.min.js') }}"></script>
<script src="{{ url('js/datatable-1.11.5_cdn/datatables.bootstrap5.min.js') }}"></script>
<script src="{{ url('js/datatable-1.11.5_cdn/datatables.responsive.min.js') }}"></script>
<script src="{{ url('js/jquery-validate-1.19.3/jquery-validate.min.js') }}"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<script>
$(document).ready(function() {
    // Initialize Select2
    $('.select-multi').select2();
    $(".select2").select2();
    flatpickr("#date_range", {
        mode: "range",
        dateFormat: "m/d/Y",
        allowInput: true
    });
    // Initialize DataTable
    var table = $('#equipment-table-list').DataTable({
        paging: true,
        searching: false,
        pagingType: "simple_numbers",
        scrollCollapse: true,
        info: true,
        responsive: false,
        scrollX: true,
        ordering: false,
        language: {
            paginate: {
                previous: '<span class="fa fa-chevron-left"></span>',
                next: '<span class="fa fa-chevron-right"></span>'
            }
        }
    });

    // Reinitialize Select2 when Offcanvas is shown
    $('#offcanvasRight').on('shown.bs.offcanvas', function() {
        $(".select2").select2();
    });

    // Fix Select2 dropdown z-index issue inside modal/offcanvas
    $(document).on('click', '.cmp-clk-fil-sec .select2', function() {
        $('.select2-container .select2-dropdown').addClass('ctl-fil-sel2-zin');
    });
    $(".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>
<script>
Highcharts.chart('timesheetChart', {
    chart: {
        type: 'column',
        backgroundColor: '#ffffff',
        height: 300,
    },
    title: {
        text: ''
    },
    xAxis: {
        categories: ["Personal Injury", "Vehicle Accident", "Utility Strike", "Onsite Incident"],
        labels: {
            style: {
                fontSize: '12px',
                color: '#181D27'
            }
        },
    },
    yAxis: {
        max: 30, // Max value (Adjust based on data)
        labels: {
            enabled: false
        },
        title: {
            text: ''
        },
        gridLineDashStyle: 'dash',
        gridLineColor: '#EEEEEE',
    },
    tooltip: {
        formatter: function() {
            return `<b>${this.y} Incidents</b>`;
        },
        backgroundColor: '#fff',
        borderColor: '#ccc',
        borderRadius: 5,
        style: {
            color: '#181D27',
            fontSize: '10px'
        }
    },
    credits: {
        enabled: false
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        column: {
            grouping: false,
            borderRadius: 3.5, // Rounded corners
            marker: {
                enabled: false // No markers
            }
        }
    },
    series: [{
            name: 'Unfilled',
            data: [30, 30, 30, 30], // Background filler bars
            color: '#F6F6F6',
        },
        {
            name: 'Filled',
            data: [10, 5, 8, 3].map((value) => ({
                y: value,
                color: value === 0 ? '#F6F6F6' : {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: [
                        [0, '#1E66E9'],
                        [1, '#0046C5']
                    ]
                },
            }))
        }
    ]
});


// pie chart
Highcharts.chart('pieChart', {
    chart: {
        type: 'pie',
        backgroundColor: '#ffffff',
        height: 300,
    },
    title: {
        text: '', // No title
    },
    tooltip: {
        enabled: true, // Show tooltip
    },
    credits: {
        enabled: false, // Remove the Highcharts logo
    },
    legend: {
        enabled: false // Show legend
    },
    plotOptions: {
        pie: {
            innerSize: '50%', // Create a donut chart
            dataLabels: {
                enabled: false, // Show data labels
                format: '{point.name}: {point.y}'
            }
        }
    },
    series: [{
        name: 'Incident Types',
        data: [{
                name: 'Personal Injury',
                y: 10,
                color: '#1E66E9'
            }, // Blue
            {
                name: 'Vehicle Accident',
                y: 5,
                color: '#F57500'
            }, // Orange
            {
                name: 'Utility Strike',
                y: 8,
                color: '#17B26A'
            }, // Green
            {
                name: 'Onsite Incident',
                y: 3,
                color: '#DC3545'
            } // Red
        ]
    }]
});


// Line Chart
Highcharts.chart('lineChart', {
    chart: {
        type: 'line',
        backgroundColor: '#ffffff',
        height: 300 // Set height to 300px
    },
    title: {
        text: ''
    },
    xAxis: {
        categories: ['Week 1', 'Week 2', 'Week 3', 'Week 4']
    },
    yAxis: {
        title: {
            text: 'Incidents Reported'
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'Total Incidents',
        data: [12, 15, 10, 18],
        color: '#F57500'
    }]
});
</script>
@endsection