@extends('admin.layout')
@section('main')

    <div class="modal fade" id="track_modal" 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="">Activity Track</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">


                    <ul class="timeline ml-50">
                        <li class="timeline-item">
                            <span class="timeline-point timeline-point-indicator"></span>
                            <div class="timeline-event">
                                <div class="d-flex justify-content-between flex-sm-row flex-column mb-sm-0 mb-0">
                                    <h5 class="font-weight-bold mb-0">Activity Assigned By</h5>
                                    <span class="timeline-event-time mr-1 text-right"><i
                                            class="fa fa-calendar mr-1"></i>07/06/20222 <br /> <i
                                            class="fa fa-clock mr-1"></i>11:00 AM</span>

                                </div>
                                <h6>Karan Patel <label class="badge badge-light-primary">FLM</label></h6>

                            </div>
                            <hr class="mb-0">
                        </li>


                    </ul>


                </div>

            </div>
        </div>
    </div>
    
    <div class="modal fade text-left" data-backdrop="static" data-keyboard="false" id="approval_flow" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title font-weight-bolder" id="">Camp Approval Flow</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body p-2">
                    <h2 class="heading_row">
                        <i>
                            <svg xmlns="http://www.w3.org/2000/svg" width="22.167" height="22.944" viewBox="0 0 22.167 22.944" style="    vertical-align: top;">
                                <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.14,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.75,4.779.75,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-.75,4.6V0A.75.75,0,0,1,0-.75.75.75,0,0,1,.75,0V4.6A.75.75,0,0,1,0,5.353Z" transform="translate(2.301 0)" fill="#DB644D"></path>
                                    <path id="Vector-5" data-name="Vector" d="M4.6.75H0A.75.75,0,0,1-.75,0,.75.75,0,0,1,0-.75H4.6a.75.75,0,0,1,.75.75A.75.75,0,0,1,4.6.75Z" transform="translate(0 2.301)" fill="#DB644D"></path>
                                    </g>
                                </g>
                                </svg>
                        </i>
                        <span class="camp_name"></span><span>(Camp ID-<span class="camp_id"></span>)</span>
                    </h2>
                    <div class="listing_check">
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
    

    <!-- BEGIN: Content-->
  
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
            </div>
            <div class="content-body">
                <!-- Dashboard Ecommerce Starts -->
                <!-- Dashboard Ecommerce Starts -->
                <section id="dashboard-ecommerce">
                    <div class="row match-height justify-content-end g-2">
                        <div class="col-lg-auto col-md-auto col-sm-auto col-auto mr-auto my-auto">
                            <h2 class="m-0">All Camp<a href="" data-toggle="tooltip" data-placement="right" title="" data-original-title="List of all Camp Activities." 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="select-label">
                                    <option value="" selected default disabled> Camp Type</option>
                                    @foreach ($campTypes as $campType)
                                        <option value="{{ $campType->iCampTypeID }}">{{ $campType->vCampTypeName }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-2 col-md-6 my-1">
                            <div class="form-group">
                                <select class="select2 select-label form-control w-100" id="campNameFilter"
                                    name="select-label">
                                    <option value="" selected default disabled> Camp Name</option>
                                    @foreach ($camps as $camp)
                                        <option value="{{ $camp->iCampID }}">{{ $camp->vCampName }}</option>
                                    @endforeach
                                </select>  
                            </div>
                        </div>
                        <div class="col-lg-2 col-md-6 my-1">
                            <div class="form-group">
                                <select class="select2 select-label form-control w-100" id="campStageFilter"
                                    name="select-label">
                                    <option value="" selected default disabled> Select Stage</option>
                                    <option value="planned"> Planned</option>
                                    <option value="implemented"> Implemented</option>
                                    <option value="canceled"> Canceled </option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-2 col-md-6 my-1">
                            <div class="form-group">
                                <select class="select2 select-label form-control w-100" id="campStatusFilter"
                                    name="select-label">
                                    <option value="" selected default disabled> Select Status</option>
                                    <option value="pending"> Pending</option>
                                    <option value="completed"> Completed</option>
                                    <option value="rejected"> Rejected </option>
                                </select>
                            </div>
                        </div>
                        
                        
                        <div class="w-100"></div>
                        <div class="col-lg-auto col-md-6 my-1">
                            <div class="form-group">
                                <label for="" class="form-label">Expected Camp Date</label>
                                <div id="expectedDateFilter" class="daterange">
                                    <i class="fa fa-calendar"></i>&nbsp;
                                    <span></span> 
                                    <i class="fa fa-caret-down"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-auto col-md-6 my-1">
                            <div class="form-group">
                                <label for="" class="form-label">Actual Camp Date</label>
                                <div id="actualDateFilter" class="daterange">
                                    <i class="fa fa-calendar"></i>&nbsp;
                                    <span></span> 
                                    <i class="fa fa-caret-down"></i>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-auto col-md-6 my-1">
                            <div class="form-group">
                                <label for="" class="form-label">&nbsp;</label>
                                <div class="ml-1">
                                    <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>

                        @if (auth()->user()->can('camp_activities_export'))
                            <div class="col-lg-auto  col-md-auto text-right mt-auto mb-1">
                                <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 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 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 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"/>
                                            </g>
                                            </svg>
                                            Export Report
                                        </span>
                                    </button>
                                </div>
                            </div>
                        @endif
                    </div>
                </section>
                <!-- Dashboard Ecommerce ends -->
                <section id="column-search-datatable">
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-datatable p-1">
                                    <!-- <div class="row">
                                        
                                        <div class="col-lg-12 text-right">
                                        
                                            <span><img src="./app-assets/images/activity.svg" width="17" height="17" alt="" class="mr-1"/>Activity Track</span>
                                        </div>
                                    </div> -->
                                    <table class="dt-column-search table table-striped w-100 text-center display"  id="dataTable">
                                        <thead>
                                            <tr>                                            
                                                <th>Sr. No.</th>
                                                <th>Camp Name </th>
                                                <th>Camp Type </th>
                                                <th>Created By</th>
                                                <th>Camp ID</th>
                                                <th>Dr. name</th>
                                                <th>Expected Camp Date</th>
                                                <th>Actual Camp Date</th>
                                                <th>Stage</th>
                                                <th>Status</th>
                                                <th>Approval Activity</th>
                                                <th>Action</th>
                                                <th>Date & Time</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- Dashboard Ecommerce ends -->

            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
    $(window).on('load', function() {
        if (feather) {
            feather.replace({
                width: 14,
                height: 14
            });
        }
    })

    jQuery(document).ready(function($) {
        // Get current path and find target link
        var path = window.location.pathname.split("/").pop();

        // Account for home page with empty path
        if (path == '') {
            path = 'index.php';
        }

        var target = $('.navigation a[href="' + path + '"]');
        // Add active class to target link
        target.addClass('active');
        target.parents('.nav-item').addClass('open');
    });

    $(document).ready(function () {
        const $campStageFilter = $('#campStageFilter');
        const $campStatusFilter = $('#campStatusFilter');
        const $canceledOption = $campStatusFilter.find('option[value="canceled"]');
        
        $campStageFilter.on('change', function() {
            if ($campStageFilter.val() === 'canceled') {
                $campStatusFilter.prop('disabled', true); 
            } else {
                $campStatusFilter.prop('disabled', false);
            }
        });
        
        // Handle change event for Status filter
        $campStatusFilter.on('change', function() {
            if ($campStatusFilter.val() === 'rejected') {
                $canceledOption.prop('disabled', true);  
            } else {
                $canceledOption.prop('disabled', false); 
            }
        });
    });
    
    $(function() {
        var start = null; 
        var end = null;   

        function cb(start, end) {
            if (start && end) {
                $('#expectedDateFilter span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            } else {
                $('#expectedDateFilter span').html(''); 
            }
        }

        $('#expectedDateFilter').daterangepicker({
            autoUpdateInput: false,
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, cb);

        $('#expectedDateFilter').on('apply.daterangepicker', function (ev, picker) {
            start = picker.startDate;
            end = picker.endDate;
            cb(start, end);
        });

        cb(start, end);

        function dc(start, end) {
            if (start && end) {
                $('#actualDateFilter span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            } else {
                $('#actualDateFilter span').html('');
            }
        }

        $('#actualDateFilter').daterangepicker({
            autoUpdateInput: false, 
            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')]
            }
        }, dc);

        $('#actualDateFilter').on('apply.daterangepicker', function (ev, picker) {
            start = picker.startDate;
            end = picker.endDate;
            dc(start, end);
        });

        dc(start, end);
    });
    
    $('table tr').hasClass('.selected')

    $('.center_code_div>.unlock_center_code').hide();
    $('.center_code_div>.unlock_center').hide();
    $('.center_code_div').on('click', function () {
        $('.center_code_div>.unlock_center').show();
        $('.center_code_div>.unlock_center_code').show();
        $('.center_code_div>.lock_center').hide();
    })
    $('.center_code_div').on('click', function () {
        $('.center_code_div>.lock_center').show();
        $('.center_code_div>.unlock_center').hide();
        $('.center_code_div>.unlock_center_code').hide();
    })
    dt_filter_table = $('.dt-column-search');
    if (dt_filter_table.length) {
        var dt_filter = dt_filter_table.DataTable({
            'scrollX': true,
        });
    }

    $(function() {
        var columns = [{
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                "orderable": false,
                searchable: false
            },
            {
                data: 'vCampName',
                searchable: true
            },
            {
                data: 'vCampTypeName',
                searchable: true
            },
            {
                data: 'iCreatedBy',
                searchable: true
            },
            {
                data: 'vCampDCSID',
            },
            {
                data: 'vOtherDoctors',
            },
            {
                data: 'vExpectedCampDate',
            },
            {
                data: 'vImplementDate',
            },
            {
                data: 'stage'
            },
            {
                data: 'eCampStatus'
            },
            {
                data: 'activityApproval'
            },
            {
                data: 'action'
            },
            {
                data: 'created_at',
            }
        ];
        var columnDefs = [];
        getdatatable("{{ route('division.camp.activities.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: {
                method: 'post',
                url: url,
                data: function(d) {
                    d._token = "{{ csrf_token() }}"
                    d.campNameFilter = $("#campNameFilter").val();
                    d.campStageFilter = $("#campStageFilter").val();
                    d.campTypeFilter = $("#campTypeFilter").val();
                    d.campStatusFilter = $("#campStatusFilter").val();

                    var expectedDateRange = $("#expectedDateFilter span").text().split(' - ');
                    d.expectedDateFilterStart = expectedDateRange[0] ? expectedDateRange[0] : '';
                    d.expectedDateFilterEnd = expectedDateRange[1] ? expectedDateRange[1] : '';

                    var actualDateRange = $("#actualDateFilter span").text().split(' - ');
                    d.actualDateFilterStart = actualDateRange[0] ? actualDateRange[0] : '';
                    d.actualDateFilterEnd = actualDateRange[1] ? actualDateRange[1] : '';
                    d.iDivisionIDNav = $('#iDivisionIDNav option:selected').val();
                }
            },
            "drawCallback": function(settings) {
                new VenoBox({
                    selector: '.venobox_img',
                });
                feather.replace();
            }
        });
    }

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

    function resetFilter() {
        $("#campTypeFilter").val('').select2();
        $("#campNameFilter").val('').select2();
        $("#campStageFilter").val('').select2();
        $("#campStatusFilter").val('').select2();

        var start = null;
        var end = null;

        var expectedDatePicker = $('#expectedDateFilter').data('daterangepicker');
        expectedDatePicker.setStartDate(moment());
        expectedDatePicker.setEndDate(moment());
        $('#expectedDateFilter span').html('No dates selected'); 

        var actualDatePicker = $('#actualDateFilter').data('daterangepicker');
        actualDatePicker.setStartDate(moment());
        actualDatePicker.setEndDate(moment());
        $('#actualDateFilter span').html('No dates selected');

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

    $(document).ready(function () {
        updateCampNames(); 

        $('#iDivisionIDNav, #campTypeFilter').on('change', function () {
            updateCampNames();
        });

        function updateCampNames() {
            let divisionID = $('#iDivisionIDNav').val();
            let campTypeID = $('#campTypeFilter').val();
            let campNameFilter = $('#campNameFilter');

            campNameFilter.html('<option value="" selected default disabled>Loading...</option>'); // Clear and show loading

            if (divisionID) {
                $.ajax({
                    url: '{{ route("division.getDivisionCamp") }}',
                    method: 'POST',
                    data: {
                        iDivisionIDNav: divisionID,
                        campTypeFilter: campTypeID,
                        _token: '{{ csrf_token() }}' // CSRF token for security
                    },
                    success: function (response) {
                        if (response.status === 1 && response.data.length > 0) {
                            let options = '<option value="" selected default disabled>Camp Name</option>';
                            response.data.forEach(camp => {
                                options += `<option value="${camp.iCampID}">${camp.vCampName}</option>`;
                            });
                            campNameFilter.html(options); // Populate with new options
                        } else {
                            campNameFilter.html('<option value="" selected default disabled>No camps found</option>');
                        }
                    },
                    error: function (xhr) {
                        console.error('Error fetching camps:', xhr);
                        campNameFilter.html('<option value="" selected default disabled>Error loading camps</option>');
                    }
                });
            } else {
                campNameFilter.html('<option value="" selected default disabled>Camp Name</option>'); // Reset if no division selected
            }
        }
    });

    $(document).on('click', '.open-approval-modal', function () {
        var recordId = $(this).data('id');
        $.ajax({
            url: route('division.camp.activities.timeline') + id, 
            method: 'GET',
            success: function (response) {
                if (response.status === 1) {
                    populateModal(response.data);
                } else {
                    alert(response.message);
                }
            },
            error: function (xhr) {
                console.error(xhr);
                alert('Failed to fetch data.');
            }
        });
    });

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

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

                    if (activities.length > 0) {
                        $('.camp_name').text(activities[0].camp_name); 
                        $('.camp_id').text(activities[0].camp_id);    
                    }

                    let modalContent = '';
                    activities.forEach(function (activity) {
                        let iconClass = '';
                        let iconColor = '';
                        let label = '';
                        let labelColor = '';
                        switch (activity.eType) {
                            case 'created':
                                iconClass = 'fa-solid fa-circle-check';
                                label = 'Created by';
                                labelColor = 'green';
                                iconColor ='green';
                                break;
                            case 'planApprovalPending':
                            case 'planned':
                            case 'implementApprovalPending':
                            case 'implemented':
                                iconClass = 'fa-solid fa-circle-check';
                                label = 'Approved by';
                                labelColor = 'green';
                                iconColor ='green';
                                break;
                            case 'planRejected':
                            case 'implementRejected':
                                iconClass = 'fa-solid fa-circle-xmark';
                                label = 'Rejected by';
                                labelColor = 'red';
                                iconColor ='red';
                                break;
                            case 'canceled':
                                iconClass = 'fa-solid fa-circle-xmark';
                                label = 'Canceled by';
                                labelColor = 'red';
                                iconColor ='red';
                                break;
                            case 'edited':
                                iconClass = 'fa-solid fa-pencil';
                                label = 'Edited by';
                                labelColor = 'navy';
                                iconColor ='navy';
                                break;
                            default:
                                iconClass = 'fa-solid fa-circle-check';
                                label = 'Approved by';
                                labelColor = 'green';
                                iconColor ='green';
                        }

                        modalContent += `
                            <div class="item">
                                <div class="left">
                                    <h3 style="color: ${labelColor}">${activity.user_role}</h3>
                                    <p>${label} ${activity.user_name}</p>
                                </div>
                                <div class="right">
                                    <span>${activity.date}</span>
                                    <span>${activity.time}</span>
                                </div>
                                <i class="${iconClass}" style="color: ${iconColor}"></i>
                            </div>`;
                    });

                    $('#approval_flow .listing_check').html(modalContent);
                    $('#approval_flow').modal('show');
                } else {
                    alert(response.message);
                }
            },
            error: function (xhr) {
                alert('Error fetching data.');
            }
        });
    }

    function exportData() {
        var expectedDateRange = $("#expectedDateFilter span").text().split(' - ');
        var actualDateRange = $("#actualDateFilter span").text().split(' - ');
        data = {
            'eExportType': "0",
            'iCampTypeID': $("#campTypeFilter").val(),
            'iCampID': $("#campNameFilter").val(),
            'stage': $("#campStageFilter").val(),
            'status': $("#campStatusFilter").val(),
            'dtExpStartFilter': expectedDateRange[0] ? expectedDateRange[0] : '',
            'dtExpEndFilter': expectedDateRange[1] ? expectedDateRange[1] : '',
            'dtActStartFilter': actualDateRange[0] ? actualDateRange[0] : '',
            'dtActEndFilter': actualDateRange[1] ? actualDateRange[1] : '',
            '_token': "{{ csrf_token() }}"
        }
        ajax_call("{{ route('division.camp.activities.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");
        }
    }

</script>

@endsection