@extends('includes/layout')

@section('main-page-content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card mb-4">
            <div class="card mb-4">
                <div class="p-3 px-5">
                    <div class="h4 pb-0 mb-0 m-header">Incident Investigation Report</div>
                </div>
            </div>



            <!-- Stepper -->
            <div class="root">
                <div class="container">
                    <div class="container-wrapper">
                        <div class="progressbar">
                            <div class="progress" id="progress"></div>
                            <div class="progress-step progress-step-active" data-title="Step 1"></div>
                            <div class="progress-step" data-title="Step 2"></div>
                            <div class="progress-step" data-title="Step 3"></div>
                            <div class="progress-step" data-title="Step 4"></div>
                            <div class="progress-step" data-title="Step 5"></div>
                            <div class="progress-step" data-title="Step 6"></div>
                            <div class="progress-step" data-title="Step 7"></div>
                            <div class="progress-step" data-title="Step 8"></div>
                            <div class="progress-step" data-title="Step 9"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Stepper -->


            {{-- Incident Inspection Report Screen 1 --}}
            <div class="form-step form-step-active">
                <div class="detail-card mb-4 ">
                    <div class="p-3 px-5">
                        <div class="h5 text-white pb-0 mb-0">Incident Details <span>(Must be completed for all Injuries /
                                Incidents)</span>
                        </div>
                        <div class="p pt-2 text-white">Lorem Ipsum is simply dummy text of the printing and typesetting
                            industry. Lorem Ipsum has been the industry's standard dummy text ever since the when an unknown
                            printer took a galley of type and scrambled.</div>
                    </div>
                </div>
                <div class="row px-5 pt-3">
                    <div class="col-lg-6 col-sm-12 mb-3 ">
                        <label>Project Incident Investigation Number</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-6 col-sm-12 mb-3 ">
                        <label>Office Number</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-lg-6 col-sm-12 mb-3 ">
                        <label>Project Name</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-6 col-sm-12 mb-3 ">
                        <label>Project Number</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>
                </div>


                <div class="row px-5 py-2">
                    <div class="col-lg-4 col-sm-12 mb-3 ">
                        <label>Report Compiled By</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-4 col-sm-12 mb-3 ">
                        <label>Position</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-4 col-sm-12 mb-3">
                        <label for="employment_end_date" class="text-dark">End Date</label>
                        <input type="date" id="employment_end_date" class="form-control ">
                    </div>
                </div>



                <div class="row px-5 py-2">
                    <div class="col-lg-3 col-sm-12 mb-3">
                        <label for="employment_end_date" class="text-dark">Date of Incident</label>
                        <input type="date" id="employment_end_date" class="form-control">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3 ">
                        <label>Time of Incident</label>
                        <input type="time" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3">
                        <label for="employment_end_date" class="text-dark">Date Incident Reported</label>
                        <input type="date" id="employment_end_date" class="form-control ">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3 ">
                        <label>Time Incident Reported</label>
                        <input type="time" class="form-control" name="agenda">
                    </div>
                </div>


                <div class="row px-5 py-2">
                    <div class="col-lg-3 col-sm-12 mb-3 ">
                        <label>Incident Reported By</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3 ">
                        <label>Company Name</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3 ">
                        <label>Position</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3 ">
                        <label>Contact Number</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-lg-3 col-sm-12 mb-3 ">
                        <label>Incident Reported to</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3 ">
                        <label>Company Name</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3 ">
                        <label>Position</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3 ">
                        <label>Contact Number</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>
                </div>

                <div class="injury mb-4 mt-3">
                    <div class="p-3 px-5">
                        <div class="h4 pb-0 mb-0 m-header">Initial injury classification</div>
                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-md-4 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">First Aid – No
                                Investigation</label>
                        </div>
                    </div>

                    <div class="col-md-4 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">First Aid - Investigation</label>
                        </div>
                    </div>

                    <div class="col-md-4 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Near Miss</label>
                        </div>
                    </div>
                </div>



                <div class="row px-5 py-2">
                    <div class="col-md-4 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">First Aid – No
                                Investigation</label>
                        </div>
                    </div>

                    <div class="col-md-4 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">First Aid - Investigation</label>
                        </div>
                    </div>

                    <div class="col-md-4 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Near Miss</label>
                        </div>
                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-12">
                        <div class="mb-3">
                            <label for="meeting_description" class="form-label">Other Details:</label>
                            <textarea class="form-control" id="meeting_description" rows="3" name="description"
                                placeholder="Lorem Ipsum is simply dummy text of the printing and typesetting industry"></textarea>
                        </div>
                    </div>
                    <div class="mt-4 w-100 d-flex justify-content-end">
                        <button type="button" class="report-btn btn  me-2 waves-effect waves-light"
                            onclick="clearForm();">Clear</button>
                        <button type="submit" class="btn  btn-next   btn-primary waves-effect waves-light">Save and
                            Next</a>
                    </div>
                </div>



            </div>
            {{-- Incident Inspection Report Screen 1 --}}


            {{-- Incident Inspection Report Screen 2 --}}
            <div class="form-step">

                <div class="detail-card mb-4 ">
                    <div class="p-3 px-5">
                        <div class="h5 text-white pb-0 mb-0">Incident Details <span>(Must be completed for all Injuries /
                                Incidents)</span>
                        </div>
                        <div class="p pt-2 text-white">Lorem Ipsum is simply dummy text of the printing and typesetting
                            industry. Lorem Ipsum has been the industry's standard dummy text ever since the when an unknown
                            printer took a galley of type and scrambled.</div>
                    </div>
                </div>

                <div class="injury mb-4 mt-1">
                    <div class="p-3 px-5 d-flex gap-3"> <!-- Added d-flex class for flex properties -->
                        <div class="h4 pb-0 mb-0 m-header">Notifiable Incident Classification <span class="paragraph">(If
                                Applicable Indicate in
                                Check Box)</span></div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="credentials" value="1">
                        </div>
                    </div>
                </div>



                <div class="row row-section px-5 py-2">
                    <div class="col-md-6 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Serious Injury Illness Of A Person
                            </label>
                            <br>
                            <span>(Refer To Section 36 Of The WHS Act For A Definition Of Serious <br>
                                Injury Illness Of A Person)</span>
                        </div>
                    </div>

                    <div class="col-md-6 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Dangerous Incident
                            </label>
                            <br>
                            <span>(Refer To Section 37 Of The WHS Act For A Definition <br>
                                Of Dangerous Incident)</span>
                        </div>
                    </div>

                    <div class="col-md-6 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Death</label>
                        </div>
                    </div>
                </div>


                <div class="injury mb-4 mt-1">
                    <div class="p-3 px-5 d-flex gap-3"> <!-- Added d-flex class for flex properties -->
                        <div class="h4 pb-0 mb-0 m-header">Incident Notified To<span class="paragraph">(If
                                Applicable Indicate in
                                Check Box)</span></div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="credentials" value="1">
                        </div>
                    </div>
                </div>


                <div class="row px-5 py-2">
                    <div class="col-md-6 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">OHS Regulator
                            </label>
                            <br>
                            <span> (Refer To Section 35 Of The WHS Act For A Definition Of Notifiable Incident)</span>
                        </div>
                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-lg-3 col-sm-12 mb-3 ">
                        <label>Reference Number</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3 ">
                        <label>Contact Name</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3 ">
                        <label>Date</label>
                        <input type="date" class="form-control" name="agenda">
                    </div>
                    <div class="col-lg-3 col-sm-12 mb-3 ">
                        <label>Time</label>
                        <input type="time" class="form-control" name="agenda">
                    </div>
                </div>


                <div class="injury mb-4 mt-1">
                    <div class="p-3 px-5 d-flex gap-3"> <!-- Added d-flex class for flex properties -->
                        <div class="h4 pb-0 mb-0 m-header">Was there more than one person injured / Involved?</div>
                    </div>
                </div>


                <div class="row px-5 py-2">
                    <div class="col-md-6 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Yes
                            </label>
                            <br>
                            <span>(If Yes, Then Complete An Incident Investigation Report For Each Injured / Involved
                                Person).</span>
                        </div>
                    </div>

                    <div class="col-md-6 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">No
                            </label>
                        </div>
                    </div>


                    <div class="mt-4 w-100 d-flex justify-content-end">
                        <button type="button" class="report-btn btn  me-2 waves-effect waves-light"
                            onclick="clearForm();">Clear</button>
                        <button type="submit" class="btn btn-next btn-primary waves-effect waves-light">Save and
                            Next</button>
                    </div>
                </div>

            </div>
            {{-- Incident Inspection Report Screen 2 --}}




            {{-- Incident Inspection Report Screen 3 --}}
            <div class="form-step">
                <div class="detail-card mb-4 ">
                    <div class="p-3 px-5">
                        <div class="h5 text-white pb-0 mb-0">Incident Details <span>(Must be completed for all Injuries /
                                Incidents)</span>
                        </div>
                        <div class="p pt-2 text-white">Lorem Ipsum is simply dummy text of the printing and typesetting
                            industry. Lorem Ipsum has been the industry's standard dummy text ever since the when an unknown
                            printer took a galley of type and scrambled.</div>
                    </div>
                </div>

                <div class="injury mb-4 mt-1">
                    <div class="p-3 px-5 d-flex gap-3"> <!-- Added d-flex class for flex properties -->
                        <div class="h4 pb-0 mb-0 m-header">Injured / Involved Persons Details</div>
                    </div>
                </div>


                <div class="row px-5 pt-3">
                    <div class="col-lg-4 col-sm-12 mb-3 ">
                        <label>Name</label>
                        <input type="text" class="form-control" name="agenda" placeholder="Employee ID">
                    </div>

                    <div class="col-lg-4 col-sm-12 mb-3 ">
                        <label>Surname</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>
                    <div class="col-lg-4 col-sm-12 mb-3 ">
                        <label>Contact Number</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>
                </div>



                <div class="row px-5 pt-3">
                    <div class="col-lg-4 col-sm-12 mt-4">
                        <div class="form-groups flex">
                            <label class="form-label text-black">Gender</label>
                            <div class="form-check-with-border">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="gender" id="male"
                                        value="male">
                                    <label class="form-check-label" for="male">Male</label>
                                </div>
                            </div>
                            <div class="form-check-with-border ms-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="gender" id="female"
                                        value="female">
                                    <label class="form-check-label" for="female">Female</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-sm-12 mb-3 ">
                        <label>Date of Birth</label>
                        <input type="date" class="form-control" name="agenda">
                    </div>
                    <div class="col-lg-4 col-sm-12 mb-3 ">
                        <label>Age</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>
                </div>


                <div class="row px-5 pt-3">
                    <div class="col-lg-6 col-sm-12 mb-3 ">
                        <label>Occupation</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>
                    <div class="col-lg-6 col-sm-12 mb-3">
                        <label for="language_id" class="text-dark">Employee’s Preferred Language</label>
                        <select id="language_id" class="form-select mt-1" data-placeholder="language">
                            <option selected="" value="">--select--</option>
                            <option value="1">Language 1</option>
                        </select>
                    </div>
                </div>

                <div class="row px-5 pt-3">
                    <div class="col-lg-4 col-sm-12 mt-4">
                        <div class="h5 pb-0 mb-0"> Experience In Task<span class="paragraph">(when Incident
                                Occurred)</span>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-12 mb-3">
                        <label>Years</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-5 col-sm-12 mb-3">
                        <label>Months</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>
                </div>


                <div class="injury mb-4 mt-1">
                    <div class="p-3 px-5 d-flex gap-3"> <!-- Added d-flex class for flex properties -->
                        <div class="h4 pb-0 mb-0 m-header">Type of employment</div>
                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Full Time - Permanent</label>
                        </div>
                    </div>

                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Full Time - Casual</label>
                        </div>
                    </div>

                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Part Time Permanent</label>
                        </div>
                    </div>

                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Part Time Casual</label>
                        </div>
                    </div>
                </div>

                <div class="injury mb-4 mt-1">
                    <div class="p-3 px-5 d-flex gap-3"> <!-- Added d-flex class for flex properties -->
                        <div class="h4 pb-0 mb-0 m-header">Type of employee <span class="paragraph">(If applicable
                                indicate in check box)</span></div>
                        <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">

                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-md-2 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Trainee</label>
                        </div>
                    </div>

                    <div class="col-md-2 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Apprentice</label>
                        </div>
                    </div>

                    <div class="col-md-2 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Carpenter</label>
                        </div>
                    </div>

                    <div class="col-md-2 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Off-sider</label>
                        </div>
                    </div>

                    <div class="col-md-2 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Labourer</label>
                        </div>
                    </div>

                    <div class="col-md-2 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Other</label>
                        </div>
                    </div>
                </div>



                <div class="injury mb-4 mt-1">
                    <div class="p-3 px-5 d-flex gap-3"> <!-- Added d-flex class for flex properties -->
                        <div class="h4 pb-0 mb-0 m-header">Training Provided to Injured / Involved Person</div>
                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Site Induction</label>
                        </div>
                    </div>

                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">SWMS</label>
                        </div>
                    </div>

                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Neither</label>
                        </div>
                    </div>

                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Other (Specify Below)</label>
                        </div>
                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-12">
                        <div class="mb-3">
                            <label for="meeting_description" class="form-label form-label-other">Other Details:</label>
                            <textarea class="form-control" id="meeting_description" rows="3" name="description"
                                placeholder="Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry"></textarea>
                        </div>
                    </div>
                </div>

                <div class="injury mb-4 mt-1">
                    <div class="p-3 px-5 d-flex "> <!-- Added d-flex class for flex properties -->
                        <div class="h4 pb-0 mb-0 m-header">If applicable indicate in check box</div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="credentials" value="1">
                        </div>
                    </div>
                </div>

                <div class="row px-5 pt-3">
                    <div class="col-lg-4 col-sm-12 mb-3">
                        <label for="nature_id" class="text-dark">Nature of Injury</label>
                        <select id="nature_id" class="form-select mt-1" data-placeholder="nature">
                            <option selected="" value="">--select--</option>
                            <option value="1">Nature of Injury</option>
                        </select>
                    </div>

                    <div class="col-lg-4 col-sm-12 mb-3">
                        <label for="location_id" class="text-dark">Bodily Location</label>
                        <select id="location_id" class="form-select mt-1" data-placeholder="location">
                            <option selected="" value="">--select--</option>
                            <option value="1">Bodily Location</option>
                        </select>
                    </div>

                    <div class="col-lg-4 col-sm-12 mb-3">
                        <label for="disease_id" class="text-dark">Nature of Disease</label>
                        <select id="disease_id" class="form-select mt-1" data-placeholder="disease">
                            <option selected="" value="">--select--</option>
                            <option value="1">Nature of Disease</option>
                        </select>
                    </div>
                </div>

                <div class="row px-5 pt-3">
                    <div class="col-lg-4 col-sm-12 mb-3">
                        <label for="agency_id" class="text-dark">Breakdown of Injury / Agency of Injury</label>
                        <select id="agency_id" class="form-select mt-1" data-placeholder="agency">
                            <option selected="" value="">--select--</option>
                            <option value="1">Breakdown of Injury</option>
                        </select>
                    </div>

                    <div class="col-lg-4 col-sm-12 mb-3">
                        <label for="injury_id" class="text-dark">Mechanism of Injury / disease</label>
                        <select id="injury_id" class="form-select mt-1" data-placeholder="injury">
                            <option selected="" value="">--select--</option>
                            <option value="1">Mechanism of Injury</option>
                        </select>
                    </div>
                </div>


                <hr style="color: #797979">

                <div class="d-flex justify-content-end">
                    <span class="mt-2">Add More Form</span>
                    <button class="border-none bg-transparent" type="button" onclick="addmore();"
                        style="padding-right:43px;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="43" height="43" viewBox="0 0 43 43"
                            fill="none">
                            <g filter="url(#filter0_d_2182_1189)">
                                <rect x="4" y="2" width="35" height="35" rx="4" fill="#019FF3"></rect>
                            </g>
                            <path
                                d="M30.221 9H13.4026C12.0757 9 11 10.0757 11 11.4026V28.221C11 29.5479 12.0757 30.6236 13.4026 30.6236H30.221C31.5479 30.6236 32.6236 29.5479 32.6236 28.221V11.4026C32.6236 10.0757 31.5479 9 30.221 9Z"
                                stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M21.8125 15.0078V24.6183" stroke="white" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round"></path>
                            <path d="M17.0068 19.8105H26.6173" stroke="white" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round"></path>

                        </svg>
                    </button>
                </div>

                <hr style="color: #797979">

                <div class="row px-5 py-2">
                    <div class="mt-4 w-100 d-flex justify-content-end">
                        <button type="button" class="report-btn btn  me-2 waves-effect waves-light"
                            onclick="clearForm();">Clear</button>
                        <button type="submit" class="btn  btn-next   btn-primary waves-effect waves-light">Save and
                            Next
                        </button>
                    </div>

                </div>

            </div>
            {{-- Incident Inspection Report Screen 3 --}}



            {{-- Incident Inspection Report Screen 4 --}}
            <div class="form-step">
                <div class="detail-card mb-4 ">
                    <div class="p-3 px-5">
                        <div class="h5 text-white pb-0 mb-0">Incident Details <span>(Must be completed for all Injuries
                                /
                                Incidents)</span>
                        </div>
                        <div class="p pt-2 text-white">Lorem Ipsum is simply dummy text of the printing and typesetting
                            industry. Lorem Ipsum has been the industry's standard dummy text ever since the when an
                            unknown
                            printer took a galley of type and scrambled.</div>
                    </div>
                </div>


                <div class="injury mb-4 mt-1">
                    <div class="p-3 px-5 d-flex gap-3"> <!-- Added d-flex class for flex properties -->
                        <div class="h4 pb-0 mb-0 m-header">Shift / Part of Shift</div>
                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Day</label>
                        </div>
                    </div>

                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Evening</label>
                        </div>
                    </div>

                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Night</label>
                        </div>
                    </div>
                </div>


                <div class="row px-5 py-2">
                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">0600 - 1159</label>
                        </div>
                    </div>

                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">1200 – 1559</label>
                        </div>
                    </div>

                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">1600 – 0559</label>
                        </div>
                    </div>
                </div>


                <div class="injury mb-4 mt-3">
                    <div class="p-3 px-5">
                        <div class="h4 pb-0 mb-0 m-header">Employer Details of Injured / involved Person</div>
                    </div>
                </div>


                <div class="row px-5 pt-3">
                    <div class="col-lg-5 col-sm-12 mb-3 ">
                        <label>Employer Name (Company Name)</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-5 col-sm-12 mb-3 ">
                        <label>Employer Address</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-2 col-sm-12 mb-3 ">
                        <label>Contact Number</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>
                </div>


                <div class="row px-5 pt-3">
                    <div class="col-lg-5 col-sm-12 mb-3 ">
                        <label>Supervisor (of injured / Involved Worker)</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-2 col-sm-12 mb-3 ">
                        <label>Contact Number</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>
                </div>

                <div class="injury mb-4 mt-3">
                    <div class="p-3 px-5">
                        <div class="h4 pb-0 mb-0 m-header">Is the Employer of the Worker</div>
                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Subcontractor</label>
                        </div>
                    </div>

                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Supplier</label>
                        </div>
                    </div>

                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Other</label>
                        </div>
                    </div>

                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">N/A</label>
                        </div>
                    </div>
                </div>


                <div class="row px-5 py-2">
                    <div class="col-12">
                        <div class="mb-3">
                            <label for="meeting_description" class="form-label form-label-other">Other
                                Details:</label>
                            <textarea class="form-control" id="meeting_description" rows="3" name="description"
                                placeholder="Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry"></textarea>
                        </div>
                    </div>
                </div>

                <div class="injury mb-4 mt-1">
                    <div class="p-3 px-5 d-flex "> <!-- Added d-flex class for flex properties -->
                        <div class="h4 pb-0 mb-0 m-header">If not applicable indicate in check box</div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="credentials" value="1">
                        </div>
                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-12">
                        <div class="mb-3">
                            <label for="meeting_description" class="form-label form-label-other">Work Location /
                                Area</label>
                            <textarea class="form-control" id="meeting_description" rows="3" name="description"
                                placeholder="Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry"></textarea>
                        </div>
                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-12">
                        <div class="mb-3">
                            <label for="meeting_description" class="form-label form-label-other">What was being done
                                at
                                the time ?</label>
                            <textarea class="form-control" id="meeting_description" rows="3" name="description"
                                placeholder="Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry"></textarea>
                        </div>
                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-12">
                        <div class="mb-3">
                            <label for="meeting_description" class="form-label form-label-other">What happened
                                unexpectedly ?</label>
                            <textarea class="form-control" id="meeting_description" rows="3" name="description"
                                placeholder="Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry"></textarea>
                        </div>
                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-12">
                        <div class="mb-3">
                            <label for="meeting_description" class="form-label form-label-other">How exactly was the
                                injury sustained ?</label>
                            <textarea class="form-control" id="meeting_description" rows="3" name="description"
                                placeholder="Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry"></textarea>
                        </div>
                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-12">
                        <div class="mb-3">
                            <label for="meeting_description" class="form-label form-label-other">Immediate action
                                taken
                                <span class="paragraph">(to prevent further occurrence)</span></label>
                            <textarea class="form-control" id="meeting_description" rows="3" name="description"
                                placeholder="Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry"></textarea>
                        </div>
                    </div>

                    <div class="mt-4 w-100 d-flex justify-content-end">
                        <button type="button" class="report-btn btn  me-2 waves-effect waves-light"
                            onclick="clearForm();">Clear</button>
                        <button type="submit" class="btn  btn-next   btn-primary waves-effect waves-light">Save and
                            Next
                        </button>
                    </div>
                </div>
            </div>
            {{-- Incident Inspection Report Screen 4 --}}


            {{-- Incident Inspection Report Screen 5 --}}
            <div class="form-step">
                <div class="detail-card mb-4 ">
                    <div class="p-3 px-5">
                        <div class="h5 text-white pb-0 mb-0">Incident Details <span>(Must be completed for all Injuries
                                /
                                Incidents)</span>
                        </div>
                        <div class="p pt-2 text-white">Lorem Ipsum is simply dummy text of the printing and typesetting
                            industry. Lorem Ipsum has been the industry's standard dummy text ever since the when an
                            unknown
                            printer took a galley of type and scrambled.</div>
                    </div>
                </div>





                <div class="injury mb-4 mt-1">
                    <div class="p-3 px-5 d-flex "> <!-- Added d-flex class for flex properties -->
                        <div class="h4 pb-0 mb-0 m-header">Incident Involving Plant / Property.<span class="paragraph"> If
                                applicable indicate in check box </span></div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="credentials" value="1">
                        </div>
                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-md-4 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Fastform Plant /
                                Equipment</label>
                        </div>
                    </div>

                    <div class="col-md-4 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Contractor Plant /
                                Equipment</label>
                        </div>
                    </div>

                    <div class="col-md-4 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Third Party / Client</label>
                        </div>
                    </div>
                </div>

                <div class="row px-5 pt-3">
                    <div class="col-lg-6 col-sm-12 mb-3 ">
                        <label>Equipment Type or Property Description</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-6 col-sm-12 mb-3 ">
                        <label>Reg No. (or similar)</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>
                </div>

                <div class="row px-5 pt-3">
                    <div class="col-lg-6 col-sm-12 mb-3 ">
                        <label>Damage / Loss</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-6 col-sm-12 mb-3 ">
                        <label>Approx. Cost / Value</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>
                </div>

                <div class="injury mb-4 mt-3">
                    <div class="p-3 px-5">
                        <div class="h4 pb-0 mb-0 m-header">Is a corrective action(s) required for this incident?</div>
                    </div>
                </div>


                <div class="row px-5 py-2">
                    <div class="col-md-6 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Yes (List the CAR’s in Part D
                                of
                                the Incident Investigation Report)</label>
                        </div>
                    </div>

                    <div class="col-md-6 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">No</label>
                        </div>
                    </div>

                    <div class="mt-4 w-100 d-flex justify-content-end">
                        <button type="button" class="report-btn btn  me-2 waves-effect waves-light"
                            onclick="clearForm();">Clear</button>
                        <button type="submit" class="btn  btn-next   btn-primary waves-effect waves-light">Save and
                            Next
                        </button>
                    </div>
                </div>
            </div>
            {{-- Incident Inspection Report Screen 5 --}}


            {{-- Incident Inspection Report Screen 6 --}}
            <div class="form-step">
                <div class="detail-card mb-4 ">
                    <div class="p-3 px-5">
                        <div class="h5 text-white pb-0 mb-0">Incident Details <span>(Must be completed for all Injuries
                                /
                                Incidents)</span>
                        </div>
                        <div class="p pt-2 text-white">Lorem Ipsum is simply dummy text of the printing and typesetting
                            industry. Lorem Ipsum has been the industry's standard dummy text ever since the when an
                            unknown
                            printer took a galley of type and scrambled.</div>
                    </div>
                </div>

                <div class="injury mb-4 mt-3">
                    <div class="p-3 px-5">
                        <div class="h4 pb-0 mb-0 m-header">Incident Response (Describe the immediate response to the
                            incident / Injury)</div>
                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-12">
                        <div class="mb-3">
                            <textarea class="form-control" id="meeting_description" rows="3" name="description"
                                placeholder="Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry"></textarea>
                        </div>
                    </div>
                </div>


                <div class="injury mb-4 mt-1">
                    <div class="p-3 px-5 d-flex"> <!-- Added d-flex class for flex properties -->
                        <div class="h4 pb-0 mb-0 m-header">Injury Management <span class="paragraph">If applicable
                                indicate in check box</span></div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="credentials" value="1">
                        </div>
                    </div>
                </div>


                <div class=" mb-4 mt-1">
                    <div class="p-3 px-5 d-flex"> <!-- Added d-flex class for flex properties -->
                        <div class="h5 pb-0 mb-0 m-header">Refer Return to Work / Rehabilitation procedure</div>
                    </div>
                </div>


                <div class="row px-5 py-2">
                    <div class="col-md-1 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Yes</label>
                        </div>
                    </div>

                    <div class="col-md-1 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">No</label>
                        </div>
                    </div>
                </div>


                <div class="row px-5 pt-3">
                    <div class="col-lg-2 col-sm-12 mb-3 ">
                        <label>Date</label>
                        <input type="date" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-2 col-sm-12 mb-3 ">
                        <label>Time</label>
                        <input type="time" class="form-control" name="agenda">
                    </div>
                </div>


                <div class="row px-5 pt-3">
                    <div class="col-lg-6 col-sm-12 mb-3 ">
                        <label>Name of Management Representative</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-6 col-sm-12 mb-3 ">
                        <label>Name of Injured Workers Supervisor</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>
                </div>


                <div class="injury mb-4 mt-3">
                    <div class="p-3 px-5">
                        <div class="h4 pb-0 mb-0 m-header">Outcome of Treatment and Work Status</div>
                    </div>
                </div>



                <div class="row px-5 py-2">
                    <div class="col-md-12 form-group">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">First Aid & Return to
                                Work</label>
                        </div>
                    </div>
                </div>

                <div class="row px-5 pt-2">
                    <div class="col-md-6 form-group">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Medical - Referred to</label>
                        </div>
                    </div>
                </div>


                <div class="row px-5">
                    {{-- <div class="col-md-1 form-group ">
                        <div class="img ms-4">
                            <img src="{{url('/assets/img/Vector 172.png')}}"class="" alt="Thumnail Preview">
                        </div>
                    </div> --}}
                    <div class="col-md-1 form-group mt-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Doctor</label>
                        </div>
                    </div>
                    <div class="col-md-8 form-group mt-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Clinic / Hospital</label>
                        </div>

                        <div class="row px-4">
                            {{-- <div class="col-md-1 form-group ">
                                <div class="img ">
                                    <img src="{{url('/assets/img/Vector 172.png')}}"class="" alt="Thumnail Preview">
                                </div>
                            </div> --}}
                            <div class="col-md-2 form-group mt-3">
                                <div class="form-check">
                                    <input class="form-check-input mt-1" type="checkbox" id="credentials"
                                        value="1">
                                    <label class="form-check-label mt-1 ml-2" for="credentials">Outpatient</label>
                                </div>
                            </div>
                            <div class="col-md-4 form-group mt-3">
                                <div class="form-check">
                                    <input class="form-check-input mt-1" type="checkbox" id="credentials"
                                        value="1">
                                    <label class="form-check-label mt-1 ml-2" for="credentials">Inpatient</label>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="injury mb-4 mt-3">
                    <div class="p-3 px-5 d-flex gap-3"> <!-- Added d-flex class for flex properties -->
                        <div class="h4 pb-0 mb-0 m-header"> Doctor Details <span class="paragraph">If applicable
                                indicate
                                in check box</span></div>

                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="credentials" value="1">
                        </div>
                    </div>
                </div>

                <div class="row px-5 pt-3">
                    <div class="col-lg-6 col-sm-12 mb-3 ">
                        <label>Name of Doctor</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-6 col-sm-12 mb-3 ">
                        <label>Contact No</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-12">
                        <div class="mb-3">
                            <label for="meeting_description" class="form-label">Address of Doctor</label>
                            <textarea class="form-control" id="meeting_description" rows="3" name="description"
                                placeholder="Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry"></textarea>
                        </div>
                    </div>
                </div>



                <div class="injury mb-4 mt-3">
                    <div class="p-3 px-5 d-flex gap-3"> <!-- Added d-flex class for flex properties -->
                        <div class="h4 pb-0 mb-0 m-header"> Hospital Details If not applicable indicate in check box
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="credentials" value="1">
                        </div>
                    </div>
                </div>

                <div class="row px-5 pt-3">
                    <div class="col-lg-6 col-sm-12 mb-3 ">
                        <label>Name of Doctor</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-6 col-sm-12 mb-3 ">
                        <label>Contact Number</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-12">
                        <div class="mb-3">
                            <label for="meeting_description" class="form-label">Address of Doctor</label>
                            <textarea class="form-control" id="meeting_description" rows="3" name="description"
                                placeholder="Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry"></textarea>
                        </div>
                    </div>
                </div>



                <div class="injury mb-4 mt-3">
                    <div class="p-3 px-5 d-flex gap-3"> <!-- Added d-flex class for flex properties -->
                        <div class="h4 pb-0 mb-0 m-header">Is this a recurrence of a previous injury</div>
                    </div>
                </div>



                <div class="row px-5 py-2">
                    <div class="col-md-1 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-4" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-4 " for="credentials">Yes</label>
                        </div>
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3 ">
                        <label>Date</label>
                        <input type="date" class="form-control" name="agenda">
                    </div>

                    <div class="col-md-1 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-4" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-4 " for="credentials">No</label>
                        </div>
                    </div>
                </div>


                <div class="row px-5 pt-3">
                    <div class="col-lg-6 col-sm-12 mb-3 ">
                        <label>Previous Incident Investigation Report Number</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>
                </div>


                <hr style="color: #797979">

                <div class="row px-5 pt-3">
                    <div class="col-lg-12 col-sm-12 mb-3 ">
                        <div class="mt-4 w-100 d-flex justify-content-end">
                            <button type="button" class="report-btn btn  me-2 waves-effect waves-light"
                                onclick="clearForm();">Clear</button>
                            <button type="submit" class="btn  btn-next   btn-primary waves-effect waves-light">Save
                                and
                                Next
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            {{-- Incident Inspection Report Screen 6 --}}



            {{-- Incident Inspection Report Screen 7 --}}
            <div class="form-step">
                <div class="detail-card mb-4 ">
                    <div class="p-3 px-5">
                        <div class="h5 text-white pb-0 mb-0"> Close Out <span>(Must be completed for all Injuries /
                                Incidents)</span>
                        </div>
                        <div class="p pt-2 text-white">Completion of this section, including necessary signatures,
                            denotes
                            closure of this incident report.</div>
                    </div>
                </div>

                <div class="injury mb-4 mt-1">
                    <div class="p-3 px-5 d-flex gap-3"> <!-- Added d-flex class for flex properties -->
                        <div class="h4 pb-0 mb-0 m-header">Final Injury Classification. <span class="paragraph">If
                                not
                                applicable indicate in check box</span></div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="credentials" value="1">
                        </div>
                    </div>
                </div>


                <div class="row px-5 py-2">
                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">First Aid – No
                                Investigation</label>
                        </div>
                    </div>

                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">First Aid -
                                Investigation</label>
                        </div>
                    </div>

                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Near Miss</label>
                        </div>
                    </div>

                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Medical treatment</label>
                        </div>
                    </div>


                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Lost Time</label>
                        </div>
                    </div>

                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Other (Specify
                                Below)</label>
                        </div>
                    </div>
                </div>


                <div class="injury mb-4 mt-1">
                    <div class="p-3 px-5 d-flex gap-3"> <!-- Added d-flex class for flex properties -->
                        <div class="h4 pb-0 mb-0 m-header">Final Incident Classification. <span class="paragraph">If
                                not
                                applicable indicate in check box</span></div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="credentials" value="1">
                        </div>
                    </div>
                </div>


                <div class="row px-5 py-2">
                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Plant</label>
                        </div>
                    </div>

                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Property</label>
                        </div>
                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-12">
                        <div class="mb-3">
                            <label for="meeting_description" class="form-label">Other Details:</label>
                            <textarea class="form-control" id="meeting_description" rows="3" name="description"
                                placeholder="Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry"></textarea>
                        </div>
                    </div>
                </div>


                <div class="injury mb-4 mt-3">
                    <div class="p-3 px-5">
                        <div class="h4 pb-0 mb-0 m-header">Complete for LTI or RWI (Lost Time Injury / Restricted Work
                            Injury)</div>
                    </div>
                </div>


                <div class="row px-5 py-4">
                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">LTI</label>
                        </div>
                    </div>

                    <div class="col-md-3 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">RWI</label>
                        </div>
                    </div>
                </div>


                <div class="row px-5 py-4">

                    <div class="col-md-2 form-group mb-3">
                        <span class="paragraph">Is rehabilitation likely?</span>
                    </div>

                    <div class="col-md-2 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Yes</label>
                        </div>
                    </div>

                    <div class="col-md-2 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">No</label>
                        </div>
                    </div>

                    <div class="col-md-2 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">N/A</label>
                        </div>
                    </div>

                    <div class="col-lg-4 col-sm-12 mb-3" style="margin-top: -27px">
                        <label>Return to Full duties
                            on Date (if known)</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>
                </div>




                <div class="row px-5 py-4">
                    <div class="col-lg-6 col-sm-12 mb-3">
                        <label>Date of RTW (if known)</label>
                        <input type="date" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-6 col-sm-12 mb-3">
                        <label>No. of Lost Days (if known)</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>
                </div>


                <div class="row px-5 py-4">

                    <div class="col-md-5 form-group mb-3">
                        <span class="paragraph">Has the Workers Comp body been notified?</span>
                    </div>


                    <div class="col-md-2 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Yes</label>
                        </div>
                    </div>

                    <div class="col-md-2 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">No</label>
                        </div>
                    </div>

                    <div class="col-md-2 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Not Required</label>
                        </div>
                    </div>
                </div>



                <div class="row px-5 py-4">
                    <div class="col-lg-6 col-sm-12 mb-3">
                        <label for="employment_end_date" class="text-dark">By Whom?</label>
                        <input type="date" id="employment_end_date" class="form-control">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3">
                        <label for="employment_end_date" class="text-dark">Date</label>
                        <input type="date" id="employment_end_date" class="form-control">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3">
                        <label for="employment_end_date" class="text-dark">Time</label>
                        <input type="time" id="employment_end_date" class="form-control">
                    </div>
                </div>

                <div class="row px-5 py-4">
                    <div class="col-12">
                        <div class="mb-3">
                            <label for="meeting_description" class="form-label">Other Details:</label>
                            <textarea class="form-control" id="meeting_description" rows="3" name="description"
                                placeholder="Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry"></textarea>
                        </div>
                    </div>
                </div>

                <div class="detail-card mb-4 ">
                    <div class="p-3 px-5">
                        <div class="h5 text-white pb-0 mb-0"> Sign Off for All Incidents</span>
                        </div>
                    </div>
                </div>


                <div class="injury mb-4 mt-3">
                    <div class="p-3 px-5">
                        <div class="h4 pb-0 mb-0 m-header">Foreman</div>
                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-lg-3 col-sm-12 mb-3">
                        <label>Name</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3">
                        <label>Signature</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3">
                        <label>Date</label>
                        <input type="date" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3">
                        <label>Time</label>
                        <input type="time" class="form-control" name="agenda">
                    </div>
                </div>


                <div class="injury mb-4 mt-3">
                    <div class="p-3 px-5">
                        <div class="h4 pb-0 mb-0 m-header">Site Safety Officer</div>
                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-lg-3 col-sm-12 mb-3">
                        <label>Name</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3">
                        <label>Signature</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3">
                        <label>Date</label>
                        <input type="date" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3">
                        <label>Time</label>
                        <input type="time" class="form-control" name="agenda">
                    </div>
                </div>


                <div class="injury mb-4 mt-3">
                    <div class="p-3 px-5">
                        <div class="h4 pb-0 mb-0 m-header">Safety Manager</div>
                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-lg-3 col-sm-12 mb-3">
                        <label>Name</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3">
                        <label>Signature</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3">
                        <label>Date</label>
                        <input type="date" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3">
                        <label>Time</label>
                        <input type="time" class="form-control" name="agenda">
                    </div>
                </div>


                <div class="injury mb-4 mt-3">
                    <div class="p-3 px-5">
                        <div class="h4 pb-0 mb-0 m-header">Director</div>
                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-lg-3 col-sm-12 mb-3">
                        <label>Name</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3">
                        <label>Signature</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3">
                        <label>Date</label>
                        <input type="date" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3">
                        <label>Time</label>
                        <input type="time" class="form-control" name="agenda">
                    </div>
                </div>

                <hr style="color: #797979">

                <div class="row px-5 pt-3">
                    <div class="col-lg-12 col-sm-12 mb-3 ">
                        <div class="mt-4 w-100 d-flex justify-content-end">
                            <button type="button" class="report-btn btn  me-2 waves-effect waves-light"
                                onclick="clearForm();">Clear</button>
                            <button type="submit" class="btn  btn-next   btn-primary waves-effect waves-light">Save
                                and
                                Next
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            {{-- Incident Inspection Report Screen 7 --}}


            {{-- Incident Inspection Report Screen 8 --}}
            <div class="form-step">
                <div class="detail-card mb-4 ">
                    <div class="p-3 px-5">
                        <div class="h5 text-white pb-0 mb-0">Incident / Injury Response<span> (Must be completed for all
                                Injuries / Incidents)</span>
                        </div>
                        <div class="p pt-2 text-white">High Risk Category (the most significant risk category, if any,
                            that relates to the incident) (Refer to 291   Meaning of “high risk construction work”)</div>
                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-md-6 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Involves A Risk Of A Person
                                Falling More <br>
                                Than 2 Meters</label>
                        </div>
                    </div>

                    <div class="col-md-6 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Is Carried Out On Or Near
                                Chemical, Fuel Or <br>
                                Refrigerant Lines</label>
                        </div>
                    </div>
                </div>


                <div class="row px-5 py-2">
                    <div class="col-md-6 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Is Carried Out On A
                                Telecommunication Tower</label>
                        </div>
                    </div>

                    <div class="col-md-6 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Is Carried Out On Or Near
                                Energised Electrical <br>
                                Installations Or Services</label>
                        </div>
                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-md-6 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Involves Demolition Of An
                                Element Of A Structure That <br>
                                Is Load-bearing Or Otherwise Related To The Physical <br>
                                Integrity Of The Structure</label>
                        </div>
                    </div>

                    <div class="col-md-6 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Involves Diving Work</label>
                        </div>
                    </div>
                </div>


                <div class="row px-5 py-2">
                    <div class="col-md-6 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Involves, Or Is Likely To
                                Involve, The Disturbance Of <br>
                                Asbestos</label>
                        </div>
                    </div>

                    <div class="col-md-6 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Involves Tilt-Up Or Precast
                                Concrete</label>
                        </div>
                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-md-6 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Involves Structural Alterations
                                Or Repairs That Require <br>
                                Temporary Support To Prevent Collapse</label>
                        </div>
                    </div>

                    <div class="col-md-6 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Is Carried Out On, In Or
                                Adjacent To A Road, Railway, <br>
                                Shipping lane Or Other Traffic Corridor That Is In Use <br>
                                By Traffic Other Than Pedestrians</label>
                        </div>
                    </div>
                </div>


                <div class="row px-5 py-2">
                    <div class="col-md-6 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Is Carried Out In Or Near A
                                Confined Space</label>
                        </div>
                    </div>

                    <div class="col-md-6 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Is Carried Out In An Area At A
                                Workplace In Which <br>
                                There Is Any Movement Of Powered Mobile Plant</label>
                        </div>
                    </div>
                </div>

                <div class="row px-5 py-2">
                    <div class="col-md-6 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Is Carried Out In Or Near A
                                Shaft Or Trench With An <br> Excavated Depth Greater Than 1.5 Metres, Or A Tunnel</label>
                        </div>
                    </div>

                    <div class="col-md-6 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Is Carried Out In An Area In
                                Which There Are <br> Artificial Extremes Of Temperature</label>
                        </div>
                    </div>
                </div>


                <div class="row px-5 py-2">
                    <div class="col-md-6 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Is Carried Out On Or Near
                                Pressurised Gas Distribution <br> Mains Or Piping</label>
                        </div>
                    </div>

                    <div class="col-md-6 form-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input mt-1" type="checkbox" id="credentials" value="1">
                            <label class="form-check-label mt-1 ml-2" for="credentials">Is Carried Out On Or Near
                                Pressurised Gas Distribution <br> Mains Or Piping</label>
                        </div>
                    </div>
                </div>


                <div class="row px-5 py-2">
                    <div class="col-12">
                        <div class="mb-3">
                            <label for="meeting_description" class="form-label">Other Details:</label>
                            <textarea class="form-control" id="meeting_description" rows="3" name="description"
                                placeholder="Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry"></textarea>
                        </div>
                    </div>
                </div>


                <div class="injury mb-4 mt-3">
                    <div class="p-3 px-5">
                        <div class="h4 pb-0 mb-0 m-header">Attach All Witness Statement/Documents to this Incident Report
                        </div>
                    </div>
                </div>


                <div class="row px-5 py-2">
                    <div class="col-lg-3 col-sm-12 mb-3 ">
                        <label>Witness Name</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3 ">
                        <label>Witness Statement Number</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3">
                        <label for="employment_end_date" class="text-dark">Date</label>
                        <input type="date" id="employment_end_date" class="form-control ">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3">
                        <label for="employment_end_date" class="text-dark">Time</label>
                        <input type="time" id="employment_end_date" class="form-control ">
                    </div>
                </div>


                <div class="d-flex justify-content-end mt-1">
                    <span class="mt-2">Add More</span>
                    <button class="border-none bg-transparent" type="button" onclick="addmore();"
                        style="padding-right:43px;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="43" height="43" viewBox="0 0 43 43"
                            fill="none">
                            <g filter="url(#filter0_d_2182_1189)">
                                <rect x="4" y="2" width="35" height="35" rx="4" fill="#019FF3">
                                </rect>
                            </g>
                            <path
                                d="M30.221 9H13.4026C12.0757 9 11 10.0757 11 11.4026V28.221C11 29.5479 12.0757 30.6236 13.4026 30.6236H30.221C31.5479 30.6236 32.6236 29.5479 32.6236 28.221V11.4026C32.6236 10.0757 31.5479 9 30.221 9Z"
                                stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            </path>
                            <path d="M21.8125 15.0078V24.6183" stroke="white" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round"></path>
                            <path d="M17.0068 19.8105H26.6173" stroke="white" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round"></path>

                        </svg>
                    </button>
                </div>


                <div class="injury mb-4 mt-3">
                    <div class="p-3 px-5">
                        <div class="h4 pb-0 mb-0 m-header">Document Details</div>
                    </div>
                </div>


                <div class="row px-5 py-2">
                    <div class="col-lg-3 col-sm-12 mb-3 ">
                        <label>Document Title</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3 ">
                        <label>Document Number</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>

                    <div class="col-lg-3 col-sm-12 mb-3">
                        <label for="Document" class="text-dark">Document 1</label>
                        <input type="file" id="Document" class="form-control ">
                        <img id="preview_image" src="#" alt="Preview" style="display:none; max-width: 100px; max-height: 100px;">
                    </div>

                    <div class="col-lg-3 col-sm-12 mt-3">

                        <div class="d-flex justify-content-end">
                            <span class="mt-2">Add More</span>
                            <button class="border-none bg-transparent" type="button" onclick="addmore();"
                                style="padding-right:43px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="43" height="43"
                                    viewBox="0 0 43 43" fill="none">
                                    <g filter="url(#filter0_d_2182_1189)">
                                        <rect x="4" y="2" width="35" height="35" rx="4"
                                            fill="#019FF3"></rect>
                                    </g>
                                    <path
                                        d="M30.221 9H13.4026C12.0757 9 11 10.0757 11 11.4026V28.221C11 29.5479 12.0757 30.6236 13.4026 30.6236H30.221C31.5479 30.6236 32.6236 29.5479 32.6236 28.221V11.4026C32.6236 10.0757 31.5479 9 30.221 9Z"
                                        stroke="white" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round"></path>
                                    <path d="M21.8125 15.0078V24.6183" stroke="white" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M17.0068 19.8105H26.6173" stroke="white" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round"></path>

                                </svg>
                            </button>
                        </div>
                    </div>
                </div>





            </div>
            {{-- Incident Inspection Report Screen 8 --}}

        </div>
    </div>
@endsection





@section('css-js')
<style>
        .form-label-other {
            font-family: Poppins;
            font-size: 14px;
            font-weight: 600;
            line-height: 21px;
            text-align: left;
            color: #544f5a;
        }

        .h5 {
            font-family: Poppins;
            font-size: 14px;
            font-weight: 600;
            line-height: 21px;
            text-align: left;

        }

        .form-check-with-border {
            border-left: 2px solid #ccc;
        }

        .btn:not([class*=btn-]):active,
        .btn:not([class*=btn-]).active,
        .btn:not([class*=btn-]).show,
        .btn:not([class*=btn-]) {
            border: 1px solid #BCBCBC;
        }

        .paragraph {
            color: #019ff3;
            font-family: Poppins;
            font-size: 14px;
            font-weight: 600;
            line-height: 21px;
            text-align: left;

        }

        .report-btn {
            color: #BCBCBC;
            border: 1px solid #BCBCBC;
        }

        .report-btn:hover {
            color: #BCBCBC;
            border: 1px solid #BCBCBC;
        }

        .injury {
            background: #F4F5FA;
        }

        .h4 {
            text-transform: uppercase;
            font-family: Poppins;
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
            text-align: left;
        }

        .card {
            border-radius: 2px;
        }

        .detail-card {
            background: #019ff3;
        }

        .detail-card .h5 {
            font-family: Poppins;
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
            text-align: left;
            letter-spacing: 0.5px;
        }

        .detail-card .p {
            font-size: 14px;
            line-height: 18px;
        }

        /* Add custom styles here */
        .flex {
            display: flex;
            align-items: center;
        }

        .form-group.form-check {
            border-left: 3px solid #007bff;
            /* Adjust border properties as needed */
            padding-left: 10px;
            /* Adjust padding to separate border from content */
        }

        .form-label {
            margin-right: 10px;
            /* Adjust spacing between label and radio buttons */
        }

        .form-check {
            margin-left: 20px;
            /* Adjust spacing between radio buttons */
        }

        /* Styles for Progress Bar */
        .progressbar {
            position: relative;
            display: flex;
            justify-content: space-around;
            counter-reset: step;
            margin: 2rem 0 4rem;
        }

        .progressbar::before,
        .progress {
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            height: 4px;
            width: 100%;
            background-color: #dcdcdc;
        }

        .progress {
            background-color: var(--primary-color);
            width: 0%;
            transition: 0.3s;
            z-index: -1;
        }

        .progress-step {
            width: 2.1875rem;
            height: 2.1875rem;
            background-color: #dcdcdc;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1;
        }

        .progress-step::before {
            counter-increment: step;
            content: counter(step);
        }

        .container {
            width: 100%;
            z-index: 1;
            overflow-x: auto;
        }


        .progressbar {
            counter-reset: step;
            white-space: nowrap;
        }

        .progress-step::after {
            content: attr(data-title);
            position: absolute;
            top: calc(100% + 0.5rem);
            font-size: 0.85rem;
            color: #666;
        }

        .progress-step-active {
            background: #019FF3;
            color: #f3f3f3;
        }


        /* Styles for input group. */
        .input-group {
            margin: 2rem 0;
        }

        .form-step {
            display: none;
            transform-origin: top;
            animation: animate 0.5s;
        }

        /* @keyframes animate {
                                                from {
                                                    transform: scale(1, 0);
                                                    opacity: 0;
                                                }

                                                to {
                                                    transform: scale(1, 1);
                                                    opacity: 1;
                                                }
                                            } */

        .form-step-active {
            display: block;
        }


        /* Media query for small screens */
        @media only screen and (max-width: 768px) {
            .progressbar li {
                width: auto;
            }

            .progressbar {
                display: flex;
                gap: 20px;
            }

            .report-btn {
                white-space: nowrap;
            }

            .btn-primary {
                white-space: nowrap;
                padding: 0px 40px 0px 40px;
            }

            .container-wrapper {
                display: inline-block;
                /* Ensure container wraps its content */
            }
        }
</style>

    <script>
        const formSteps = document.querySelectorAll(".form-step");
        const progressSteps = document.querySelectorAll(".progress-step");
        const progress = document.querySelector(".progress");
        const nextBtns = document.querySelectorAll(".btn-next");

        let currentStep = 0;

        nextBtns.forEach((btn) => {
            btn.addEventListener("click", () => {
                currentStep++;
                updateForm();
                updateProgress();
            });
        });

        function updateForm() {
            formSteps.forEach((formStep, index) => {
                formStep.classList.toggle("form-step-active", index === currentStep);
            });
        }

        function updateProgress() {
            const progressPercentage = (currentStep / (formSteps.length - 1)) * 100;
            progress.style.width = progressPercentage + "%";

            progressSteps.forEach((progressStep, index) => {
                progressStep.classList.toggle("progress-step-active", index <= currentStep);
            });
        }
    </script>
@endsection