@extends('admin.layout')
@section('main')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/assets/css/FieldCamp.css') }}">

    <div class="modal fade" id="cancel_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="">Are You Sure You Want To Cancel</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group mb-2">
                        <label for="" class="form-label">Remark</label>
                        <textarea name="" class="form-control" style="background: #F8F8F8;border: 0;" placeholder="Enter Reason"
                            rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer justify-content-right" style="border: 0;padding-top: 0;">
                    <button type="submit" class="btn btn-primary">Submit</button>
                    <!-- <button type="submit" class="btn btn-light">Clear</button> -->
                </div>

            </div>
        </div>
    </div>
    <div class="modal fade" id="reject_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="">Are You Sure You Want To Reject</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group mb-2">
                        <label for="" class="form-label">Remark</label>
                        <textarea name="" class="form-control" style="background: #F8F8F8;border: 0;" placeholder="Enter Reason"
                            rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer justify-content-right" style="border: 0;padding-top: 0;">
                    <button type="submit" class="btn btn-primary">Submit</button>
                    <!-- <button type="submit" class="btn btn-light">Clear</button> -->
                </div>

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


    <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 my-auto">
                        <h2 class="m-0">Dashboard<a href="" class="ml-1" data-toggle="tooltip"
                                data-placement="right" title="View camp analytics"
                                data-original-title="View camp analytics">
                                <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>
                        </h2>
                    </div>
                    <div class="col-lg-2 col-md-6 my-1"  id="camp_user_filter_wrapper">
                        <div class="form-group">
                            <label class="form-label">Select Camp User</label>
                            <select class="select2 select-label form-control w-100" id="select_camp_user"
                                name="select_camp_user">
                                <option value="" selected default> Select Camp User</option>

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

                    <!--  <div class="col-lg-2 col-md-6 my-1">
                                                                                                                                                        <div class="form-group">
                                                                                                                                                            <select class="select2 select-label form-control w-100" id=""
                                                                                                                                                                name="select-label">
                                                                                                                                                                <option value="" selected default disabled> Select Study</option>
                                                                                                                                                                <option value=""> Study 1</option>
                                                                                                                                                                <option value=""> Study 2</option>
                                                                                                                                                                <option value=""> Study 3 </option>
                                                                                                                                                                <option value=""> Study 4</option>
                                                                                                                                                                <option value=""> Study 5</option>
                                                                                                                                                            </select>
                                                                                                                                                        </div>
                                                                                                                                                    </div> -->
                    <div class="col-lg-auto col-md-6 my-1">
                        <div class="form-group">
                            <label class="form-label">Select Camp Date</label>
                            <div id="" class="reportrange daterange">
                                <i class="fa fa-calendar"></i>&nbsp;
                                <span></span> <i class="fa fa-caret-down"></i>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-auto col-md-6 my-1 mt-auto">
                        <div class="d-flex align-items-center">
                            <button id="applyButton" class="btn btn-primary search_blue mr-1"><i
                                    class="fa fa-search"></i></button>
                            <button id="clearButton" class="btn btn-danger close_red mr-1"><i
                                    class="fa fa-times"></i></button>
                        </div>
                    </div>
                </div>

                <div class="row mb-4">
                    <div class="col-lg-auto col-md-6 col-sm-6">
                        <div class="planned_view yellow">
                            <span>Total Camps</span>
                            <div class="rank_row">
                                <div class="item">
                                    <h3 id="totalCamps">0</h3>
                                    <p>Camps</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-auto col-md-6 col-sm-6">
                        <div class="planned_view">
                            <span>Planned</span>
                            <div class="rank_row">
                                <div class="item">
                                    <h3 id="plannedPending">0</h3>
                                    <p>Pending</p>
                                </div>
                                <div class="item">
                                    <h3 id="plannedApproved">0</h3>
                                    <p>Approved</p>
                                </div>
                                <div class="item">
                                    <h3 id="plannedRejected">0</h3>
                                    <p>Rejected</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-auto col-md-6 col-sm-6">
                        <div class="planned_view purple">
                            <span>Implemented</span>
                            <div class="rank_row">
                                <div class="item">
                                    <h3 id="implementedPending">0</h3>
                                    <p>Pending</p>
                                </div>
                                <div class="item">
                                    <h3 id="implementedApproved">0</h3>
                                    <p>Approved</p>
                                </div>
                                <div class="item">
                                    <h3 id="implementedRejected">0</h3>
                                    <p>Rejected</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-auto col-md-6 col-sm-6">
                        <div class="planned_view green">
                            <span>Cancelled</span>
                            <div class="rank_row">
                                <div class="item">
                                    <h3 id="cancelled">0</h3>
                                    <p>Cancelled</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </section>

            <div class="row">
                <div class="col-lg-12 mb-2">
                    <h2 class="m-0">My Approval Pending</h2>
                </div>
                <div class="pending_camp_listing col-12 p-0">
                </div>
            </div>

            <div class="pagination_rs">
                <ul id="pagination-links">
                    <li><a href="javascript:void(0);" class="prev-page"><i class="fa-solid fa-chevron-left"></i></a></li>
                    <li><a href="javascript:void(0);" class="next-page"><i class="fa-solid fa-chevron-right"></i></a>
                    </li>
                </ul>
            </div>

        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(function() {
            $('.reportrange').each(function() {
                var start = moment().startOf('year');
                var end = moment().endOf('year');
                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')
                        ],
                        'This Year': [moment().startOf('year'), moment().endOf(
                            'year')],
                        'Last FY': [moment().subtract(1, 'year').month(3).startOf('month'),
                            moment().month(2).endOf('month')
                        ],
                        'Current FY': [moment().month(3).startOf('month'),
                            moment().add(1, 'year').month(2).endOf('month')
                        ]
                    }
                }, cb);

                cb(start, end);
            });


        });
    </script>


    <script>
        $('#clearButton').on('click', function() {
            location.reload();
        });

        $('#applyButton').on('click', function() {
            const dateRange = $('.reportrange span').html();
            const dates = dateRange.split(' - ');
            const startDate = moment(dates[0], 'MMMM D, YYYY').format('YYYY-MM-DD');
            const endDate = moment(dates[1], 'MMMM D, YYYY').format('YYYY-MM-DD');

            fetchDashboardCounts({
                start_date: startDate,
                end_date: endDate
            });

        });


        function fetchCampUsers() {
            $.ajax({
                url: '{{ route('field.getCampCreatedByUsers') }}',
                type: 'GET',
                success: function(response) {
                    if (response.status === 1) {
                        $('#select_camp_user').empty();
                        $('#select_camp_user').append('<option value="" selected>Select Camp User</option>');
                        response.data.forEach(function(user) {
                            $('#select_camp_user').append(
                                `<option value="${user.iUserID}">${user.fullName}</option>`);
                        });
                        $('#select_camp_user').select2();
                    } else {
                        console.error(response.message);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching users:', error);
                }
            });
        }

        function fetchDashboardCounts(date) {
            let formData = new FormData();
            if (date) {
                formData.append('start_date', date.start_date);
                formData.append('end_date', date.end_date);
            } else {
                formData.append('start_date', '');
                formData.append('end_date', '');
            }
            const campUserFilterValue = $('#select_camp_user').val();

            if (campUserFilterValue !== null && campUserFilterValue !== undefined) {
                formData.append('campUserFilter', campUserFilterValue);
            }

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

            $.ajax({
                url: '{{ route('field.fetchDashboardCounts') }}',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.status === 1) {
                        // $.notify("Dashboard counts fetched successfully", "success");
                        $('#totalCamps').text(response.data.totalCamps);
                        $('#plannedPending').text(response.data.plannedPending);
                        $('#plannedApproved').text(response.data.plannedApproved);
                        $('#plannedRejected').text(response.data.plannedRejected);
                        $('#implementedPending').text(response.data.implementedPending);
                        $('#implementedApproved').text(response.data.implementedApproved);
                        $('#implementedRejected').text(response.data.implementedRejected);
                        $('#cancelled').text(response.data.cancelled);

                    } else {
                        $.notify(response.message || "Failed to fetch dashboard counts", "warn");
                    }
                },
                error: function(xhr, status, error) {
                    $.notify("Error fetching dashboard counts: " + error, "error");
                }
            });
        }

        function updatePagination(currentPage, lastPage) {
            const paginationLinks = $('#pagination-links');

            // Clear all pagination links
            paginationLinks.empty();

            // Validate inputs
            if (!Number.isInteger(currentPage) || !Number.isInteger(lastPage) || lastPage < 1) {
                console.error('Invalid pagination data:', { currentPage, lastPage });
                return;
            }

            // Add prev button
            paginationLinks.append(`<li class="page-item prev-page ${currentPage === 1 ? 'disabled' : ''}">
                <a class="page-link" href="javascript:void(0);"><</a>
            </li>`);

            // Add page numbers
            for (let i = 1; i <= lastPage; i++) {
                paginationLinks.append(`<li class="page-item">
                    <a href="javascript:void(0);" class="page-link ${i === currentPage ? 'active' : ''}" data-page="${i}">${i}</a>
                </li>`);
            }

            // Add next button
            paginationLinks.append(`<li class="page-item next-page ${currentPage === lastPage ? 'disabled' : ''}">
                <a class="page-link" href="javascript:void(0);">></a>
            </li>`);

            // Event bindings
            $('.page-link').off().on('click', function () {
                const page = $(this).data('page');
                if (page) {
                    getCampAnalytics('', page, '');
                }
            });

            $('.prev-page').off().on('click', function () {
                if (currentPage > 1) {
                    getCampAnalytics('', currentPage - 1, '');
                }
            });

            $('.next-page').off().on('click', function () {
                if (currentPage < lastPage) {
                    getCampAnalytics('', currentPage + 1, '');
                }
            });
        }


        let currentPage = 1;

        function getCampAnalytics(filterType, page = 1, date) {
            let formData = new FormData();
            formData.append('page', page);
            formData.append('_token', "{{ csrf_token() }}");


            $.ajax({
                url: '{{ route('field.getPendingCampList') }}',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.status === 1) {

                        updatePagination(response.current_page, response.last_page);

                        $('.pending_camp_listing').empty();

                        var count = response.data.length;
                        if (count != 0) {
                            var filterText = $(".list_gallery a.active").text();
                            $("#camps-title").text(`${filterText} Camps (${count})`);

                            response.data.forEach(function(camp) {
                                let editButtonHTML = '';
                                let statusButtonsHTML = '';
                                let addDetailButtonHTML = '';

                                let eyeButtonsHTML = `<button class="ml-1" onclick="redirectToCampPage('${camp.iCampAnalyticsID}')">
            <img src="{{ asset('front-assets/images/viewC.png') }}" alt="" style="width:40px">
        </button>`;



                                //                                 if (camp.isEdit === 'Y') {
                                //                                     editButtonHTML = `
                            // <button onclick="editCamp(${camp.iCampAnalyticsID})">
                            //     <img src="{{ asset('front-assets/images/Group 44572.png') }}" alt="" style="width:40px">
                            // </button>`;
                                //                                 }

                                //                                 if (camp.canImplement === 'Y') {
                                //                                     if (camp.camp_status === 'Draft' && camp.canImplement === 'Y') {
                                //                                         editButtonHTML = `
                            // <button onclick="editImplementCamp(${camp.iCampAnalyticsID})">
                            //     <img src="{{ asset('front-assets/images/Group 44572.png') }}" alt="" style="width:40px">
                            // </button>`;
                                //                                     } else {
                                //                                         addDetailButtonHTML = `
                            // <button class="implemented_btn" onclick="window.location.href='{{ url('field/create-implement-camp') }}/${camp.iCampAnalyticsID}'">
                            // Add Details
                            // </button>`;
                                //                                     }

                                //                                 }

                                 if (camp.isEdit === 'Y') {
                                    if (camp.camp_stage == 'Planned') {
                                        if (camp.canImplement === 'N') {
                                            editButtonHTML = `
                                            <button class="ml-1" onclick="editCamp('${camp.iEncryptCampAnalyticsID}')">
                                                <img src="{{ asset('front-assets/images/Group 44572.png') }}" alt="" style="width:40px">
                                            </button>`;
                                        } else if (camp.camp_status == 'Draft') {
                                            editButtonHTML = `
                                            <button class="ml-1" onclick="editImplementCamp('${camp.iEncryptCampAnalyticsID}')">
                                                <img src="{{ asset('front-assets/images/Group 44572.png') }}" alt="" style="width:40px">
                                            </button>`;
                                            if (camp.isPatient != null) {
                                                addPatientAddButtonHTML = `
                                                    <div class="app_button new_patient_btn">
                                                        <div class="patient_flex">
                                                            <button class="ml-1 patient_count btn_blue" data-camp-id="${camp.iCampAnalyticsID}" onclick="patientAdd(${camp.iCampAnalyticsID})">
                                                                <img src="{{ asset('front-assets/images/add-p.png') }}" alt="">
                                                                Add Patient
                                                            </button>
                                                            <button class="patient_count btn_red" data-camp-id="${camp.iCampAnalyticsID}" onclick="viewPatients(${camp.iCampAnalyticsID})">
                                                                <img src="{{ asset('front-assets/images/view-p.png') }}" alt="">
                                                                <span class="patient-count">${camp.patientCount || 0}</span>
                                                            </button>
                                                        </div>
                                                    </div>`;
                                            }
                                        }
                                    } else if (camp.camp_stage == 'Implemented') {
                                        editButtonHTML = `
                                        <button class="ml-1" onclick="editImplementCamp('${camp.iEncryptCampAnalyticsID}')">
                                            <img src="{{ asset('front-assets/images/Group 44572.png') }}" alt="" style="width:40px">
                                        </button>`;
                                    }
                                }

                                if (camp.canImplement === 'Y' && camp.camp_status != 'Draft') {

                                    addDetailButtonHTML = `
    <button class="implemented_btn" onclick="window.location.href='{{ url('field/create-implement-camp') }}/${camp.iCampAnalyticsID}'">
        Add Details
    </button>`;
                                    statusButtonsHTML = `
        <button class="ml-1" class="ml-1" onclick="changeCampStatus(${camp.iCampAnalyticsID}, 3)">
            <img src="{{ asset('front-assets/images/Group 43998.png') }}" alt="Cancel" style="width:40px">
        </button>`;
                                }


                                if (camp.canChangeStatus === 'Y') {
                                    statusButtonsHTML = `
<button class="ml-1" onclick="changeCampStatus(${camp.iCampAnalyticsID}, 1)">
    <img src="{{ asset('front-assets/images/Group 30599.png') }}" alt="Approve" style="width:40px">
</button>
<button class="ml-1" onclick="changeCampStatus(${camp.iCampAnalyticsID}, 2)">
    <img src="{{ asset('front-assets/images/Group 30600.png') }}" alt="Reject" style="width:40px">
</button>
<button class="ml-1" onclick="changeCampStatus(${camp.iCampAnalyticsID}, 3)">
    <img src="{{ asset('front-assets/images/Group 43998.png') }}" alt="Cancel" style="width:40px">
</button>`;
                                }

                                let campDoctors = camp.camp_doctors && camp.camp_doctors.length > 0 ?
                                    `${camp.camp_doctors[0]} ${camp.camp_doctors.length > 1 ? `<span class="grey_bg">+${camp.camp_doctors.length - 1}</span>` : ''}` :
                                    'No doctors assigned';


                                let campHTML = `
<div class="item" data-type="${camp.camp_stage}">
<div class="col-lg-12">
    <div class="app_pen">
        <div class="left_rs ${camp.colour_code}_bg">
            <p>${camp.camp_date}</p>
            <span>${camp.camp_month}</span>
        </div>
        <div class="right_rs">
            <div class="row">
                <div class="col-lg-auto col-md-auto col-sm-auto col-12 mr-auto">
                    <h3>
                        <span class="svg_map">
                            <img src="{{ asset('assets/app-assets/images/dr3.png') }}" alt="" style="width:40px">
                        </span>
                        ${campDoctors}
                    </h3>
                    <div class="top_rs_name">
                        <span class="type_c">
                            <span class="svg_map">
                                <img src="{{ asset('front-assets/images/Group 44577.png') }}" alt="" style="width:40px">
                            </span>
                            ${camp.camp_name} (${camp.campDCSID})
                        </span>
                        <span class="type_c">Camp Type: <b>${camp.camp_type_name}</b></span>
                    </div>
                    <div class="top_rs_name">
                        <span class="type_c app_rs ${camp.colour_code}_bg">
                            <i class="fa-regular fa-clock mr-1"></i>${camp.camp_status}
                        </span>
                        <span class="type_c">
                            <span class="svg_map">
                                <img src="{{ asset('front-assets/images/Path 65547.png') }}" alt="" style="width:40px">
                            </span>
                            ${camp.camp_createdBy}
                        </span>
                    </div>
                </div>
                <div class="col-lg-auto col-md-auto col-sm-auto col-12 mt-auto">
                    <div class="camp_rs_right" onclick="event.stopPropagation()">
                        <span class="type_c app_rs red_bg">${camp.camp_stage}</span>
                        <div class="app_button">
                            ${eyeButtonsHTML}
                            ${editButtonHTML}
                            ${statusButtonsHTML}
                        </div>
                        ${addDetailButtonHTML}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>`;

                                $('.pending_camp_listing').append(campHTML);
                            });
                        } else {
                            let campHTML = `<p>No Record Found</p>`;
                            $('.pending_camp_listing').append(campHTML);

                        }


                    } 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 redirectToCampPage(campID) {
            $.ajax({
                url: '{{ route('field.viewCamp') }}',
                type: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    campID: campID
                },
                success: function(response) {
                    if (response.success) {
                        $.notify("Redirecting to camp page...", "success");

                        setTimeout(function() {
                            window.open(`/field/camp/${response.encryptedCampID}`, '_blank');
                        }, 1500);
                    } else {
                        $.notify("Failed to load camp data.", "warning");
                    }
                },
                error: function(xhr, status, error) {
                    $.notify("An error occurred while trying to redirect.", "error");
                }
            });
        }



        function changeCampStatus(campId, actionType) {
            let actionText = '';
            let confirmButtonText = '';
            let remarksRequired = false;

            switch (actionType) {
                case 1:
                    actionText = 'approve';
                    confirmButtonText = 'Approve';
                    break;
                case 2:
                    actionText = 'reject';
                    confirmButtonText = 'Reject';
                    remarksRequired = true;
                    break;
                case 3:
                    actionText = 'cancel';
                    confirmButtonText = 'Cancel';
                    remarksRequired = true;
                    break;
                default:
                    $.notify('Invalid action type.', "error");
                    return;
            }

            Swal.fire({
                title: `Are you sure you want to ${actionText} this camp?`,
                text: remarksRequired ? 'Please provide remarks for this action.' : '',
                icon: 'warning',
                input: remarksRequired ? 'textarea' : null,
                inputPlaceholder: 'Enter your remarks here...',
                showCancelButton: true,
                confirmButtonText: confirmButtonText,
                cancelButtonText: 'No, keep it',
                preConfirm: (remarks) => {
                    if (remarksRequired && !remarks) {
                        Swal.showValidationMessage('Remarks are required.');
                    }
                    return remarks;
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '{{ route('field.changeCampStatus') }}',
                        type: 'POST',
                        data: {
                            iCampAnalyticsID: campId,
                            action_type: actionType,
                            action_remarks: remarksRequired ? result.value : null,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.status === 1) {
                                Swal.fire('Success', response.message, 'success');
                                getCampAnalytics();
                                fetchDashboardCounts();

                            } else {
                                Swal.fire('Error', response.message, 'error');
                            }
                        },
                        error: function(xhr, status, error) {
                            Swal.fire('Error', 'An error occurred: ' + error, 'error');
                        }
                    });
                }
            });
        }

        function editCamp(campId) {
            Swal.fire({
                title: 'Are you sure you want to edit this camp?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, edit it',
                cancelButtonText: 'No, keep it',
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = '/field/edit-planned-camp/' + campId; // Use the direct URL
                }
            });
        }

        function editImplementCamp(campId) {
            Swal.fire({
                title: 'Are you sure you want to edit this implemented camp?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, edit it',
                cancelButtonText: 'No, keep it',
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = '/field/edit-implement-camp/' + campId; // Use the direct URL
                }
            });
        }

        $(document).ready(function() {
            @if(Auth::user()->vDesignation == 'SO')
                $('#camp_user_filter_wrapper').hide();
            @endif
            fetchCampUsers();
            fetchDashboardCounts();
            getCampAnalytics();

        });
    </script>
@endsection