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

    <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" class="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 id="camps-title" class="m-0">All Camps (0) </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-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> 
                                <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 class="col-lg-auto col-md-auto text-right my-1 mt-auto">
                        <div class="form-group">
                            <a href="{{ route('field.createCamp') }}"
                                class="btn btn-primary btn-toggle-sidebar waves-effect waves-float waves-light">
                                <span class="">
                                    <i class="fa-solid fa-plus mr-1"></i> Create Camp
                                </span>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-auto col-md-auto text-right my-1 mt-auto">
                        <div class="form-group">
                            <button class="btn btn-primary btn-toggle-sidebar waves-effect waves-float waves-light"
                                onclick="exportData()">
                                <span class="">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="19.936" height="18.689"
                                        viewBox="0 0 19.936 18.689">
                                        <g id="Group_34113" data-name="Group 34113" transform="translate(0 -16.009)">
                                            <path id="Path_66469" data-name="Path 66469"
                                                d="M10.988,16.152a.627.627,0,0,0-.512-.132L.508,17.889A.621.621,0,0,0,0,18.5V32.206a.622.622,0,0,0,.508.612l9.968,1.869a.6.6,0,0,0,.115.011.623.623,0,0,0,.623-.623V16.632A.621.621,0,0,0,10.988,16.152ZM9.968,33.324,1.246,31.689V19.018l8.722-1.635Z"
                                                transform="translate(0)" fill="#fff"></path>
                                            <path id="Path_66470" data-name="Path 66470"
                                                d="M265.345,79.99h-8.722a.623.623,0,0,0,0,1.246h8.1V92.45h-8.1a.623.623,0,0,0,0,1.246h8.722a.623.623,0,0,0,.623-.623V80.613A.623.623,0,0,0,265.345,79.99Z"
                                                transform="translate(-246.032 -61.489)" fill="#fff"></path>
                                            <path id="Path_66471" data-name="Path 66471"
                                                d="M89.972,143.99H87.48a.623.623,0,0,0,0,1.246h2.492a.623.623,0,1,0,0-1.246Zm0,2.492H87.48a.623.623,0,0,0,0,1.246h2.492a.623.623,0,1,0,0-1.246Zm0,2.492H87.48a.623.623,0,0,0,0,1.246h2.492a.623.623,0,1,0,0-1.246Zm0,2.492H87.48a.623.623,0,1,0,0,1.246h2.492a.623.623,0,1,0,0-1.246Zm3.738-7.476H92.464a.623.623,0,0,0,0,1.246H93.71a.623.623,0,1,0,0-1.246Zm0,2.492H92.464a.623.623,0,0,0,0,1.246H93.71a.623.623,0,1,0,0-1.246Zm0,2.492H92.464a.623.623,0,0,0,0,1.246H93.71a.623.623,0,1,0,0-1.246Zm0,2.492H92.464a.623.623,0,1,0,0,1.246H93.71a.623.623,0,1,0,0-1.246Zm-8.252-1.033L81.1,145.449a.623.623,0,0,0-.938.82l4.361,4.984a.623.623,0,0,0,.938-.82Z"
                                                transform="translate(-76.889 -122.998)" fill="#fff"></path>
                                            <path id="Path_66472" data-name="Path 66472"
                                                d="M85.366,160.124a.623.623,0,0,0-.875.108l-4.361,5.607a.623.623,0,0,0,.983.766L85.474,161A.623.623,0,0,0,85.366,160.124Z"
                                                transform="translate(-76.885 -138.376)" fill="#fff"></path>
                                        </g>
                                    </svg>
                                    Export Report
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Dashboard Ecommerce ends -->

            <div class="row">
                <div class="col-12">
                    <div class="gallery_with_products">
                        <div class="container">
                            <div class="list_gallery">
                                <ul>
                                    <li><a class="active" href="javascript:void(0);" data-type="1">All</a></li>
                                    <li><a href="javascript:void(0);" data-type="2">Planned</a></li>
                                    <li><a href="javascript:void(0);" data-type="3">Implemented</a></li>
                                    <li><a href="javascript:void(0);" data-type="4">Cancelled</a></li>
                                </ul>
                            </div>
                            <div class="list_gallery_img">
                                <div class="all_img_gallery analytic_listing">
                                </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>
                </div>
            </div>
        </div>
    </div>

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

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

    <div class="modal fade" 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">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <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>
                    </form>
                </div>
                <div class="modal-footer justify-content-center">
                    <a href="./camp-planning.php" class="btn btn-primary">Submit</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="dr_list" 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="">Doctors</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="planning_details dr_list">
                        <h5>Selected Doctors</h5>
                        <ul>
                        </ul>
                        <h5>Other Doctors</h5>
                        <ul>
                            <li>
                                <svg xmlns="http://www.w3.org/2000/svg" width="14.902" height="17.629"
                                    viewBox="0 0 14.902 17.629">
                                    <!-- SVG content remains unchanged -->
                                </svg>
                                Dr. Maudie Miller
                            </li>
                            <li>
                                <svg xmlns="http://www.w3.org/2000/svg" width="14.902" height="17.629"
                                    viewBox="0 0 14.902 17.629">
                                    <!-- SVG content remains unchanged -->
                                </svg>
                                Dr. Reece Reilly
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="modal-footer justify-content-right" style="border: 0;padding-top: 0;">
                </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="">Reject Activity</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group mb-2">
                        <label for="" class="form-label">Reject Reason</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>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
    <script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                // Create headers
                let headersHtml = '<th>Actions</th>';

                const fieldMap = {};
                formFields.forEach(field => {
                    fieldMap[field.id] = field.name;
                    headersHtml += `<th>${field.name}</th>`;
                });

                $('#patientListHeaders').html(headersHtml);

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

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

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

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

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

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

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

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

        var $box = $(".all_img_gallery").isotope({
            itemSelector: ".all_img_gallery .item"
        });

        $(".list_gallery").on("click", "a", function() {
            var filterValue = $(this).attr("data-type");
            $(".list_gallery a").removeClass("active");
            $(this).addClass("active");

            var filterText = $(this).text();
            $("#camps-title").text(`${filterText} Camps ()`);

            if (filterValue !== "*") {
                filterValue = '[data-type="' + filterValue + '"]';
            }

            $box.isotope({
                filter: filterValue
            });
        });

        let currentPage = 1;

        function getCampAnalytics(filterType, page = 1, date) {
            let formData = new FormData();
            formData.append('list_type', filterType);
            formData.append('page', page);
            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', '');
            }
            formData.append('campUserFilter', $('#select_camp_user').val());
            formData.append('_token', "{{ csrf_token() }}");

            $.ajax({
                url: '{{ route('field.getCampAnalytics') }}',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.status === 1) {
                        updatePagination(response.current_page, response.last_page);
                        $('.analytic_listing').empty();

                        var count = response.total;
                        var filterText = $(".list_gallery a.active").text();
                        $("#camps-title").text(`${filterText} Camps (${count})`);
                        if (count == 0) {
                            $('.analytic_listing').append('<p>No records found</p>');
                        } else {
                            response.data.forEach(function(camp) {
                                let editButtonHTML = '';
                                let statusButtonsHTML = '';
                                let eyeButtonsHTML = `<button class="ml-1" onclick="redirectToCampPage('${camp.iCampAnalyticsID}')">
                                    <img src="{{ asset('front-assets/images/viewC.png') }}" alt="" style="width:40px">
                                </button>`;
                                let addDetailButtonHTML = '';
                                let addPatientAddButtonHTML = '';

                                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="redirectToImplementCamp('${camp.iEncryptCampAnalyticsID}')">
                                            Add Details
                                        </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>`;
                                    }
                                    statusButtonsHTML = `
                                        <button 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.isEdit == 'Y' && camp.isDraft == 'Y' && camp.camp_stage == 'Planned' && camp.canImplement == 'N') {
                                    statusButtonsHTML = `
                                    <button class="ml-1" onclick="deleteCamp(${camp.iCampAnalyticsID})">
                                        <img src="{{ asset('front-assets/images/delete.png') }}" alt="Delete" 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}
                                                            ${addPatientAddButtonHTML}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>`;

                                $('.analytic_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 redirectToImplementCamp(campID) {
            $.ajax({
                url: '{{ route('field.createImplementCamp') }}',
                type: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    iCampAnalyticsID: campID
                },
                success: function(response) {
                    if (response.success) {
                        $.notify("Redirecting to implement camp...", "success");
                        setTimeout(function() {
                            window.location.href = response.redirect_url;
                        }, 1000);
                    } else {
                        $.notify(response.message || "Not allowed to implement this camp.", "error");
                    }
                },
                error: function(xhr, status, error) {
                    $.notify("An error occurred while checking the camp status.", "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(1);
                            } else {
                                Swal.fire('Error', response.message, 'error');
                            }
                        },
                        error: function(xhr, status, error) {
                            Swal.fire('Error', 'An error occurred: ' + error, 'error');
                        }
                    });
                }
            });
        }

        function deleteCamp(campId) {
            let actionText = 'delete';
            let confirmButtonText = 'Delete';
            let remarksRequired = false;

            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.deleteCamp') }}',
                        type: 'POST',
                        data: {
                            iCampAnalyticsID: campId,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.status === 1) {
                                Swal.fire('Success', response.message, 'success');
                                getCampAnalytics(1);
                            } else {
                                Swal.fire('Error', response.message, 'error');
                            }
                        },
                        error: function(xhr, status, error) {
                            Swal.fire('Error', 'An error occurred: ' + error, 'error');
                        }
                    });
                }
            });
        }

        function editCamp(campId) {
            setTimeout(() => {
                window.location.href = '/field/edit-planned-camp/' + campId;
            }, 1000);
        }

        function editImplementCamp(campId) {
            setTimeout(() => {
                window.location.href = '/field/edit-implement-camp/' + campId;
            }, 1000);
        }

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

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

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

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

            $('.page-link[data-page]').off().on('click', function() {
                const page = $(this).data('page');
                getCampAnalytics($('.list_gallery a.active').data('type'), page, '');
            });

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

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

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

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

        $('#applyButton').on('click', function() {
            const activeLink = $('.list_gallery a.active');
            if (activeLink.length > 0) {
                const filterType = activeLink.data('type');
                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');

                getCampAnalytics(filterType, 1, {
                    start_date: startDate,
                    end_date: endDate
                });
            }
        });

        function exportData() {
            const activeLink = $('.list_gallery a.active');
            if (activeLink.length > 0) {
                const filterType = activeLink.data('type') ?? 1;
                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');
                const campUserFilter = $('#select_camp_user').val();

                const queryParams = $.param({
                    filterType: filterType,
                    campUserFilter: campUserFilter,
                    start_date: startDate,
                    end_date: endDate
                });

                var url = 'exportCampAnalytics?' + queryParams;
                window.location.replace(url);
            }
        }

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

            $('.list_gallery a').on('click', function() {
                $('.list_gallery a').removeClass('active');
                $(this).addClass('active');

                const filterType = $(this).data('type');
                getCampAnalytics(filterType);
            });
        });
    </script>
@endsection