@extends('admin.layout')
<style>
.table tr th:first-child {
    border-top-left-radius: 0 !important;
}
.table:not(.table-dark):not(.table-light) thead:not(.thead-dark) th, .table:not(.table-dark):not(.table-light) tfoot:not(.thead-dark) th {
    background-color: #4b6874 !important;
    color: #fff;
}
</style>
@section('main')
    <!-- BEGIN: Content-->
    <div class="content-wrapper">
        <div class="content-header row">
        </div>
        <div class="content-body">

            {{-- Updated Field Edit Modal --}}
            <div class="modal fade text-left" data-backdrop="static" data-keyboard="false" id="editFieldModal" tabindex="-1"
            role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        {{ Form::open(['url' => '#', 'name' => 'campFieldsForm', 'id' => 'campFieldsForm', 'enctype' => 'multipart/form-data']) }}
                        <div class="modal-header">
                            <h5 class="modal-title font-weight-bolder" id="modalTitle">Edit Field</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body p-2">
                            <input type="hidden" name="iCampID" id="iCampID" value="{{ $camp->iCampID ?? '' }}">
                            <input type="hidden" name="iFieldID" id="iFieldID" value="{{ $camp->iFieldID ?? '' }}">
                            <input type="hidden" name="masterFieldName" id="masterFieldName" value="">
                            <input type="hidden" name="iCampSetup" id="iCampSetup" value="">
                            <input type="hidden" name="isEditable" id="isEditable" value="">
                            <input type="hidden" name="isCustom" id="isCustom" value="">
                            <input type="hidden" name="vFieldTypeHidden" id="vFieldTypeHidden">

                            {{-- Select Doctor --}}
                            <div class="doctor-fields" id="doctorFields">
                                <div class="form-group green_check mb-1">
                                    <div class="custom-control custom-switch custom-control-inline">
                                        <input type="checkbox" class="custom-control-input" id="isAllowMultipleDoctor" name="isAllowMultipleDoctor">
                                        <label for="isAllowMultipleDoctor" class="custom-control-label">Multiple Doctor</label>
                                    </div>
                                </div>

                                <div class="form-group green_check mb-1">
                                    <div class="custom-control custom-switch custom-control-inline">
                                        <input type="hidden" class="custom-control-input" id="isOtherDoctor" name="isOtherDoctor">
                                        <!-- <label for="isOtherDoctor" class="custom-control-label">Other Doctor</label> -->
                                    </div>
                                </div>
                            </div>

                            {{-- Requirements --}}
                            <div id="requirementsID">
                                <div class="form-group my-1">
                                    <label for="selectRequirementField">Select Input</label>
                                    <select name="selectField_{{ $camp->iFieldID ?? '' }}[]" class="form-control select2" id="selectRequirementField" multiple>
                                        {{-- js option append --}}
                                    </select>
                                </div>
                            </div>

                            {{-- Field Type  --}}
                            <div id="fieldTypeID">
                                <div class="form-group my-1">
                                    <label for="vFieldType" class="form-label">Field Type<span style="color: red"> *</span></label>
                                    <select name="vFieldType" class="form-control" id="vFieldType" onchange="toggleFieldOptions()">
                                        <option value="input">Input</option>
                                        <option value="textarea">Text Area</option>
                                        <option value="dropdown">Dropdown</option>
                                    </select>
                                </div>
                            </div>

                            {{-- Multiple Selection --}}
                            <div id="isMultipleSelection">
                                <div class="form-group green_check mb-1 mt-1 ml-1">
                                    <div class="custom-control custom-switch custom-control-inline">
                                        <input type="checkbox" class="custom-control-input" id="isMultiple" name="isMultiple">
                                        <label for="isMultiple" class="custom-control-label">Multiple Selection</label>
                                    </div>
                                </div>
                            </div>

                            {{-- isNumeric --}}
                            <div id="isNumericInput">
                                <div class="form-group green_check mb-1 mt-1 ml-1">
                                    <div class="custom-control custom-switch custom-control-inline">
                                        <input type="checkbox" class="custom-control-input" id="isNumeric" name="isNumeric">
                                        <label for="isNumeric" class="custom-control-label">Numeric only</label>
                                    </div>
                                </div>
                            </div>

                            {{-- General --}}
                            <div id="generalFields">
                                <div class="form-group green_check mb-1 mt-1 ml-1">
                                    <div class="custom-control custom-switch custom-control-inline">
                                        <input type="checkbox" class="custom-control-input ml-2 d-none" name="isMandatory" id="isMandatory">
                                        <label class="custom-control-label" for="isMandatory">Required</label>
                                    </div>
                                </div>

                                <div class="form-group my-1 .general-label" id="vFieldNameDiv">
                                    <label for="vFieldName" class="form-label">Label<span style="color: red"> *</span></label>
                                    <input type="text" class="form-control" id="vFieldName" placeholder="Enter Field Name" name="vFieldName">
                                </div>

                                <div class="form-group my-1" id="vPlaceholderDiv">
                                    <label for="vPlaceholder" class="form-label">Placeholder</label>
                                    <input type="text" class="form-control" id="vPlaceholder" placeholder="Enter here" value="" name="vPlaceholder">
                                </div>

                                <div class="form-group my-1" id="vHelpTextDiv">
                                    <label for="vHelpText" class="form-label">Help text</label>
                                    <input type="text" class="form-control" id="vHelpText" placeholder="Enter help text" name="vHelpText">
                                </div>

                                <div class="form-group my-1" id="vMinLengthDiv">
                                    <label for="vMinLength" class="form-label">Min Length/Items</label>
                                    <input type="number" class="form-control" id="vMinLength" placeholder="Enter Min Length" name="vMinLength">
                                </div>

                                <div class="form-group my-1" id="vMaxLengthDiv">
                                    <label for="vMaxLength" class="form-label">Max Length/Items</label>
                                    <input type="number" class="form-control" id="vMaxLength" placeholder="Enter Max Length" name="vMaxLength">
                                </div>
                            </div>

                            

                            <!-- Dynamic Dropdown Options -->
                            <div id="dropdownOptionsContainer" style="display: none;">
                                <button type="button" class="btn btn-outline-primary add-option">+ Add Option</button>
                                <br><br>
                                <div class="input-group mb-2" id="dropdownOptionAdd">
                                    <input type="text" class="form-control" name="dropdownOptions[]" placeholder="Enter Option">
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-danger remove-option" type="button">-</button>
                                    </div>
                                </div>
                            </div>
                            <!-- Patient Forms Container -->
                            <div id="patientFormsContainer" style="display: none;">
                                <div class="form-group my-1">
                                    <label for="patientFormsSelect" class="form-label">Select Patient Form <span style="color: red"> *</span></label>
                                    <select name="iPatientFormID" class="form-control" id="patientFormsSelect">
                                        <!-- Options will be populated via JS -->
                                    </select>
                                </div>
                            </div>
                        </div>

                        {{-- Modal Footer --}}
                        <div class="modal-footer justify-content-center">
                            <button type="submit" form="campFieldsForm" class="btn btn-primary">Save</button>
                            <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                        </div>
                        {{ Form::close() }}
                    </div>
                </div>
            </div>
            {{-- End edit field modal --}}

            <!-- Dashboard Ecommerce Starts -->
            <section id="dashboard-ecommerce">
                <div class="row match-height justify-content-end g-2 mb-2">
                    <div class="col-lg-auto col-md-auto col-sm-auto col-auto mr-auto my-auto">
                        <h2 class="m-0"> <a href="{{ Route('division.camp.manage') }}" class="ml-1 mr-1"><i
                                    class="fa-solid fa-arrow-left-long"></i></a> Setup Camp <a href=""  data-toggle="tooltip" data-placement="right" title="" data-original-title="HO will setup the camp with master fields and approval hierarchy."
                                class="ml-1"><i data-feather="help-circle"></i></a></h2>
                    </div>
                </div>
            </section>
            <!-- Dashboard Ecommerce ends -->
            <section id="">
                <div class="row">
                    <div class="col-12">
                        <div class="tabing_rs">
                            <ul class="tabs">
                                <li class="tab-link current" data-tab="tab-1">Camp Type</li>
                                <li class="tab-link disabled" data-tab="tab-2">Form Setup</li>
                                <li class="tab-link disabled" data-tab="tab-3">Approval Setup</li>
                            </ul>
                        </div>
                        <div class="tabing_rs_detiles">
                            <div id="tab-1" class="tab-content current">
                                <div class="row pb-2">
                                    <div class="col-lg-auto col-md-auto col-sm-auto col-auto my-auto">
                                        <h2 class="m-0">Camp</h2>
                                    </div>
                                    <div class="col-lg-auto col-md-auto col-sm-auto col-auto ml-auto">
                                        <button type="submit" form="validateCampTypeName"
                                            class="btn btn-primary btn-toggle-sidebar waves-effect waves-float waves-light">
                                            <span class=""> Save & Update </span>
                                        </button>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-datatable p-2">
                                        {{ Form::open(['url' => '#', 'name' => 'validateCampTypeName', 'id' => 'validateCampTypeName', 'enctype' => 'multipart/form-data']) }}
                                        <div class="row">
                                            <input type="hidden" name="iCampID" id="iCampID" value="{{ $camp->iCampID ?? '' }}">
                                            
                                            <div class="col-lg-3 col-md-6 my-1">
                                                <div class="form-group">
                                                    <label for="" class="form-label">Camp Type</label>
                                                    <select class="select2 select-label form-control w-100" id="iCampTypeID" name="iCampTypeID" {{ isset($camp) && !empty($camp->iCampTypeID) ? 'disabled' : '' }}>
                                                        <option value="" {{ empty($camp->iCampTypeID ?? '') ? 'selected' : '' }}>Camp Type</option>
                                                        @foreach ($data['campTypes'] as $campType)
                                                            <option value="{{ $campType->iCampTypeID }}"
                                                                    {{ isset($camp) && $campType->iCampTypeID == $camp->iCampTypeID ? 'selected' : '' }}>
                                                                {{ $campType->vCampTypeName }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-md-6 my-1">
                                                <div class="form-group">
                                                    <label for="" class="form-label">Camp Name</label>
                                                    <input type="text" name="vCampName" class="form-control"
                                                        id="vCampName" placeholder="Enter Camp Name"
                                                        value = "{{ $camp->vCampName ?? '' }}" maxlength="60">
                                                        <span id="charLimitMessage" class="text-danger" style="display: none;">Maximum character limit reached!</span>
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-md-6 my-1">
                                                <div class="form-group">
                                                    <label for="" class="form-label">Expected no of camps</label>
                                                    <input type="number" class="form-control" id="vExpectedNoOfCamps"
                                                        name="vExpectedNoOfCamps" placeholder="Enter Expected no of camps"
                                                        value = "{{ $camp->vExpectedNoOfCamps ?? '' }}">
                                                </div>
                                            </div>
                                        </div>
                                        {{ Form::close() }}
                                    </div>
                                </div>
                            </div>
                            <div id="tab-2" class="tab-content">
                                <div class="second_tab">
                                    <div class="inside_tab">
                                        <a href="#" class="tab active"
                                            data-toggle-target=".tab-content-1">Planning</a>
                                        <a href="#" class="tab disabled"
                                            data-toggle-target=".tab-content-2">Implementation</a>
                                    </div>
                                    <div class="inside_detiles">
                                        <div class="tab-content tab-content-1 active">
                                            <div class="row pb-2 justify-content-between">
                                                <div class="col-lg-3 col-md-auto col-sm-auto col-auto my-auto">
                                                    <h2 class="m-0"> Form Setup
                                                        <i class="fa-solid fa-chevron-right ms-2 me-2"></i> Planning
                                                    </h2>
                                                </div>
                                                <div class="col-lg-auto col-md-auto col-sm-auto col-auto m-auto my-auto">
                                                    <p class="orange_text">Camp Name :
                                                        {{ $camp->vCampName ?? '' }}</p>
                                                </div>
                                                <div class="col-lg-3 col-md-auto col-sm-auto col-auto text-right">
                                                    <button type="submit" form="validateSetupPlanningForm"
                                                        class="btn btn-primary btn-toggle-sidebar waves-effect waves-float waves-light">
                                                        <span class=""> Save & Update </span>
                                                    </button>
                                                </div>
                                            </div>

                                            {{-- Planning Form Setup --}}
                                            <div class="card">
                                                <div class="card-datatable p-2">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                                            <div class="white_rs">
                                                                <h5>Field Master</h5>
                                                                <div class="approve_rs" id="fieldMasterContainer">
                                                                    @foreach ($campFieldMaster as $fields)
                                                                        @if ($fields->vFieldFor == 'planning' || $fields->vFieldFor == 'both')
                                                                            <div class="item" data-isEditable="{{ $fields->isEditable }}">
                                                                                <div class="left">
                                                                                    <input type="hidden" name="iFieldID" id="iFieldID_plan_{{ $fields->iFieldID }}" value="{{ $fields->iFieldID }}">
                                                                                    {{ $fields->vFieldName }}
                                                                                </div>
                                                                                <div class="right">
                                                                                    <i class="fa-solid fa-angle-right"></i>
                                                                                </div>
                                                                            </div>
                                                                        @endif
                                                                    @endforeach
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                                            <div class="white_rs">
                                                                <h5>Selected Fields</h5>
                                                                <div class="approve_rs camp_date"
                                                                    id="selectedFieldsContainer">
                                                                    {{ Form::open(['url' => '#', 'name' => 'validateSetupPlanningForm', 'id' => 'validateSetupPlanningForm', 'enctype' => 'multipart/form-data']) }}
                                                                    <input type="hidden" name="iCampID"
                                                                        id="iCampIDSetupPlan"
                                                                        value="{{ $camp->iCampID ?? '' }}">
                                                                    <input type="hidden" name="iCampSetup"
                                                                        id="iCampSetup" value="plan">

                                                                        @foreach ($campTypeFields as $field)
                                                                            @php
                                                                                $fieldData = $field->jFieldData ? json_decode($field->jFieldData) : $field->campFieldMaster;

                                                                                $isEditable = isset($field->jFieldData)
                                                                                    ? (json_decode($field->jFieldData)->isEditable ?? 'N')
                                                                                    : ($field->campFieldMaster->isEditable ?? 'N');
                                                                            @endphp
                                                                            <div class="item">
                                                                                <div class="left">
                                                                                    <input type="hidden" name="iFieldID" id="iFieldID" value="{{ $field->iFieldID }}">
                                                                                        {{ $field->campFieldMaster->vFieldName ?? $field->vFieldName }}
                                                                                    @if($isEditable == 'Y')
                                                                                        <div class="btn_group">
                                                                                            <div class="edit_view">
                                                                                                <a href="#"
                                                                                                data-toggle="modal"
                                                                                                onclick="setFieldsData({{ $field->iFieldID }}, {{ $camp->iCampID ?? '' }}, 'Plan')"
                                                                                                id="{{$field->iFieldID}}">
                                                                                                    <i class="fa fa-pen"></i>
                                                                                                </a>
                                                                                            </div>
                                                                                        </div>
                                                                                    
                                                                                    @endif
                                                                                </div>
                                                                                <div class="right">
                                                                                    @if ($field->campFieldMaster->isMandatory != 1)
                                                                                        @if ($activityCreated == 1)
                                                                                            <div class="custom-control custom-switch custom-control-inline">
                                                                                                <input type="checkbox" class="custom-control-input" name="" id="field_{{ $field->iFieldID }}" 
                                                                                                       onchange="updateCampFieldStatus({{ $field->iFieldID }}, {{ $camp->iCampID ?? 'null' }})"
                                                                                                       @if ($field->eStatus == 'Active') checked @endif>
                                                                                                <label class="custom-control-label" for="field_{{ $field->iFieldID }}"></label>
                                                                                            </div>
                                                                                            
                                                                                        @else
                                                                                            <i class="fa-solid fa-times"></i>
                                                                                        @endif
                                                                                    @endif
                                                                                </div>
                                                                            </div>
                                                                        @endforeach

                                                                    {{ Form::close() }}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-content tab-content-2">
                                            <div class="row pb-2 justify-content-between">
                                                <div class="col-lg-auto col-md-auto col-sm-auto col-auto my-auto">
                                                    <h2 class="m-0"> Form Setup <i
                                                            class="fa-solid fa-chevron-right ms-2 me-2"></i>
                                                        Implementation
                                                    </h2>
                                                </div>
                                                <div class="col-lg-auto col-md-auto col-sm-auto col-auto m-auto my-auto">
                                                    <p class="orange_text">Camp Name :
                                                        {{ $camp->vCampName ?? '' }}</p>
                                                </div>
                                                <div class="col-lg-auto col-md-auto col-sm-auto col-auto ml-auto">
                                                    <button type="submit" form="validateSetupImplementForm"
                                                        class="btn btn-primary btn-toggle-sidebar waves-effect waves-float waves-light">
                                                        <span class=""> Save & Update </span>
                                                    </button>
                                                </div>
                                            </div>

                                            {{-- Implement Form Setup --}}
                                            <div class="card">
                                                <div class="card-datatable p-2">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                                            <div class="white_rs">
                                                                <h5>Field Master</h5>
                                                                <div class="approve_rs"
                                                                    id="fieldMasterImplementContainer">
                                                                    @foreach ($campFieldMaster as $fields)
                                                                        @if ($fields->vFieldFor == 'implementation' || $fields->vFieldFor == 'both')
                                                                            <div class="item item-implementMaster" data-isEditable="{{ $fields->isEditable }}">
                                                                                <div class="left">
                                                                                    <input type="hidden" name="iFieldID"
                                                                                        id="iFieldID_implement_{{ $fields->iFieldID }}"
                                                                                        value="{{ $fields->iFieldID }}">
                                                                                    {{ $fields->vFieldName }}
                                                                                </div>
                                                                                <div class="right">
                                                                                    <i class="fa-solid fa-angle-right"></i>
                                                                                </div>
                                                                            </div>
                                                                        @endif
                                                                    @endforeach
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                                            <div class="white_rs">
                                                                <h5>Selected Fields</h5>
                                                                <div class="approve_rs camp_date"
                                                                    id="selectedImplementFieldsContainer">
                                                                    {{ Form::open(['url' => '#', 'name' => 'validateSetupImplementForm', 'id' => 'validateSetupImplementForm', 'enctype' => 'multipart/form-data']) }}
                                                                    <input type="hidden" name="iCampID"
                                                                        id="iCampIDSetupImplement" value="">
                                                                    <input type="hidden" name="iCampSetup"
                                                                        id="iCampSetup" value="implement">
                                                                    @foreach ($campTypeFieldsImplement as $field)
                                                                        @php
                                                                            $fieldData = $field->jFieldData ? json_decode($field->jFieldData) : $field->campFieldMaster;

                                                                            $isEditable = isset($field->jFieldData)
                                                                                    ? (json_decode($field->jFieldData)->isEditable ?? 'N')
                                                                                    : ($field->campFieldMaster->isEditable ?? 'N');
                                                                        @endphp
                                                                        <div class="item item-implementSelected">
                                                                            <div class="left">
                                                                                <input type="hidden" name="iFieldID"
                                                                                    id="iFieldID"
                                                                                    value="{{ $field->iFieldID }}">

                                                                                {{ $field->campFieldMaster->vFieldName ?? $field->vFieldName }}
                                                                                @if($isEditable == 'Y')
                                                                                    <div class="btn_group">
                                                                                        <div class="edit_view">
                                                                                            <a href="#"
                                                                                            data-toggle="modal"
                                                                                            onclick="setFieldsData({{ $field->iFieldID }}, {{ $camp->iCampID ?? '' }}, 'Implement')"
                                                                                            id="{{$field->iFieldID}}">
                                                                                                <i class="fa fa-pen"></i>
                                                                                            </a>
                                                                                        </div>
                                                                                    </div>

                                                                                @endif
                                                                            </div>
                                                                            <div class="right">
                                                                                @if ($field->campFieldMaster->isMandatory != 1)
                                                                                    @if ($activityCreated == 1)
                                                                                        <div class="custom-control custom-switch custom-control-inline">
                                                                                            <input type="checkbox" class="custom-control-input" name="" id="field_implement_{{ $field->iFieldID }}" onchange="updateCampFieldStatus({{ $field->iFieldID }}, {{ $camp->iCampID ?? 'null' }})"
                                                                                            @if ($field->eStatus == 'Active') checked @endif>
                                                                                            <label class="custom-control-label" for="field_implement_{{ $field->iFieldID }}"></label>
                                                                                        </div>
                                                                                    @else
                                                                                        <i class="fa-solid fa-times"></i>    
                                                                                    @endif
                                                                                @endif
                                                                            </div>
                                                                        </div>
                                                                    @endforeach
                                                                    {{ Form::close() }}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="tab-3" class="tab-content-approval">
                                <div div class="second_tab">
                                    <div class="inside_tab_approval">
                                        <a href="#" class="tab"
                                            data-toggle-target=".tab-content-approval-1">Planning</a>
                                        <a href="#" class="tab"
                                            data-toggle-target=".tab-content-approval-2">Implementation</a>
                                    </div>
                                    <div class="inside_detiles">
                                        <div class="tab-content-approval tab-content-approval-1 active">
                                            <div class="row pb-2 justify-content-between">
                                                <div class="col-lg-auto col-md-auto col-sm-auto col-auto my-auto">
                                                    <h2 class="m-0"> Form Setup <i
                                                            class="fa-solid fa-chevron-right ms-2 me-2"></i> Planning
                                                    </h2>
                                                </div>
                                                <div class="col-lg-auto col-md-auto col-sm-auto col-auto m-auto my-auto">
                                                    <p class="orange_text">Camp Name :
                                                        {{ $camp->vCampName ?? '' }}</p>
                                                </div>
                                                <div class="col-lg-auto col-md-auto col-sm-auto col-auto ml-auto">
                                                    <button type="submit" form="validateApprovalPlanForm"
                                                        class="btn btn-primary btn-toggle-sidebar waves-effect waves-float waves-light">
                                                        <span class=""> Save & Update </span>
                                                    </button>
                                                </div>
                                            </div>

                                            {{-- Planning Approval Setup --}}
                                            <div class="card">
                                                <div class="card-datatable p-2">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            {{ Form::open(['url' => '#', 'name' => 'validateApprovalPlanForm', 'id' => 'validateApprovalPlanForm', 'enctype' => 'multipart/form-data']) }}
                                                            <input type="hidden" name="iCampID"
                                                                id="iCampIDApprovalPlan" value="">
                                                            <div class="table-responsive">
                                                                <table class="table camp_table table-bordered">
                                                                    <thead>
                                                                        <tr>
                                                                            <th style="width:100px"></th>
                                                                            <th style="width:20%">SO</th>
                                                                            <th style="width:20%">FLM</th>
                                                                            <th style="width:20%">SLM</th>
                                                                            <th style="width:20%">TLM</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @php
                                                                            $groupedApprovals = $campApprovalManage
                                                                                ->whereIn('eCampStatus', [
                                                                                    'created',
                                                                                    'planned',
                                                                                    'planApprovalPending',
                                                                                ])
                                                                                ->groupBy('iCurrentStepID');
                                                                        @endphp
                                                                        <tr>
                                                                            <th>Initiation</th>
                                                                            @php
                                                                                $initiateApproval = $groupedApprovals->get(
                                                                                    0,
                                                                                )
                                                                                    ? $groupedApprovals->get(0)->first()
                                                                                        ->vHierarchy
                                                                                    : '';
                                                                                $initiateRoles = explode(
                                                                                    ',',
                                                                                    $initiateApproval,
                                                                                );

                                                                            @endphp
                                                                            <td>
                                                                                <div class="custom_camp_check">
                                                                                    <label>
                                                                                        <input type="checkbox"
                                                                                            name="initiate[]"
                                                                                            value="SO" id="initiateSO"
                                                                                            {{ in_array('SO', $initiateRoles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                            <td>
                                                                                <div class="custom_camp_check">
                                                                                    <label>
                                                                                        <input type="checkbox"
                                                                                            name="initiate[]"
                                                                                            value="FLM"
                                                                                            id="initiateFLM"
                                                                                            {{ in_array('FLM', $initiateRoles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                            <td>
                                                                                <div class="custom_camp_check">
                                                                                    <label>
                                                                                        <input type="checkbox"
                                                                                            name="initiate[]"
                                                                                            value="SLM"
                                                                                            id="initiateSLM"
                                                                                            {{ in_array('SLM', $initiateRoles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                            <td>
                                                                                <div class="custom_camp_check">
                                                                                    <label>
                                                                                        <input type="checkbox"
                                                                                            name="initiate[]"
                                                                                            value="TLM"
                                                                                            id="initiateTLM"
                                                                                            {{ in_array('TLM', $initiateRoles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <th>Step 1</th>
                                                                            @php
                                                                                $step1Approval = $groupedApprovals->get(
                                                                                    1,
                                                                                )
                                                                                    ? $groupedApprovals->get(1)->first()
                                                                                        ->vHierarchy
                                                                                    : '';
                                                                                $step1Roles = explode(
                                                                                    ',',
                                                                                    $step1Approval,
                                                                                );
                                                                            @endphp
                                                                            <td>
                                                                                <div class="custom_camp_check custom-disabled">
                                                                                    <label>
                                                                                        <input type="checkbox"
                                                                                            name="step1[]" value="SO"
                                                                                            id="S1SO" disabled
                                                                                            data-permanently-disabled="true" 
                                                                                            {{ in_array('SO', $step1Roles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                            <td>
                                                                                <div class="custom_camp_check">
                                                                                    <label>
                                                                                        <input type="checkbox"
                                                                                            name="step1[]" value="FLM"
                                                                                            id="S1FLM"
                                                                                            {{ in_array('FLM', $step1Roles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                            <td>
                                                                                <div class="custom_camp_check">
                                                                                    <label>
                                                                                        <input type="checkbox"
                                                                                            name="step1[]" value="SLM"
                                                                                            id="S1SLM"
                                                                                            {{ in_array('SLM', $step1Roles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                            <td>
                                                                                <div class="custom_camp_check">
                                                                                    <label>
                                                                                        <input type="checkbox"
                                                                                            name="step1[]" value="TLM"
                                                                                            id="S1TLM"
                                                                                            onclick="updateHierarchyRestrictions()"
                                                                                            {{ in_array('TLM', $step1Roles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <th>Step 2</th>
                                                                            @php
                                                                                $step2Approval = $groupedApprovals->get(
                                                                                    2,
                                                                                )
                                                                                    ? $groupedApprovals->get(2)->first()
                                                                                        ->vHierarchy
                                                                                    : '';
                                                                                $step2Roles = explode(
                                                                                    ',',
                                                                                    $step2Approval,
                                                                                );
                                                                            @endphp
                                                                            <td>
                                                                                <div class="custom_camp_check custom-disabled">
                                                                                    <label>
                                                                                        <input type="checkbox"
                                                                                            name="step2[]" value="SO"
                                                                                            id="S2SO" disabled
                                                                                            data-permanently-disabled="true" 
                                                                                            {{ in_array('SO', $step2Roles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                            <td>
                                                                                <div class="custom_camp_check custom-disabled">
                                                                                    <label>
                                                                                        <input type="checkbox"
                                                                                            name="step2[]" value="FLM"
                                                                                            id="S2FLM"  disabled
                                                                                            data-permanently-disabled="true" 
                                                                                            {{ in_array('FLM', $step2Roles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                            <td>
                                                                                <div class="custom_camp_check">
                                                                                    <label>
                                                                                        <input type="checkbox"
                                                                                            name="step2[]" value="SLM"
                                                                                            id="S2SLM"
                                                                                            {{ in_array('SLM', $step2Roles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                            <td>
                                                                                <div class="custom_camp_check">
                                                                                    <label>
                                                                                        <input type="checkbox"
                                                                                            name="step2[]" value="TLM"
                                                                                            id="S2TLM"
                                                                                            {{ in_array('TLM', $step2Roles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <th>Step 3</th>
                                                                            @php
                                                                                $step3Approval = $groupedApprovals->get(
                                                                                    3,
                                                                                )
                                                                                    ? $groupedApprovals->get(3)->first()
                                                                                        ->vHierarchy
                                                                                    : '';
                                                                                $step3Roles = explode(
                                                                                    ',',
                                                                                    $step3Approval,
                                                                                );
                                                                            @endphp
                                                                            <td>
                                                                                <div class="custom_camp_check custom-disabled">
                                                                                    <label>
                                                                                        <input type="checkbox"
                                                                                            name="step3[]" value="SO"
                                                                                            id="S3SO" disabled
                                                                                            data-permanently-disabled="true" 
                                                                                            {{ in_array('SO', $step3Roles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                            <td>
                                                                                <div class="custom_camp_check custom-disabled">
                                                                                    <label>
                                                                                        <input type="checkbox"
                                                                                            name="step3[]" value="FLM"
                                                                                            id="S3FLM" disabled
                                                                                            data-permanently-disabled="true" 
                                                                                            {{ in_array('FLM', $step3Roles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                            <td>
                                                                                <div class="custom_camp_check custom-disabled">
                                                                                    <label>
                                                                                        <input type="checkbox"
                                                                                            name="step3[]" value="SLM"
                                                                                            id="S3SLM" disabled
                                                                                            data-permanently-disabled="true" 
                                                                                            {{ in_array('SLM', $step3Roles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                            <td>
                                                                                <div class="custom_camp_check">
                                                                                    <label>
                                                                                        <input type="checkbox"
                                                                                            name="step3[]" value="TLM"
                                                                                            id="S3TLM"
                                                                                            {{ in_array('TLM', $step3Roles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                        <div class="col-12 pt-2 pb-2">
                                                            <div class="custom_camp_check">
                                                                <label>
                                                                    <input type="hidden" name="approvalType"
                                                                        id= "planApproval" value="plan">
                                                                    <input type="checkbox" value="Y"
                                                                        name="isPlanHOApprove" id="isPlanHOApprove"
                                                                        @if ($camp && $camp->isPlanHOApprove == 'Y')
                                                                            @checked(true)
                                                                        @endif
                                                                        @php
                                                                            $step4Approval = $groupedApprovals->get(4,)
                                                                                ? $groupedApprovals->get(4)->first()
                                                                                    ->vHierarchy
                                                                                : '';
                                                                            $step4Roles = explode(
                                                                                ',',
                                                                                $step4Approval,
                                                                            );
                                                                        @endphp
                                                                        {{ in_array('Division', $step4Roles) ? 'checked' : '' }}
                                                                    >
                                                                    <span>&nbsp;&nbsp;<b>Send the form to HO for final sign-off.</b></span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                        {{ Form::close() }}
                                                        <div class="col-12">
                                                            <div class="camp_rs_border">
                                                                <p><i class="fa-solid fa-angles-right"></i>The ideal description for Camp Approval Flow is SO >> FLM >> SLM >> TLM. Based on the requirement, select the "HO Approval" checkbox to send the camp for HO Review.</p>
                                                                    {{-- <p><i class="fa-solid fa-angles-right"></i> Eg. : FLM / SLM <span>Eg. : FLM >> SLM</span></p> --}}
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-content-approval tab-content-approval-2">
                                            <div class="row pb-2 justify-content-between">
                                                <div class="col-lg-auto col-md-auto col-sm-auto col-auto my-auto">
                                                    <h2 class="m-0"> Form Setup <i
                                                            class="fa-solid fa-chevron-right ms-2 me-2"></i>
                                                        Implementation
                                                    </h2>
                                                </div>
                                                <div class="col-lg-auto col-md-auto col-sm-auto col-auto m-auto my-auto">
                                                    <p class="orange_text">Camp Name :
                                                        {{ $camp->vCampName ?? '' }}</p>
                                                </div>
                                                <div class="col-lg-auto col-md-auto col-sm-auto col-auto ml-auto">
                                                    <button type="submit" form="validateApprovalImplementForm"
                                                        class="btn btn-primary btn-toggle-sidebar waves-effect waves-float waves-light">
                                                        <span class=""> Save & Update </span>
                                                    </button>
                                                </div>
                                            </div>

                                            {{-- Implement Approval Setup --}}
                                            <div class="card">
                                                <div class="card-datatable p-2">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            {{ Form::open(['url' => '#', 'name' => 'validateApprovalImplementForm', 'id' => 'validateApprovalImplementForm', 'enctype' => 'multipart/form-data']) }}
                                                            <input type="hidden" name="iCampID"
                                                                id="iCampIDApprovalImplement" value="">
                                                            <div class="table-responsive">
                                                                <table class="table camp_table table-bordered">
                                                                    <thead>
                                                                        <tr>
                                                                            <th style="width:100px"></th>
                                                                            <th style="width:20%">SO</th>
                                                                            <th style="width:20%">FLM</th>
                                                                            <th style="width:20%">SLM</th>
                                                                            <th style="width:20%">TLM</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @php
                                                                            $groupedApprovalsImplement = $campApprovalManage
                                                                                ->whereIn('eCampStatus', [
                                                                                    'implemented',
                                                                                    'implementApprovalPending',
                                                                                ])
                                                                                ->groupBy('iCurrentStepID');
                                                                        @endphp
                                                                        <tr>
                                                                            <th>Initiation</th>
                                                                            @php
                                                                                $initiateApproval = $groupedApprovalsImplement->get(0,)
                                                                                    ? $groupedApprovalsImplement->get(0)->first()->vHierarchy : '';
                                                                                $initiateRoles = explode(',',$initiateApproval,);
                                                                            @endphp
                                                                            <td>
                                                                                <div class="custom_camp_check">
                                                                                    <label>
                                                                                        <input type="checkbox" name="initiate[]" value="SO" id="initiateImpSO" 
                                                                                            {{ in_array('SO', $initiateRoles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                            <td>
                                                                                <div class="custom_camp_check">
                                                                                    <label>
                                                                                        <input type="checkbox" name="initiate[]" value="FLM" id="initiateImpFLM"
                                                                                            {{ in_array('FLM', $initiateRoles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                            <td>
                                                                                <div class="custom_camp_check">
                                                                                    <label>
                                                                                        <input type="checkbox" name="initiate[]" value="SLM" id="initiateImpSLM"
                                                                                            {{ in_array('SLM', $initiateRoles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                            <td>
                                                                                <div class="custom_camp_check">
                                                                                    <label>
                                                                                        <input type="checkbox" name="initiate[]" value="TLM" id="initiateImpTLM"
                                                                                            {{ in_array('TLM', $initiateRoles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <th>Step 1</th>
                                                                            @php
                                                                                $step1Approval = $groupedApprovalsImplement->get(1,)
                                                                                    ? $groupedApprovalsImplement->get(1)->first()->vHierarchy : '';
                                                                                $step1Roles = explode(',',$step1Approval,);
                                                                            @endphp
                                                                            <td>
                                                                                <div class="custom_camp_check custom-disabled">
                                                                                    <label>
                                                                                        <input type="checkbox" name="step1[]" value="SO" id="S1SOImp"
                                                                                        data-permanently-disabled="true"  disabled
                                                                                            {{ in_array('SO', $step1Roles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                            <td>
                                                                                <div class="custom_camp_check">
                                                                                    <label>
                                                                                        <input type="checkbox" name="step1[]" value="FLM" id="S1FLMImp"
                                                                                            {{ in_array('FLM', $step1Roles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                            <td>
                                                                                <div class="custom_camp_check">
                                                                                    <label>
                                                                                        <input type="checkbox" name="step1[]" value="SLM" id="S1SLMImp"
                                                                                            {{ in_array('SLM', $step1Roles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                            <td>
                                                                                <div class="custom_camp_check">
                                                                                    <label>
                                                                                        <input type="checkbox" name="step1[]" value="TLM" id="S1TLMImp"
                                                                                        onclick="updateInitiateHierarchyRestrictions()"
                                                                                            {{ in_array('TLM', $step1Roles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <th>Step 2</th>
                                                                            @php
                                                                                $step2Approval = $groupedApprovalsImplement->get(2,)
                                                                                    ? $groupedApprovalsImplement->get(2)->first()->vHierarchy : '';
                                                                                $step2Roles = explode(',',$step2Approval,);
                                                                            @endphp
                                                                            <td>
                                                                                <div class="custom_camp_check custom-disabled">
                                                                                    <label>
                                                                                        <input type="checkbox" name="step2[]" value="SO" id="S2SOImp"
                                                                                        data-permanently-disabled="true"  disabled
                                                                                            {{ in_array('SO', $step2Roles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                            <td>
                                                                                <div class="custom_camp_check custom-disabled">
                                                                                    <label>
                                                                                        <input type="checkbox" name="step2[]" value="FLM" id="S2FLMImp"
                                                                                        data-permanently-disabled="true"  disabled
                                                                                            {{ in_array('FLM', $step2Roles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                            <td>
                                                                                <div class="custom_camp_check">
                                                                                    <label>
                                                                                        <input type="checkbox" name="step2[]" value="SLM" id="S2SLMImp"
                                                                                            {{ in_array('SLM', $step2Roles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                            <td>
                                                                                <div class="custom_camp_check">
                                                                                    <label>
                                                                                        <input type="checkbox" name="step2[]" value="TLM" id="S2TLMImp" 
                                                                                            {{ in_array('TLM', $step2Roles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <th>Step 3</th>
                                                                            @php
                                                                                $step3Approval = $groupedApprovalsImplement->get(3,)
                                                                                    ? $groupedApprovalsImplement->get(3)->first()->vHierarchy : '';
                                                                                $step3Roles = explode(',', $step3Approval,);
                                                                            @endphp
                                                                            <td>
                                                                                <div class="custom_camp_check custom-disabled">
                                                                                    <label>
                                                                                        <input type="checkbox" name="step3[]" value="SO" id="S3SOImp"
                                                                                        data-permanently-disabled="true"  disabled
                                                                                            {{ in_array('SO', $step3Roles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                            <td>
                                                                                <div class="custom_camp_check custom-disabled">
                                                                                    <label>
                                                                                        <input type="checkbox" name="step3[]" value="FLM" id="S3FLMImp"
                                                                                        data-permanently-disabled="true"  disabled
                                                                                            {{ in_array('FLM', $step3Roles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                            <td>
                                                                                <div class="custom_camp_check custom-disabled">
                                                                                    <label>
                                                                                        <input type="checkbox" name="step3[]" value="SLM" id="S3SLMImp" 
                                                                                        data-permanently-disabled="true" disabled
                                                                                            {{ in_array('SLM', $step3Roles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                            <td>
                                                                                <div class="custom_camp_check">
                                                                                    <label>
                                                                                        <input type="checkbox" name="step3[]" value="TLM" id="S3TLMImp"
                                                                                            {{ in_array('TLM', $step3Roles) ? 'checked' : '' }}>
                                                                                        <span>&nbsp;&nbsp;</span>
                                                                                    </label>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                        <div class="col-12 pt-2 pb-2">
                                                            <div class="custom_camp_check">
                                                                <label>
                                                                    <input type="hidden" name="approvalType"
                                                                        id= "implementApproval" value="implement">
                                                                    <input type="checkbox" name="isImplementHOApprove"
                                                                        value="Y" id="isImplementHOApprove"
                                                                        @if ($camp && $camp->isImplementHOApprove == 'Y')
                                                                            @checked(true)
                                                                        @endif
                                                                        @php
                                                                            $step4Approval = $groupedApprovalsImplement->get(4,)
                                                                                ? $groupedApprovalsImplement->get(4)->first()->vHierarchy : '';
                                                                            $step4Roles = explode(',', $step4Approval);
                                                                        @endphp
                                                                        {{ in_array('Division', $step4Roles) ? 'checked' : '' }}
                                                                    >
                                                                    <span>&nbsp;&nbsp;<b>Send the form to HO for final sign-off.</b></span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                        {{ Form::close() }}
                                                        <div class="col-12">
                                                            <div class="camp_rs_border">
                                                                <h5>Instructions for Approval Setup Planning :</h5>
                                                                <p><i class="fa-solid fa-angles-right"></i>The ideal description for Camp Approval Flow is SO >> FLM >> SLM >> TLM. Based on the requirement, select the "HO Approval" checkbox to send the camp for HO Review.</p>
                                                                    {{-- <p><i class="fa-solid fa-angles-right"></i> Eg. : FLM / SLM <span>Eg. : FLM >> SLM</span></p> --}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
        </section>
        <!-- Dashboard Ecommerce ends -->
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            // Main Tabs
            $('ul.tabs li').click(function() {
                var tab_id = $(this).attr('data-tab');
                $('ul.tabs li').removeClass('current');
                $('.tab-content').removeClass('current');
                $(this).addClass('current');
                $("#" + tab_id).addClass('current');
            });

            // Nested Tabs
            $('.tab').on('click', function(evt) {
                evt.preventDefault();
                var $parentTabContent = $(this).closest('.tab-content'); // Find closest parent .tab-content

                $parentTabContent.find('.tab').removeClass(
                    'active'); // Remove active class from all tabs within this .tab-content
                $(this).addClass('active'); // Add active class to clicked tab

                var sel = this.getAttribute('data-toggle-target');
                $parentTabContent.find('.tab-content').removeClass('active').filter(sel).addClass('active');
            });


            $(".tab_down_view").click(function() {
                $(this).closest(".item").find(".sub_tab").slideToggle();
            });

            $('#vCampName').on('input', function() {
                const maxLength = 60;
                const currentLength = $(this).val().length;

                if (currentLength >= maxLength) {
                    $('#charLimitMessage').show();
                } else {
                    $('#charLimitMessage').hide();
                }
            });

            if (@json(session()->get('isCampEdit')) == 1) {
                let iCampIDKey = @json(session()->get('iCampIDKey'));
                if(iCampIDKey != 0){
                    $('#iCampIDSetupPlan').val(iCampIDKey);
                    $('.tab-link').removeClass('current disabled');
                    $('.tab-link[data-tab="tab-1"]').addClass('disabled');
                    $('.tab-link[data-tab="tab-2"]').addClass('current');
                    $('.tab-link[data-tab="tab-3"]').addClass('disabled');
                    $('#tab-1').removeClass('current').addClass('disabled');
                    $('#tab-2').addClass('current');
                }
            }

        })
    </script>
    <script>
        $('.center_code_div>.unlock_center_code').hide();
        $('.center_code_div>.unlock_center').hide();
        $('.center_code_div').on('click', function() {
            $('.center_code_div>.unlock_center').show();
            $('.center_code_div>.unlock_center_code').show();
            $('.center_code_div>.lock_center').hide();
        })
        $('.center_code_div').on('click', function() {
            $('.center_code_div>.lock_center').show();
            $('.center_code_div>.unlock_center').hide();
            $('.center_code_div>.unlock_center_code').hide();
        })
        dt_filter_table = $('.dt-column-search');
        if (dt_filter_table.length) {
            var dt_filter = dt_filter_table.DataTable({
                'scrollX': true,
            });
        }
    </script>

    <script>
        $(".js-example-basic-multiple").select2({
            placeholder: "Select"
        });
    </script>


    {{-- Starts --}}

    {{-- Camp name save --}}
    <script>
        $.validator.addMethod("noSpaces", function(value, element) {
            return this.optional(element) || $.trim(value).length > 0;
        }, "Please enter valid text, not just spaces.");
        //$('#iCampTypeID').prop('disabled', true).select2();
        $("#validateCampTypeName").validate({
            ignore: ".ignore",
            rules: {
                iCampTypeID: {
                    required: true,
                },
                vCampName: {
                    required: true,
                    noSpaces: true,
                }
            },

            submitHandler: function(form) {
                $('#iCampTypeID').prop('disabled', false).select2('enable');

                $("#submit").html('<span> Processing...</span>');
                $("#submit").attr('disabled', true);

                var formData = new FormData($("#validateCampTypeName")[0]);
                $.ajax({
                    url: "{{ route('division.camp.add') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(response) {
                        if (response.status == 0) {
                            $("#submit").html('Submit');
                            $("#submit").attr('disabled', false);
                            $.notify(response.message, "error");
                        } else {
                            let iCampIDKey = @json(session()->get('iCampIDKey'));
                            let editUrl = "{{ route('division.camp.edit', '') }}/" + response.data;
                            
                            $('#iCampIDSetupPlan').val(response.data);
                            $('#iCampSetup').val(response.data);
                            $.notify(response.message, "success");
                            $("#submit").attr('disabled', false);
                            $("#submit").html('Submit');
                            $('#dataTable').DataTable().ajax.reload(null, false);
                            $("#validateCampTypeName").trigger("reset");
                            //session data
                            window.location.href = editUrl;
                            //tab change
                            $('.tab-link').removeClass('current disabled');
                            $('.tab-link[data-tab="tab-1"]').addClass('disabled');
                            $('.tab-link[data-tab="tab-2"]').addClass('current');
                            $('.tab-link[data-tab="tab-3"]').addClass('disabled');
                            $('#tab-1').removeClass('current').addClass('disabled');
                            $('#tab-2').addClass('current');
                            
                        }
                    },

                    error: function(jqXHR, textStatus, errorThrown) {
                        if (jqXHR.status == 419) {
                            $.notify("Please refresh the Page", "error");
                        } else if (jqXHR.status == 500) {
                            $.notify("Please try after a few minutes", "error");
                        } else {
                            $.notify(jqXHR.responseJSON.message, "error");
                        }
                        var flag = 0;
                        $("#submit").html('Submit');
                        $("#submit").attr('disabled', false);
                        $.each(jqXHR.responseJSON.errors, function(index, data) {
                            if (flag == 0) {
                                $('input[name="' + index + '"]').focus();
                                flag = 1;
                            }
                            if (document.getElementsByName(index)[0]
                                .tagName == "INPUT" && document
                                .getElementsByName(index)[0].type != 'radio'
                            ) {
                                $('input[name="' + index + '"]').after(
                                    '<label id="' + index +
                                    '-error" class="error" for="' +
                                    index + '">' + data + '</label>');
                            } else if (document.getElementsByName(index)[0]
                                .tagName == "SELECT") {
                                $('select[name="' + index + '"]').after(
                                    '<label id="' + index +
                                    '-error" class="error" for="' +
                                    index + '">' + data + '</label>');
                            } else if (document.getElementsByName(index)[0]
                                .tagName == "TEXTAREA") {
                                $('textarea[name="' + index + '"]').after(
                                    '<label id="' + index +
                                    '-error" class="error" for="' +
                                    index + '">' + data + '</label>');
                            } else if (document.getElementsByName(index)[0]
                                .tagName == "INPUT" && document
                                .getElementsByName(index)[0].type == 'radio'
                            ) {
                                $('input[name="' + index + '"]').after(
                                    '<label id="' + index +
                                    '-error" class="error" for="' +
                                    index + '">' + data + '</label>');
                            }
                        });
                    }
                });
            }
        });

        // camp type PLAN form setup
        $("#validateSetupPlanningForm").validate({
            ignore: ".ignore",
            rules: {
                iCampSetup: {
                    required: true
                }
            },

            submitHandler: function(form) {
                $("#submit").html('<span> Processing...</span>');
                $("#submit").attr('disabled', true);

                var formData = new FormData($("#validateSetupPlanningForm")[0]);
                $.ajax({
                    url: "{{ route('division.camp.plan_implement.store') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(response) {
                        if (response.status == 0) {
                            $("#submit").html('Submit');
                            $("#submit").attr('disabled', false);
                            $.notify(response.message, "error");
                        } else {
                            $("#iFieldID").val('');
                            $.notify(response.message, "success");
                            $("#submit").attr('disabled', false);
                            $("#submit").html('Submit');
                            $('#dataTable').DataTable().ajax.reload(null, false);
                            $("#validateSetupPlanningForm").trigger("reset");

                            //session data
                            let iCampTypeIDKey = @json(session()->get('iCampIDKey'));
                            $('#iCampIDSetupImplement').val(response.data);

                            // tab change
                            $('.tab-link').removeClass('current disabled');
                            $('.tab-link[data-tab="tab-1"]').addClass('disabled');
                            $('.tab-link[data-tab="tab-2"]').addClass('current');
                            $('.tab-link[data-tab="tab-3"]').addClass('disabled');
                            $('#tab-1').removeClass('current').addClass('disabled');
                            $('#tab-2').addClass('current');
                            $(".inside_tab .tab").removeClass("active").addClass('disabled');
                            $(".inside_tab .tab[data-toggle-target='.tab-content-2']").removeClass(
                                "disabled").addClass("active");
                            $(".tab-content-1").hide();
                            $(".tab-content-2").show();
                        }
                    },

                    error: function(jqXHR, textStatus, errorThrown) {
                        if (jqXHR.status == 419) {
                            $.notify("Please refresh the Page", "error");
                        } else if (jqXHR.status == 500) {
                            $.notify("Please try after a few minutes", "error");
                        } else {
                            $.notify(jqXHR.responseJSON.message, "error");
                        }
                        var flag = 0;
                        $("#submit").html('Submit');
                        $("#submit").attr('disabled', false);
                        $.each(jqXHR.responseJSON.errors, function(index, data) {

                        });
                    }
                });
            }
        });

        // camp type Implement form setup

        $("#validateSetupImplementForm").validate({
            ignore: ".ignore",
            rules: {
                iFieldID: {
                    required: true
                }
            },

            submitHandler: function(form) {
                $("#submit").html('<span> Processing...</span>');
                $("#submit").attr('disabled', true);

                var formData = new FormData($("#validateSetupImplementForm")[0]);
                $.ajax({
                    url: "{{ route('division.camp.plan_implement.store') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(response) {
                        if (response.status == 0) {
                            $("#submit").html('Submit');
                            $("#submit").attr('disabled', false);
                            $.notify(response.message, "error");
                        } else {
                            $("#iFieldID").val('');
                            $.notify(response.message, "success");
                            $("#submit").attr('disabled', false);
                            $("#submit").html('Submit');
                            $('#dataTable').DataTable().ajax.reload(null, false);
                            $("#validateSetupImplementForm").trigger("reset");

                            //session data
                            let iCampIDKey = @json(session()->get('iCampIDKey'));
                            $('#iCampIDApprovalPlan').val(response.data);

                            //tab change
                            $('.tab-link').removeClass('current disabled');
                            $('.tab-link[data-tab="tab-1"]').addClass('disabled');
                            $('.tab-link[data-tab="tab-2"]').addClass('disabled');
                            $('.tab-link[data-tab="tab-3"]').addClass('current');
                            $('#tab-1').removeClass('current').addClass('disabled');
                            $('#tab-2').removeClass('current').addClass('disabled');
                            $(".inside_tab_approval .tab").removeClass("disabled").addClass(
                                'active');
                            $(".inside_tab_approval .tab[data-toggle-target='.tab-content-approval-2']")
                                .removeClass("active").addClass("disabled");
                            $('#tab-3').addClass('current');
                            $(".tab-content-approval-1").show();
                            $(".tab-content-approval-2").hide();
                        }
                    },

                    error: function(jqXHR, textStatus, errorThrown) {
                        if (jqXHR.status == 419) {
                            $.notify("Please refresh the Page", "error");
                        } else if (jqXHR.status == 500) {
                            $.notify("Please try after a few minutes", "error");
                        } else {
                            $.notify(jqXHR.responseJSON.message, "error");
                        }
                        var flag = 0;
                        $("#submit").html('Submit');
                        $("#submit").attr('disabled', false);
                        $.each(jqXHR.responseJSON.errors, function(index, data) {

                        });
                    }
                });
            }
        });

        // camp Approval plan
        $("#validateApprovalPlanForm").validate({
            ignore: ".ignore",
            rules: {
                iCampID: {
                    required: true
                },
                initiate: {
                    required: true
                }
            },
            submitHandler: function(form) {
                $("#submit").html('<span> Processing...</span>');
                $("#submit").attr('disabled', true);

                var formData = new FormData(form);
                $.ajax({
                    url: "{{ route('division.camp.approval.store') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(response) {
                        $("#submit").html('Submit');
                        $("#submit").attr('disabled', false);

                        if (response.status == 0) {
                            $.notify(response.message, "error");
                            setTimeout(function() {
                                window.location.href = "{{ route('division.camp.manage') }}";
                            }, 2000);
                        } else {
                            $("#iFieldID").val('');
                            $.notify(response.message, "success");
                            $('#dataTable').DataTable().ajax.reload(null, false);
                            $("#validateApprovalPlanForm").trigger("reset");

                            //session data
                            let iCampIDKey = @json(session()->get('iCampIDKey'));
                            $('#iCampIDApprovalImplement').val(response.data);

                            //tab change
                            $('.tab-link').removeClass('current disabled');
                            $('.tab-link[data-tab="tab-1"]').addClass('disabled');
                            $('.tab-link[data-tab="tab-2"]').addClass('disabled');
                            $('.tab-link[data-tab="tab-3"]').addClass('current');
                            $('#tab-1').removeClass('current').addClass('disabled');
                            $('#tab-2').removeClass('current').addClass('disabled');
                            $(".inside_tab_approval .tab").removeClass("active").addClass(
                                'disabled');
                            $(".inside_tab_approval .tab[data-toggle-target='.tab-content-approval-2']")
                                .removeClass("disabled").addClass("active");
                            $('#tab-3').addClass('current');
                            $(".tab-content-approval-2").show();
                            $(".tab-content-approval-1").hide();
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        $("#submit").html('Submit');
                        $("#submit").attr('disabled', false);

                        if (jqXHR.status == 419) {
                            $.notify("Please refresh the Page", "error");
                        } else if (jqXHR.status == 500) {
                            $.notify("Please try after a few minutes", "error");
                        } else {
                            $.notify(jqXHR.responseJSON.message, "error");
                            setTimeout(function() {
                                window.location.href = "{{ route('division.camp.manage') }}";
                            }, 2000);
                        }
                        $.each(jqXHR.responseJSON.errors, function(index, data) {
                            
                        });
                    }
                });
            }
        });

        // camp type Approval implement
        $("#validateApprovalImplementForm").validate({
            ignore: ".ignore",
            rules: {
                iCampID: {
                    required: true
                },
                initiate: {
                    required: true
                }
            },
            submitHandler: function(form) {
                $("#submit").html('<span> Processing...</span>');
                $("#submit").attr('disabled', true);

                var formData = new FormData(form);
                $.ajax({
                    url: "{{ route('division.camp.approval.store') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(response) {
                        $('#loader').addClass('loader');

                        $("#submit").html('Submit');
                        $("#submit").attr('disabled', false);

                        if (response.status == 0) {
                            $.notify(response.message, "error");
                            setTimeout(function() {
                                window.location.href = "{{ route('division.camp.manage') }}";
                            }, 2000);
                        } else {
                            $.notify(response.message, "success");
                            $('#dataTable').DataTable().ajax.reload(null, false);

                            setTimeout(function() {
                                window.location.href = "{{ route('division.camp.manage') }}";
                            }, 2000);
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        $("#submit").html('Submit');
                        $("#submit").attr('disabled', false);

                        if (jqXHR.status == 419) {
                            $.notify("Please refresh the Page", "error");
                        } else if (jqXHR.status == 500) {
                            $.notify("Please try after a few minutes", "error");
                        } else {
                            $.notify(jqXHR.responseJSON.message, "error");
                        }
                        setTimeout(function() {
                            window.location.href = "{{ route('division.camp.manage') }}";
                        }, 2000);

                        $.each(jqXHR.responseJSON.errors, function(index, data) {
                           
                        });
                    }
                });
            }
        });

        $.validator.addMethod("maxGreaterThanMin", function(value, element) {
            var min = parseInt($('#vMinLength').val(), 10);
            var max = parseInt(value, 10);
            if (!isNaN(min) && !isNaN(max)) {
                return max >= min;
            }
            return true; // don't validate if one is empty
        }, "Max Length must be greater than or equal to Min Length.");

        // campfield form submit
        $("#campFieldsForm").validate({
            ignore: ".ignore",
            rules: {
                iCampID: {
                    required: true
                },
                vFieldName: {
                    required: true
                },
                vMaxLength: {
                    maxGreaterThanMin: true
                }
            },
            submitHandler: function(form) {
                var selectedFieldType = $('#vFieldType').val();
                if (selectedFieldType !== "input" && selectedFieldType !== "textarea" && selectedFieldType !== "dropdown" && selectedFieldType !== "file") {
                    $('#vFieldType').val('checkbox');
                }
                $("#submit").html('<span> Processing...</span>');
                $("#submit").attr('disabled', true);
                $('#campFieldsForm input[type="checkbox"]').each(function() {
                    if ($(this).is(':checked')) {
                        $(this).val(1);
                    } else {
                        $(this).prop('checked', true).val(0);
                    }
                });
                $(".error").remove();
                var formData = new FormData(form);
                $.ajax({
                    url: "{{ route('division.camp.field.store') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(response) {
                        $("#submit").html('Submit');
                        $("#submit").attr('disabled', false);

                        if (response.status == 0) {
                            $.notify(response.message, "error");
                        } else {
                            $.notify(response.message, "success");
                            $('#editFieldModal').modal('hide');
                            $("#campFieldsForm").trigger("reset");
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        $("#submit").html('Submit');
                        $("#submit").attr('disabled', false);

                        if (jqXHR.status == 419) {
                            $.notify("Please refresh the Page", "error");
                        } else if (jqXHR.status == 500) {
                            $.notify("Please try after a few minutes", "error");
                        } else {
                            $.notify(jqXHR.responseJSON.message, "error");
                        }

                        $.each(jqXHR.responseJSON.errors, function(index, data) {
                           
                        });
                    }
                });
            }
        });

        // Form setup Plan
        $("#selectedFieldsContainer .item").each(function() {
            var fieldID = $(this).find('input[name="iFieldID"]').val();
            var masterItem = $("#fieldMasterContainer .item").filter(function() {
                return $(this).find('input[name="iFieldID"]').val() == fieldID;
            });
            masterItem.find('.fa-angle-right').removeClass('fa-angle-right').addClass('fa-check');
            $("#validateSetupPlanningForm").append(
                `<input type="hidden" name="iFieldID[]" value="${fieldID}">`
            );
        });

        $("#fieldMasterContainer").on("click", ".fa-angle-right", function() {
            var item = $(this).closest('.item');
            var isEdited = item.attr('data-isEditable');

            var campID = @json(session()->get('iCampIDKey'));
            var fieldID = item.find('input[name="iFieldID"]').val();
            var activityCreated = @json($activityCreated);

            $(this).removeClass('fa-angle-right').addClass('fa-check');
            var fieldName = item.text().trim();

            var clonedItem = item.clone();
            if(activityCreated == 0){
                clonedItem.find('.fa-check').removeClass('fa-check').addClass('fa-times');
            }else{
                clonedItem.find('.fa-check').removeClass('fa-check');
            }
            
            if (fieldName == 'Camp Date' || fieldName == 'Select Doctor'){
                clonedItem.find('.fa-times').remove();
            }
            if (isEdited == 'Y') {
                clonedItem.find('.left').append(`
                    <div class="btn_group">
                        <div class="edit_view">
                            <a href="#"
                            data-toggle="modal"
                            onclick="setFieldsData(${fieldID}, ${campID}, 'Plan')"
                            id="iFieldID_plan_${fieldID}">
                                <i class="fa fa-pen"></i>
                            </a>
                        </div>
                    </div>
                `);
            };
            if(activityCreated == 1){
                clonedItem.find('.right').append(`
                    <div class="custom-control custom-switch custom-control-inline">
                        <input type="checkbox" class="custom-control-input" name="" id="field_plan_new_${fieldID}" onchange="updateCampFieldStatus(${fieldID}, ${campID})">
                        <label class="custom-control-label" for="field_plan_new_${fieldID}"></label>
                    </div>
                    ${fieldName != 'Camp Date' && fieldName != 'Select Doctor' ? '' : ''}
                `);
            }
            $("#selectedFieldsContainer").append(clonedItem);
            $("#validateSetupPlanningForm").append(
                `<input type="hidden" name="iFieldID[]" value="${fieldID}">`
            );
            clonedItem.find('select.select2').select2();
        });

        $("#selectedFieldsContainer").on("click", ".fa-times", function() {
            var item = $(this).closest('.item');
            var fieldID = item.find('input[name="iFieldID"]').val();
            var originalItem = $("#fieldMasterContainer .item").filter(function() {
                return $(this).find('input[name="iFieldID"]').val() == fieldID;
            });
            originalItem.find('.fa-check').removeClass('fa-check').addClass('fa-angle-right');
            item.remove();
            $("#validateSetupPlanningForm input[value='" + fieldID + "']").remove();
        });


        // Form setup Implement

        $("#selectedImplementFieldsContainer .item-implementSelected").each(function() {
            var fieldID = $(this).find('input[name="iFieldID"]').val();
            var masterItem = $("#fieldMasterImplementContainer .item-implementMaster").filter(function() {
                return $(this).find('input[name="iFieldID"]').val() == fieldID;
            });
            masterItem.find('.fa-angle-right').removeClass('fa-angle-right').addClass('fa-check');
            $("#validateSetupImplementForm").append(
                `<input type="hidden" name="iFieldID[]" value="${fieldID}">`
            );
        });

        $("#fieldMasterImplementContainer").on("click", ".fa-angle-right", function() {
            var item = $(this).closest('.item-implementMaster');
            var isEdited = item.attr('data-isEditable');

            var campID = @json(session()->get('iCampIDKey'));
            var fieldID = item.find('input[name="iFieldID"]').val();
            var activityCreated = @json($activityCreated);
            
            $(this).removeClass('fa-angle-right').addClass('fa-check');
            var fieldName = item.text().trim();
            
            var clonedItem = item.clone();

            if(activityCreated == 0){
                clonedItem.find('.fa-check').removeClass('fa-check').addClass('fa-times');
            }else{
                clonedItem.find('.fa-check').removeClass('fa-check');
            }

            if (fieldName == 'Implementation Date') {
                clonedItem.find('.fa-times').remove();
            }
        
            if (isEdited === 'Y') {
                clonedItem.find('.left').append(`
                    <div class="btn_group">
                        <div class="edit_view">
                            <a href="#"
                            data-toggle="modal"
                            onclick="setFieldsData(${fieldID}, ${campID}, 'Implement')"
                            id="iFieldID_implement_${fieldID}">
                                <i class="fa fa-pen"></i>
                            </a>
                        </div>
                    </div>
                `);
            };

            if(activityCreated == 1){
                clonedItem.find('.right').append(`
                    <div class="custom-control custom-switch custom-control-inline">
                        <input type="checkbox" class="custom-control-input" name="" id="field_implement_new_${fieldID}" onchange="updateCampFieldStatus(${fieldID}, ${campID})">
                        <label class="custom-control-label" for="field_implement_new_${fieldID}"></label>
                    </div>
                    ${fieldName != 'Implementation Date' ? '' : ''}
                `);
            }
            
            $("#selectedImplementFieldsContainer").append(clonedItem);
            $("#validateSetupImplementForm").append(
                `<input type="hidden" name="iFieldID[]" value="${fieldID}">`
            );
        });
        $("#selectedImplementFieldsContainer").on("click", ".fa-times", function() {
            var item = $(this).closest('.item-implementSelected');
            var fieldID = item.find('input[name="iFieldID"]').val();
            var originalItem = $("#fieldMasterImplementContainer .item-implementMaster").filter(function() {
                return $(this).find('input[name="iFieldID"]').val() == fieldID;
            });
            originalItem.find('.fa-check').removeClass('fa-check').addClass('fa-angle-right');
            item.remove();
            
            $("#validateSetupImplementForm input[value='" + fieldID + "']").remove();
        });

        // end Form setup Implement

        $(document).on('click', '.toggle-checkbox', function() {
            var target = $(this).data('target'); // Find the target collapse
            $(target).collapse('toggle'); // Toggle the collapse

            // Toggle the chevron direction
            var icon = $(this).find('i');
            if (icon.hasClass('fa-chevron-down')) {
                icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
            } else {
                icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
            }
        });

        function setFieldsData(fieldID, campID, fieldFor) {
            $('#dropdownOptionAdd').empty(); 
            $('#requirementsID select').html(''); 
            $.ajax({
                url: "{{ route('division.camp.fields.edit') }}",
                type: 'GET',
                data: {
                    iFieldID: fieldID,
                    iCampID: campID,
                    fieldFor: fieldFor,
                },
                success: function(response) {
                    if (response.status === 1) {
                        const data = response.data;
                        
                        var iCampSetupPlan = @json(session()->get('isCampPlan'));
                        var iCampSetupImplement = @json(session()->get('isCampImplement'));

                        window.skuList = @json($skuList);
                        window.expenseList = @json($expenseList);
                        window.requirementList = @json($requirementList);
                        // Add hidden field values
                        $('#editFieldModal input[name="isEditable"]').val(data.isEditable || '');
                        $('#editFieldModal input[name="iCampSetup"]').val(data.fieldFor);
                        $('#editFieldModal input[name="iFieldID"]').val(data.iFieldID);
                        $('#editFieldModal input[name="vFieldName"]').val(data.vFieldName || '');
                        $('#editFieldModal input[name="isCustom"]').val(data.isCustom || '');
                        $('#editFieldModal input[name="masterFieldName"]').val(data.masterFieldName || '');
                        //Fields value while editing
                        $('#editFieldModal input[name="vPlaceholder"]').val(data.vPlaceholder || 'Enter here');
                        $('#editFieldModal input[name="vMinLength"]').val(data.vMinLength || '');
                        $('#editFieldModal input[name="vMaxLength"]').val(data.vMaxLength || '');
                        $('#editFieldModal #isMandatory').prop('checked', data.isMandatory == 1);
                        $('#editFieldModal #isOtherDoctor').prop('checked', data.isOtherDoctor == 1);
                        $('#editFieldModal #isAllowMultipleDoctor').prop('checked', data.isAllowMultipleDoctor == 1);
                        $('#editFieldModal input[name="vHelpText"]').val(data.vHelpText || '');
                        $('#editFieldModal #isMultiple').prop('checked',data.isMultiple == 1);
                        $('#editFieldModal #isNumeric').prop('checked',data.isNumeric == 1);

                        $('#requirementsID').hide();
                        $('#fieldTypeID').hide();
                        $('#generalFields').show();
                        $('#doctorFields').hide();
                        $('#isMultipleSelection').hide();
                        $('#isNumericInput').hide();

                        if (data.vFieldName == 'Select Doctor') {
                            $('#generalFields').hide();
                            $('#doctorFields').show();
                            $('#dropdownOptionsContainer').hide();
                        }

                        if(data.vFieldType == 'input'){
                            $('#isNumericInput').show();
                        }

                        if (data.isCustom == 1){
                            $('#fieldTypeID').show();
                        }
                        if(data.vFieldType == 'checkbox'){
                            $('#requirementsID').show();
                        }
                        $('#patientFormsContainer').hide();

                        if (data.vFieldName === 'Patient Details') {
                            $('#generalFields input, #generalFields select').not('#isMandatory').not('#vFieldName').closest('.form-group').hide();
                            $('#patientFormsContainer').show(); // Show forms dropdown
                            $('#generalFields').hide();
                            $('#doctorFields').hide();
                            $('#requirementsID').hide();
                            $('#dropdownOptionsContainer').hide();
                            $('#vFieldType').val('checkbox');
                            let formOptions = '<option selected default disabled>Select Patient Form</option>';
                            $.each(data.availableForms, function(iPatientFormID, vPatientFormName) {
                                const isSelected = (data.selectedForm == iPatientFormID) ? 'selected' : '';
                                formOptions += `<option value="${iPatientFormID}" ${isSelected}>${vPatientFormName}</option>`;
                            });
                            $('#patientFormsSelect').html(formOptions).prop('required', true);
                            if (@json($activityCreated) == 1) {
                                $('#patientFormsContainer p').remove();
                                $('#patientFormsSelect').prop('disabled', true);
                                $('#patientFormsContainer').append('<p style="color: red;">You cannot change the Patient Form because a Camp is already created.</p>');
                            } else {
                                $('#patientFormsSelect').prop('disabled', false);
                                $('#editModal').modal('show');
                            }
                             $('#vFieldTypeHidden').val('checkbox');
                        }

                        // Handle field type and toggle options
                        $('#vFieldType').val(data.vFieldType || '');
                        toggleFieldOptions(data);

                        if(data.vFieldType == 'file'){                      
                            $('#doctorFields').hide();
                            $('#requirementsID').hide();
                            $('#dropdownOptionsContainer').hide();
                            $('#patientFormsContainer').hide();
                            $('#generalFields').show(); // Show the parent div
                            $('#generalFields #isMandatory').show();
                            $('#isMultipleSelection').show();
                            $('#generalFields #vPlaceholderDiv').hide();
                            $('#generalFields #vHelpTextDiv').hide();
                            $('#generalFields #vHelpTextDiv').hide();
                            $('#generalFields #vMinLengthDiv').hide();
                            $('#generalFields #vMaxLengthDiv').hide();
                            $('#generalFields #vFieldNameDiv').hide();
                            $('#vFieldTypeHidden').val(data.vFieldType || '');
                        }

                        $('#editFieldModal').modal('show');
                    } else {
                        alert(response.message || 'Failed to load field data.');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                }
            });
        }

        function toggleFieldOptions(data) {
            var fieldType = document.getElementById('vFieldType').value;
            var fieldName = document.getElementById('vFieldName').value;

            let options = '';
            let selectName = '';

            if (data) {
                let masterFieldName = data.masterFieldName;
                let selectedOptions = data.selectedOptions || [];

                // Define the option lists dynamically (you might need to fetch these via AJAX or pass them globally)
                const skuList = window.skuList || []; // Assume these are passed globally from Laravel
                const expenseList = window.expenseList || [];
                const requirementList = window.requirementList || [];

                if (masterFieldName == 'Sample Requirements SKU' || masterFieldName == 'Qty of Samples Used') {
                    $('#patientFormsContainer').hide();
                    options = skuList.map(list => {
                        const isSelected = selectedOptions.includes(list.iProductID) ? 'selected' : '';
                        return `<option value="${list.iProductID}" ${isSelected}>${list.vProductName}</option>`;
                    }).join('');
                    selectName = 'sku_req[]';
                    $('#vFieldTypeHidden').val('checkbox');
                } else if (masterFieldName == 'Expected Expense' || masterFieldName == 'Expenses Breakup') {
                    $('#patientFormsContainer').hide();
                    options = expenseList.map(expense => {
                        const isSelected = selectedOptions.includes(expense.iExpenseID) ? 'selected' : '';
                        return `<option value="${expense.iExpenseID}" ${isSelected}>${expense.vExpenseName}</option>`;
                    }).join('');
                    selectName = 'exp_req[]';
                     $('#vFieldTypeHidden').val('checkbox');
                } else if (masterFieldName == 'Expected Item Requirements' || masterFieldName == 'Actual Items Used') {
                    $('#patientFormsContainer').hide();
                    options = requirementList.map(requirement => {
                        const isSelected = selectedOptions.includes(requirement.iRequirementID) ? 'selected' : '';
                        return `<option value="${requirement.iRequirementID}" ${isSelected}>${requirement.vRequirementName}</option>`;
                    }).join('');
                    selectName = 'item_req[]';
                    $('#vFieldTypeHidden').val('checkbox');
                }
            }

            $('#requirementsID select').html(options);
            $('#selectRequirementField').attr('name', selectName);

            $('#dropdownOptionAdd').empty();
            $('#isNumericInput').hide();

            if (fieldType === 'dropdown' && fieldName !== 'Select Doctor') {
                $('#generalFields input, #generalFields select').not('#isMandatory').not('#vFieldName').closest('.form-group').hide();
                $('#dropdownOptionsContainer').show();
                $('#fieldTypeID').show();
                $('#isMultipleSelection').show();

                if (Array.isArray(data.dropdownOptions) && data.dropdownOptions.length > 0) {
                    data.dropdownOptions.forEach(option => {
                        $('#dropdownOptionAdd').append(`
                            <div class="input-group mb-2">
                                <input type="text" class="form-control" name="dropdownOptions[]" value="${option}" placeholder="Enter Option">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-danger remove-option" type="button">-</button>
                                </div>
                            </div>
                        `);
                    });
                } else {
                    $('#dropdownOptionAdd').append(`
                        <div class="input-group mb-2">
                            <input type="text" class="form-control" name="dropdownOptions[]" placeholder="Enter Option">
                            <div class="input-group-append">
                                <button class="btn btn-outline-danger remove-option" type="button">-</button>
                            </div>
                        </div>
                    `);
                }
            } else {
                if (fieldType === 'input') {
                    $('#isNumericInput').show();
                    $('#patientFormsContainer').hide();
                }
                $('#generalFields input, #generalFields select').closest('.form-group').show();
                $('#dropdownOptionsContainer').hide();
                $('#isMultipleSelection').hide();
            }
        }

        $(document).on('click', '.add-option', function() {
            var newOption = `
                <div class="input-group mb-2">
                    <input type="text" class="form-control" name="dropdownOptions[]" placeholder="Enter Option">
                    <div class="input-group-append">
                        <button class="btn btn-outline-danger remove-option" type="button">-</button>
                    </div>
                </div>`;
            $('#dropdownOptionAdd').append(newOption);
        });

        $(document).on('click', '.remove-option', function() {
            $(this).closest('.input-group').remove();
        });

    </script>

    <script>
        function updateHierarchyRestrictions() {
            const initiateFLM = document.getElementById('initiateFLM').checked;
            const initiateSLM = document.getElementById('initiateSLM').checked;
            const initiateTLM = document.getElementById('initiateTLM').checked;
            
            const step1FLM = document.getElementById('S1FLM').checked;
            const step1SLM = document.getElementById('S1SLM').checked;
            const step1TLM = document.getElementById('S1TLM').checked;

            const step2SLM = document.getElementById('S2SLM').checked;
            const step2TLM = document.getElementById('S2TLM').checked;

            const step3SLM = document.getElementById('S3SLM').checked;

            function toggleDisabled(selector, shouldDisable) {
                document.querySelectorAll(selector).forEach(checkbox => {
                    checkbox.disabled = shouldDisable;
                    const parentDiv = checkbox.closest('.custom_camp_check');
                    if (!checkbox.hasAttribute('data-permanently-disabled')) {
                        checkbox.disabled = shouldDisable;
                        if (shouldDisable) {
                            parentDiv.classList.add('custom-disabled');
                        } else {
                            parentDiv.classList.remove('custom-disabled');
                        }
                    }
                });
            }

            //toggleDisabled('#S1FLM', initiateSLM || initiateTLM); // Disable SO and FLM if SLM is selected in initiation
            //toggleDisabled('#S1FLM, #S1SLM, #S2SLM', initiateTLM); // Disable SO, FLM, and SLM if TLM is selected in initiation
            //toggleDisabled('#S2SLM', step1TLM);
        }
    </script>

<script>
    function updateInitiateHierarchyRestrictions() {
        const initiateFLM = document.getElementById('initiateFLMImp').checked;
        const initiateSLM = document.getElementById('initiateSLMImp').checked;
        const initiateTLM = document.getElementById('initiateTLMImp').checked;
        
        const step1FLM = document.getElementById('S1ImpFLM').checked;
        const step1SLM = document.getElementById('S1ImpSLM').checked;
        const step1TLM = document.getElementById('S1ImpTLM').checked;

        const step2SLM = document.getElementById('S2ImpSLM').checked;
        const step2TLM = document.getElementById('S2ImpTLM').checked;

        const step3SLM = document.getElementById('S3ImpSLM').checked;

        function toggleDisabled(selector, shouldDisable) {
            document.querySelectorAll(selector).forEach(checkbox => {
                checkbox.disabled = shouldDisable;
                const parentDiv = checkbox.closest('.custom_camp_check');
                if (!checkbox.hasAttribute('data-permanently-disabled')) {
                    checkbox.disabled = shouldDisable;
                    if (shouldDisable) {
                        parentDiv.classList.add('custom-disabled');
                    } else {
                        parentDiv.classList.remove('custom-disabled');
                    }
                }
            });
        }

        //toggleDisabled('#S1FLMImp', initiateSLM || initiateTLM); // Disable SO and FLM if SLM is selected in initiation
        //toggleDisabled('#S1FLMImp, #S1SLMImp, #S2SLMImp', initiateTLM); // Disable SO, FLM, and SLM if TLM is selected in initiation
        //toggleDisabled('#S2SLMImp', step1TLM);
    }

    //status update for camp field

    function updateCampFieldStatus(fieldID, campID) {
        $.ajax({
            url: "{{ route('division.camp.field.status') }}",
            type: 'POST',
            data: {
                fieldID: fieldID,
                campID: campID,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                $.notify(response.message, "success");
            },
            error: function(xhr) {
                console.error("Error updating status:", xhr);
                $.notify(xhr, "error");
            }
        });
    }

</script>
@endsection