@extends('admin.layout')
@section('main')
<style>
    .custom-switch .custom-control-input:disabled:checked~.custom-control-label::before {
    background-color: #db644d;
    
}
</style>
    <link rel="stylesheet" href="{{ asset('assets/assets/css/croppie.css') }}" />

    <!-- Modal -->
    <div class="modal fade text-left  modal-slide-in event-sidebar fade" data-keyboard="false" id="camp" tabindex="-1"
        role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered " role="document">
            <div class="modal-content">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
                <div class="modal-header mb-1">
                    <h5 class="modal-title">Manage Camp</h5>
                </div>

                <div class="modal-body flex-grow-1 pb-sm-0 pb-3">
                    {{ Form::open(['url' => '#', 'name' => 'validateForm', 'id' => 'validateForm', 'enctype' => 'multipart/form-data']) }}
                    <input type="hidden" id="iCampID" name="iCampID" value="">
                    <input type="hidden" id="iCampTypeID" name="iCampTypeID" value="">

                    {{-- <div class="form-group mb-2">
                        <label for="" class="form-label">Camp Type</label>
                        <input type="text" name="iCampTypeID" class="form-control" id="iCampTypeID" 
                        value = "{{ $camp->iCampTypeID ?? '' }}" disabled>
                    </div> --}}

                    <div class="form-group mb-2">
                        <label for="">Camp Name<span class="required">*</span></label>
                        <input type="text" class="form-control" name="vCampName" id="vCampName" maxlength="60">
                        <span id="charLimitMessage" class="text-danger" style="display: none;">Maximum character limit reached!</span>
                    </div>
                    
                    <div class="form-group mb-2">
                        <label for="">Expected no of camps<span class="required">*</span></label>
                        <input type="number" class="form-control" id="vExpectedNoOfCamps"
                            name="vExpectedNoOfCamps" placeholder="Enter Expected no of camps"
                            value = "{{ $camp->vExpectedNoOfCamps ?? '' }}">
                    </div>

                    <div class="form-group d-flex mt-3">
                        <button type="submit" id="submit" class="btn btn-primary update-event-btn  mr-1">Submit</button>
                        <button class="btn btn-outline-danger btn-delete-event " data-dismiss="modal">Cancel</button>
                    </div>
                    {{ Form::close() }}
                </div>
            </div>
        </div>
    </div>
    
   <!-- Timeline Modal -->
    <div class="modal fade text-left" data-backdrop="static" data-keyboard="false" id="camp_timeline" tabindex="-1" role="dialog" aria-labelledby="campTimelineLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-md" role="document">
            <div class="modal-content rounded-lg shadow-lg">
                <div class="modal-header bg-white border-b border-gray-200">
                    <h5 class="modal-title font-semibold text-sm text-gray-800" id="campTimelineLabel">
                        CAMP FLOW
                    </h5>
                    <button type="button" class="close text-gray-600 hover:text-gray-800" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body p-1 bg-white">
                    <div class="mb-3">
                        <h2 class="text-xs font-medium text-gray-700 flex items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 22.167 22.944" class="mr-1">
                                <g id="Group_1390" data-name="Group 1390" transform="translate(-1093 1300)">
                                    <path id="Vector" d="M.835-.75H4.5A1.571,1.571,0,0,1,6.081.841V6.219a.75.75,0,0,1-.75.75H0a.75.75,0,0,1-.75-.75V.835A1.587,1.587,0,0,1,.835-.75ZM4.581,5.469V.835s0-.01,0-.014A.062.062,0,0,0,4.562.773.078.078,0,0,0,4.5.75H.835A.091.091,0,0,0,.75.835V5.469Z" transform="translate(1101.44 -1286.673)" fill="#DB644D"></path>
                                    <g id="vuesax_linear_ghost" data-name="vuesax/linear/ghost" transform="translate(1093 -1300)">
                                        <g id="ghost" transform="translate(0 0)">
                                            <path id="Vector-2" data-name="Vector" d="M9.379,18.477h0c-2.406,0-4.762-.042-6.466-.115-.934-.04-1.668-.089-2.182-.145a5.948,5.948,0,0,1-.69-.107c-.687-.162-.79-.592-.79-.834V9.732a10.716,10.716,0,0,1,2.9-7.388,9.518,9.518,0,0,1,14.046,0,10.716,10.716,0,0,1,2.9,7.388v7.543c0,.192-.075.658-.765.834a5.264,5.264,0,0,1-.664.111c-.488.057-1.187.106-2.076.145C13.967,18.437,11.762,18.477,9.379,18.477ZM.75,16.712c1.146.140,4.338.266,8.629.265,4.218,0,7.144-.122,8.214-.257V9.732C17.593,4.779,13.815.75,9.172.75S.750,4.779.750,9.732Z" transform="translate(1.912 1.912)" fill="#DB644D"></path>
                                            <path id="Vector-3" data-name="Vector" d="M0,0H22.167V22.944H0Z" fill="none" opacity="0"></path>
                                        </g>
                                    </g>
                                    <g id="Group" transform="translate(1101.877 -1294.377)">
                                        <path id="Vector-4" data-name="Vector" d="M0,5.353A.75.75,0,0,1-.750,4.600V0A.75.75,0,0,1,0-.750.750.750,0,0,1,.750,0V4.600A.750.750,0,0,1,0,5.353Z" transform="translate(2.301 0)" fill="#DB644D"></path>
                                        <path id="Vector-5" data-name="Vector" d="M4.600.750H0A.750.750,0,0,1-.750,0,.750.750,0,0,1,0-.750H4.600a.750.750,0,0,1,.750.750A.750.750,0,0,1,4.600.750Z" transform="translate(0 2.301)" fill="#DB644D"></path>
                                    </g>
                                </g>
                            </svg>
                            <span class="uppercase"><span class="compliance_id"></span></span>
                        </h2>
                    </div>
                    <div class="timeline-container max-h-64 overflow-y-auto"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="content-header row">
    </div>
    <div class="content-body">
        <!-- Section 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">Manage Camps <a href="" data-toggle="tooltip" data-placement="right" title="" data-original-title="List of all the Master Camps" class="ml-1"><i data-feather="help-circle"></i></a></h2>
                </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="campTypeFilter"
                            name="campTypeFilter">
                            <option value="" selected default disabled> Camp Type</option>
                            @foreach ($data['campTypes'] as $campType)
                                <option value="{{ $campType->iCampTypeID }}">{{ $campType->vCampTypeName }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-lg-auto col-md-6 my-1">
                    <div class="d-flex align-items-center">
                        <a href="#" class="btn btn-primary search_blue mr-1" onclick="setFilter()"><i class="fa fa-search"></i></a>
                        <a href="#" class="btn btn-danger close_red mr-0" onclick="resetFilter()"><i class="fa fa-times"></i></a>
                    </div>
                </div>
                <div class="col-lg-auto  col-md-auto my-1 text-right">
                    @if (auth()->user()->can('manage_camp_setup'))
                        <div class="form-group">
                            <a href="{{ route('division.camp.setup')}}" class="btn btn-primary btn-toggle-sidebar waves-effect waves-float waves-light">
                                <span class="">
                                    <i class="fa-solid fa-plus mr-1"></i>
                                    Setup Camp
                                </span>
                            </a>
                        </div>    
                    @endif
                </div>
                
            </div>
        </section>

        <section id="column-search-datatable">
            <div class="row">
                <div class="col-12">
                    <div class="card">

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

                            <table class="dt-column-search table table-striped w-100 text-center display" id="dataTable">
                                <thead>
                                    <tr>
                                        <th>Sr. No.</th>
                                        <th>Camp Type</th>
                                        <th>Camp Name</th>
                                        <th>Expected no of camps</th>
                                        <th>Actual no of camps</th>
                                        <th>Status</th>
                                        <th>Compliance</th>
                                        <th>Action</th>
                                        <th>Date & Time</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Dashboard Ecommerce ends -->

    </div>

    <!-- Edit Day Camp Modal -->
    <div class="modal fade" id="edit_day_camp" tabindex="-1" role="dialog" aria-labelledby="editDayCampLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
            <form id="editDayCampForm">
            @csrf
            <input type="hidden" id="editCampId" name="camp_id">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title">Camp Days Configurations</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="vMinDays">Planning Days <a href="" data-toggle="tooltip" data-placement="right" data-title="Number of days prior to camp for preparation" class="ml-1" data-original-title="" title=""><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>
                    </label>
                    <input type="number" class="form-control" id="vMinDays" name="vMinDays" min="1" max="365" required>
                    <small class="text-primary">
                        Notes : The user must plan the camp at least <span id="minDaysNote">X</span> days in advance.
                    </small>
                </div>

                <div class="form-group mb-2">
                    <label for="vMaxDays">Implement Days <a href="" data-toggle="tooltip" data-placement="right" data-title="Number of days for actual camp execution" class="ml-1" data-original-title="" title=""><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></label>
                    <input type="number" class="form-control" id="vMaxDays" name="vMaxDays" min="1" max="365" required>
                    <small class="text-primary">
                        Notes : The user must complete camp implementation within <span id="maxDaysNote">X</span> days after the camp ends.
                    </small>
                </div>
                </div>
                <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </div>
            </form>
        </div>
    </div>


@endsection
@section('scripts')
    {{-- for crop image --}}
    <script>
        $(function() {
            var columns = [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    "orderable": false,
                    searchable: false
                },
                {
                    data: 'vCampTypeName',
                },
                {
                    data: 'vCampName',
                },
                {
                    data: 'vExpectedNoOfCamps',
                },
                {
                    data: 'vActualNoOfCamps',
                },
                {
                    data: 'eStatus',
                },
                {   
                    data: 'complianceStatus',
                },
                {
                    data: 'action',
                },
                {
                    data: 'created_at',
                }
            ];
            var columnDefs = [];
            getdatatable("{{ route('division.camp.paginate') }}", columns, columnDefs);
        });

        function getdatatable(url, columns, columnDefs) {
            $('#dataTable').DataTable({
                processing: true,
                serverSide: true,
                bDestroy: true,
                order: [],
                stateSave:false,
                "scrollX": true,
                columns: columns,
                columnDefs: columnDefs,
                language: {
                    searchPlaceholder: 'Search'
                },
                // ajax: "{{ url('participant-paginate') }}",
                ajax: {
                    method: 'post',
                    url: url,
                    data: function(d) {
                        d._token = "{{ csrf_token() }}"
                        d.campTypeFilter = $("#campTypeFilter").val()
                    }
                },
                "drawCallback": function(settings) {
                    new VenoBox({
                        selector: '.venobox_img',
                    });
                    feather.replace();
                }
            });
        }

        $(document).ready(function() {
            jQuery.extend(jQuery.validator.messages, {
                accept: "Please enter a file with a valid extension.",
            });

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

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

        $.validator.addMethod("noSpaces", function(value, element) {
            return this.optional(element) || $.trim(value).length > 0;
        }, "Please enter valid text, not just spaces.");
            $("#validateForm").validate({
                ignore: ".ignore",
                rules: {
                    vCampName: {
                        required: true,
                        noSpaces: true,
                    },
                    iCampTypeID: {
                        required: true,
                    }
                },

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

                    var formData = new FormData($("#validateForm")[0]);
                    $.ajax({
                        url: "{{ route('division.camp.add') }}",
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function(response) {
                            if (response.status == 0) {
                                $("#submit").html('Submit');
                                $("#submit").attr('disabled', false);
                                $.notify(response.message, "error");
                            } else {
                                $("#iCampID").val('');
                                $.notify(response.message, "success");
                                $("#submit").attr('disabled', false);
                                $("#submit").html('Submit');
                                // $('#dataTable').DataTable().ajax.reload();
                                $('#dataTable').DataTable().ajax.reload(null, false);
                                $("#camp").modal('hide');
                                $("#validateForm").trigger("reset");
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            if (jqXHR.status == 419){
                            $.notify("Please refresh the Page", "error");
                        }else if (jqXHR.status == 500){
                            $.notify("Please try after a few minutes", "error");
                        }else{
                            $.notify(jqXHR.responseJSON.message, "error");
                        }
                            var flag = 0;
                            $("#submit").html('Submit');
                            $("#submit").attr('disabled', false);
                            $.each(jqXHR.responseJSON.errors, function(index, data) {
                                if (flag == 0) {
                                    $('input[name="' + index + '"]').focus();
                                    flag = 1;
                                }
                                if (document.getElementsByName(index)[0]
                                    .tagName == "INPUT" && document
                                    .getElementsByName(index)[0].type != 'radio'
                                ) {
                                    $('input[name="' + index + '"]').after(
                                        '<label id="' + index +
                                        '-error" class="error" for="' +
                                        index + '">' + data + '</label>');
                                } else if (document.getElementsByName(index)[0]
                                    .tagName == "SELECT") {
                                    $('select[name="' + index + '"]').after(
                                        '<label id="' + index +
                                        '-error" class="error" for="' +
                                        index + '">' + data + '</label>');
                                } else if (document.getElementsByName(index)[0]
                                    .tagName == "TEXTAREA") {
                                    $('textarea[name="' + index + '"]').after(
                                        '<label id="' + index +
                                        '-error" class="error" for="' +
                                        index + '">' + data + '</label>');
                                } else if (document.getElementsByName(index)[0]
                                    .tagName == "INPUT" && document
                                    .getElementsByName(index)[0].type == 'radio'
                                ) {
                                    $('input[name="' + index + '"]').after(
                                        '<label id="' + index +
                                        '-error" class="error" for="' +
                                        index + '">' + data + '</label>');
                                }
                            });
                        }
                    }); 
                }
            });

            $('#camp').on('hidden.bs.modal', function () {
                $("#validateForm").validate().resetForm();
                $("#validateForm").trigger("reset");

                $(".error").remove();
                $("#charLimitMessage").hide();
            });
        });

        function getRecordData(id) {
            $.ajax({
                url: "{{ route('division.camp.record') }}",
                type: 'GET',
                data: {
                    'iCampID': id
                },
                dataType: "json",
                success: function(response) {
                    $("#iCampID").val(response.data.iCampID);
                    $("#iCampTypeID").val(response.data.iCampTypeID);
                    $("#vCampName").val(response.data.vCampName);
                    $("#vExpectedNoOfCamps").val(response.data.vExpectedNoOfCamps);
                    $("#camp").modal('show');
                }
            });
        }

        function openModal() {
            $("#iCampID").val('');
            $("#vCampName").val('');
            $("#camp").modal('show');
            $("label.error").html('');
            $(".error").css("border-color", "#d8d6de");
        }

        function changeStatus(status, id) {
            $.ajax({
                url: "{{ route('division.camp.status') }}",
                type: 'POST',
                data: {
                    'iCampID': id,
                    'eStatus': status,
                    _token: "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response) {
                    if (response.status == 1){
                        $.notify(response.message, "success");
                        $('#dataTable').DataTable().ajax.reload(null, false);
                    }else{
                        $.notify(response.message, "error");
                        $('#dataTable').DataTable().ajax.reload();
                    }
                }
            });
        }

        function setFilter() {
            $('#dataTable').DataTable().ajax.reload();
        }

        function resetFilter() {
            $("#campTypeFilter").val('').select2();
            $('#dataTable').DataTable().ajax.reload();
        }

        function exportData(iCampID) {
          
            data = {
                'eExportType': "3",
                'iCampID': iCampID,
                '_token': "{{ csrf_token() }}"
            }
            ajax_call("{{ route('division.camp.analytics.export') }}", 'POST', data, 0, 'dataTable', 1, 0,'export_response');
        }

        function export_response(response) {
            if (response == 1) {
                $.notify("You will get generated report within 10 minutes in download report section.", "info");
            } else {

                $.notify('Something went wrong !', "error");
            }
    }

    function deleteCamp(campID) {
        Swal.fire({
            text: "Are you sure you want to delete this Camp?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '{{ route("division.camp.delete") }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        camp_id: campID
                    },
                    success: function(response) {
                        if (response.success) {
                            $.notify(response.message, "success");
                            $('#dataTable').DataTable().ajax.reload();
                        } else {
                            $.notify(response.message, "error");
                            $('#dataTable').DataTable().ajax.reload(null, false);
                        }
                    },
                    error: function(xhr) {
                        $.notify('Error occurred!', "error");
                    }
                });
            }
        });
    }

    function sendForCompliance(id){
        const route = "{{ route('division.camp.send.compliance', ['id' => ':id']) }}";
        const url = route.replace(':id', id);
        $.ajax({
            url: url,
            method: 'GET',
            success: function (response) {
                if (response.status === 1) {
                    $.notify(response.message, 'success');
                    $('#dataTable').DataTable().ajax.reload();
                } else {
                    $.notify(response.message, 'error');
                    $('#dataTable').DataTable().ajax.reload();
                }
            },
            error: function (xhr) {
                $.notify('Error fetching camp timeline.', 'error');
            }
        });
    }

    function openCampFlowModal(campID) {
        const route = "{{ route('division.camp.timeline', ['id' => ':id']) }}";
        const url = route.replace(':id', campID);

        $.ajax({
            url: url,
            method: 'GET',
            success: function (response) {
                if (response.status === 1) {
                    const activities = response.data.activities;

                    if (activities.length > 0) {
                        $('.compliance_id').text(activities[0].camp_name || 'CAMP');
                        $('.camp_name').text(activities[0].camp_name || 'N/A');
                    }

                    let modalContent = '';
                    activities.forEach(function (activity) {
                        let iconClass = '';
                        let label = '';
                        let labelColor = '';
                        let iconColor = '';

                        switch (activity.eStatus) {
                            case '1':
                                iconClass = 'fa-solid fa-circle-plus';
                                label = 'Submitted for Approval by';
                                labelColor = '#3b82f6';
                                iconColor = '#3b82f6';
                                break;
                            case '2':
                                iconClass = 'fa-solid fa-circle-xmark';
                                label = 'Rejected by';
                                labelColor = '#ef4444';
                                iconColor = '#ef4444';
                                break;
                            case '3':
                                iconClass = 'fa-solid fa-circle-check';
                                label = 'Approved by';
                                labelColor = '#22c55e';
                                iconColor = '#22c55e';
                                break;
                            case '4':
                                iconClass = 'fa-solid fa-hourglass-half';
                                label = 'Camp Updated by';
                                labelColor = '#f97316';
                                iconColor = '#f97316';
                                break;
                            case '5':
                                iconClass = 'fa-solid fa-pencil';
                                label = 'Activated by';
                                labelColor = '#3b82f6';
                                iconColor = '#3b82f6';
                                break;
                            case '6':
                                iconClass = 'fa-solid fa-ban';
                                label = 'Inactive by';
                                labelColor = '#ef4444';
                                iconColor = '#ef4444';
                                break;
                            case '7':
                                iconClass = 'fa-solid fa-circle-plus';
                                label = 'Created by';
                                labelColor = '#3b82f6';
                                iconColor = '#3b82f6';
                                break;
                            default:
                                iconClass = 'fa-solid fa-circle-info';
                                label = '-';
                                labelColor = '#6b7280';
                                iconColor = '#6b7280';
                        }

                        modalContent += `
                            <div class="timeline-item flex items-start mb-0 relative">
                                <div class="timeline-icon mr-2 flex items-center justify-center">
                                    <i class="${iconClass} text-sm" style="color: ${iconColor};"></i>
                                </div>
                                <div class="timeline-content flex-1">
                                    <div class="d-flex justify items-center justify-content-between">
                                        <div>
                                            <p class="text-xs font-medium" style="color: ${labelColor}">${label.toUpperCase()}</p>
                                            <p class="text-xs text-gray-600">${activity.user_name}</p>
                                            <p class="text-xs text-gray-600">Remarks: ${activity.remarks}</p>
                                        </div>
                                        <div class="text-right">
                                            <p class="text-xs text-gray-600">${activity.date} <br> ${activity.time}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>`;
                    });

                    $('#camp_timeline .timeline-container').html(modalContent);
                    $('#camp_timeline').modal('show');
                } else {
                    $.notify(response.message, 'error');
                }
            },
            error: function (xhr) {
                $.notify('Error fetching camp timeline.', 'error');
            }
        });
    }

    function loadCampDayData(campId) {
        $.ajax({
            url: "{{ route('division.get.camp.day.data') }}",
            method: "GET",
            data: { camp_id: campId },
            success: function (response) {
                const vMinDays = response.vMinDays || 7;
                const vMaxDays = response.vMaxDays || 3;

                $('#editCampId').val(campId);
                $('#vMinDays').val(vMinDays);
                $('#vMaxDays').val(vMaxDays);

                // Inject values into <span> inside <small>
                $('#minDaysNote').text(vMinDays);
                $('#maxDaysNote').text(vMaxDays);
            }
        });
    }

    $('#vMinDays').on('input', function () {
        const val = $(this).val();
        $('#minDaysNote').text(val || 'X');
    });

    $('#vMaxDays').on('input', function () {
        const val = $(this).val();
        $('#maxDaysNote').text(val || 'X');
    });


    $(document).ready(function () {
        $.validator.addMethod("noSpaces", function (value, element) {
            return this.optional(element) || $.trim(value).length > 0;
        }, "Please enter a valid number.");

        $('#editDayCampForm').validate({
            rules: {
                vMinDays: {
                    required: true,
                    number: true,
                    min: 1,
                    max: 365,
                    noSpaces: true
                },
                vMaxDays: {
                    required: true,
                    number: true,
                    min: 1,
                    max: 365,
                    noSpaces: true
                }
            },
            messages: {
                vMinDays: {
                    required: "Please enter Planning Days.",
                    number: "Only numeric values are allowed.",
                    min: "Minimum value is 1.",
                    max: "Maximum value is 365."
                },
                vMaxDays: {
                    required: "Please enter Implement Days.",
                    number: "Only numeric values are allowed.",
                    min: "Minimum value is 1.",
                    max: "Maximum value is 365."
                }
            },
            errorPlacement: function (error, element) {
                error.insertAfter(element);
                error.after("<br>");
            },
            submitHandler: function (form) {
                let formData = $(form).serialize();

                $.ajax({
                    url: "{{ route('division.update.camp.day.data') }}",
                    type: 'POST',
                    data: formData,
                    success: function (response) {
                        if (response.success) {
                            $('#edit_day_camp').modal('hide');
                            $.notify('Camp days updated successfully.', 'success');
                        } else {
                            $.notify(response.message || 'Something went wrong', 'error');
                        }
                    },
                    error: function () {
                        $.notify('Validation error or server issue', 'error');
                    }
                });
            }
        });
    });


    </script>
@endsection