@extends('admin.layout')
@section('main')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/assets/css/FieldCamp.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" integrity="sha512-H9jrZiiopUdsLpg94A333EfumgUBpO9MdbxStdeITo+KEIMaNfHNvwyjjDJb+ERPaRS6DpyRlKbvPUasNItRyw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        .normal_picker {
                    position: relative;
                }

                .normal_picker i {
                    position: absolute;
                    top: 12px;
                    right: 15px;
                    pointer-events: none;
                }
                .poof_view {
        position: relative;
    }

    .poof_view .fa-circle-xmark {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        color: #EC1F26;
        font-size: 22px;
    }
    .upload_proof_img {
        display: flex;
        flex-wrap: wrap;
    }

    .upload_proof_img .left {
        position: relative;
        width: 152px;
        color: #fff;
        padding: 10px 20px;
        background: #DB644D;
        border-radius: 4px;
    }

    .upload_proof_img .left span {
        /* background: #DB644D; */
        box-shadow: 0px 4px 24px #5EBEFF0A;
        border-radius: 4px;
        max-width: 100%;
        color: #fff;
        /* cursor: pointer; */
        display: block;
    }

    .upload_proof_img .left input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    .upload_proof_img .left:hover, .upload_proof_img .left span:hover {
        background: #000 !important;
    }

    .upload_proof_img .right {
        margin-left: 10px;
        position: relative;
        display: flex;
        flex-wrap: wrap;    
        width: auto;
        height: auto;
    }

    .upload_proof_img .right img {
        object-fit: cover;
        border: 1px solid #e7e7e7;
        width: 40px;
        height: 40px;
    }

    .upload_proof_img .right i {
        position: absolute;
        top: -5px;
        right: -5px;
        color: #ffffff;
        background: #000000;
        width: 15px;
        height: 15px;
        font-size: 10px;
        display: flex
    ;
        align-items: center;
        justify-content: center;
        border-radius: 50px;
        cursor: pointer;
    }
    .upload_proof_img .right .camp_multi {
        margin: 0 5px;
        position: relative;
    }

    .invoice_note img {
        width: 100%;
        border: 1px solid #D9D9D9;
        border-radius: 8px;
    }

    </style>

    <div class="modal fade text-left " data-backdrop="static" data-keyboard="false" id="add_expenses" tabindex="-1"
        role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel1">Add Expense</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                {{ Form::open(['url' => '#', 'name' => 'ExpenseForm', 'id' => 'ExpenseForm', 'enctype' => 'multipart/form-data', 'class' => 'pt-0']) }}

                <div class="modal-body p-2">
                    <input type="hidden" id="editExpenseId" value="">
                    <input type="hidden" id="editSelectExpenseId" value="">

                    <div class="row">
                      
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-2">
                                <label for="" class="form-label">Expense type</label>
                                <select class="select2 select-label form-control w-100" id="select_expense"
                                    name="select_expense">
                                    <option value="" selected default> Select Expense</option>
                                </select>
                                <label id="select_expense-error" class="error" for="select_expense"></label>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-2">
                                <label for="" class="form-label">Expense Amount</label>
                                <input type="number" oninput="this.value = this.value < 0 ? 0 : this.value"
                                    class="form-control" id="expense_qty" name="expense_qty"
                                    placeholder="Enter Expense Amount">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-2">
                                <label for="beneficiaryNameInput" class="form-label">Beneficiary Name</label>
                                <input type="text" class="form-control" id="beneficiaryNameInput"
                                    name="beneficiaryNameInput" placeholder="Enter Beneficiary Name">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-2">
                                <label for="payment_type" class="form-label">Payment Type</label>
                                <select class="select2 select-label form-control w-100" id="payment_type"
                                    name="payment_type">
                                    <option value="" selected disabled>Select Payment Type</option>
                                    <!-- Add options dynamically or statically -->
                                </select>
                                <label id="payment_type-error" class="error" for="payment_type"></label>

                            </div>
                        </div>


                        <div class="col-12">
                            <div class="mb-2">
                                <label for="" class="form-label">Upload</label>
                                <div class="rs_custom_upload">
                                    <div class="left">
                                        <span id="invoice_file_preview">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="27.132" height="24.461"
                                                viewBox="0 0 27.132 24.461">
                                                <g id="image-combiner-svgrepo-com" transform="translate(0.402 0.401)">
                                                    <path id="Path_2682" data-name="Path 2682"
                                                        d="M21.377,12.37a.914.914,0,0,1,1.042.847h0l1.693,16.088a.914.914,0,0,1-.847,1.042L7.243,32.041A.914.914,0,0,1,6.2,31.194h0L4.507,15.171a.914.914,0,0,1,.847-1.042Z"
                                                        transform="translate(-4.5 -8.39)" fill="none" stroke="#db644d"
                                                        stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="0.8" />
                                                    <path id="Path_2683" data-name="Path 2683"
                                                        d="M11.795,18.928a2.194,2.194,0,1,0,2.41,1.954,2.2,2.2,0,0,0-2.41-1.954h0Zm5.927,3.778L14.6,26.549a.322.322,0,0,1-.456.065h0l-.716-.586a.314.314,0,0,0-.456.065L9.58,30.262a.275.275,0,0,0,.065.456c-.065.065.065.065.13.065L23.259,29.35a.365.365,0,0,0,.326-.391c0-.065-.065-.13-.065-.2l-5.276-6.123a.492.492,0,0,0-.521.065h0Z"
                                                        transform="translate(-6.121 -10.519)" fill="none"
                                                        stroke="#db644d" stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="0.8" />
                                                    <path id="Path_2684" data-name="Path 2684"
                                                        d="M16.281,11.435l.456-4.1a.949.949,0,0,1,1.042-.847L33.8,8.178a.949.949,0,0,1,.847,1.042h0L32.956,25.244a1.006,1.006,0,0,1-1.042.847l-4.169-.456"
                                                        transform="translate(-8.328 -6.478)" fill="none"
                                                        stroke="#db644d" stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="0.8" />
                                                    <path id="Path_2685" data-name="Path 2685"
                                                        d="M32.435,26.379l3.582.391a.413.413,0,0,0,.391-.326.239.239,0,0,0-.065-.2l-3.908-7.1a.4.4,0,0,0-.456-.13h0l-.261.261"
                                                        transform="translate(-13.343 -10.544)" fill="none"
                                                        stroke="#db644d" stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="0.8" />
                                                </g>
                                            </svg>
                                        </span>
                                        <p id="invoice_file_name">Upload Invoice</p>
                                    </div>
                                    <div class="right">
                                        <button
                                            class="btn btn-primary btn-toggle-sidebar waves-effect waves-float waves-light">
                                            Upload
                                            <input type="file" class="form-control" id="expense_file"
                                                name="expense_file" onchange="validateFile(this)" accept="image/*">
                                        </button>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-2">
                                <label for="" class="form-label">Remark</label>
                                <textarea class="form-control" id="expense_remark" name="expense_remark" placeholder="Enter Remark" rows="3"></textarea>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="submit" id="addExpenseBtn" class="btn btn-primary">Save</button>
                    <!-- <button type="submit" class="btn btn-light">Clear</button> -->
                </div>
                {{ Form::close() }}

            </div>
        </div>
    </div>


     <!-- Patient Form Modal -->
     <div class="modal fade" id="add_patient" tabindex="-1" role="dialog" aria-labelledby="addPatientModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addPatientModalLabel">
                        <span id="patientFormName"></span><span> </span>
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="patientFormFields"></div>
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="submit" class="btn btn-primary" id="submitPatientBtn" form="add_patient_form">Submit</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>                    
                </div>
            </div>
        </div>
    </div>

     <!-- View Patients Modal -->
     <div class="modal fade" id="view_patients" tabindex="-1" role="dialog" aria-labelledby="viewPatientsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewPatientsModalLabel">Patient List</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive dataTables_scroll">
                        <table class="dt-column-search table table-striped w-100 text-center display dataTable no-footer" id="patientListTable">
                            <thead>
                                <tr id="patientListHeaders"></tr>
                            </thead>
                            <tbody id="patientListBody"></tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade text-left " data-backdrop="static" data-keyboard="false" id="add_sku" tabindex="-1"
        role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel1">Qty of Samples Used</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                {{ Form::open(['url' => '#', 'name' => 'SKUForm', 'id' => 'SKUForm', 'enctype' => 'multipart/form-data', 'class' => 'pt-0']) }}
                <div class="modal-body p-2">
                    <div class="row">
                        <input type="hidden" id="editSKUId" value="">
                        <input type="hidden" id="editSelectSKUId" value="">


                        <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                            <div class="mb-2">
                                <label for="" class="form-label">SKU</label>
                                <select class="select2 select-label form-control w-100" id="select_SKU"
                                    name="select_SKU">
                                    <option value="" selected default> Select SKU</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                            <div class="mb-2">
                                <label for="" class="form-label">QTY</label>
                                <input type="number" oninput="this.value = this.value < 0 ? 0 : this.value"
                                    class="form-control" id="SKU_qty" name="SKU_qty" placeholder="Enter SKU Amount">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-2">
                                <label for="" class="form-label">Remark</label>
                                <textarea class="form-control" id="SKU_remark" name="SKU_remark" placeholder="Enter Remark" rows="3"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="submit" id="addSKUBtn" class="btn btn-primary">Submit</button>
                </div>
                {{ Form::close() }}

            </div>
        </div>
    </div>

    <div class="modal fade text-left " data-backdrop="static" data-keyboard="false" id="add_Requirement" tabindex="-1"
        role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel1">Actual Item Used</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                {{ Form::open(['url' => '#', 'name' => 'RequirementForm', 'id' => 'RequirementForm', 'enctype' => 'multipart/form-data', 'class' => 'pt-0']) }}

                <div class="modal-body p-2">
                    <div class="row">
                        <input type="hidden" id="editRequirementId" value="">
                        <input type="hidden" id="editSelectRequirementId" value="">


                        <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                            <div class="mb-2">
                                <label for="" class="form-label">Requirement</label>
                                <select class="select2 select-label form-control w-100" id="select_Requirement"
                                    name="select_Requirement">
                                    <option value="" selected default> Select Requirement</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                            <div class="mb-2">
                                <label for="" class="form-label">QTY</label>
                                <input type="number" oninput="this.value = this.value < 0 ? 0 : this.value"
                                    class="form-control" id="Requirement_qty" name="Requirement_qty"
                                    placeholder="Enter Requirement Amount">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-2">
                                <label for="" class="form-label">Remark</label>
                                <textarea class="form-control" id="Requirement_remark" name="Requirement_remark" placeholder="Enter Remark"
                                    rows="3"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-center">
                    <!-- <button type="submit" class="btn btn-dark">Add More</button> -->
                    <button type="submit" id="addRequirementBtn" class="btn btn-primary">Submit</button>
                </div>
                {{ Form::close() }}

            </div>
        </div>
    </div>

    <!-- BEGIN: Content-->
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper">
        <div class="content-header row">

        </div>
        <div class="content-body">
            <!-- Dashboard Ecommerce Starts -->
            <section id="dashboard-ecommerce">
                <div class="row match-height justify-content-end g-2">
                    <div class="col-lg-auto col-md-auto col-sm-auto col-auto mr-auto mb-2">
                        <h2 class="m-0"> <a href="{{ route('field.campAnalytics') }}"> <i
                                    class="fa fa-arrow-left"></i></a> Camp Implementation

                        </h2>
                    </div>
                    <div class="col-lg-auto col-md-auto col-sm-auto col-auto ml-auto my-auto">
                        <div class="form-group mb-1 text-right">
                            <button type="button" class="btn btn-primary waves-effect waves-float waves-light"
                                onclick="submitForm('Y')">
                                <span> Save &amp; Draft </span>
                            </button>
                        </div>
                    </div>
                    <div class="col-lg-auto col-md-auto col-sm-auto col-auto my-auto">
                        <div class="form-group mb-1 text-right">
                            <button type="button" class="btn btn-primary waves-effect waves-float waves-light"
                                onclick="submitForm('N')">
                                <span> Submit </span>
                            </button>
                        </div>
                    </div>
                </div>

            </section>

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-datatable p-1">
                            <div class="col-lg-4 col-sm-6 col-md-4 col-12">
                                <div class="mb-2">
                                    <label for="" class="form-label">Camp ID</label>
                                    <input type="text" class="form-control" id="campID" disabled
                                        placeholder="Enter Camp ID">
                                </div>
                            </div>
                          
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-datatable p-1">
                            <input type="hidden" id="iCampAnalyticsID" value="{{ $iCampAnalyticsID }}">

                            <input type="hidden" name="MinExpenseLimit" id="MinExpenseLimit">
                            <input type="hidden" name="MinSKULimit" id="MinSKULimit">
                            <input type="hidden" name="MinRequirmentLimit" id="MinRequirmentLimit">

                            <input type="hidden" name="MaxExpenseLimit" id="MaxExpenseLimit">
                            <input type="hidden" name="MaxSKULimit" id="MaxSKULimit">
                            <input type="hidden" name="MaxRequirmentLimit" id="MaxRequirmentLimit">

                            <input type="hidden" name="SKUMasterFieldName" id="SKUMasterFieldName"
                                value="Qty of Samples Used">
                            <input type="hidden" name="RequirmentMasterFieldName" id="RequirmentMasterFieldName"
                                value="Actual Items Used">
                            <input type="hidden" name="ExpenseMasterFieldName" id="ExpenseMasterFieldName"
                                value="Expenses Breakup">

                            <input type="hidden" id="helpTextSKU" name="helpTextSKU">
                            <input type="hidden" id="helpTextRequirment" name="helpTextRequirment">
                            <input type="hidden" id="helpTextExpense" name="helpTextExpense">

                            <input type="hidden" id="isMandatorySKU" name="isMandatorySKU">
                            <input type="hidden" id="isMandatoryRequirment" name="isMandatoryRequirment">
                            <input type="hidden" id="isMandatoryExpense" name="isMandatoryExpense">
                            <input type="hidden" id="campDateLimit" name="campDateLimit">


                            <div class="top_heading_one ">
                                <div class="row masterData">


                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-auto col-md-auto col-sm-auto col-auto ml-auto my-auto">
                                    <div class="form-group mb-1 text-right">
                                        <button type="button"
                                            class="btn btn-primary waves-effect waves-float waves-light"
                                            onclick="submitForm('Y')">
                                            <span> Save &amp; Draft </span>
                                        </button>
                                    </div>
                                </div>
                                <div class="col-lg-auto col-md-auto col-sm-auto col-auto my-auto">
                                    <div class="form-group mb-1 text-right">
                                        <button type="button"
                                            class="btn btn-primary waves-effect waves-float waves-light"
                                            onclick="submitForm('N')">
                                            <span> Submit </span>
                                        </button>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
    </div>


    <div class="modal fade" id="camp_activity" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
        <div class="modal-dialog  modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title font-weight-bolder" id="">Select Camp Name</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <from>
                        <div class="form-group mb-2">
                            <label for="login-Username" class="form-label">Camp Name <span
                                    class="text-danger">*</span></label>
                            <select class="select2 select-label form-control w-100" id="" name="select-label">
                                <option value="" selected default disabled> Camp </option>
                                <option value="PMS"> Camp 1</option>
                                <option value="RS"> Camp 2</option>
                                <option value="AdB"> Camp 3 </option>
                            </select>
                        </div>
                    </from>
                </div>
                <div class="modal-footer justify-content-center">
                    <a href="" class="btn btn-primary">Submit</a>
                    <!-- <button type="submit" class="btn btn-light">Clear</button> -->
                </div>

            </div>
        </div>
    </div>

    <!-- Invoice Modal -->
    <div class="modal fade" id="documentModal" tabindex="-1" aria-labelledby="documentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js" integrity="sha512-uURl+ZXMBrF4AwGaWmEetzrd+J5/8NRkWAvJx5sbPSSuOb0bZLqf+tOzniObO00BjHa/dD7gub9oCGMLPQHtQA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function() {

            $('.reportrange').each(function() {
                var start = moment().subtract(29, 'days');
                var end = moment();
                var $this = $(this); // current element in the loop

                function cb(start, end) {
                    $this.find('span').html(start.format('MMMM D, YYYY') + ' - ' + end.format(
                        'MMMM D, YYYY'));
                }

                $this.daterangepicker({
                    startDate: start,
                    endDate: end,
                    ranges: {
                        'Today': [moment(), moment()],
                        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                        'This Month': [moment().startOf('month'), moment().endOf('month')],
                        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment()
                            .subtract(1, 'month').endOf('month')
                        ]
                    }
                }, cb);

                cb(start, end); // Initial call to set the text for the first time
            });

        });
    </script>



    <script>
        function validateFile(input) {
            const file = input.files[0]; // Get the first file in the input
            const validExtensions = ['image/jpeg', 'image/png', 'application/pdf']; // Valid file types

            if (file) {
                const fileType = file.type; // Get the MIME type of the file

                // Check if the file type is valid
                if (!validExtensions.includes(fileType)) {
                    input.value = ''; // Reset the input
                    // Show an error notification
                    $.notify('Invalid file type. Please select an image (JPG, JPEG, PNG) or a PDF file.', {
                        className: 'error', // Type of notification
                        autoHide: true, // Automatically hide after a few seconds
                        clickToHide: true // Hide on click
                    });
                }
            }

            const fileNameElement = document.getElementById("invoice_file_name");
            // const filePreviewElement = document.getElementById("invoice_file_preview");

            if (file) {
                const fileName = file.name;
                const fileType = file.type;

                // Update file name
                fileNameElement.textContent = fileName;

               
            }
        }

        $('#add_expenses').on('hidden.bs.modal', function() {
            $('#editExpenseId').val('');
            $('#editSelectExpenseId').val('');
            $(this).find('input[type="number"]').val(''); // Reset numeric inputs
            $(this).find('textarea').val(''); // Reset textareas
            $(this).find('select').val('').change(); // Reset select elements
            $('#select_expense').prop('disabled', false);

            $('#ExpenseForm')[0].reset();
            var validator = $('#ExpenseForm').validate();
            validator.resetForm();
            $('#expense_file').val(''); // Clear file input
            document.getElementById("invoice_file_name").textContent = "Upload Invoice";
            
        });

        $('#add_sku').on('hidden.bs.modal', function() {
            $('#editSKUId').val('');
            $('#editSelectSKUId').val('');
            $(this).find('input[type="number"]').val(''); // Reset numeric inputs
            $(this).find('textarea').val(''); // Reset textareas
            $(this).find('select').val('').change(); // Reset select elements
            $('#select_SKU').prop('disabled', false);
            $('#SKUForm')[0].reset();
            var validator = $('#SKUForm').validate();
            validator.resetForm();
        });

        $('#add_Requirement').on('hidden.bs.modal', function() {
            $('#editRequirementId').val('');
            $('#editSelectRequirementId').val('');
            $(this).find('input[type="number"]').val(''); // Reset numeric inputs
            $(this).find('textarea').val(''); // Reset textareas
            $(this).find('select').val('').change(); // Reset select elements
            $('#select_Requirement').prop('disabled', false);
            $('#RequirementForm')[0].reset();
            var validator = $('#RequirementForm').validate();
            validator.resetForm();
        });

        function submitForm(saveDraft) {
            const iCampAnalyticsID = document.getElementById('iCampAnalyticsID');

            if (!iCampAnalyticsID.value) {
                $.notify('Please select a camp', "error");
                $(".masterData").empty();
                return;
            }

            let isValid = true; // Assume form is valid initially
            const requiredFields = document.querySelectorAll('.FieldFormData[required]'); // Select all required fields

            requiredFields.forEach(function(field) {
                const fieldValue = field.value.trim();
                if (field.hasAttribute('required') && !fieldValue && saveDraft != 'Y') {
                    isValid = false;
                    $.notify(`${field.name} is required`, "error");
                }

                const minLength = field.getAttribute('minlength');
                if (minLength && fieldValue.length < minLength) {
                    isValid = false;
                    $.notify(`${field.name} must be at least ${minLength} characters`, "error");
                }

                const maxLength = field.getAttribute('maxlength');
                if (maxLength && fieldValue.length > maxLength) {
                    isValid = false;
                    $.notify(`${field.name} must be no more than ${maxLength} characters`, "error");
                }
            });


            if (!isValid) {
                return; // Stop the form submission if there are invalid fields
            }

            const formData = new FormData();
            formData.append('iCampAnalyticsID', iCampAnalyticsID.value);
            formData.append('isDraft', saveDraft);

            // var otherDoctorsString = $('#otherDoctorData li').map(function() {
            //     return $(this).text().trim();
            // }).get().join(',');

            // formData.append('other_doctors', otherDoctorsString);

            // var selectedDoctorsArray = $('#selectedDoctorData li').map(function() {
            //     return {
            //         iDoctorID: $(this).data('id')
            //     };
            // }).get();

            // formData.append('selected_doctors', JSON.stringify(selectedDoctorsArray));

            var isMandatorySKU = $('#isMandatorySKU').val();

            var minSKULimit = parseInt($('#MinSKULimit').val(), 10);
            var maxSKULimit = parseInt($('#MaxSKULimit').val(), 10);

            var skuArray = $('.SKUData .br_rsv_shadow').map(function() {
                var productId = $(this).find('[id^="SKUName_"]').data('id');
                var vQty = $(this).find('[id^="SKUAmount_"]').text().replace(' QTY', '').trim();
                var vRemarks = $(this).find('[id^="SKURemark_"]').text().trim();

                return {
                    product_id: productId,
                    vQty: vQty,
                    vRemarks: vRemarks
                };
            }).get();

            if (isMandatorySKU == 1 && skuArray.length < 1 && saveDraft != 'Y') {
                $.notify('At least one SKU item is mandatory. Please add an item.', "error");
                return;
            }

            if (skuArray.length > 0) {

                if (!isNaN(minSKULimit) && skuArray.length < minSKULimit) {
                    $.notify('Minimum SKU count is ' + minSKULimit + '. Please add more items.', "error");
                    return;
                }
                if (!isNaN(maxSKULimit) && skuArray.length > maxSKULimit) {
                    $.notify('Maximum SKU count is ' + maxSKULimit + '. Please reduce the number of items.', "error");
                    return;
                }
            }
            // formData.append('sku', JSON.stringify(skuArray));

            var isMandatoryExpense = $('#isMandatoryExpense').val();

            var minExpenseLimit = parseInt($('#MinExpenseLimit').val(), 10);
            var maxExpenseLimit = parseInt($('#MaxExpenseLimit').val(), 10);

            var expenseArray = $('.expenseData .br_rsv_shadow').map(function() {
                var exp_id = $(this).find('[id^="expenseName_"]').data('id');
                var amount = $(this).find('[id^="expenseAmount_"]').text().replace('₹ ', '').trim();
                var vRemarks = $(this).find('[id^="expenseRemark_"]').text().trim();
                var paymentType = $(this).find('[id^="paymentType_"]').text().trim();
                var beneficiaryName = $(this).find('[id^="beneficiaryName_"]').text().trim();

                return {
                    exp_id: exp_id,
                    amount: amount,
                    vRemarks: vRemarks,
                    paymentType: paymentType,
                    beneficiaryName: beneficiaryName,
                };
            }).get();

            if (isMandatoryExpense == 1 && expenseArray.length < 1 && saveDraft != 'Y') {
                $.notify('At least one Expense item is mandatory. Please add an item.', "error");
                return;
            }

            if (expenseArray.length > 0) {


                if (!isNaN(minExpenseLimit) && expenseArray.length < minExpenseLimit) {
                    $.notify('Minimum expense count is ' + minExpenseLimit + '. Please add more items.', "error");
                    return;
                }
                if (!isNaN(maxExpenseLimit) && expenseArray.length > maxExpenseLimit) {
                    $.notify('Maximum expense count is ' + maxExpenseLimit + '. Please reduce the number of items.',
                        "error");
                    return;
                }
            }

            var missingDetails = expenseArray.some(function(expense) {
                return !expense.paymentType || !expense.beneficiaryName;
            });

            if (missingDetails) {
                $.notify('Please add details for all existing expenses.', "error");
                return;
            }

            // formData.append('expense', JSON.stringify(expenseArray));

            var isMandatoryRequirment = $('#isMandatoryRequirment').val();

            var minRequirementLimit = parseInt($('#MinRequirmentLimit').val(), 10);
            var maxRequirementLimit = parseInt($('#MaxRequirmentLimit').val(), 10);

            var requirementArray = $('.RequirementData .br_rsv_shadow').map(function() {
                var req_id = $(this).find('[id^="RequirementName_"]').data('id');
                var vQty = $(this).find('[id^="RequirementAmount_"]').text().replace(' QTY', '').trim();
                var vRemarks = $(this).find('[id^="RequirementRemark_"]').text().trim();

                return {
                    req_id: req_id,
                    vQty: vQty,
                    vRemarks: vRemarks
                };
            }).get();

            if (isMandatoryRequirment == 1 && requirementArray.length < 1 && saveDraft != 'Y') {
                $.notify('At least one Requirment item is mandatory. Please add an item.', "error");
                return;
            }

            if (requirementArray.length > 0) {

                if (!isNaN(minRequirementLimit) && requirementArray.length < minRequirementLimit) {
                    $.notify('Minimum requirement count is ' + minRequirementLimit + '. Please add more items.', "error");
                    return;
                }
                if (!isNaN(maxRequirementLimit) && requirementArray.length > maxRequirementLimit) {
                    $.notify('Maximum requirement count is ' + maxRequirementLimit + '. Please reduce the number of items.',
                        "error");
                    return;
                }
            }

            // formData.append('requirement', JSON.stringify(requirementArray));

            // const fieldArray = $('.FieldFormData').map(function() {
            //     const fieldName = $(this).attr('name');
            //     const fieldId = $(this).data('id');
            //     const responseValue = $(this).val(); // For input fields

            //     return {
            //         field_name: fieldName,
            //         field_id: fieldId,
            //         response: responseValue
            //     };
            // }).get();


            let fieldData = [];
            $('.FieldFormData').each(function() {
                let fieldName = $(this).attr('name');
                let field = {
                    field_id: $(this).data('id'),
                    field_name: fieldName,
                    response: $(this).val()
                };

                if ($(this).attr('type') == 'file') {
                    let files = $(this)[0].files;
                    let cleanFieldName = fieldName.replace('[]', '');
                    for (let i = 0; i < files.length; i++) {
                        formData.append(`${cleanFieldName}[${i}]`, files[i]);
                    }
                    field.response = files.length > 0 ? Array.from(files).map(file => file.name) : [];
                } else {
                    field.response = $(this).val() || '';
                }
                fieldData.push(field);
            });

            formData.append('fieldData', JSON.stringify(fieldData));

            formData.append('_token', "{{ csrf_token() }}");

            $.ajax({
                url: '{{ route('field.implementCampStore') }}',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.status === 1) {
                        $.notify(response.message, "success");
                        setTimeout(function() {
                            window.location.href = '{{ route('field.campAnalytics') }}';
                        }, 2000);
                    } else {
                        $.notify(response.message, "warning");
                    }
                },
                error: function(xhr, status, error) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessages = '';
                        $.each(errors, function(key, value) {
                            errorMessages += value + '<br>';
                        });
                        $.notify('Validation errors:<br>' + errorMessages, "error");
                    } else {
                        $.notify('Error submitting form: ' + error, "error");
                    }
                }
            });
        }




        function editExpense(expenseIndex, expenseId, campPaymentTypeID) {
            // Extract data with safeguards
            const expenseNameElement = $('#expenseName_' + expenseIndex);
            const expenseAmountElement = $('#expenseAmount_' + expenseIndex);
            const expenseRemarkElement = $('#expenseRemark_' + expenseIndex);
            const beneficiaryNameElement = $('#beneficiaryName_' + expenseIndex);
            const paymentTypeElement = $('#paymentType_' + expenseIndex);

            if (!expenseNameElement.length || !expenseAmountElement.length || !expenseRemarkElement.length ||
                !beneficiaryNameElement.length || !paymentTypeElement.length) {
                console.error('One or more expense elements not found for index:', expenseIndex);
                $.notify('Error loading expense data.', "error");
                return;
            }

            const selectedExpenseId = expenseNameElement.data('id');
            const selectedExpenseName = expenseNameElement.text().replace('Expense Type:', '').trim();
            const expenseAmount = expenseAmountElement.text().replace('₹', '').trim();
            let expenseRemark = expenseRemarkElement.text().trim();
            expenseRemark = (expenseRemark === 'null' || expenseRemark === null || expenseRemark === '') ? '' : expenseRemark;

            const beneficiaryName = beneficiaryNameElement.text().replace('Beneficiary Name:', '').trim();
            const paymentType = paymentTypeElement.text().replace('Payment Type:', '').trim();

            // Populate form fields
            $('#select_expense').val(selectedExpenseId).trigger('change');
            $('#select_expense').prop('disabled', true);

            $('#expense_qty').val(expenseAmount);
            $('#expense_remark').val(expenseRemark);
            $('#beneficiaryNameInput').val(beneficiaryName);
            $('#payment_type').val(paymentType).trigger('change');
            loadPaymentTypes(campPaymentTypeID);
            $('#editExpenseId').val(expenseId);
            $('#editSelectExpenseId').val(selectedExpenseId);

            $('#add_expenses').modal('show');
        }


        function deleteExpense(expenseIndex, expenseID) {
            Swal.fire({
                title: 'Are you sure?',
                text: "Do you really want to delete this expense?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    const iCampAnalyticsID = $('#iCampAnalyticsID').val();

                    const requestData = {
                        iCampAnalyticsID: iCampAnalyticsID,
                        request_type: 3,
                        request_id: expenseID
                    };

                    $.ajax({
                        url: '{{ route('field.implementCampRequestRemove') }}',
                        type: 'POST',
                        data: requestData,
                        headers: {
                            'X-CSRF-TOKEN': "{{ csrf_token() }}"
                        },
                        success: function(response) {
                            if (response.status === 1) {

                                var selectedExpenseElement = $('#expenseName_' + expenseIndex);
                                var selectedExpenseId = selectedExpenseElement.data(
                                    'id'); // Retrieve data-id from element

                                selectedExpenseElement.closest('.br_rsv_shadow').remove();

                                $('#select_expense option[value="' + selectedExpenseId + '"]').prop(
                                    'disabled', false);

                                // $(`.br_rsv_shadow[data-id="${expenseID}"]`).remove();
                                $.notify(response.message, "success");
                            } else {
                                $.notify(response.message, "warn");
                            }
                        },
                        error: function(xhr, status, error) {
                            $.notify("Error deleting expense: " + error, "error");
                        }
                    });
                }
            });
        }


        function editSKU(SKUIndex, SKUId) {
            // Get current values
            var selectedSKUName = $('#SKUName_' + SKUIndex).data('id');
            var SKUAmount = $('#SKUAmount_' + SKUIndex).text().replace('QTY', '').trim();
            var SKURemark = $('#SKURemark_' + SKUIndex).text().trim();
            SKURemark = (SKURemark == 'null' || SKURemark == null) ? '' : SKURemark;

            $('#select_SKU').val(selectedSKUName).trigger('change'); // Set the dropdown
            $('#select_SKU').prop('disabled', true);

            $('#SKU_qty').val(SKUAmount); // Set the amount
            $('#SKU_remark').val(SKURemark); // Set the remark

            $('#editSKUId').val(SKUId); // Set the edit ID
            $('#editSelectSKUId').val(selectedSKUName); // Set the edit ID

            $('#add_sku').modal('show'); // Show the modal
        }


        function deleteSKU(index, skuID) {
            Swal.fire({
                title: 'Are you sure?',
                text: "Do you really want to delete this sku?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    const iCampAnalyticsID = $('#iCampAnalyticsID').val();

                    const requestData = {
                        iCampAnalyticsID: iCampAnalyticsID,
                        request_type: 1,
                        request_id: skuID
                    };

                    $.ajax({
                        url: '{{ route('field.implementCampRequestRemove') }}',
                        type: 'POST',
                        data: requestData,
                        headers: {
                            'X-CSRF-TOKEN': "{{ csrf_token() }}"
                        },
                        success: function(response) {
                            if (response.status === 1) {

                                var selectedSKUElement = $('#SKUName_' + index);
                                var selectedSKUId = selectedSKUElement.data(
                                    'id'); // Retrieve data-id from element

                                selectedSKUElement.closest('.br_rsv_shadow').remove();

                                $('#select_SKU option[value="' + selectedSKUId + '"]').prop('disabled',
                                    false);


                                // $('#SKUName_' + index).closest('.br_rsv_shadow')
                                //     .remove();
                                $.notify(response.message, "success");
                            } else {
                                $.notify(response.message, "warn");
                            }
                        },
                        error: function(xhr, status, error) {
                            $.notify("Error deleting expense: " + error, "error");
                        }
                    });
                }
            });
        }





        function editRequirement(requirementIndex, requirementId) {
            // Get current values
            var selectedRequirementName = $('#RequirementName_' + requirementIndex).data('id');
            var RequirementAmount = $('#RequirementAmount_' + requirementIndex).text().replace('QTY', '').trim();
            var RequirementRemark = $('#RequirementRemark_' + requirementIndex).text().trim();
            RequirementRemark = (RequirementRemark === 'null' || RequirementRemark === null) ? '' : RequirementRemark;

            $('#select_Requirement').val(selectedRequirementName).trigger('change'); // Set the dropdown
            $('#select_Requirement').prop('disabled', true);

            $('#Requirement_qty').val(RequirementAmount); // Set the amount
            $('#Requirement_remark').val(RequirementRemark); // Set the remark

            $('#editRequirementId').val(requirementId); // Set the edit ID
            $('#editSelectRequirementId').val(selectedRequirementName); // Set the edit ID

            $('#add_Requirement').modal('show'); // Show the modal
        }


        function deleteRequirement(index, requirementId) {
            Swal.fire({
                title: 'Are you sure?',
                text: "Do you really want to delete this requirement?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    const iCampAnalyticsID = $('#iCampAnalyticsID').val();

                    const requestData = {
                        iCampAnalyticsID: iCampAnalyticsID,
                        request_type: 2,
                        request_id: requirementId
                    };

                    $.ajax({
                        url: '{{ route('field.implementCampRequestRemove') }}',
                        type: 'POST',
                        data: requestData,
                        headers: {
                            'X-CSRF-TOKEN': "{{ csrf_token() }}"
                        },
                        success: function(response) {
                            if (response.status === 1) {

                                var selectedRequirementElement = $('#RequirementName_' + index);
                                var selectedRequirementId = selectedRequirementElement.data(
                                    'id'); // Retrieve data-id from element

                                selectedRequirementElement.closest('.br_rsv_shadow').remove();

                                $('#select_Requirement option[value="' + selectedRequirementId + '"]')
                                    .prop('disabled', false);


                                // $('#RequirementName_' + index).closest('.br_rsv_shadow').remove();
                                $.notify(response.message, "success");
                            } else {
                                $.notify(response.message, "warn");
                            }
                        },
                        error: function(xhr, status, error) {
                            $.notify("Error deleting expense: " + error, "error");
                        }
                    });
                }
            });
        }

        function populateExpenseOptions(expenseData) {
            let selectHTML = `<option value="" selected default> Select Expense</option>`; // Add a default option
            expenseData.forEach(function(expense) {
                if (expense.eType == "Implement" || expense.eType == null) { 
                    selectHTML += `<option value="${expense.iExpenseID}">${expense.expense.vExpenseName}</option>`;
                }
            });

            $('#select_expense').html(selectHTML);

            $('#select_expense').select2();
        }

        function populateSKUOptions(SKUData) {
            let selectHTML = `<option value="" selected default> Select SKU</option>`; // Add a default option

            SKUData.forEach(function(SKU) {
                if (SKU.eType === "Implement" || SKU.eType === null) { 
                    selectHTML += `<option value="${SKU.product.iProductID}">${SKU.product.vProductName}</option>`;
                }
            });

            $('#select_SKU').html(selectHTML);

            $('#select_SKU').select2();
        }


        function populateRequirementOptions(RequiremntData) {
            let selectHTML = `<option value="" selected default> Select Requirement</option>`; // Add a default option

            RequiremntData.forEach(function(Requiremnt) {
                if (Requiremnt.eType === "Implement" || Requiremnt.eType === null) { 
                    selectHTML +=
                        `<option value="${Requiremnt.requirement.iRequirementID}">${Requiremnt.requirement.vRequirementName}</option>`;
                }
            });

            $('#select_Requirement').html(selectHTML);

            $('#select_Requirement').select2();
        }




        $(document).on('change', '#doctorDropdown', function() {
            var selectedValue = $(this).val();
            if (selectedValue === 'Add unlisted doctor') {
                $('#other_doctor').show();
            } else {
                $('#other_doctor').hide();
            }
        });

        function openDocumentModal(id) {
            $.ajax({
                url: "{{ route('field.getExpenseDocView') }}",
                type: 'POST',
                data: {
                    id: id,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    $('#documentModal .modal-content').html(response);
                    $('#documentModal').modal('show');
                },
                error: function() {
                    alert('An error occurred. Please try again.');
                }
            });
        }


        function loadDoctors(isOtherDoctor, isAllowMultipleDoctor) {
            $.ajax({
                url: '{{ route('field.getDocData') }}',
                method: 'GET',
                success: function(response) {
                    $('#doctorDropdown').empty();
                    if (isOtherDoctor == 'N') {
                        $('#doctorDropdown').append(`
                <option value="" disabled default> Select Doctor</option>
            `);
                    } else {
                        $('#doctorDropdown').append(`
                <option value="" disabled default> Select Doctor</option>
                <option value="Add unlisted doctor"> Add unlisted doctor</option>
            `);
                    }



                    response.data.forEach(function(doctor) {
                        $('#doctorDropdown').append(
                            `<option value="${doctor.iDoctorID}">${doctor.fullName} (${doctor.vSCCode})</option>`
                        );
                    });

                    $('#doctorCards').css('display', 'block !important');
                },
                error: function() {
                    $.notify('Failed to fetch doctors. Please try again.', "error");
                }
            });
        }

        function updateDoctorCount() {
            var selectedDoctorCount = $('#selectedDoctorData li').length;
            $('#selectedDoctorNumbers').text(selectedDoctorCount + ' Doctors');
        }

        function updateOtherDoctorCount() {
            var otherDoctorCount = $('#otherDoctorData li').length;
            $('#otherDoctorNumbers').text(otherDoctorCount + ' Doctors');
        }

        function setSelectedDoctorData() {
            var selectedDoctor = $('#doctorDropdown option:selected').text();
            var doctorId = $('#doctorDropdown').val();
            var imagePath = '{{ asset('assets/app-assets/images/dr3.png') }}';

            if (doctorId && doctorId !== "Add unlisted doctor" && doctorId !== "") {
                $('#selectedDoctorData').append(
                    `<li data-id="${doctorId}">
            <img src="${imagePath}" alt="" style="width:15px" class="mr-1">
            ${selectedDoctor}
            <i class="fa fa-circle-xmark ml-1 remove-doctor"></i>
        </li>`
                );

                var optionToHide = $('#doctorDropdown option[value="' + doctorId + '"]');
                optionToHide.prop('disabled', true);
                $('#doctorDropdown').select2();
                $('#doctorDropdown').val('').trigger('change');
                updateDoctorCount();
            }
        }

        function showDoctorOption(doctorId) {
            var optionToShow = $('#doctorDropdown option[value="' + doctorId + '"]');
            optionToShow.prop('disabled', false);
            $('#doctorDropdown').select2();
        }

        $(document).on('click', '.remove-doctor', function() {
            var doctorId = $(this).closest('li').data('id');
            $(this).closest('li').remove();
            showDoctorOption(doctorId);
            updateDoctorCount();
        });

        function setOtherDoctorData() {
            var otherDoctorName = $('#otherDoctorName').val().trim();

            if (otherDoctorName !== "") {
                $('#otherDoctorData').append(
                    `<li>
                ${otherDoctorName}
                <i class="fa fa-circle-xmark ml-1 remove-other-doctor"></i>
            </li>`
                );

                $('#otherDoctorName').val('');
                updateOtherDoctorCount();
            }
        }

        $(document).on('click', '.remove-other-doctor', function() {
            $(this).closest('li').remove();
            updateOtherDoctorCount();
        });

        function loadPaymentTypes(selectedPaymentType = null) {
            $.ajax({
                url: '{{ route('field.paymentTypeList') }}',
                type: 'GET',
                success: function(response) {
                    if (response.status === 1) {
                        $('#payment_type').empty(); // Clear existing options
                        $('#payment_type').append(
                            '<option value="" selected disabled>Select Payment Type</option>'
                        );

                        response.data.forEach(function(paymentType) {
                            // Check if this option should be selected
                            const isSelected = paymentType.iCampPaymentType === selectedPaymentType ?
                                'selected' : '';
                            $('#payment_type').append(
                                `<option value="${paymentType.iCampPaymentType}" ${isSelected}>${paymentType.vPaymentTypeName}</option>`
                            );
                        });

                        $('#payment_type').select2(); // Initialize or update select2
                    } else {
                        console.error(response.message);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching payment types:', error);
                }
            });
        }


        function loadCampDetails() {

            $.ajax({
                url: '{{ route('field.getImplementCampMasterData') }}',
                type: 'GET',
                data: {
                    iCampAnalyticsID: $('#iCampAnalyticsID').val(),
                    formType: 'add',
                },
                success: function(response) {
                    if (response.status === 1) {
                        //    $.notify(response.message, "success");

                        $(".masterData").empty();

                        $('#campID').val(response.data.activity_analytics[0].vCampDCSID);

                        if (response.data.camp_fields.length > 0) {
                            response.data.camp_fields.forEach(function(field) {

                                let isRequired = field.jFieldData.isMandatory == 1 ? 'required' : '';
                                let vMaxLength = field.jFieldData.vMaxLength ?
                                    `maxlength="${field.jFieldData.vMaxLength}"` : '';
                                let vMinLength = field.jFieldData.vMinLength ?
                                    `minlength="${field.jFieldData.vMinLength}"` : '';
                                let vPlaceholder = field.jFieldData.vPlaceholder ?
                                    `placeholder="${field.jFieldData.vPlaceholder}"` :
                                    `placeholder="${field.vFieldName}"`;
                                let isNumeric = field.jFieldData.isNumeric == 1 ?
                                    'type="number" oninput="this.value = this.value < 0 ? 0 : this.value"' :
                                    'type="text"';

                                let isMultiple = field.jFieldData.isMultiple == 1 ? 'multiple' :
                                    '';

                                let requiredAsterisk = isRequired ?
                                    '<span style="color: red;">*</span>' : '';

                                let vHelpText = field.jFieldData.vHelpText ?? '';

                                let tooltipHtml = '';
                                if (vHelpText && vHelpText.trim() !== '') {
                                    tooltipHtml = `
        <a href="javascript:void(0)" class="ml-1" data-toggle="tooltip" data-placement="right" title="${vHelpText}" data-original-title="${vHelpText}">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle">
            <circle cx="12" cy="12" r="10"></circle>
            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
            <line x1="12" y1="17" x2="12.01" y2="17"></line>
          </svg>
        </a>
    `;
                                }


                                let fieldHTML = '';
                                switch (field.vFieldType) {
                                    case 'datepicker':
                                        if (field.vFieldName == 'Implementation Date') {
                                            document.getElementById("campDateLimit").value = response
                                                .implementCampData.vExpectedCampDate;

                                        }
                                        fieldHTML = `<div class="col-lg-4 col-sm-6 col-md-4 col-12">
            <div class="mb-2">
                <label for="" class="form-label">${field.vFieldName} ${requiredAsterisk}</label> ${tooltipHtml}
                <input type="text" data-id="${field.iFieldID}" class="form-control FieldFormData datepicker" name="${field.vFieldName}" ${isRequired} ${vPlaceholder} />
            </div>
        </div>`;
                                        break;

                                    case 'input':
                                        fieldHTML = `<div class="col-lg-4 col-sm-6 col-md-4 col-12">
            <div class="mb-2">
                <label for="" class="form-label">${field.vFieldName} ${requiredAsterisk}</label> ${tooltipHtml}
                <input ${isNumeric} data-id="${field.iFieldID}" class="form-control FieldFormData" name="${field.vFieldName}" ${isRequired} ${vMinLength} ${vMaxLength} ${vPlaceholder} />
            </div>
        </div>`;
                                        break;

                                    case 'dropdown':
                                        if (field.vFieldName === 'Select Doctor') {

                                            if (response.data.isOtherDoctor === 'Y') {
                                                fieldHTML = `<div class="col-lg-4 col-sm-6 col-md-4 col-12">
                                                <div class="mb-2">
                                                    <label for="" class="form-label">Doctors ${requiredAsterisk}</label> ${tooltipHtml}
                                                    <div class="add_doctor">
                                                        <select class="select2 select-label form-control w-100" id="doctorDropdown" name="select-label">
                                                            <option value="" disabled default> Select Doctor</option>
                                                            <option value="Add unlisted doctor"> Add unlisted doctor</option>

                                                        </select>
                                                        <span class="input-group-text p-0 ml-1">
                                                            <button onclick="setSelectedDoctorData()" id="setSelectedDoctorData" class="btn btn-primary search_blue add_dc_rs waves-effect waves-float waves-light"><i class="fa fa-plus"></i></button>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-md-4 col-sm-4 col-12" id="other_doctor" style="display:none;">
                                                <label for="login-Username w-100" class="form-label">Add unlisted doctor</label>
                                                <div class="input-group mb-2">
                                                    <input type="text" class="form-control" id="otherDoctorName" placeholder="Enter here">
                                                    <span class="input-group-text p-0 ml-1">
                                                        <button onclick="setOtherDoctorData()" id="setOtherDoctorData" class="btn btn-primary search_blue add_dc_rs waves-effect waves-float waves-light"><i class="fa fa-plus"></i></button>
                                                    </span>
                                                </div>
                                            </div>

                                                            <div class="w-100"></div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                                                                <div class="card camp_card">
                                                                    <div class="card-datatable p-2 planning_details">
                                                                        <label for="login-Username w-100" class="form-label"><b>Selected Doctors
                                                                            </b>
                                                                            <p class="ml-1 date_view_rs" id="selectedDoctorNumbers"> 0 Doctors</p>
                                                                        </label>
                                                                        <div class="w-100"></div>

                                                                        <ul id="selectedDoctorData">

                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                                                                <div class="card camp_card">
                                                                    <div class="card-datatable p-2 planning_details">
                                                                        <label for="login-Username w-100" class="form-label"><b>Other Doctors </b>
                                                                            <p class="ml-1 date_view_rs" id="otherDoctorNumbers">0 Doctors</p>
                                                                        </label>
                                                                        <div class="w-100"></div>

                                                                        <ul id="otherDoctorData">
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>`;
                                            } else {
                                                fieldHTML = `<div class="col-lg-4 col-sm-6 col-md-4 col-12">
                                                <div class="mb-2">
                                                    <label for="" class="form-label">Doctors ${requiredAsterisk}</label> ${tooltipHtml}
                                                    <div class="add_doctor">
                                                        <select class="select2 select-label form-control w-100" id="doctorDropdown" name="select-label">
                                                            <option value="" disabled default> Select Doctor</option>

                                                        </select>
                                                        <span class="input-group-text p-0 ml-1">
                                                            <button onclick="setSelectedDoctorData()" id="setSelectedDoctorData" class="btn btn-primary search_blue add_dc_rs waves-effect waves-float waves-light"><i class="fa fa-plus"></i></button>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-md-4 col-sm-4 col-12" id="other_doctor" style="display:none;">
                                                <label for="login-Username w-100" class="form-label">Add unlisted doctor</label>
                                                <div class="input-group mb-2">
                                                    <input type="text" class="form-control" placeholder="Enter here">
                                                    <span class="input-group-text p-0 ml-1">
                                                        <button id="setOtherDoctorData"class="btn btn-primary search_blue add_dc_rs waves-effect waves-float waves-light"><i class="fa fa-plus"></i></button>
                                                    </span>
                                                </div>
                                            </div>

                                                            <div class="w-100"></div>
                                                            <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                                                                <div class="card camp_card">
                                                                    <div class="card-datatable p-2 planning_details">
                                                                        <label for="login-Username w-100" class="form-label"><b>Selected Doctors
                                                                            </b>
                                                                            <p class="ml-1 date_view_rs" id="selectedDoctorNumbers"> 0 Doctors</p>
                                                                        </label>
                                                                        <div class="w-100"></div>

                                                                        <ul id="selectedDoctorData">

                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="w-100"></div>
                                    `;
                                            }

                                            loadDoctors(response.data.isOtherDoctor, response.data
                                                .isAllowMultipleDoctor);
                                        }
                                        break;
                                   case 'file':
                                    fieldHTML = `
                                    <div class="col-lg-12">
                                        <div class="form-group mb-2">
                                            <label class="form-label">${field.vFieldName} ${requiredAsterisk}</label> ${tooltipHtml}
                                            <div class="upload_proof_img">
                                                <div class="left">
                                                    <input 
                                                        type="file" 
                                                        data-id="${field.iFieldID}" 
                                                        class="form-control FieldFormData fileUploader" 
                                                        name="${field.vFieldName}" 
                                                        ${isRequired} ${isMultiple} 
                                                        accept="image/*"
                                                        onchange="previewSelectedImages(this, ${field.iFieldID}, ${isMultiple === 'multiple' ? 1 : 0})"
                                                    >
                                                    <span>Select Images</span>
                                                </div>
                                                <div class="right uploadedPreviewImages_${field.iFieldID}" style="cursor: pointer;">
                                                    <!-- Image previews will be appended here via JS -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>`;
                                    break;

                                }

                                $(".masterData").append(fieldHTML);
                            });
                        }


                        if (response.data.camp_fields) {
                            response.data.camp_fields.forEach(field => {
                                if (field.vFieldType === "checkbox" && field.jFieldData) {
                                    if (field.jFieldData.masterFieldName ==
                                        "Qty of Samples Used") {
                                        const maxLimit = field.jFieldData.vMaxLength || '';
                                        const minLimit = field.jFieldData.vMinLength || '';
                                        const masterFieldName = field.jFieldData.masterFieldName ||
                                            'Qty of Samples Used';
                                        const helpText = field.jFieldData.vHelpText || '';
                                        const isMandatory = field.jFieldData.isMandatory || '';



                                        document.getElementById("MaxSKULimit").value = maxLimit;
                                        document.getElementById("MinSKULimit").value = minLimit;
                                        document.getElementById("SKUMasterFieldName").value =
                                            masterFieldName;
                                        document.getElementById("helpTextSKU").value = helpText;
                                        document.getElementById("isMandatorySKU").value =
                                            isMandatory;


                                    }

                                    if (field.jFieldData.masterFieldName == "Patient Details") {
                                        
                                        const masterFieldName = field.jFieldData.masterFieldName || 'Patient Details';
                                        const helpText = field.jFieldData.vHelpText || '';
                                        const isMandatory = field.jFieldData.isMandatory || '';

                                        // Check if iPatientFormID is not null and Patient Details is present
                                        if (response.data && response.data.iPatientFormID != null) {
                                            let patientDetailsHTML = `
                                                <div class="col-12">
                                                    <div class="main_br_rs">
                                                        <div class="br_rsv_shadow" style="margin: 0; border: 0 !important;">
                                                            <div class="row mb-1">
                                                                <div class="col-lg-auto col-sm-auto col-md-auto col-12 my-auto mr-auto">
                                                                    <h6>Patient Details</h6>
                                                                </div>
                                                                <div class="col-lg-auto col-sm-auto col-md-auto col-12">
                                                                    <button onclick="patientAdd(${response.data.activity_analytics[0].iCampAnalyticsID})" class="btn btn-primary btn-toggle-sidebar waves-effect waves-float waves-light">
                                                                        <span class="">  
                                                                            <svg style="margin-right: 5px; vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" width="14" height="17" viewBox="0 0 16.806 17.795">
                                                                                <g id="add-p" transform="translate(-17.929 -9.727)">
                                                                                    <g id="patient-profile-people-svgrepo-com" transform="translate(17.929 9.728)">
                                                                                        <path id="Path_71087" data-name="Path 71087" d="M8.013,11.452a4.805,4.805,0,0,0-2.582,1.431A5.325,5.325,0,0,0,4,16.538V19.53a2.164,2.164,0,0,0,2.1,2.222H18.7a2.164,2.164,0,0,0,2.1-2.222V16.538a5.325,5.325,0,0,0-1.431-3.655,4.805,4.805,0,0,0-2.582-1.431A5.406,5.406,0,0,0,17.3,9.143a5.052,5.052,0,0,0-4.9-5.185A5.052,5.052,0,0,0,7.5,9.143,5.406,5.406,0,0,0,8.013,11.452Zm7.821,1.393a4.709,4.709,0,0,1-6.862,0,.64.64,0,0,1-.084.005A3.391,3.391,0,0,0,6.422,13.93,3.8,3.8,0,0,0,5.4,16.538V19.53a.722.722,0,0,0,.7.741H18.7a.722.722,0,0,0,.7-.741V16.538a3.8,3.8,0,0,0-1.022-2.608,3.391,3.391,0,0,0-2.465-1.081A.64.64,0,0,1,15.834,12.844ZM12.4,5.439a3.608,3.608,0,0,1,3.5,3.7,3.608,3.608,0,0,1-3.5,3.7,3.608,3.608,0,0,1-3.5-3.7A3.608,3.608,0,0,1,12.4,5.439Z" transform="translate(-4 -3.958)" fill="#fff" fill-rule="evenodd"></path>
                                                                                        <path id="Path_71088" data-name="Path 71088" d="M19.49,19.5h-.745a.745.745,0,0,0,0,1.49h.745v.745a.745.745,0,0,0,1.49,0v-.745h.745a.745.745,0,1,0,0-1.49h-.745v-.745a.745.745,0,1,0-1.49,0Z" transform="translate(-8.407 -7.622)" fill="#fff" fill-rule="evenodd"></path>
                                                                                    </g>
                                                                                </g>
                                                                            </svg>
                                                                            Add Patient
                                                                        </span>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                            <div class="row mb-1">
                                                                <div class="col-lg-auto col-sm-auto col-md-auto col-12 my-auto mr-auto">
                                                                    <span class="mr-auto"><b style="color: #223E6D;">Total Patient : </b> 
                                                                    </span>
                                                                    <a class="patient_count btn_red1" onclick="viewPatients(${response.data.activity_analytics[0].iCampAnalyticsID})">
                                                                        <img src="{{ asset('front-assets/images/view-p.png') }}" alt="">
                                                                        <span>${response.patientCount}</span>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>                                        
                                                    </div>
                                                </div>`;
                                            $(".masterData").append(patientDetailsHTML);
                                        }
                                    }

                                    if (field.jFieldData.masterFieldName ==
                                        "Actual Items Used") {
                                        const maxLimit = field.jFieldData.vMaxLength || '';
                                        const minLimit = field.jFieldData.vMinLength || '';
                                        const masterFieldName = field.jFieldData.masterFieldName ||
                                            'Actual Items Used';
                                        const helpText = field.jFieldData.vHelpText || '';
                                        const isMandatory = field.jFieldData.isMandatory || '';



                                        document.getElementById("MaxRequirmentLimit").value =
                                            maxLimit;
                                        document.getElementById("MinRequirmentLimit").value =
                                            minLimit;
                                        document.getElementById("RequirmentMasterFieldName").value =
                                            masterFieldName;
                                        document.getElementById("helpTextRequirment").value =
                                            helpText;
                                        document.getElementById("isMandatoryRequirment").value =
                                            isMandatory;

                                    }

                                    if (field.jFieldData.masterFieldName == "Expenses Breakup") {
                                        const maxLimit = field.jFieldData.vMaxLength || '';
                                        const minLimit = field.jFieldData.vMinLength || '';
                                        const masterFieldName = field.jFieldData.masterFieldName ||
                                            'Expenses Breakup';
                                        const helpText = field.jFieldData.vHelpText || '';
                                        const isMandatory = field.jFieldData.isMandatory || '';



                                        document.getElementById("MaxExpenseLimit").value = maxLimit;
                                        document.getElementById("MinExpenseLimit").value = minLimit;
                                        document.getElementById("ExpenseMasterFieldName").value =
                                            masterFieldName;
                                        document.getElementById("helpTextExpense").value = helpText;
                                        document.getElementById("isMandatoryExpense").value =
                                            isMandatory;


                                    }


                                }
                            });
                        }




                        if (response.data.isImplementExpenseAdd === 'Y') {

                            if (response.data.camp_fields) {
                                response.data.camp_fields.forEach(field => {
                                    if (field.vFieldType === "checkbox" && field.jFieldData) {
                                        if (field.jFieldData.masterFieldName == "Expenses Breakup" ||
                                            field.jFieldData.vFieldName == "Expenses Breakup") {

                                            let ExpenseMasterFieldName = $('#ExpenseMasterFieldName')
                                                .val();
                                            let isMandatoryExpenseMasterFieldName = $(
                                                    '#isMandatoryExpense').val() == 1 ?
                                                '<span style="color: red;">*</span>' : '';

                                            let vHelpText = $('#helpTextExpense').val();

                                            let tooltipHtml = '';
                                            if (vHelpText && vHelpText.trim() !== '') {
                                                tooltipHtml = `
<a href="javascript:void(0)" class="ml-1" data-toggle="tooltip" data-placement="right" title="${vHelpText}" data-original-title="${vHelpText}">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle">
<circle cx="12" cy="12" r="10"></circle>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
<line x1="12" y1="17" x2="12.01" y2="17"></line>
</svg>
</a>
`;
                                            }


                                            let selectHTML = `    <div class="col-lg-12">
<div class="main_br_rs">
<div class="br_rsv_shadow">
    <div class="row mb-1">
        <div class="col-lg-auto col-sm-auto col-md-auto col-auto my-auto mr-auto">
            <h6>${ExpenseMasterFieldName} ${isMandatoryExpenseMasterFieldName} ${tooltipHtml}</h3>
        </div>
        <div class="col-lg-auto col-sm-auto col-md-auto col-auto">
            <a href="" data-toggle="modal" data-target="#add_expenses"
                class="btn btn-primary btn-toggle-sidebar waves-effect waves-float waves-light">
                <span class=""> <i class="fa fa-plus"></i> </span>
            </a>
        </div>
    </div>


</div>
<div class="expenseData">
    
</div>
</div>
</div>`;
                                            $(".masterData").append(selectHTML);

                                            populateExpenseOptions(response.data.camp_expense_master);
                                            if (response.data && response.data.activity_analytics &&
                                                response.data
                                                .activity_analytics.length > 0) {
                                                const campData = response.data.activity_analytics[
                                                    0]; // Access the first item in the array
                                                if (campData.camp_activity_expense_data && campData
                                                    .camp_activity_expense_data
                                                    .length > 0) {
                                                    campData.camp_activity_expense_data.forEach((
                                                        expense, index) => {
                                                        const expenseName = expense.expense
                                                            .vExpenseName;
                                                        const paymentTypeName = expense.camp_expense_payment_type.vPaymentTypeName;
                                                        const paymentTypeID = expense.iPaymentTypeID;
                                                        const expenseAmount = expense
                                                            .vExpenseAmount;
                                                        const expenseRemark = expense.vRemarks;
                                                        var editImagePath =
                                                            '{{ asset('assets/app-assets/images/ed.png') }}';
                                                        var deleteImagePath =
                                                            '{{ asset('assets/app-assets/images/de.png') }}';

                                                        



                                                        var newExpenseHTML = `
    <div class="br_rsv_shadow" data-id="${expense.id}">
        <div class="row mb-1">
            <div class="col-lg-auto col-sm-auto col-md-auto col-12 my-auto mr-auto">
                ${expenseName ? `<p id="expenseName_${index + 1}" data-id="${expense.expense.iExpenseID}"><b>Expense Type:</b> ${expenseName}</p>` : ''}
                ${expense.expenseID ? `<p ><b>Expense ID:</b> ${expense.expenseID}</p>` : ''}
                ${expense.iCampPaymentType ? `<p id="paymentType_${index + 1}"><b>Payment Type:</b> ${paymentTypeName}</p>` : ''}
                ${expense.vBenificiaryName ? `<p id="beneficiaryName_${index + 1}"><b>Beneficiary Name:</b> ${expense.vBenificiaryName}</p>` : ''}
                ${expense.vExpenseStatus ? `<p><b>Payment Status:</b> 
                                                                                                                                                                                                                                                                                            <span class="type_c app_rs yellow_bg">
                                                                                                                                                                                                                                                                                                <i class="fa-regular fa-clock mr-1"></i> ${expense.vExpenseStatus} 
                                                                                                                                                                                                                                                                                            </span>
                                                                                                                                                                                                                                                                                        </p>` : ''}
                                                                                                                                ${expense.vInvoiceImage ? `<a href="javascript:void(0);" onclick="openDocumentModal('${expense.id}')" class="br_svg ml-0 text-center">
                                                                                                                                                                     <svg xmlns="http://www.w3.org/2000/svg" width="20.419" height="13.613" viewBox="0 0 20.419 13.613">
                                                                                                                                                                     <g id="Group_34377" data-name="Group 34377" transform="translate(-1848.391 -392)">
                                                                                                                                                                     <g id="Group_31233" data-name="Group 31233" transform="translate(1848.39 392)">
                                                                                                                                                                     <g id="Group_1420" data-name="Group 1420" transform="translate(0 0)">
                                                                                                                                                                     <g id="_44_Visibility" data-name="44 Visibility" transform="translate(0)">
                                                                                                                                                                     <path id="Path_6700" data-name="Path 6700" d="M14.685,18.738c-4.847,0-4.847-7.738,0-7.738C19.477,11,19.684,18.738,14.685,18.738Zm0-6.191c-2.937,0-2.937,4.643,0,4.643S17.622,12.548,14.685,12.548Z" transform="translate(-4.475 -8.063)" fill="#db644d"/>
                                                                                                                                                                     <path id="Path_6701" data-name="Path 6701" d="M12.631,20.613a12.176,12.176,0,0,1-9.774-5.456,2.312,2.312,0,0,1,0-2.7A12.176,12.176,0,0,1,12.631,7,12.176,12.176,0,0,1,22.4,12.456a2.312,2.312,0,0,1,0,2.7A12.176,12.176,0,0,1,12.631,20.613ZM4.072,14.271c2.239,3.114,5.278,4.83,8.558,4.83s6.319-1.715,8.558-4.83a.8.8,0,0,0,0-.929c-2.239-3.114-5.278-4.829-8.558-4.829s-6.319,1.715-8.558,4.83a.8.8,0,0,0,0,.929Z" transform="translate(-2.421 -7)" fill="#db644d"/>
                                                                                                                                                                     </g>
                                                                                                                                                                     </g>
                                                                                                                                                                     </g>
                                                                                                                                                                     </g>
                                                                                                                                                                     </svg>
                                                                                                                                                                     </a><br>` : ''}
                ${expenseAmount ? `<span id="expenseAmount_${index + 1}" class="grey_bg mt-1">₹ ${expenseAmount}</span>` : ''}

            </div>
            <div class="col-lg-auto col-sm-auto col-md-auto col-12">
                <div class="app_button pt-0">
                    <button data-toggle="modal" data-target="#add_expenses" onclick="editExpense(${index + 1}, ${expense.id}, ${expense.iCampPaymentType})">
                        <img src="${editImagePath}" alt="" style="width:40px">
                    </button>
                    <button class="ml-1" onclick="deleteExpense(${index + 1}, ${expense.id})">
                        <img src="${deleteImagePath}" alt="" style="width:40px">
                    </button>
                </div>
            </div>
            <div class="col-12">
                <p id="expenseRemark_${index + 1}" data-id="${index + 1}">${expenseRemark || '-'}</p>
            </div>
        </div>
    </div>`;


                                                        $('.expenseData').append(
                                                            newExpenseHTML);
                                                        $('#select_expense option[value="' +
                                                            expense.expense
                                                            .iExpenseID + '"]').prop(
                                                            'disabled', true);
                                                    });
                                                }
                                            }






                                        }
                                    }
                                });
                            }





                        }




                        if (response.data.isImplementSKUDataAdd === 'Y') {

                            if (response.data.camp_fields) {
                                response.data.camp_fields.forEach(field => {
                                    if (field.vFieldType === "checkbox" && field.jFieldData) {
                                        if (field.jFieldData.masterFieldName == "Qty of Samples Used" ||
                                            field.jFieldData.vFieldName == "Qty of Samples Used") {





                                            let SKUMasterFieldName = $('#SKUMasterFieldName').val();
                                            let isMandatorySKUMasterFieldName = $('#isMandatorySKU')
                                                .val() == 1 ?
                                                '<span style="color: red;">*</span>' : '';

                                            let vHelpText = $('#helpTextSKU').val();

                                            let tooltipHtml = '';
                                            if (vHelpText && vHelpText.trim() !== '') {
                                                tooltipHtml = `
<a href="javascript:void(0)" class="ml-1" data-toggle="tooltip" data-placement="right" title="${vHelpText}" data-original-title="${vHelpText}">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle">
<circle cx="12" cy="12" r="10"></circle>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
<line x1="12" y1="17" x2="12.01" y2="17"></line>
</svg>
</a>
`;
                                            }

                                            let selectHTML = `    <div class="col-lg-12">
<div class="main_br_rs">
<div class="br_rsv_shadow">
    <div class="row mb-1">
        <div class="col-lg-auto col-sm-auto col-md-auto col-auto my-auto mr-auto">
            <h6>${SKUMasterFieldName} ${isMandatorySKUMasterFieldName} ${tooltipHtml}</h3>
        </div>
        <div class="col-lg-auto col-sm-auto col-md-auto col-auto">
            <a href="" data-toggle="modal" data-target="#add_sku"
                class="btn btn-primary btn-toggle-sidebar waves-effect waves-float waves-light">
                <span class=""> <i class="fa fa-plus"></i> </span>
            </a>
        </div>
    </div>


</div>
<div class="SKUData">
    
</div>  
</div>
</div>`;
                                            $(".masterData").append(selectHTML);

                                            populateSKUOptions(response.data.camp_sku_master);

                                            if (response.data && response.data.activity_analytics &&
                                                response.data
                                                .activity_analytics.length > 0) {
                                                const campData = response.data.activity_analytics[
                                                    0]; // Access the first item in the array
                                                if (campData.camp_activity_sku_requirement_data &&
                                                    campData
                                                    .camp_activity_sku_requirement_data.length > 0) {
                                                    campData.camp_activity_sku_requirement_data.forEach(
                                                        (sku, index) => {
                                                            const skuName = sku.product
                                                                .vProductName; // Access SKU name
                                                            const skuAmount = sku
                                                                .vQty; // Access SKU quantity
                                                            const skuRemark = sku
                                                                .vRemarks; // Access SKU remark
                                                            var editImagePath =
                                                                '{{ asset('assets/app-assets/images/ed.png') }}';
                                                            var deleteImagePath =
                                                                '{{ asset('assets/app-assets/images/de.png') }}';

                                                            var newSKUHTML = `
                <div class="br_rsv_shadow" data-id="${sku.iCampRequirementID}"> <!-- Add a data-id for easier referencing -->
                    <div class="row mb-1">
                        <div class="col-lg-auto col-sm-auto col-md-auto col-12 my-auto mr-auto">
                            <span id="SKUName_${index + 1}" data-id="${sku.product.iProductID}" class="mr-auto">
                                <b style="color: #223E6D;">SKU Name: </b> ${skuName}
                            </span><br>
                            <span id="SKUAmount_${index + 1}" class="grey_bg mt-1">${skuAmount} QTY</span>
                        </div>
                        <div class="col-lg-auto col-sm-auto col-md-auto col-12">
                            <div class="app_button pt-0">
                                <button data-toggle="modal" data-target="#add_sku" onclick="editSKU(${index + 1}, ${sku.iCampRequirementID})">
                                    <img src="${editImagePath}" alt="" style="width:40px">
                                </button>
                                <button class="ml-1" onclick="deleteSKU(${index + 1}, ${sku.iCampRequirementID})">
                                    <img src="${deleteImagePath}" alt="" style="width:40px">
                                </button>
                            </div>
                        </div>
                        <div class="col-12">
                            <p id="SKURemark_${index + 1}" data-id="${index + 1}">${skuRemark}</p>
                        </div>
                    </div>
                </div>`;

                                                            $('.SKUData').append(newSKUHTML);
                                                            $('#select_SKU option[value="' + sku
                                                                    .product.iProductID + '"]')
                                                                .prop('disabled', true);
                                                        });
                                                }
                                            }







                                        }
                                    }
                                });
                            }






                        }


                        if (response.data.isImplementRequirementName === 'Y') {

                            if (response.data.camp_fields) {
                                response.data.camp_fields.forEach(field => {
                                    if (field.vFieldType === "checkbox" && field.jFieldData) {
                                        if (field.jFieldData.masterFieldName == "Actual Items Used" ||
                                            field.jFieldData.vFieldName == "Actual Items Used") {





                                            let RequirmentMasterFieldName = $(
                                                '#RequirmentMasterFieldName').val();
                                            let isMandatoryRequirmentMasterFieldName = $(
                                                    '#isMandatoryRequirment').val() ==
                                                1 ?
                                                '<span style="color: red;">*</span>' : '';

                                            let vHelpText = $('#helpTextRequirment').val();

                                            let tooltipHtml = '';
                                            if (vHelpText && vHelpText.trim() !== '') {
                                                tooltipHtml = `
<a href="javascript:void(0)" class="ml-1" data-toggle="tooltip" data-placement="right" title="${vHelpText}" data-original-title="${vHelpText}">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle">
<circle cx="12" cy="12" r="10"></circle>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
<line x1="12" y1="17" x2="12.01" y2="17"></line>
</svg>
</a>
`;
                                            }

                                            let selectHTML = `    <div class="col-lg-12">
<div class="main_br_rs">
<div class="br_rsv_shadow">
    <div class="row mb-1">
        <div class="col-lg-auto col-sm-auto col-md-auto col-auto my-auto mr-auto">
            <h6>${RequirmentMasterFieldName} ${isMandatoryRequirmentMasterFieldName} ${tooltipHtml}</h3>
        </div>
        <div class="col-lg-auto col-sm-auto col-md-auto col-auto">
            <a href="" data-toggle="modal" data-target="#add_Requirement"
                class="btn btn-primary btn-toggle-sidebar waves-effect waves-float waves-light">
                <span class=""> <i class="fa fa-plus"></i> </span>
            </a>
        </div>
    </div>


</div>
<div class="RequirementData">
    
</div>
</div>
</div>`;
                                            $(".masterData").append(selectHTML);

                                            populateRequirementOptions(response.data
                                                .camp_requirement_master);

                                            if (response.data && response.data.activity_analytics &&
                                                response.data
                                                .activity_analytics.length > 0) {
                                                const campData = response.data.activity_analytics[
                                                    0]; // Access the first item in the array
                                                if (campData.camp_activity_item_required && campData
                                                    .camp_activity_item_required
                                                    .length > 0) {
                                                    campData.camp_activity_item_required.forEach((
                                                        requirement, index) => {
                                                        const requirementName = requirement
                                                            .requirement
                                                            .vRequirementName; // Access requirement name
                                                        const requirementAmount = requirement
                                                            .vQty; // Access requirement quantity
                                                        const requirementRemark = requirement
                                                            .vRemarks; // Access requirement remark
                                                        var editImagePath =
                                                            '{{ asset('assets/app-assets/images/ed.png') }}';
                                                        var deleteImagePath =
                                                            '{{ asset('assets/app-assets/images/de.png') }}';

                                                        var newRequirementHTML = `
                <div class="br_rsv_shadow" data-id="${requirement.iCampRequirementID}"> <!-- Add a data-id for easier referencing -->
                    <div class="row mb-1">
                        <div class="col-lg-auto col-sm-auto col-md-auto col-12 my-auto mr-auto">
                            <span id="RequirementName_${index + 1}" data-id="${requirement.requirement.iRequirementID}" class="mr-auto">
                                <b style="color: #223E6D;">Requirement Name: </b> ${requirementName}
                            </span><br>
                            <span id="RequirementAmount_${index + 1}" class="grey_bg mt-1">${requirementAmount} QTY</span>
                        </div>
                        <div class="col-lg-auto col-sm-auto col-md-auto col-12">
                            <div class="app_button pt-0">
                                <button data-toggle="modal" data-target="#add_Requirement" onclick="editRequirement(${index + 1}, ${requirement.iCampRequirementID})">
                                    <img src="${editImagePath}" alt="" style="width:40px">
                                </button>
                                <button class="ml-1" onclick="deleteRequirement(${index + 1}, ${requirement.iCampRequirementID})">
                                    <img src="${deleteImagePath}" alt="" style="width:40px">
                                </button>
                            </div>
                        </div>
                        <div class="col-12">
                            <p id="RequirementRemark_${index + 1}" data-id="${index + 1}">${requirementRemark}</p>
                        </div>
                    </div>
                </div>`;

                                                        $('.RequirementData').append(
                                                            newRequirementHTML
                                                        ); // Append the new requirement HTML
                                                        $('#select_Requirement option[value="' +
                                                            requirement
                                                            .iRequirementID + '"]').prop(
                                                            'disabled', true);
                                                    });
                                                }
                                            }








                                        }
                                    }
                                });
                            }




                        }


                        if (response.data.camp_fields.length > 0) {
                            response.data.camp_fields.forEach(function(field) {

                                let isRequired = field.jFieldData.isMandatory == 1 ? 'required' : '';
                                let vMaxLength = field.jFieldData.vMaxLength ?
                                    `maxlength="${field.jFieldData.vMaxLength}"` : '';
                                let vMinLength = field.jFieldData.vMinLength ?
                                    `minlength="${field.jFieldData.vMinLength}"` : '';
                                let vPlaceholder = field.jFieldData.vPlaceholder ?
                                    `placeholder="${field.jFieldData.vPlaceholder}"` :
                                    `placeholder="${field.vFieldName}"`;
                                let isNumeric = field.jFieldData.isNumeric == 1 ? 'type="number"' :
                                    'type="text"';

                                let isMultiple = field.jFieldData.isMultiple == 1 ? 'multiple' :
                                    '';

                                let requiredAsterisk = isRequired ?
                                    '<span style="color: red;">*</span>' : '';

                                let vHelpText = field.jFieldData.vHelpText ?? '';

                                let tooltipHtml = '';
                                if (vHelpText && vHelpText.trim() !== '') {
                                    tooltipHtml = `
        <a href="javascript:void(0)" class="ml-1" data-toggle="tooltip" data-placement="right" title="${vHelpText}" data-original-title="${vHelpText}">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle">
            <circle cx="12" cy="12" r="10"></circle>
            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
            <line x1="12" y1="17" x2="12.01" y2="17"></line>
          </svg>
        </a>
    `;
                                }


                                let fieldHTML = '';
                                switch (field.vFieldType) {
                                    //                             case 'datepicker':
                                    //                                 fieldHTML = `<div class="col-lg-4 col-sm-6 col-md-4 col-12">
                                //     <div class="mb-2">
                                //         <label for="" class="form-label">${field.vFieldName} ${requiredAsterisk}</label> ${tooltipHtml}
                                //         <input type="text" data-id="${field.iFieldID}" class="form-control FieldFormData datepicker" name="${field.vFieldName}" ${isRequired} ${vPlaceholder} />
                                //     </div>
                                // </div>`;
                                    //                                 break;

                                    //                             case 'input':
                                    //                                 fieldHTML = `<div class="col-lg-4 col-sm-6 col-md-4 col-12">
                                //     <div class="mb-2">
                                //         <label for="" class="form-label">${field.vFieldName} ${requiredAsterisk}</label> ${tooltipHtml}
                                //         <input ${isNumeric} data-id="${field.iFieldID}" class="form-control FieldFormData" name="${field.vFieldName}" ${isRequired} ${vMinLength} ${vMaxLength} ${vPlaceholder} />
                                //     </div>
                                // </div>`;
                                    //                                 break;

                                    case 'textarea': // Handle textbox (textarea) case
                                        fieldHTML = `<div class="col-lg-4 col-sm-6 col-md-4 col-12">
            <div class="mb-2">
                <label for="" class="form-label">${field.vFieldName} ${requiredAsterisk}</label> ${tooltipHtml}
                <textarea class="form-control FieldFormData" data-id="${field.iFieldID}" rows="4" name="${field.vFieldName}" ${isRequired} ${vMinLength} ${vMaxLength} ${vPlaceholder}></textarea>
            </div>
        </div>`;
                                        break;

                                    case 'dropdown':
                                        if (field.vFieldName === 'Select Doctor') {

                                            //                                             if (response.data.isOtherDoctor === 'Y') {
                                            //                                                 fieldHTML = `<div class="col-lg-4 col-sm-6 col-md-4 col-12">
                                        //             <div class="mb-2">
                                        //                 <label for="" class="form-label">Doctors ${requiredAsterisk}</label> ${tooltipHtml}
                                        //                 <div class="add_doctor">
                                        //                     <select class="select2 select-label form-control w-100" id="doctorDropdown" name="select-label">
                                        //                         <option value="" selected default> Select Doctor</option>
                                        //                         <option value="Add unlisted doctor"> Add unlisted doctor</option>

                                        //                     </select>
                                        //                     <span class="input-group-text p-0 ml-1">
                                        //                         <button onclick="setSelectedDoctorData()" id="setSelectedDoctorData" class="btn btn-primary search_blue add_dc_rs waves-effect waves-float waves-light"><i class="fa fa-plus"></i></button>
                                        //                     </span>
                                        //                 </div>
                                        //             </div>
                                        //         </div>
                                        //         <div class="col-lg-4 col-md-4 col-sm-4 col-12" id="other_doctor" style="display:none;">
                                        //             <label for="login-Username w-100" class="form-label">Add unlisted doctor</label>
                                        //             <div class="input-group mb-2">
                                        //                 <input type="text" class="form-control" id="otherDoctorName" placeholder="Enter here">
                                        //                 <span class="input-group-text p-0 ml-1">
                                        //                     <button onclick="setOtherDoctorData()" id="setOtherDoctorData" class="btn btn-primary search_blue add_dc_rs waves-effect waves-float waves-light"><i class="fa fa-plus"></i></button>
                                        //                 </span>
                                        //             </div>
                                        //         </div>

                                        //                         <div class="w-100"></div>
                                        //                         <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                                        //                             <div class="card camp_card">
                                        //                                 <div class="card-datatable p-2 planning_details">
                                        //                                     <label for="login-Username w-100" class="form-label"><b>Selected Doctors
                                        //                                         </b>
                                        //                                         <p class="ml-1 date_view_rs" id="selectedDoctorNumbers"> 0 Doctors</p>
                                        //                                     </label>
                                        //                                     <div class="w-100"></div>

                                        //                                     <ul id="selectedDoctorData">

                                        //                                     </ul>
                                        //                                 </div>
                                        //                             </div>
                                        //                         </div>
                                        //                         <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                                        //                             <div class="card camp_card">
                                        //                                 <div class="card-datatable p-2 planning_details">
                                        //                                     <label for="login-Username w-100" class="form-label"><b>Other Doctors </b>
                                        //                                         <p class="ml-1 date_view_rs" id="otherDoctorNumbers">0 Doctors</p>
                                        //                                     </label>
                                        //                                     <div class="w-100"></div>

                                        //                                     <ul id="otherDoctorData">
                                        //                                     </ul>
                                        //                                 </div>
                                        //                             </div>
                                        //                         </div>`;
                                            //                                             } else {
                                            //                                                 fieldHTML = `<div class="col-lg-4 col-sm-6 col-md-4 col-12">
                                        //             <div class="mb-2">
                                        //                 <label for="" class="form-label">Doctors ${requiredAsterisk}</label> ${tooltipHtml}
                                        //                 <div class="add_doctor">
                                        //                     <select class="select2 select-label form-control w-100" id="doctorDropdown" name="select-label">
                                        //                         <option value="" selected default> Select Doctor</option>

                                        //                     </select>
                                        //                     <span class="input-group-text p-0 ml-1">
                                        //                         <button onclick="setSelectedDoctorData()" id="setSelectedDoctorData" class="btn btn-primary search_blue add_dc_rs waves-effect waves-float waves-light"><i class="fa fa-plus"></i></button>
                                        //                     </span>
                                        //                 </div>
                                        //             </div>
                                        //         </div>
                                        //         <div class="col-lg-4 col-md-4 col-sm-4 col-12" id="other_doctor" style="display:none;">
                                        //             <label for="login-Username w-100" class="form-label">Add unlisted doctor</label>
                                        //             <div class="input-group mb-2">
                                        //                 <input type="text" class="form-control" placeholder="Enter here">
                                        //                 <span class="input-group-text p-0 ml-1">
                                        //                     <button id="setOtherDoctorData"class="btn btn-primary search_blue add_dc_rs waves-effect waves-float waves-light"><i class="fa fa-plus"></i></button>
                                        //                 </span>
                                        //             </div>
                                        //         </div>

                                        //                         <div class="w-100"></div>
                                        //                         <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                                        //                             <div class="card camp_card">
                                        //                                 <div class="card-datatable p-2 planning_details">
                                        //                                     <label for="login-Username w-100" class="form-label"><b>Selected Doctors
                                        //                                         </b>
                                        //                                         <p class="ml-1 date_view_rs" id="selectedDoctorNumbers"> 0 Doctors</p>
                                        //                                     </label>
                                        //                                     <div class="w-100"></div>

                                        //                                     <ul id="selectedDoctorData">

                                        //                                     </ul>
                                        //                                 </div>
                                        //                             </div>
                                        //                         </div>
                                        //                         <div class="w-100"></div>
                                        // `;
                                            //                                             }

                                            //                                             loadDoctors(response.data.isOtherDoctor, response.data
                                            //                                                 .isAllowMultipleDoctor);
                                        } else {
                                            if (field.vFieldType === 'dropdown' && field.jFieldData
                                                .dropdownOptions) {
                                                const dropdownOptions = field.jFieldData.dropdownOptions
                                                    .map(value => {
                                                        const trimmedValue = value.trim();
                                                        return `<option value="${trimmedValue}">${trimmedValue}</option>`;
                                                    })
                                                    .join('');




                                                fieldHTML = `<div class="col-lg-4 col-sm-6 col-md-4 col-12">
        <div class="mb-2">
            <label for="" class="form-label">${field.vFieldName} ${requiredAsterisk}</label> ${tooltipHtml}
            <select class="select2 select-label form-control FieldFormData" data-id="${field.iFieldID}" id="select_${field.vFieldName}" name="${field.vFieldName}" ${isRequired} ${isMultiple}>
                <option value="" selected disabled> Select Option </option>
                ${dropdownOptions}  <!-- Add dynamically generated options here -->
            </select>
        </div>
    </div>`;
                                            } else {
                                                fieldHTML = `<div class="col-lg-4 col-sm-6 col-md-4 col-12">
        <div class="mb-2">
            <label for="" class="form-label">${field.vFieldName} ${requiredAsterisk}</label> ${tooltipHtml}
            <select class="select2 select-label form-control FieldFormData" data-id="${field.iFieldID}" id="select_${field.vFieldName}" name="${field.vFieldName}" ${isRequired} ${isMultiple}>
                <option value="" selected disabled> Select Option </option>
            </select>
        </div>
    </div>`;
                                            }
                                        }
                                        break;
                                }

                                $(".masterData").append(fieldHTML);
                            });
                        }

                        $('.select2').select2();
                        $('.datepicker').each(function() {
                            let currentVal = $(this).val();

                            if (currentVal === '') {
                                $(this).val(moment().format('DD/MM/YYYY'));
                            }

                            const isImplementationDate = $(this).attr('name') === "Implementation Date";

                            const campDateLimit = isImplementationDate
                                ? moment($('#campDateLimit').val(), 'YYYY-MM-DD')
                                : null;

                            $(this).daterangepicker({
                                singleDatePicker: true,
                                showDropdowns: true,
                                startDate: moment($(this).val(), 'DD/MM/YYYY'),
                                minDate: campDateLimit || moment(), // Use campDateLimit if available, else today's date
                                maxDate: moment(),
                                locale: {
                                    format: 'DD/MM/YYYY'
                                }
                            });
                        });



                    } else {
                        $.notify('Selected camp not found or inactive.', "error");
                    }
                },
                error: function(xhr, status, error) {
                    $.notify('Selected camp not found or inactive.', "error");
                }
            });
        }





        $(document).ready(function() {

            loadCampDetails();
            loadPaymentTypes();

            $('#SKUForm').validate({
                ignore: ".ignore",
                rules: {
                    select_SKU: {
                        required: function() {
                            return !$('#editSKUId').val();
                        }
                    },
                    SKU_qty: {
                        required: true,
                    },
                    SKU_remark: {
                        required: true,
                    },
                },
                messages: {},
                submitHandler: function(form) {
                    $("#addSKUBtn").attr('disabled', true);

                    var formData = new FormData($("#SKUForm")[0]);
                    formData.append('iCampAnalyticsID', $('#iCampAnalyticsID').val());
                    formData.append('iCampRequirementID', $('#editSKUId').val());

                    if ($('#editSKUId').val()) {
                        formData.set('select_SKU', $('#editSelectSKUId').val());
                    }

                    $.ajax({
                        url: "{{ route('field.campActivitySKUStore') }}",
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function(response) {
                            if (response.status == 1) {
                                $.notify(response.message, "success");
                                $("#addSKUBtn").attr('disabled', false);
                                $('#add_sku').modal('hide');

                                var skuData = response.data;
                                var editImagePath = '{{ asset('assets/app-assets/images/ed.png') }}';
                                var deleteImagePath = '{{ asset('assets/app-assets/images/de.png') }}';
                                var skuIndex = $('.SKUData .br_rsv_shadow').length + 1;

                                if ($('#editSKUId').val()) {
                                    // Update existing SKU
                                    var existingSKU = $(`.SKUData .br_rsv_shadow[data-id="${skuData.iCampRequirementID}"]`);
                                    if (existingSKU.length) {
                                        var index = existingSKU.find('[id^="SKUName_"]').attr('id').split('_')[1];
                                        existingSKU.html(`
                                            <div class="row mb-1">
                                                <div class="col-lg-auto col-sm-auto col-md-auto col-12 my-auto mr-auto">
                                                    <span id="SKUName_${index}" data-id="${skuData.product.iProductID}" class="mr-auto">
                                                        <b style="color: #223E6D;">SKU Name:</b> ${skuData.product.vProductName}
                                                    </span><br>
                                                    <span id="SKUAmount_${index}" class="grey_bg mt-1">${skuData.vQty} QTY</span>
                                                </div>
                                                <div class="col-lg-auto col-sm-auto col-md-auto col-12">
                                                    <div class="app_button pt-0">
                                                        <button data-toggle="modal" data-target="#add_sku" onclick="editSKU(${index}, ${skuData.iCampRequirementID})">
                                                            <img src="${editImagePath}" alt="" style="width:40px">
                                                        </button>
                                                        <button class="ml-1" onclick="deleteSKU(${index}, ${skuData.iCampRequirementID})">
                                                            <img src="${deleteImagePath}" alt="" style="width:40px">
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <p id="SKURemark_${index}" data-id="${index}">${skuData.vRemarks || '-'}</p>
                                                </div>
                                            </div>
                                        `);
                                        $('#select_SKU option[value="' + skuData.product.iProductID + '"]').prop('disabled', true);
                                    }
                                } else {
                                    // Add new SKU
                                    var newSKUHTML = `
                                        <div class="br_rsv_shadow" data-id="${skuData.iCampRequirementID}">
                                            <div class="row mb-1">
                                                <div class="col-lg-auto col-sm-auto col-md-auto col-12 my-auto mr-auto">
                                                    <span id="SKUName_${skuIndex}" data-id="${skuData.product.iProductID}" class="mr-auto">
                                                        <b style="color: #223E6D;">SKU Name:</b> ${skuData.product.vProductName}
                                                    </span><br>
                                                    <span id="SKUAmount_${skuIndex}" class="grey_bg mt-1">${skuData.vQty} QTY</span>
                                                </div>
                                                <div class="col-lg-auto col-sm-auto col-md-auto col-12">
                                                    <div class="app_button pt-0">
                                                        <button data-toggle="modal" data-target="#add_sku" onclick="editSKU(${skuIndex}, ${skuData.iCampRequirementID})">
                                                            <img src="${editImagePath}" alt="" style="width:40px">
                                                        </button>
                                                        <button class="ml-1" onclick="deleteSKU(${skuIndex}, ${skuData.iCampRequirementID})">
                                                            <img src="${deleteImagePath}" alt="" style="width:40px">
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <p id="SKURemark_${skuIndex}" data-id="${skuIndex}">${skuData.vRemarks || '-'}</p>
                                                </div>
                                            </div>
                                        </div>`;
                                    $('.SKUData').append(newSKUHTML);
                                    $('#select_SKU option[value="' + skuData.product.iProductID + '"]').prop('disabled', true);
                                }
                            } else {
                                $("#addSKUBtn").attr('disabled', false);
                                $.notify(response.message, "error");
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            $("#addSKUBtn").attr('disabled', false);
                            $.notify("An error occurred", "error");
                        }
                    });
                }
            });





            $('#RequirementForm').validate({
                ignore: ".ignore",
                rules: {
                    select_Requirement: {
                        required: function() {
                            return !$('#editRequirementId').val();
                        }
                    },
                    Requirement_qty: {
                        required: true,
                    },
                    Requirement_remark: {
                        required: true,
                    },
                },
                messages: {},
                submitHandler: function(form) {
                    $("#addRequirementBtn").attr('disabled', true);

                    var formData = new FormData($("#RequirementForm")[0]);
                    formData.append('iCampAnalyticsID', $('#iCampAnalyticsID').val());
                    formData.append('iCampRequirementID', $('#editRequirementId').val());

                    if ($('#editRequirementId').val()) {
                        formData.set('select_Requirement', $('#editSelectRequirementId').val());
                    }

                    $.ajax({
                        url: "{{ route('field.campActivityRequirementStore') }}",
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function(response) {
                            if (response.status == 1) {
                                $.notify(response.message, "success");
                                $("#addRequirementBtn").attr('disabled', false);
                                $('#add_Requirement').modal('hide');

                                var requirementData = response.data || {};
                                var editImagePath = '{{ asset('assets/app-assets/images/ed.png') }}';
                                var deleteImagePath = '{{ asset('assets/app-assets/images/de.png') }}';
                                var requirementIndex = $('.RequirementData .br_rsv_shadow').length + 1;

                                // Fallback values
                                var requirementId = requirementData.iCampRequirementID || $('#editRequirementId').val() || Date.now();
                                var itemId = requirementData.item?.iRequirementID || $('#select_Requirement').val();
                                var itemName = requirementData.item?.vItemName || $('#select_Requirement option:selected').text();
                                var qty = requirementData.vQty || $('#Requirement_qty').val();
                                var remark = requirementData.vRemarks || $('#Requirement_remark').val() || '-';

                                if ($('#editRequirementId').val()) {
                                    // Update existing requirement
                                    var existingRequirement = $(`.RequirementData .br_rsv_shadow[data-id="${requirementId}"]`);
                                    if (existingRequirement.length) {
                                        var index = existingRequirement.find('[id^="RequirementName_"]').attr('id').split('_')[1];
                                        existingRequirement.html(`
                                            <div class="row mb-1">
                                                <div class="col-lg-auto col-sm-auto col-md-auto col-12 my-auto mr-auto">
                                                    <span id="RequirementName_${index}" data-id="${itemId}" class="mr-auto">
                                                        <b style="color: #223E6D;">Item Name:</b> ${itemName}
                                                    </span><br>
                                                    <span id="RequirementAmount_${index}" class="grey_bg mt-1">${qty} QTY</span>
                                                </div>
                                                <div class="col-lg-auto col-sm-auto col-md-auto col-12">
                                                    <div class="app_button pt-0">
                                                        <button data-toggle="modal" data-target="#add_Requirement" onclick="editRequirement(${index}, ${requirementId})">
                                                            <img src="${editImagePath}" alt="" style="width:40px">
                                                        </button>
                                                        <button class="ml-1" onclick="deleteRequirement(${index}, ${requirementId})">
                                                            <img src="${deleteImagePath}" alt="" style="width:40px">
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <p id="RequirementRemark_${index}" data-id="${index}">${remark}</p>
                                                </div>
                                            </div>
                                        `);
                                        $('#select_Requirement option[value="' + itemId + '"]').prop('disabled', true);
                                    }
                                } else {
                                    // Add new requirement
                                    var newRequirementHTML = `
                                        <div class="br_rsv_shadow" data-id="${requirementId}">
                                            <div class="row mb-1">
                                                <div class="col-lg-auto col-sm-auto col-md-auto col-12 my-auto mr-auto">
                                                    <span id="RequirementName_${requirementIndex}" data-id="${itemId}" class="mr-auto">
                                                        <b style="color: #223E6D;">Item Name:</b> ${itemName}
                                                    </span><br>
                                                    <span id="RequirementAmount_${requirementIndex}" class="grey_bg mt-1">${qty} QTY</span>
                                                </div>
                                                <div class="col-lg-auto col-sm-auto col-md-auto col-12">
                                                    <div class="app_button pt-0">
                                                        <button data-toggle="modal" data-target="#add_Requirement" onclick="editRequirement(${requirementIndex}, ${requirementId})">
                                                            <img src="${editImagePath}" alt="" style="width:40px">
                                                        </button>
                                                        <button class="ml-1" onclick="deleteRequirement(${requirementIndex}, ${requirementId})">
                                                            <img src="${deleteImagePath}" alt="" style="width:40px">
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <p id="RequirementRemark_${requirementIndex}" data-id="${requirementIndex}">${remark}</p>
                                                </div>
                                            </div>
                                        </div>`;
                                    $('.RequirementData').append(newRequirementHTML);
                                    $('#select_Requirement option[value="' + itemId + '"]').prop('disabled', true);
                                }
                            } else {
                                $("#addRequirementBtn").attr('disabled', false);
                                $.notify(response.message || "Failed to save requirement.", "error");
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            $("#addRequirementBtn").attr('disabled', false);
                            $.notify("An error occurred: " + errorThrown, "error");
                        }
                    });
                }
            });





            $('#ExpenseForm').validate({
                ignore: ".ignore",
                rules: {
                    expense_file: {
                        required: function() {
                            return !$('#editExpenseId').val();
                        }
                    },
                    select_expense: {
                        required: function() {
                            return !$('#editExpenseId').val();
                        }
                    },
                    expense_qty: {
                        required: true,
                    },
                    beneficiaryNameInput: {
                        required: true,
                    },
                    payment_type: {
                        required: true,
                    },
                    expense_remark: {
                        required: true,
                    },
                },
                messages: {},
                submitHandler: function(form) {
                    $("#addExpenseBtn").attr('disabled', true);

                    var formData = new FormData($("#ExpenseForm")[0]);
                    formData.append('iCampAnalyticsID', $('#iCampAnalyticsID').val());
                    formData.append('iCampExpenseID', $('#editExpenseId').val());

                    if ($('#editExpenseId').val()) {
                        formData.set('select_expense', $('#editSelectExpenseId').val());
                    }

                    $.ajax({
                        url: "{{ route('field.campActivityExpenseStore') }}",
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function(response) {
                            if (response.status == 1) {
                                $.notify(response.message, "success");
                                $("#addExpenseBtn").attr('disabled', false);
                                $('#add_expenses').modal('hide');

                                var expenseData = response.data || {};
                                var editImagePath = '{{ asset('assets/app-assets/images/ed.png') }}';
                                var deleteImagePath = '{{ asset('assets/app-assets/images/de.png') }}';
                                var expenseIndex = $('.expenseData .br_rsv_shadow').length + 1;

                                // Fallback values
                                var expenseId = expenseData.iCampExpenseID || $('#editExpenseId').val() || Date.now();
                                var expenseTypeId = expenseData.expense?.iExpenseID || $('#select_expense').val();
                                var expenseName = expenseData.expense?.vExpenseName || $('#select_expense option:selected').text();
                                var amount = expenseData.vExpenseAmount || $('#expense_qty').val();
                                var paymentType = expenseData.iCampPaymentType || $('#payment_type').val();
                                var beneficiaryName = expenseData.vBenificiaryName || $('#beneficiaryNameInput').val();
                                var remark = expenseData.vRemarks || $('#expense_remark').val() || '-';
                                var invoiceImage = expenseData.vInvoiceImage || '';
                                var id = expenseData.id || Date.now();
                                var paymentTypeName = expenseData.paymentTypeName;

                                if ($('#editExpenseId').val()) {
                                    // Update existing expense
                                    var existingExpense = $(`.expenseData .br_rsv_shadow[data-id="${expenseId}"]`);
                                    if (existingExpense.length) {
                                        var index = existingExpense.find('[id^="expenseName_"]').attr('id').split('_')[1];
                                        existingExpense.html(`
                                            <div class="row mb-1">
                                                <div class="col-lg-auto col-sm-auto col-md-auto col-12 my-auto mr-auto">
                                                    <p id="expenseName_${index}" data-id="${expenseTypeId}"><b>Expense Type:</b> ${expenseName}</p>
                                                    <p id="paymentType_${index}"><b>Payment Type:</b> ${paymentTypeName}</p>
                                                    <p id="beneficiaryName_${index}"><b>Beneficiary Name:</b> ${beneficiaryName}</p>
                                                    ${invoiceImage ? `<a href="javascript:void(0);" onclick="openDocumentModal('${id}')" class="br_svg ml-0 text-center">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="20.419" height="13.613" viewBox="0 0 20.419 13.613">
                                                            <g id="Group_34377" data-name="Group 34377" transform="translate(-1848.391 -392)">
                                                                <g id="Group_31233" data-name="Group 31233" transform="translate(1848.39 392)">
                                                                    <g id="Group_1420" data-name="Group 1420" transform="translate(0 0)">
                                                                        <g id="_44_Visibility" data-name="44 Visibility" transform="translate(0)">
                                                                            <path id="Path_6700" data-name="Path 6700" d="M14.685,18.738c-4.847,0-4.847-7.738,0-7.738C19.477,11,19.684,18.738,14.685,18.738Zm0-6.191c-2.937,0-2.937,4.643,0,4.643S17.622,12.548,14.685,12.548Z" transform="translate(-4.475 -8.063)" fill="#db644d"/>
                                                                            <path id="Path_6701" data-name="Path 6701" d="M12.631,20.613a12.176,12.176,0,0,1-9.774-5.456,2.312,2.312,0,0,1,0-2.7A12.176,12.176,0,0,1,12.631,7,12.176,12.176,0,0,1,22.4,12.456a2.312,2.312,0,0,1,0,2.7A12.176,12.176,0,0,1,12.631,20.613ZM4.072,14.271c2.239,3.114,5.278,4.83,8.558,4.83s6.319-1.715,8.558-4.83a.8.8,0,0,0,0-.929c-2.239-3.114-5.278-4.829-8.558-4.829s-6.319,1.715-8.558,4.83a.8.8,0,0,0,0,.929Z" transform="translate(-2.421 -7)" fill="#db644d"/>
                                                                        </g>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </svg>
                                                    </a><br>` : ''}
                                                    <span id="expenseAmount_${index}" class="grey_bg mt-1">₹ ${amount}</span>
                                                </div>
                                                <div class="col-lg-auto col-sm-auto col-md-auto col-12">
                                                    <div class="app_button pt-0">
                                                        <button data-toggle="modal" data-target="#add_expenses" onclick="editExpense(${index}, ${id}, ${paymentType})">
                                                            <img src="${editImagePath}" alt="" style="width:40px">
                                                        </button>
                                                        <button class="ml-1" onclick="deleteExpense(${index}, ${expenseId})">
                                                            <img src="${deleteImagePath}" alt="" style="width:40px">
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <p id="expenseRemark_${index}" data-id="${index}">${remark}</p>
                                                </div>
                                            </div>
                                        `);
                                        $('#select_expense option[value="' + expenseTypeId + '"]').prop('disabled', true);
                                    }
                                } else {
                                    // Add new expense
                                    var newExpenseHTML = `
                                        <div class="br_rsv_shadow" data-id="${expenseId}">
                                            <div class="row mb-1">
                                                <div class="col-lg-auto col-sm-auto col-md-auto col-12 my-auto mr-auto">
                                                    <p id="expenseName_${expenseIndex}" data-id="${expenseTypeId}"><b>Expense Type:</b> ${expenseName}</p>
                                                    <p id="paymentType_${expenseIndex}"><b>Payment Type:</b> ${paymentTypeName}</p>
                                                    <p id="beneficiaryName_${expenseIndex}"><b>Beneficiary Name:</b> ${beneficiaryName}</p>
                                                    ${invoiceImage ? `<a href="javascript:void(0);" onclick="openDocumentModal('${id}')" class="br_svg ml-0 text-center">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="20.419" height="13.613" viewBox="0 0 20.419 13.613">
                                                            <g id="Group_34377" data-name="Group 34377" transform="translate(-1848.391 -392)">
                                                                <g id="Group_31233" data-name="Group 31233" transform="translate(1848.39 392)">
                                                                    <g id="Group_1420" data-name="Group 1420" transform="translate(0 0)">
                                                                        <g id="_44_Visibility" data-name="44 Visibility" transform="translate(0)">
                                                                            <path id="Path_6700" data-name="Path 6700" d="M14.685,18.738c-4.847,0-4.847-7.738,0-7.738C19.477,11,19.684,18.738,14.685,18.738Zm0-6.191c-2.937,0-2.937,4.643,0,4.643S17.622,12.548,14.685,12.548Z" transform="translate(-4.475 -8.063)" fill="#db644d"/>
                                                                            <path id="Path_6701" data-name="Path 6701" d="M12.631,20.613a12.176,12.176,0,0,1-9.774-5.456,2.312,2.312,0,0,1,0-2.7A12.176,12.176,0,0,1,12.631,7,12.176,12.176,0,0,1,22.4,12.456a2.312,2.312,0,0,1,0,2.7A12.176,12.176,0,0,1,12.631,20.613ZM4.072,14.271c2.239,3.114,5.278,4.83,8.558,4.83s6.319-1.715,8.558-4.83a.8.8,0,0,0,0-.929c-2.239-3.114-5.278-4.829-8.558-4.829s-6.319,1.715-8.558,4.83a.8.8,0,0,0,0,.929Z" transform="translate(-2.421 -7)" fill="#db644d"/>
                                                                        </g>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </svg>
                                                    </a><br>` : ''}
                                                    <span id="expenseAmount_${expenseIndex}" class="grey_bg mt-1">₹ ${amount}</span>
                                                </div>
                                                <div class="col-lg-auto col-sm-auto col-md-auto col-12">
                                                    <div class="app_button pt-0">
                                                        <button data-toggle="modal" data-target="#add_expenses" onclick="editExpense(${expenseIndex}, ${id}, ${paymentType})">
                                                            <img src="${editImagePath}" alt="" style="width:40px">
                                                        </button>
                                                        <button class="ml-1" onclick="deleteExpense(${expenseIndex}, ${expenseId})">
                                                            <img src="${deleteImagePath}" alt="" style="width:40px">
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <p id="expenseRemark_${expenseIndex}" data-id="${expenseIndex}">${remark}</p>
                                                </div>
                                            </div>
                                        </div>`;
                                    $('.expenseData').append(newExpenseHTML);
                                    $('#select_expense option[value="' + expenseTypeId + '"]').prop('disabled', true);
                                }
                            } else {
                                $("#addExpenseBtn").attr('disabled', false);
                                $.notify(response.message || "Failed to save expense.", "error");
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            $("#addExpenseBtn").attr('disabled', false);
                            $.notify("An error occurred: " + errorThrown, "error");
                        }
                    });
                }
            });

        });

        function patientAdd(campAnalyticsId, patientId = null) {
            try {
                $('#add_patient').modal('show');
            } catch (error) {
                $.notify('Failed to open modal. Please check if Bootstrap is loaded.', 'error');
                return;
            }

            $('#patientFormName').text('');
            $('#patientFormFields').empty();

            // Update modal title based on mode
            const isEditMode = patientId !== null;
            //$('#patientFormName').text(isEditMode ? 'Edit Patient' : 'Add Patient');

            $.ajax({
                url: "{{ route('field.getPatientForm', ['id' => ':id']) }}".replace(':id', campAnalyticsId),
                type: 'GET',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        $('#patientFormName').text(response.formName + (isEditMode ? ' - Edit Patient Details' : ' - Add Patient Details'));
                        const formFields = $('#patientFormFields');
                        formFields.empty();

                        formFields.append('<form id="add_patient_form"></form>');
                        const form = $('#add_patient_form');

                        const validationRules = {};
                        const validationMessages = {};

                        // Store field definitions for later use
                        const fieldDefs = response.fields;

                        response.fields.forEach(field => {
                            let fieldHtml = '';
                            const fieldId = `field-${field.id}`;
                            const isRequired = field.isMandatory ? 'required' : '';
                            const minLength = field.minLength && field.type !== 'datepicker' ? `minlength="${field.minLength}"` : '';
                            const maxLength = field.maxLength && field.type !== 'datepicker' ? `maxlength="${field.maxLength}"` : '';
                            const placeholder = field.placeholder ? `placeholder="${field.placeholder}"` : '';
                            const isNumeric = field.isNumeric && field.type !== 'datepicker' ? 'pattern="[0-9]*"' : '';
                            const helpText = field.helpText ? `<small class="form-text text-muted">${field.helpText}</small>` : '';

                            const rules = {};
                            if (field.isMandatory) rules.required = true;
                            if (field.minLength && field.type !== 'datepicker') rules.minlength = field.minLength;
                            if (field.maxLength && field.type !== 'datepicker') rules.maxlength = field.maxLength;
                            if (field.isNumeric && field.type !== 'datepicker') rules.pattern = /^\d+$/;
                            if (field.name === 'Age' && field.helpText && field.helpText.includes('auto-calculate')) {
                                rules.range = [1, 120];
                            }
                            if (field.name.toUpperCase() === 'DOB' && field.type === 'datepicker') {
                                rules.max = new Date().toISOString().split('T')[0]; 
                            }
                            validationRules[field.name] = rules;

                            validationMessages[field.name] = {
                                required: `${field.name} is required.`,
                                minlength: `${field.name} must be at least ${field.minLength} characters.`,
                                maxlength: `${field.name} cannot exceed ${field.maxLength} characters.`,
                                pattern: `${field.name} must contain only numbers.`,
                                range: `${field.name} must be between 1 and 120 years.`
                            };

                            switch (field.type) {
                                case 'input':
                                    fieldHtml = `
                                        <div class="form-group">
                                            <label for="${fieldId}">${field.name} ${field.isMandatory ? '<span class="text-danger">*</span>' : ''}</label>
                                            <input type="text" class="form-control patient-field" id="${fieldId}" name="${field.name}" ${placeholder} ${isRequired} ${minLength} ${maxLength} ${isNumeric}>
                                            ${helpText}
                                        </div>
                                    `;
                                    break;
                                case 'textarea':
                                    fieldHtml = `
                                        <div class="form-group">
                                            <label for="${fieldId}">${field.name} ${field.isMandatory ? '<span class="text-danger">*</span>' : ''}</label>
                                            <textarea class="form-control patient-field" id="${fieldId}" name="${field.name}" ${placeholder} ${isRequired} ${minLength} ${maxLength}></textarea>
                                            ${helpText}
                                        </div>
                                    `;
                                    break;
                                case 'dropdown':
                                    fieldHtml = `
                                        <div class="form-group">
                                            <label for="${fieldId}">${field.name} ${field.isMandatory ? '<span class="text-danger">*</span>' : ''}</label>
                                            <select class="form-control patient-field" id="${fieldId}" name="${field.name}" ${field.isMultiple ? 'multiple' : ''} ${isRequired}>
                                                ${!field.isMultiple ? '<option value="">Select an option</option>' : ''}
                                                ${field.values.map(option => `<option value="${option.trim()}">${option.trim()}</option>`).join('')}
                                            </select>
                                            ${helpText}
                                        </div>
                                    `;
                                    break;
                                // case 'datepicker':
                                //     fieldHtml = `
                                //         <div class="form-group">
                                //             <label for="${fieldId}">${field.name} ${field.isMandatory ? '<span class="text-danger">*</span>' : ''}</label>
                                //             <input type="date" class="form-control patient-field" id="${fieldId}" name="${field.name}" ${isRequired}>
                                //             ${helpText}
                                //         </div>
                                //     `;
                                //     break;

                                case 'datepicker':
                                    fieldHtml = `
                                        <div class="form-group">
                                            <label for="${fieldId}">${field.name} ${field.isMandatory ? '<span class="text-danger">*</span>' : ''}</label>
                                            <input type="date" class="form-control demo-field" id="${fieldId}" name="${field.name}" ${isRequired} ${field.name.toUpperCase() === 'DOB' ? 'max="' + new Date().toISOString().split('T')[0] + '"' : ''}>
                                            ${helpText}
                                        </div>
                                    `;
                                    break;
                                default:
                                    fieldHtml = '';
                            }
                            form.append(fieldHtml);
                        });

                        // If in edit mode, fetch patient data and populate the form
                        let patientData = {};
                        if (isEditMode) {
                            $.ajax({
                                url: "{{ route('field.getPatientDataById', ['id' => ':id']) }}".replace(':id', patientId),
                                type: 'GET',
                                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                                success: function(patientResponse) {
                                    if (patientResponse.status === 1 && patientResponse.data) {
                                        const jData = patientResponse.data.jData ? JSON.parse(patientResponse.data.jData) : {};
                                        fieldDefs.forEach(field => {
                                            const fieldElement = $(`#field-${field.id}`);
                                            let value = jData[field.id] || '';

                                            if (field.type === 'datepicker' && value) {
                                                const parts = value.split('/');
                                                if (parts.length === 3) {
                                                    const day = parts[0].padStart(2, '0');
                                                    const month = parts[1].padStart(2, '0');
                                                    const year = parts[2];
                                                    value = `${year}-${month}-${day}`;
                                                } else {
                                                    value = ''; // fallback to empty if format is invalid
                                                }
                                            }

                                            if (field.type === 'dropdown' && field.isMultiple && value) {
                                                const values = value.split(',').map(v => v.trim());
                                                fieldElement.val(values);
                                            } else {
                                                fieldElement.val(value);
                                            }
                                        });
                                    } else {
                                        $.notify('Failed to load patient data.', 'error');
                                    }
                                },
                                error: function(xhr) {
                                    console.error('Fetch Patient Error:', xhr.responseText);
                                    $.notify('Error fetching patient data.', 'error');
                                }
                            });
                        }

                        // form.append(`
                        //     <button type="submit" class="btn btn-primary" id="submitPatientBtn">Submit</button>
                        // `);

                        form.validate({
                            ignore: ".ignore",
                            rules: validationRules,
                            messages: validationMessages,
                            errorElement: 'div',
                            errorClass: 'invalid-feedback',
                            highlight: function(element) {
                                $(element).addClass('is-invalid');
                            },
                            unhighlight: function(element) {
                                $(element).removeClass('is-invalid');
                            },
                            errorPlacement: function(error, element) {
                                error.insertAfter(element);
                            },
                            submitHandler: function(form, event) {
                                event.preventDefault();
                                $("#submitPatientBtn").html('<span>Processing...</span>').attr('disabled', true);

                                const patientData = {};
                                fieldDefs.forEach(field => {
                                    const fieldElement = $(`[name="${field.name}"]`);
                                    let value = fieldElement.val();
                                    patientData[field.id] = value && value.length > 0 ? (field.type === 'dropdown' && field.isMultiple ? value.join(', ') : value) : null;
                                });

                                const url = isEditMode
                                    ? "{{ route('field.updatePatientData', ['id' => ':id']) }}".replace(':id', patientId)
                                    : '{{ route('field.storePatientData') }}';

                                $.ajax({
                                    url: url,
                                    type: 'POST',
                                    data: {
                                        _token: '{{ csrf_token() }}',
                                        iCampAnalyticsID: campAnalyticsId,
                                        patientData: patientData
                                    },
                                    success: function(saveResponse) {
                                        if (saveResponse.status === 1) {
                                            $.notify(isEditMode ? 'Patient updated successfully.' : 'Patient details saved successfully.', 'success');
                                            $('#add_patient').modal('hide');
                                            // Refresh the patient list if in edit mode
                                            if (!isEditMode) {
                                                const currentCount = parseInt($('.patient_count span').text()) || 0;
                                                $('.patient_count span').text(currentCount + 1);
                                            }
                                            if (isEditMode) {
                                                viewPatients(campAnalyticsId);
                                            }
                                        } else {
                                            $.notify(saveResponse.message || (isEditMode ? 'Failed to update patient.' : 'Failed to save patient details.'), 'error');
                                        }
                                    },
                                    error: function(xhr) {
                                        console.error('Save Error:', xhr.responseText);
                                        let errorMessage = isEditMode ? 'Error updating patient.' : 'Error saving patient details.';
                                        if (xhr.status === 422) {
                                            const errors = xhr.responseJSON.errors;
                                            errorMessage += ' ' + Object.values(errors).join(' ');
                                        }
                                        $.notify(errorMessage, 'error');
                                    },
                                    complete: function() {
                                        $("#submitPatientBtn").html('Submit').attr('disabled', false);
                                    }
                                });
                            }
                        });
                    } else {
                        $.notify('Failed to load form details: ' + (response.message || 'Unknown error'), 'error');
                    }
                },
                error: function(xhr) {
                    console.error('AJAX Error:', xhr.responseText);
                    $.notify('Failed to fetch form data. Please try again.', 'error');
                }
            });
        }

        $('#view_patients').on('hidden.bs.modal', function () {
            if ($.fn.DataTable.isDataTable('#patientListTable')) {
                $('#patientListTable').DataTable().destroy();
            }
            $('#patientListHeaders').empty();
            $('#patientListBody').empty();
        });

        function viewPatients(campAnalyticsId) {
            if ($.fn.DataTable.isDataTable('#patientListTable')) {
                $('#patientListTable').DataTable().destroy();
            }

            // Clear the table data before opening the modal
            $('#patientListHeaders').empty();
            $('#patientListBody').empty();

            try {
                $('#view_patients').modal('show');
            } catch (error) {
                $.notify('Failed to open modal. Please check if Bootstrap is loaded.', 'error');
                return;
            }

            $.when(
                $.ajax({
                    url: "{{ route('field.getPatientData', ['iCampAnalyticsID' => ':id']) }}".replace(':id', campAnalyticsId),
                    type: 'GET',
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
                }),
                $.ajax({
                    url: "{{ route('field.getPatientForm', ['id' => ':id']) }}".replace(':id', campAnalyticsId),
                    type: 'GET',
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
                })
            ).done(function(patientResponse, formResponse) {
                const patients = patientResponse[0].data || [];
                const formFields = formResponse[0].success ? formResponse[0].fields : [];

                if (!formFields.length) {
                    $.notify('No form fields found.', 'error');
                    $('#patientListBody').append('<tr><td colspan="2">No data available</td></tr>');
                    return;
                }

                // Create headers
                let headersHtml = '<th>Actions</th>';
                
                const fieldMap = {};
                formFields.forEach(field => {
                    fieldMap[field.id] = field.name;
                    headersHtml += `<th>${field.name}</th>`;
                });
                
                $('#patientListHeaders').html(headersHtml);

                // Create rows
                if (!patients.length) {
                    $('#patientListBody').append(`<tr><td colspan="${formFields.length + 2}">No patients found</td></tr>`);
                    return;
                }

                patients.forEach((patient, index) => {
                    let rowHtml = `<tr><td>${index + 1}</td>`;

                    rowHtml += `
                        <td>
                            <button style="background-color: transparent; border: none;" class="mr-1" onclick="editPatient(${patient.id}, ${campAnalyticsId})">
                                <img src="{{ asset('front-assets/images/p-edit.png') }}" alt="Edit" style="width:20px">
                            </button>
                            <button style="background-color: transparent; border: none;" class="" onclick="deletePatient(${patient.id}, ${campAnalyticsId})">
                                <img src="{{ asset('front-assets/images/p-del.png') }}" alt="Delete" style="width:20px">
                            </button>
                        </td>`;

                    const jData = patient.jData ? JSON.parse(patient.jData) : {};
                    formFields.forEach(field => {
                        const value = jData[field.id] || '-';
                        rowHtml += `<td>${value}</td>`;
                    });
                    rowHtml += `</tr>`;
                    $('#patientListBody').append(rowHtml);
                });

                // Initialize DataTables after populating the table
                $('#patientListTable').DataTable({
                    "scrollX": true,
                    "autoWidth": false,
                    "paging": true,
                    "searching": true,
                    "ordering": true,
                    "info": true,
                    "lengthChange": true,
                    "pageLength": 10,
                    "columnDefs": [
                        { "orderable": false, "targets": -1 } // Disable sorting on the Actions column
                    ]
                });
            }).fail(function(xhr) {
                console.error('Fetch Error:', xhr.responseText);
                $.notify('Failed to fetch patient data or form fields.', 'error');
                $('#patientListBody').append('<tr><td colspan="2">Error loading data</td></tr>');
            });
        }

        function editPatient(patientId, campAnalyticsId) {
            // Close the view_patients modal
            $('#view_patients').modal('hide');
            // Call patientAdd with the patientId to enter edit mode
            patientAdd(campAnalyticsId, patientId);
        }

        function deletePatient(patientId, campAnalyticsId) {
            Swal.fire({
                title: 'Are you sure?',
                text: 'This will permanently delete the patient record.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Delete',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('field.deletePatientData', ['id' => ':id']) }}".replace(':id', patientId),
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.status === 1) {
                                $.notify('Patient deleted successfully.', 'success');
                                const currentCount = parseInt($('.patient_count span').text()) || 0;
                                $('.patient_count span').text(Math.max(0, currentCount - 1));
                                viewPatients(campAnalyticsId); // Refresh the list
                            } else {
                                $.notify(response.message || 'Failed to delete patient.', 'error');
                            }
                        },
                        error: function(xhr) {
                            console.error('Delete Error:', xhr.responseText);
                            $.notify('Error deleting patient.', 'error');
                        }
                    });
                }
            });
        }

    </script>

    <script>
        // Store selected files for each fieldId
        const selectedFilesMap = new Map();

        function previewSelectedImages(input, fieldId, isMultiple) {
            const container = document.querySelector(`.uploadedPreviewImages_${fieldId}`);
            
            // Initialize file list for this fieldId if not already present
            if (!selectedFilesMap.has(fieldId)) {
                selectedFilesMap.set(fieldId, []);
            }
            
            // Get current files
            let currentFiles = selectedFilesMap.get(fieldId);
            
            // If multiple is not allowed, clear previous files
            if (isMultiple !== 1) {
                currentFiles = [];
                container.innerHTML = '';
            }
            
            // Add newly selected files
            if (input.files) {
                const newFiles = Array.from(input.files);
                currentFiles = [...currentFiles, ...newFiles];
                
                // Update the stored files
                selectedFilesMap.set(fieldId, currentFiles);
                
                // Clear existing previews
                container.innerHTML = '';
                
                // Create a new DataTransfer object to update input.files
                const dataTransfer = new DataTransfer();
                currentFiles.forEach(file => dataTransfer.items.add(file));
                input.files = dataTransfer.files;
                
                // Generate previews for all files
                currentFiles.forEach((file, index) => {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const previewHTML = `
                            <div class="camp_multi">
                                <a href="${e.target.result}" class="" data-fancybox data-gall="gallery_${fieldId}">
                                    <img src="${e.target.result}">
                                </a>
                                <i class="fa-solid fa-xmark" onclick="removeImagePreview(this, ${fieldId}, ${index}, ${isMultiple})"></i>
                            </div>`;
                        container.insertAdjacentHTML('beforeend', previewHTML);
                    };
                    reader.readAsDataURL(file);
                });
            }
        }

        function removeImagePreview(icon, fieldId, index, isMultiple) {
            const container = document.querySelector(`.uploadedPreviewImages_${fieldId}`);
            const fileInput = document.querySelector(`input[data-id="${fieldId}"]`);
            
            // Get current files
            let currentFiles = selectedFilesMap.get(fieldId) || [];
            
            // Remove the file at the specified index
            currentFiles.splice(index, 1);
            
            // Update the stored files
            selectedFilesMap.set(fieldId, currentFiles);
            
            // Update input.files
            const dataTransfer = new DataTransfer();
            currentFiles.forEach(file => dataTransfer.items.add(file));
            fileInput.files = dataTransfer.files;
            
            // Re-render previews
            container.innerHTML = '';
            currentFiles.forEach((file, newIndex) => {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const previewHTML = `
                        <div class="camp_multi">
                            <a href="${e.target.result}" class="" data-fancybox data-gall="gallery_${fieldId}">
                                <img src="${e.target.result}">
                            </a>
                            <i class="fa-solid fa-xmark" onclick="removeImagePreview(this, ${fieldId}, ${newIndex}, ${isMultiple})"></i>
                        </div>`;
                    container.insertAdjacentHTML('beforeend', previewHTML);
                };
                reader.readAsDataURL(file);
            });
        }
</script>
@endsection