@extends('admin.layout')
@section('main')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/assets/css/FieldCamp.css') }}">
    <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" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel1">Add Expenses</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body p-2">
                    <div class="row">
                        <input type="hidden" id="editExpenseId" value="">
                        <input type="hidden" id="editSelectExpenseId" value="">


                        <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                            <div class="mb-2">
                                <label for="" class="form-label">Expense</label>
                                <select class="select2 select-label form-control w-100" id="select_expense"
                                    name="select-label">
                                    <option value="" selected default> Select Expense</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">Amount</label>
                                <input type="number" oninput="this.value = this.value < 0 ? 0 : this.value"
                                    class="form-control" id="expense_qty" placeholder="Enter Expense Amount">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-2">
                                <label for="" class="form-label">Remark</label>
                                <textarea class="form-control" id="expense_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="addExpenseBtn" class="btn btn-primary">Submit</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">Add Sample Requirements SKU</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body p-2">
                    <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-label">
                                    <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" 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" 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="addSKUBtn" class="btn btn-primary">Submit</button>
                </div>
            </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">Add Expected Item Requirements</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body p-2">
                    <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-label">
                                    <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" 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" 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>
            </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 Planning

                        </h2>
                    </div>
                    @if (
                        $campActivity->isDraft === 'Y' ||
                            $campActivity->eCampStatus == 'planRejected' ||
                            $campActivity->eCampStatus == 'implementRejected')
                        <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>
                    @endif
                    <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-md-6 my-1 p-0">
                                <div class="form-group">
                                    <label class="form-label">Camp Name: {{ $campActivity->vCampName }}</label>
                                    <input type="hidden" name="campSelect" id="campSelect"
                                        value="{{ Crypt::encrypt($campActivity->iCampID) }}">

                                    <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="Sample Requirements SKU">
                                    <input type="hidden" name="RequirmentMasterFieldName" id="RequirmentMasterFieldName"
                                        value="Expected Item Requirements">
                                    <input type="hidden" name="ExpenseMasterFieldName" id="ExpenseMasterFieldName"
                                        value="Expected Expense">

                                    <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">



                                    {{-- <select class="select2 select-label form-control w-100" id="campSelect"
                                        name="select-label" disabled>
                                        <option value="" selected default>Select Camp Type</option>
                                        @foreach ($camps as $camp)
                                            <option value="{{ Crypt::encrypt($camp->iCampID) }}"
                                                @if ($camp->iCampID == $campActivity->iCampID) selected @endif>
                                                {{ $camp->vCampName }}
                                            </option>
                                        @endforeach
                                    </select> --}}
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-datatable p-1">

                            <div class="top_heading_one ">
                                <input type="hidden" id="iCampAnalyticsID"
                                    value="{{ $campActivity->iCampAnalyticsID }}">
                                <div class="row masterData">


                                </div>
                            </div>

                            <div class="row">
                                @if (
                                    $campActivity->isDraft === 'Y' ||
                                        $campActivity->eCampStatus == 'planRejected' ||
                                        $campActivity->eCampStatus == 'implementRejected')
                                    <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>
                                @endif
                                <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>
@endsection
@section('scripts')
    <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);

                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);
            });

        });
    </script>



    <script>
        $('#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);

        });

        $('#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);

        });

        $('#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);

        });

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

            if (!campSelect.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) {
            //     if (!field.value.trim()) {
            //         isValid = false; // Form is not valid if any required field is empty
            //         $.notify(`${field.name} is required`, "error"); // Notify user which field is empty
            //     }
            // });

            requiredFields.forEach(function(field) {
                const fieldValue = field.value.trim();

                if (field.hasAttribute('required') && !fieldValue) {
                    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('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();

            if (selectedDoctorsArray.length === 0) {
                $.notify('Please select a doctor', "error");
                return;
            }

            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) {
                $.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();

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

            if (isMandatoryExpense == 1 && expenseArray.length < 1) {
                $.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;
                }
            }

            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) {
                $.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();

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

            formData.append('fieldData', JSON.stringify(fieldArray));
            formData.append('iCampAnalyticsID', $('#iCampAnalyticsID').val());

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

            $.ajax({
                url: '{{ route('field.campUpdate') }}',
                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 fetchCampDetails() {
            var campID = document.getElementById('campSelect').value;

            if (campID) {
                $.ajax({
                    url: '{{ route('field.getCampMasterData') }}',
                    type: 'GET',
                    data: {
                        iCampID: campID,
                        iCampAnalyticsID: '{{ $campActivity->iCampAnalyticsID }}',
                    },
                    success: function(response) {
                        if (response.status === 1) {
                            //    $.notify(response.message, "success");

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

                            let isAllowMultipleDoctor;



                            if (response.data.camp_fields.length > 0) {



                                const campDataFieldMap2 = {};

                                response.campData.camp_activity_field_data.forEach(function(campDataField) {
                                    campDataFieldMap2[campDataField.iFieldID] = campDataField.jData
                                        .response;
                                });




                                response.data.camp_fields.forEach(function(field) {
                                    if (field.jFieldData.isAllowMultipleDoctor == '1') {
                                        isAllowMultipleDoctor = 'multiple';
                                    } else {
                                        isAllowMultipleDoctor = '';
                                    }

                                    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 = '';
                                    const fieldValue2 = campDataFieldMap2[field.iFieldID] ||
                                        ''; // Get the value or set to empty string


                                    switch (field.vFieldType) {
                                        case 'datepicker':
                                        if (fieldValue2) {
                                            let date;
                                            // Check if the input is in "yyyy-mm-dd" format
                                            if (/^\d{4}-\d{2}-\d{2}$/.test(fieldValue2)) {
                                                date = new Date(fieldValue2); // ISO format works directly
                                            } 
                                            // Assume "dd/mm/yyyy" format
                                            else if (/^\d{2}\/\d{2}\/\d{4}$/.test(fieldValue2)) {
                                                const [day, month, year] = fieldValue2.split('/');
                                                date = new Date(`${year}-${month}-${day}`); // Convert to ISO for consistent parsing
                                            }

                                            if (!isNaN(date.getTime())) {
                                                let day = String(date.getDate()).padStart(2, '0');
                                                let month = String(date.getMonth() + 1).padStart(2, '0');
                                                let year = String(date.getFullYear()).slice(-2);
                                                fieldValue = `${day}/${month}/${year}`;
                                            }
                                        }
                                        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} value="${fieldValue}" />
                                            </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} value="${fieldValue2}" />
                    </div>
                </div>`;
                                            break;
                                        case 'dropdown':
                                            if (field.vFieldName === 'Select Doctor') {

                                                if (field.jFieldData.isOtherDoctor == '1') {
                                                    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" ${isAllowMultipleDoctor} name="${field.vFieldName}">
                                    <option value="" disabled > 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('${isAllowMultipleDoctor}')" 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" ${isAllowMultipleDoctor} name="select-label">
                                    <option value="" disabled > Select Doctor</option>

                                </select>
                                <span class="input-group-text p-0 ml-1">
                                    <button onclick="setSelectedDoctorData('${isAllowMultipleDoctor}')" 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(field.jFieldData.isOtherDoctor, field
                                                    .jFieldData.isAllowMultipleDoctor);

                                                if (field.jFieldData.isOtherDoctor == '1') {
                                                    if (response.campData && response.campData
                                                        .vOtherDoctors) {

                                                        const otherDoctorsArray = response.campData
                                                            .vOtherDoctors.split(',');

                                                        setTimeout(() => {
                                                            $('#otherDoctorData').empty();

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

                                                            updateOtherDoctorCount();
                                                        }, 2000); // 2000ms = 2 seconds
                                                    }
                                                }


                                            }
                                            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 ==
                                            "Sample Requirements SKU") {
                                            const maxLimit = field.jFieldData.vMaxLength || '';
                                            const minLimit = field.jFieldData.vMinLength || '';
                                            const masterFieldName = field.jFieldData.vFieldName ||
                                                'Sample Requirements SKU';
                                            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 ==
                                            "Expected Item Requirements") {
                                            const maxLimit = field.jFieldData.vMaxLength || '';
                                            const minLimit = field.jFieldData.vMinLength || '';
                                            const masterFieldName = field.jFieldData.vFieldName ||
                                                'Expected Item Requirements';
                                            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 == "Expected Expense") {
                                            const maxLimit = field.jFieldData.vMaxLength || '';
                                            const minLimit = field.jFieldData.vMinLength || '';
                                            const masterFieldName = field.jFieldData.vFieldName ||
                                                'Expected Expense';
                                            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.isPlanExpenseAdd === 'Y') {

                                if (response.data.camp_fields) {
                                    response.data.camp_fields.forEach(field => {
                                        if (field.vFieldType === "checkbox" && field.jFieldData) {
                                            if (field.jFieldData.masterFieldName ==
                                                "Expected Expense") {






                                                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.campData
                                                    .camp_activity_expense_data && response
                                                    .campData.camp_activity_expense_data.length > 0) {
                                                    response.campData.camp_activity_expense_data
                                                        .forEach((expense, index) => {
                                                            const expenseName = expense.expense
                                                                .vExpenseName;
                                                            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}"> <!-- 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="expenseName_${index + 1}" data-id="${expense.expense.iExpenseID}" class="mr-auto">
                                                                <b style="color: #223E6D;">Expense Name: </b> ${expenseName}
                                                                </span><br>
                                                                <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})">
                                                                <img src="${editImagePath}" alt="" style="width:40px">
                                                                </button>
                                                                <button class="ml-1" onclick="deleteExpense(${index + 1})">
                                                                <img src="${deleteImagePath}" alt="" style="width:40px">
                                                                </button>
                                                                </div>
                                                                </div>
                                                                <div class="col-12">
                                                                    <p id="expenseRemark_${index + 1}" data-id="${index + 1}">
                                                                        ${expenseRemark && expenseRemark !== "null" && expenseRemark.trim() !== "" ? expenseRemark : ""}
                                                                    </p>
                                                                </div>
                                                                </div>
                                                                </div>`;

                                                            $('.expenseData').append(
                                                                newExpenseHTML);

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

                                                        });
                                                }









                                            }
                                        }
                                    });
                                }





                            }




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


                                if (response.data.camp_fields) {
                                    response.data.camp_fields.forEach(field => {
                                        if (field.vFieldType === "checkbox" && field.jFieldData) {
                                            if (field.jFieldData.masterFieldName ==
                                                "Sample Requirements SKU") {





                                                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.campData
                                                    .camp_activity_sku_requirement_data &&
                                                    response.campData.camp_activity_sku_requirement_data
                                                    .length > 0) {
                                                    response.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})">
<img src="${editImagePath}" alt="" style="width:40px">
</button>
<button class="ml-1" onclick="deleteSKU(${index + 1})">
<img src="${deleteImagePath}" alt="" style="width:40px">
</button>
</div>
</div>
<div class="col-12">
    <p id="SKURemark_${index + 1}" data-id="${index + 1}">
        ${skuRemark && skuRemark !== "null" && skuRemark.trim() !== "" ? skuRemark : ""}
    </p>
</div>
</div>
</div>`;

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

                                                        });
                                                }









                                            }
                                        }
                                    });
                                }








                            }


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


                                if (response.data.camp_fields) {
                                    response.data.camp_fields.forEach(field => {
                                        if (field.vFieldType === "checkbox" && field.jFieldData) {
                                            if (field.jFieldData.masterFieldName ==
                                                "Expected Item Requirements") {






                                                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.campData
                                                    .camp_activity_item_required && response
                                                    .campData.camp_activity_item_required.length > 0) {
                                                    response.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.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})">
<img src="${editImagePath}" alt="" style="width:40px">
</button>
<button class="ml-1" onclick="deleteRequirement(${index + 1})">
<img src="${deleteImagePath}" alt="" style="width:40px">
</button>
</div>
</div>
<div class="col-12">
    <p id="RequirementRemark_${index + 1}" data-id="${index + 1}">
        ${requirementRemark && requirementRemark !== "null" && requirementRemark.trim() !== "" ? 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) {

                                const campDataFieldMap = {};

                                response.campData.camp_activity_field_data.forEach(function(campDataField) {
                                    campDataFieldMap[campDataField.iFieldID] = campDataField.jData
                                        .response;
                                });

                                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 = '';
                                    const fieldValue = campDataFieldMap[field.iFieldID] ||
                                        ''; // Get the value or set to empty string

                                    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} value="${fieldValue}" />
                                    //     </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 type="text" data-id="${field.iFieldID}"  class="form-control FieldFormData" name="${field.vFieldName}" value="${fieldValue}" ${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}>${fieldValue}</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" ${isAllowMultipleDoctor} name="${field.vFieldName}">
                                            //                                     <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('${isAllowMultipleDoctor}')" 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" ${isAllowMultipleDoctor} name="select-label">
                                            //                                     <option value="" selected default> Select Doctor</option>

                                            //                                 </select>
                                            //                                 <span class="input-group-text p-0 ml-1">
                                            //                                     <button onclick="setSelectedDoctorData('${isAllowMultipleDoctor}')" 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();

    // Normalize fieldValue to an array
    const normalizedValues = Array.isArray(fieldValue)
        ? fieldValue
        : (typeof fieldValue === 'string' ? fieldValue.split(',').map(v => v.trim()) : []);

    const isSelected = normalizedValues.includes(trimmedValue);

    return `<option value="${trimmedValue}" ${isSelected ? 'selected' : ''}>${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="" disabled>Select ${field.vFieldName}</option>
            ${dropdownOptions}
        </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="" disabled> Select ${field.vFieldName} </option>
                                                                </select>
                                                            </div>
                                                        </div>`;
                                                }
                                            }
                                            break;
                                    }

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

                                    if (response.data && response.campData.camp_activity_doctors) {
                                        setTimeout(() => {
                                            const appendedDoctors =
                                                new Set();

                                            $('#selectedDoctorData li').each(function() {
                                                appendedDoctors.add($(this).data(
                                                    'id'));
                                            });

                                            response.campData.camp_activity_doctors.forEach((
                                                doctorInfo) => {
                                                const doctorId = doctorInfo.doctor
                                                    .iDoctorID;

                                                if (!appendedDoctors.has(doctorId)) {
                                                    const doctorName = doctorInfo.doctor
                                                        .fullName;
                                                    const doctorvSCCode = doctorInfo
                                                        .doctor
                                                        .vSCCode;
                                                    const imagePath =
                                                        '{{ asset('assets/app-assets/images/dr3.png') }}';

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

                                                    $('#doctorDropdown option[value="' +
                                                        doctorId + '"]').prop(
                                                        'disabled', true);

                                                    appendedDoctors.add(doctorId);
                                                }
                                            });

                                            updateDoctorCount();
                                        }, 2000);
                                    }



                                });
                            }

                            $('.select2').select2();


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

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

                            //     const isCampDate = $(this).attr('name') === "Camp Date";
                            //     const minDate = isCampDate ? moment() : false;

                            //     $(this).daterangepicker({
                            //         singleDatePicker: true, 
                            //         showDropdowns: true, 
                            //         startDate: moment($(this).val(),
                            //         'DD/MM/YYYY'), 
                            //         minDate: minDate, 
                            //         locale: {
                            //             format: 'DD/MM/YYYY' 
                            //         }
                            //     });
                            // });

                            $('.datepicker').each(function() {
                                let currentVal = $(this).val();
                                const isCampDate = $(this).attr('name') === "Camp Date";

                                const minDate = isCampDate
                                    ? moment(response.campData.created_at).add(response.data.vMinDays, 'days')
                                    : false;

                                let startDate;
                                if (currentVal) {
                                    // Parse the current value
                                    startDate = moment(currentVal, 'DD/MM/YYYY');
                                    // If startDate is before minDate, reset it
                                    if (minDate && startDate.isBefore(minDate)) {
                                        startDate = minDate.clone();
                                        // Update the input value so the field shows correct date
                                        $(this).val(startDate.format('DD/MM/YYYY'));
                                    }
                                } else {
                                    startDate = minDate ? minDate.clone() : moment();
                                    $(this).val(startDate.format('DD/MM/YYYY'));
                                }

                                $(this).daterangepicker({
                                    singleDatePicker: true,
                                    showDropdowns: true,
                                    startDate: startDate,
                                    minDate: minDate,
                                    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");
                    }
                });
            } else {
                $.notify('Please select a camp to proceed.', "error");
                $(".masterData").empty();

            }
        }

        $('#addExpenseBtn').on('click', function(e) {
            e.preventDefault();

            var selectedExpenseId = $('#select_expense').val();
            var editSelectExpenseId = $('#editSelectExpenseId').val();

            var selectedExpenseName = $('#select_expense option:selected').text();
            var expenseAmount = $('#expense_qty').val();
            var expenseRemark = $('#expense_remark').val();
            var editImagePath = '{{ asset('assets/app-assets/images/ed.png') }}';
            var deleteImagePath = '{{ asset('assets/app-assets/images/de.png') }}';

            var editExpenseId = $('#editExpenseId').val(); // Get the hidden input value
            var currentExpenseCount = $('.br_rsv_shadow').length + 1;

            if ((selectedExpenseId || editSelectExpenseId) && expenseAmount) {
                if (editExpenseId) {
                    // Editing an existing expense
                    $('#expenseName_' + editExpenseId).html(
                        `<b style="color: #223E6D;">Expense Name: </b> ${selectedExpenseName}`);
                    $('#expenseName_' + editExpenseId).data('id', editSelectExpenseId);
                    $('#expenseAmount_' + editExpenseId).text(`₹ ${expenseAmount}`);
                    $('#expenseRemark_' + editExpenseId).text(expenseRemark);

                    // Clear the hidden input field for the next add
                    $('#editExpenseId').val('');
                } else {
                    // Adding a new expense
                    var newExpenseHTML = `
                    <div class="br_rsv_shadow" data-id="${currentExpenseCount}">
                        <div class="row mb-1">
                            <div class="col-lg-auto col-sm-auto col-md-auto col-12 my-auto mr-auto">
                                <span id="expenseName_${currentExpenseCount}" data-id="${selectedExpenseId}" class="mr-auto">
                                    <b style="color: #223E6D;">Expense Name: </b> ${selectedExpenseName}</span><br>
                                <span id="expenseAmount_${currentExpenseCount}" 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(${currentExpenseCount})">
                                        <img src="${editImagePath}" alt="" style="width:40px">
                                    </button>
                                    <button class="ml-1" onclick="deleteExpense(${currentExpenseCount})">
                                        <img src="${deleteImagePath}" alt="" style="width:40px">
                                    </button>
                                </div>
                            </div>
                            <div class="col-12">
                                <p id="expenseRemark_${currentExpenseCount}" data-id="${currentExpenseCount}">
                                    ${expenseRemark && expenseRemark !== "null" && expenseRemark.trim() !== "" ? expenseRemark : ""}
                                </p>
                            </div>
                        </div>
                    </div>`;


                    $('.expenseData').append(newExpenseHTML);

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

                }

                $('#select_expense').val('').trigger('change');
                $('#expense_qty').val('');
                $('#expense_remark').val('');

                $('#add_expenses').modal('hide');
            } else {
                $.notify('Please select an expense and enter the amount.', "error");
            }
        });

        function editExpense(expenseId) {
            var selectedExpenseId = $('#expenseName_' + expenseId).data('id'); // Get the selected expense ID
            var selectedExpenseName = $('#expenseName_' + expenseId).html().replace('Expense Name: ', '')
                .trim(); // Get the selected expense name
            var expenseAmount = $('#expenseAmount_' + expenseId).text().replace('₹', '').trim();
            var expenseRemark = $('#expenseRemark_' + expenseId).text().trim();

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

            $('#expense_qty').val(expenseAmount);
            $('#expense_remark').val(expenseRemark);

            $('#editExpenseId').val(expenseId); // Set the edit ID
            $('#editSelectExpenseId').val(selectedExpenseId); // Set the edit ID


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

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

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

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


        $('#addSKUBtn').on('click', function(e) {
            e.preventDefault();

            var selectedSKUId = $('#select_SKU').val();
            var editSelectSKUId = $('#editSelectSKUId').val();

            var selectedSKUName = $('#select_SKU option:selected').text();
            var SKUAmount = $('#SKU_qty').val();
            var SKURemark = $('#SKU_remark').val();
            var editImagePath = '{{ asset('assets/app-assets/images/ed.png') }}';
            var deleteImagePath = '{{ asset('assets/app-assets/images/de.png') }}';

            var editSKUId = $('#editSKUId').val(); // Get the hidden input value
            var currentSKUCount = $('.br_rsv_shadow').length + 1; // Increment for new SKU count

            if ((selectedSKUId || editSelectSKUId) && SKUAmount) {
                if (editSKUId) {
                    // Editing an existing SKU
                    $('#SKUName_' + editSKUId).html(
                        `<b style="color: #223E6D;">SKU Name : </b> ${selectedSKUName}`
                    );
                    $('#SKUName_' + editSKUId).data('id', editSelectSKUId);
                    $('#SKUAmount_' + editSKUId).text(`${SKUAmount} QTY`);
                    $('#SKURemark_' + editSKUId).text(SKURemark);

                    $('#editSKUId').val(''); // Clear the edit ID for next add
                } else {
                    // Adding a new SKU
                    var newSKUHTML = `
            <div class="br_rsv_shadow" data-id="${currentSKUCount}">
                <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_${currentSKUCount}" data-id="${selectedSKUId}" class="mr-auto">
                            <b style="color: #223E6D;">SKU Name : </b> ${selectedSKUName}
                        </span><br>
                        <span id="SKUAmount_${currentSKUCount}" 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(${currentSKUCount})">
                                <img src="${editImagePath}" alt="" style="width:40px">
                            </button>
                            <button class="ml-1" onclick="deleteSKU(${currentSKUCount})">
                                <img src="${deleteImagePath}" alt="" style="width:40px">
                            </button>
                        </div>
                    </div>                    
                   <div class="col-12">
                        <p id="SKURemark_${currentSKUCount}" data-id="${currentSKUCount}">
                            ${SKURemark && SKURemark !== "null" && SKURemark.trim() !== "" ? SKURemark : ""}
                        </p>
                    </div>
                </div>
            </div>`;

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

                }

                // Clear input fields
                $('#select_SKU').val('').trigger('change');
                $('#SKU_qty').val('');
                $('#SKU_remark').val('');

                $('#add_sku').modal('hide'); // Hide the modal
            } else {
                $.notify('Please select an SKU and enter the amount.', "error");
            }
        });

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

            $('#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(SKUId) {
            var selectedSKUElement = $('#SKUName_' + SKUId);
            var selectedSKUId = selectedSKUElement.data('id'); // Retrieve data-id from element

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

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



        $('#addRequirementBtn').on('click', function(e) {
            e.preventDefault();

            var selectedRequirementId = $('#select_Requirement').val();
            var editSelectRequirementId = $('#editSelectRequirementId').val();

            var selectedRequirementName = $('#select_Requirement option:selected').text();
            var RequirementAmount = $('#Requirement_qty').val();
            var RequirementRemark = $('#Requirement_remark').val();
            var editImagePath = '{{ asset('assets/app-assets/images/ed.png') }}';
            var deleteImagePath = '{{ asset('assets/app-assets/images/de.png') }}';

            var editRequirementId = $('#editRequirementId').val(); // Get the hidden input value
            var currentRequirementCount = $('.br_rsv_shadow').length + 1; // Increment for new requirement count

            if ((selectedRequirementId || editSelectRequirementId) && RequirementAmount) {
                if (editRequirementId) {
                    // Editing an existing Requirement
                    $('#RequirementName_' + editRequirementId).html(
                        `<b style="color: #223E6D;">Requirement Name : </b> ${selectedRequirementName}`);
                    $('#RequirementName_' + editRequirementId).data('id', editSelectRequirementId);
                    $('#RequirementAmount_' + editRequirementId).text(`${RequirementAmount} QTY`);
                    $('#RequirementRemark_' + editRequirementId).text(RequirementRemark);

                    $('#editRequirementId').val(''); // Clear the edit ID for next add
                } else {
                    // Adding a new Requirement
                    var newRequirementHTML = `
            <div class="br_rsv_shadow" data-id="${currentRequirementCount}">
                <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_${currentRequirementCount}" data-id="${selectedRequirementId}" class="mr-auto">
                            <b style="color: #223E6D;">Requirement Name : </b> ${selectedRequirementName}
                        </span><br>
                        <span id="RequirementAmount_${currentRequirementCount}" 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(${currentRequirementCount})">
                                <img src="${editImagePath}" alt="" style="width:40px">
                            </button>
                            <button class="ml-1" onclick="deleteRequirement(${currentRequirementCount})">
                                <img src="${deleteImagePath}" alt="" style="width:40px">
                            </button>
                        </div>
                    </div>
                    <div class="col-12">
                        <p id="RequirementRemark_${currentRequirementCount}" data-id="${currentRequirementCount}">
                            ${RequirementRemark && RequirementRemark !== "null" && RequirementRemark.trim() !== "" ? RequirementRemark : ""}
                        </p>
                    </div>
                </div>
            </div>`;

                    $('.RequirementData').append(newRequirementHTML);

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

                }

                $('#select_Requirement').val('').trigger('change');
                $('#Requirement_qty').val('');
                $('#Requirement_remark').val('');

                // Close the modal
                $('#add_Requirement').modal('hide');
            } else {
                $.notify('Please select a Requirement and enter the amount.', "error");
            }
        });

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

            $('#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(requirementId) {
            var selectedRequirementElement = $('#RequirementName_' + requirementId);
            var selectedRequirementId = selectedRequirementElement.data('id'); // Retrieve data-id from element

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

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






        function populateExpenseOptions(expenseData) {
            let selectHTML = `<option value="" selected default> Select Expense</option>`; // Add a default option

            expenseData.forEach(function(expense) {
                if (expense.eType === "Plan" || 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 === "Plan" || 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 === "Plan" || 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 selectedValues = $(this).val();
            if (selectedValues && selectedValues.includes('Add unlisted doctor')) {
                $('#other_doctor').show();
            } else {
                $('#other_doctor').hide();
            }
        });


        function loadDoctors(isOtherDoctor, isAllowMultipleDoctor) {
            $.ajax({
                url: '{{ route('field.getDocData') }}',
                method: 'GET',
                success: function(response) {
                    $('#doctorDropdown').empty();
                    if (isOtherDoctor != '1') {
                        $('#doctorDropdown').append(`
                <option value="" selected disabled > Select Doctor</option>
            `);
                    } else {
                        $('#doctorDropdown').append(`
                <option value="" disabled > 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(is_multiple) {

//             let selectedDoctors = $('#doctorDropdown').val();

//             if (is_multiple && selectedDoctors) {
//                 let imagePath = '{{ asset('assets/app-assets/images/dr3.png') }}';
//                 selectedDoctors.forEach(doctorId => {
//                     if (doctorId !== "Add unlisted doctor" && doctorId !== "") {
//                         let selectedDoctor = $('#doctorDropdown option[value="' + doctorId + '"]').text();

//                         if ($(`#selectedDoctorData li[data-id="${doctorId}"]`).length === 0) {
//                             $('#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>`
//                             );

//                             $('#doctorDropdown option[value="' + doctorId + '"]').prop('disabled', true);
//                         }
//                     }
//                 });

//                 $('#doctorDropdown').select2();
//                 $('#doctorDropdown').val('').trigger('change');
//                 updateDoctorCount();
//             } else {

//                 var selectedDoctorCounts = $('#selectedDoctorData li').length;
//                 if (selectedDoctorCounts >= 1) {
//                     $.notify('Doctor already selected.', "error");
//                 } else {
//                     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 setSelectedDoctorData(is_multiple) {

            let selectedDoctors = $('#doctorDropdown').val();

            if (is_multiple && selectedDoctors) {
                let campId = document.getElementById('campSelect').value;
                let campDate = $('input[name="Camp\\ Date"]').val();
                console.log(campDate);
                $.ajax({
                    url: '{{ route("field.checkDoctorAvailability") }}',
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: {
                        doctor_ids: selectedDoctors,
                        camp_id: campId,
                        camp_date: campDate
                    },
                    success: function(response) {
                        let conflictDoctors = response.conflictDoctors || [];
                        let imagePath = '{{ asset('assets/app-assets/images/dr3.png') }}';

                        selectedDoctors.forEach(doctorId => {
                            if (doctorId !== "Add unlisted doctor" && doctorId !== "") {
                                if (!conflictDoctors.includes(parseInt(doctorId))) {
                                    let selectedDoctor = $('#doctorDropdown option[value="' + doctorId + '"]').text();

                                    if ($(`#selectedDoctorData li[data-id="${doctorId}"]`).length === 0) {
                                        $('#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>`
                                        );
                                        $('#doctorDropdown option[value="' + doctorId + '"]').prop('disabled', true);
                                    }
                                } else {
                                    let doctorName = $('#doctorDropdown option[value="' + doctorId + '"]').text();
                                    $.notify(`Doctor "${doctorName}" already has a camp on the same date in the same division.`, 'error');
                                }
                            }
                        });

                        if (response.error && conflictDoctors.length > 0) {
                            //$.notify(response.error, 'error'); // Display generic error if needed
                        }

                        $('#doctorDropdown').select2();
                        $('#doctorDropdown').val('').trigger('change');
                        updateDoctorCount();
                    },

                    error: function(xhr) {
                        $.notify('Something went wrong while checking doctor availability.', 'error');
                    }
                });

            } else {

                var selectedDoctorCounts = $('#selectedDoctorData li').length;
                if (selectedDoctorCounts >= 1) {
                    $.notify('Doctor already selected.', "error");
                } else {
                    //var selectedDoctor = $('#doctorDropdown option:selected').text();
                    let selectedDoctors = $('#doctorDropdown').val() || [];
                    if (!Array.isArray(selectedDoctors)) {
                        selectedDoctors = [selectedDoctors];
                    }
                    var doctorId = $('#doctorDropdown').val();
                    var imagePath = '{{ asset('assets/app-assets/images/dr3.png') }}';

                    if (doctorId && doctorId !== "Add unlisted doctor" && doctorId !== "") {

                        let campId = document.getElementById('campSelect').value;
                        let campDate = $('input[name="Camp\\ Date"]').val();

                        $.ajax({
                            url: '{{ route("field.checkDoctorAvailability") }}',
                            type: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            data: {
                                doctor_ids: [doctorId],
                                camp_id: campId,
                                camp_date: campDate
                            },
                            success: function(response) {
                                let conflictDoctors = response.conflictDoctors || [];
                                let imagePath = '{{ asset('assets/app-assets/images/dr3.png') }}';

                                selectedDoctors.forEach(doctorId => {
                                    if (doctorId !== "Add unlisted doctor" && doctorId !== "") {
                                        if (!conflictDoctors.includes(parseInt(doctorId))) {
                                            let selectedDoctor = $('#doctorDropdown option[value="' + doctorId + '"]').text();

                                            if ($(`#selectedDoctorData li[data-id="${doctorId}"]`).length === 0) {
                                                $('#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>`
                                                );
                                                $('#doctorDropdown option[value="' + doctorId + '"]').prop('disabled', true);
                                            }
                                        } else {
                                            let doctorName = $('#doctorDropdown option[value="' + doctorId + '"]').text();
                                            $.notify(`Doctor "${doctorName}" already has a camp on the same date in the same division.`, 'error');
                                        }
                                    }
                                });

                                if (response.error && conflictDoctors.length > 0) {
                                    //$.notify(response.error, 'error'); // Display generic error if needed
                                }

                                $('#doctorDropdown').select2();
                                $('#doctorDropdown').val('').trigger('change');
                                updateDoctorCount();
                            },
                            error: function(xhr) {
                                $.notify('Something went wrong while checking doctor availability.', 'error');
                            }
                        });
                    }
                }
            }
        }

        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();
        });



        $(document).ready(function() {


            fetchCampDetails();




        });
    </script>
@endsection