@extends('admin.layout')
@section('main')
    <!-- Modal -->
   
    

    <!-- 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">HO Approval <a href="" data-toggle="tooltip" data-placement="right" title="" data-original-title="HO will Approve/Reject the final step of the camp activity." 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>
                                </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="" disabled> Select Status</option>
                                    <option value="pending" selected default> Pending</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row match-height justify-content-end g-2">
                        <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('pending_camp_action'))
                            <div class="col-lg-auto  col-md-auto text-right mt-auto mb-1">
                                <div class="ml-1">
                                    <a href="#" class="btn btn-success search_blue mr-1 btn-approve"><i class="fa-regular fa-circle-check mr-1"></i>Approve</a>
                                    {{-- <a href="#" class="btn btn-danger close_red mr-0 btn-reject"><i class="fa-regular fa-circle-xmark mr-1"></i>Reject</a> --}}
                                </div>
                            </div>
                        @endif
                        @if (auth()->user()->can('pending_camp_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><input type="checkbox" id="checkall"></th>                            
                                                <th>Sr. No.</th>
                                                <th>Camp Name </th>
                                                <th>Camp Type </th>
                                                <th>Created By </th>
                                                <th>Dr. Name </th>
                                                <th>Camp ID</th>
                                                <th>Expected Camp Date</th>
                                                <th>Actual Camp Date</th>
                                                <th>Stage</th>
                                                <th>Status</th>
                                                <th>Actions</th>
                                                <th>Date & Time</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- Dashboard Ecommerce ends -->

            </div>
        </div>
   
@endsection

@section('scripts')

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

  <script>
    $(document).on('click', '.dt-checkboxes', function() {
        if ($('.dt-checkboxes:checked').length === $('.dt-checkboxes').length) {
            $('#checkall').prop('checked', true);
        } else {
            $('#checkall').prop('checked', false);
        }
    });

    $('#checkall').click(function() {
        if ($(this).is(':checked')) {
            $('.dt-checkboxes').prop('checked', true);
        } else {
            $('.dt-checkboxes').prop('checked', false);
        }
    });

    // dt_filter_table = $('.dt-column-search');
    // if (dt_filter_table.length) {
    //     var dt_filter = dt_filter_table.DataTable({
    //         'scrollX': true,
    //         'columnDefs': [{
    //         'targets': 0,
    //         'checkboxes': {
    //             'selectRow': true
    //         }
    //         }],
    //         'select': {
    //             'style': 'multi'
    //         },
    //         'order': [
    //             [1, 'asc']
    //         ]
    //     });
    // }

    $(function() {
        var columns = [
            {
                data: 'checkbox',
                orderable: false,
                searchable: false
            },
            {
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                "orderable": false,
                searchable: false
            },
            {
                data: 'vCampName',
            },
            {
                data: 'vCampTypeName',
            },
            {
                data: 'iCreatedBy',
            },
            {
                data: 'doctors',
            },
            {
                data: 'vCampDCSID',
            },
            {
                data: 'vExpectedCampDate',
            },
            {
                data: 'vImplementDate',
            },
            {
                data: 'stage'
            },
            {
                data: 'eCampStatus'
            },
            {
                data: 'action'
            },
            {
                data: 'created_at',
            }
        ];
        var columnDefs = [];
        getdatatable("{{ route('division.camp.activities.pending-approval.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();
                $('#checkall').prop('checked', false);
                $('.dt-checkboxes').click(function() {
                    if ($('[name="checkbox[]"]:checked').length > 0) {
                        $('.actionBtn').show();
                    } else {
                        $('.actionBtn').hide();
                    }
                });
            }
        });
    }
    
    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
            }
        }
    });


    function changeHODecision(url, action) {
        if (action === 'approve') {
            Swal.fire({
                title: 'Confirm approval',
                text: "Are you sure you want to approve this camp?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes',
                cancelButtonText: 'No',
                reverseButtons: true,
            }).then((result) => {
                if (result.isConfirmed) {
                
                    $.ajax({
                        url: url,  
                        type: 'POST',
                        data: {
                            _token: "{{ csrf_token() }}" 
                        },
                        success: function(response) {
                            if (response.status === 1) {
                                Swal.fire(
                                    'Approved!',
                                    response.message,
                                    'success'
                                );
                                $('#dataTable').DataTable().ajax.reload();  
                            } else {
                                Swal.fire(
                                    'Error!',
                                    response.message,
                                    'error'
                                );
                            }
                        },
                        error: function(xhr) {
                            Swal.fire(
                                'Error!',
                                'An error occurred, please try again.',
                                'error'
                            );
                        }
                    });
                }
            });
        }

        else if (action === 'reject') {
            Swal.fire({
                title: 'Reject Activity',
                input: 'textarea',
                inputPlaceholder: 'Reject Reason',
                showCancelButton: true,
                confirmButtonText: 'Submit',
                cancelButtonText: 'Cancel',
                inputValidator: (value) => {
                    if (!value) {
                        return 'Please enter your rejection remarks!';
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    var rejectionRemarks = result.value;

                    $.ajax({
                        url: url, 
                        type: 'POST',
                        data: {
                            _token: "{{ csrf_token() }}",
                            remarks: rejectionRemarks,  
                        },
                        success: function(response) {
                            if (response.status === 1) {
                                Swal.fire(
                                    'Rejected!',
                                    response.message,
                                    'success'
                                );
                                $('#dataTable').DataTable().ajax.reload();
                            } else {
                                Swal.fire(
                                    'Error!',
                                    response.message,
                                    'error'
                                );
                            }
                        },
                        error: function(xhr) {
                            Swal.fire(
                                'Error!',
                                'An error occurred, please try again.',
                                'error'
                            );
                        }
                    });
                }
            });
        }
    }
    
    $(function() {
        $('.btn-approve').on('click', function(e) {
            e.preventDefault();
            let selectedIds = getSelectedIds();
            if (selectedIds.length === 0) {
                $.notify('No records selected.', "error");
                return;
            }
            performBulkAction(selectedIds, "{{ route('division.camp.ho.bulk-approve') }}");
        });

        $('.btn-reject').on('click', function(e) {
            e.preventDefault();
            let selectedIds = getSelectedIds();
            if (selectedIds.length === 0) {
                $.notify('No records selected.', "error");
                return;
            }
            performBulkAction(selectedIds, "{{ route('division.camp.ho.bulk-reject') }}");
        });

        function getSelectedIds() {
            let selectedIds = [];
            $('.checkbox-select:checked').each(function() {
                selectedIds.push($(this).val());
            });
            console.log(selectedIds);
            return selectedIds;
        }

        function performBulkAction(selectedIds, url) {
            $.ajax({
                url: url,
                type: 'POST',
                data: {
                    ids: selectedIds,
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    if (response.status === 1) {
                        $.notify(response.message, "success");
                        $('#dataTable').DataTable().ajax.reload();
                    } else {
                        $.notify(response.message, "error");
                    }
                },
                error: function(xhr) {
                    $.notify('An error occured, please try again', "error");
                }
            });
        }
    });

    function exportData() {
        var expectedDateRange = $("#expectedDateFilter span").text().split(' - ');
        var actualDateRange = $("#actualDateFilter span").text().split(' - ');
        data = {
            'eExportType': "1",
            '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