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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/venobox/2.1.8/venobox.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- 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">

            {{-- Expense Add model --}}
            <div class="modal fade text-left " data-backdrop="static" data-keyboard="false" id="expenseAddModal" tabindex="-1"
                role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="myModalLabel1">Add Expense</h4>
                            <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">
                            {{ Form::open(['url' => '#', 'name' => 'expenseAddForm', 'id' => 'expenseAddForm', 'enctype' => 'multipart/form-data']) }}
                                <meta name="csrf-token" content="{{ csrf_token() }}">
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                        <div class="mb-2">
                                            <label for="" class="form-label">Camp Name</label>
                                            <select class="select2 select-label form-control w-100" name="expense_camp_id" id="expense_camp_id">
                                                
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                        <div class="mb-2">
                                            <label for="" class="form-label">Camp ID</label>
                                            <select class="select2 select-label form-control w-100" name="expense_camp_activity_id" id="expense_camp_activity_id">
                                                
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                        <div class="mb-2">
                                            <label for="" class="form-label">Expense type</label>
                                            <select class="select2 select-label form-control w-100" id="expense_id" name="expense_id"
                                                name="select-label">
                                                <option value="" selected default disabled> Select Expense type</option>
                                                
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                        <div class="mb-2">
                                            <label for="" class="form-label">Expense Amount</label>
                                            <input type="text" class="form-control" id="expense_amount" name="expense_amount" placeholder="Enter Expense Amount">
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                        <div class="mb-2">
                                            <label for="" class="form-label">Beneficiary Name</label>
                                            <input type="text" class="form-control" id="beneficiary_name" name="beneficiary_name" placeholder="Enter Beneficiary Name">
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                        <div class="mb-2">
                                            <label for="" class="form-label">Payment Type</label>
                                            <select class="select2 select-label form-control w-100" id="payment_type" name="payment_type"
                                                name="select-label">
                                                <option value="" selected default disabled> Select Payment Type</option>
                                                
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="mb-2">
                                            <div class="rs_custom_upload">
                                                <div class="left">
                                                    <div id="preview-container" style="margin-top: 10px; display: none;">
                                                        <img id="image-preview" src="#" alt="Image Preview" style="width: 50px; height: 50px; border: 1px solid #ccc; border-radius: 5px; display: none;">
                                                        <p id="pdf-preview" style="font-weight: bold; display: none;"></p>
                                                    </div>
                                                    <p id="upload-text">Upload Invoice</p>
                                                </div>
                                                <div class="right">
                                                    <button class="btn btn-primary btn-toggle-sidebar waves-effect waves-float waves-light">
                                                        Upload
                                                        <input type="file" class="form-control" name="invoice_image" id="invoice_image" accept="image/*,application/pdf">
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-12">
                                        <div class="mb-2">
                                            <label for="" class="form-label">Remark</label>
                                            <textarea class="form-control" placeholder="Enter Remark" rows="3" id="expense_remarks" name="expense_remarks"></textarea>
                                        </div>
                                    </div>
                                </div>
                            
                        </div>
                        <div class="modal-footer justify-content-center">
                            <button type="submit" class="btn btn-primary">Save</button>
                            <!-- <button type="submit" class="btn btn-light">Clear</button> -->
                        </div>
                        {{ Form::close() }}
                    </div>
                </div>
            </div>
            
            <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">Camp Expenses <a href="" data-toggle="tooltip" data-placement="right" title="" data-original-title="List of expenses for the Implemented 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="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="campExpenseStatusFilter" 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="col-lg-auto col-md-6 my-1">
                        <div class="form-group">
                            <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">
                            <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_expenses_export'))
                        <div class="col-lg-auto  col-md-auto text-right my-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

                    @if (auth()->user()->can('camp_expenses_add'))
                        <div class="col-lg-auto  col-md-auto text-right my-1">
                            <div class="form-group">
                                <button class="btn btn-primary btn-toggle-sidebar waves-effect waves-float waves-light" id="expenseAddBtn">
                                    <span class="">                                    
                                        <i class="fa-solid fa-plus mr-1"></i> Add expense
                                    </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>Expense Status</th>
                                            <th>Camp Name </th>
                                            <th>Camp ID </th>
                                            <th>Expense ID</th>
                                            <th>Expense type</th>
                                            <th>Amount</th>
                                            <th>Payment type</th>
                                            <th>Beneficiary Name</th>
                                            <th>Remark</th>
                                            <th>Status</th>
                                            <th>Invoice</th>
                                            <th>Date & Time</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Dashboard Ecommerce ends -->
        </div>
    </div>

    <!-- Invoice Modal -->
    <div class="modal fade" id="documentModal" tabindex="-1" aria-labelledby="documentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/venobox/2.1.8/venobox.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $('.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,
        });
    }
    new VenoBox({
        selector: '.my-image-links',
        numeration: true,
        infinigall: true,
        share: true,
        spinner: 'rotating-plane'
    });

    $(function() {
        var columns = [{
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                "orderable": false,
                searchable: false
            },
            {
                data: 'expense_status',
                "orderable": false
            },
            {
                data: 'camp_name',
                "orderable": false
            },
            {
                data: 'iCampID',
                "orderable": false,
                searchable: false
            },
            {
                data: 'vExpenseGenerateID',
                "orderable": false,
                searchable: true
            },
            {
                data: 'expense_type',
                "orderable": false
            },
            {
                data: 'amount',
                "orderable": false
            },
            {
                data: 'iCampPaymentType',
                "orderable": false
            },
            {
                data: 'vBenificiaryName',
                "orderable": false
            },
            {
                data: 'remark',
                "orderable": false
            },
            {
                data: 'payment_status',
                "orderable": false
            },
            {
                data: 'invoice',
                "orderable": false
            },
            {
                data: 'created_at',
                "orderable": false
            }
        ];
        var columnDefs = [];
        getdatatable("{{ route('division.camp.expenses.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.campExpenseStatusFilter = $("#campExpenseStatusFilter").val();

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

    $(document).ready(function () {
        getCamp();
        $('#iDivisionIDNav').on('change', function () {
            getCamp();
        });
        function getCamp(){
            let divisionID = $('#iDivisionIDNav').val();
            console.log('div' + divisionID);
            let campNameFilter = $('#campNameFilter');
            
            if (divisionID) {
                $.ajax({
                    url: '{{ route("division.getDivisionCamp") }}',
                    method: 'POST',
                    data: {
                        iDivisionIDNav: divisionID,
                        _token: '{{ csrf_token() }}' 
                    },
                    success: function (response) {
                        if (response.status === 1 && response.data.length > 0) {
                            campNameFilter.html('<option value="" selected default disabled>Loading...</option>');
                            
                            
                            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);
                        } 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>');
            }
        }
    });


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

    function resetFilter() {
        $("#campNameFilter").val('').select2();
        $("#campExpenseStatusFilter").val('').select2();

        var start = null;
        var end = null;

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

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

    // $(function() {
    //     var start = moment().subtract(29, 'days');
    //     var end = moment();

    //     function dc(start, end) {
    //         $('#actualDateFilter span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    //     }
    //     $('#actualDateFilter').daterangepicker({
    //         startDate: start,
    //         endDate: end,
    //         ranges: {
    //         'Today': [moment(), moment()],
    //         'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
    //         'Last 7 Days': [moment().subtract(6, 'days'), moment()],
    //         'Last 30 Days': [moment().subtract(29, 'days'), moment()],
    //         'This Month': [moment().startOf('month'), moment().endOf('month')],
    //         'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    //         }
    //     }, dc);
    //     dc(start, end);
    // });

    $(function() {
        var start = null; 
        var end = null;

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

    function exportData() {
        var actualDateRange = $("#actualDateFilter span").text().split(' - ');
        data = {
            'eExportType': "2",
            'iCampID': $("#campNameFilter").val(),
            'status': $("#campExpenseStatusFilter").val(),
            'dtActStartFilter': actualDateRange[0] ? actualDateRange[0] : '',
            'dtActEndFilter': actualDateRange[1] ? actualDateRange[1] : '',
            '_token': "{{ csrf_token() }}"
        }
        ajax_call("{{ route('division.camp.expense.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");
        }
    }

    $(document).ready(function () {
        $('#expenseAddBtn').on('click', function () {
            $.ajax({
            url: "{{ route('division.camp.expense.add')}}",
            method: 'GET',
            data: "",
            success: function (response) {
                $('#expense_camp_id').empty();
                $('#expense_camp_activity_id').empty();
                $('#payment_type').empty();
                $('#expense_id').empty();
                $('#expense_camp_id').append(`<option value="" selected disabled>Select Camp</option>`);
                $.each(response.camps, function(index, camp) {
                    $('#expense_camp_id').append(`<option value="${camp.iCampID}">${camp.vCampName}</option>`);
                });

                $.each(response.payment_type, function(index, paymentType) {
                    $('#payment_type').append(`<option value="${paymentType.iCampPaymentType}">${paymentType.vPaymentTypeName}</option>`);
                });

                $('#expenseAddModal').modal('show');
            },
            error: function (xhr, status, error) {
                console.error('Error:', error);
            }
            });
        });
    });



    document.getElementById('invoice_image').addEventListener('change', function (event) {
        const uploadText = document.getElementById('upload-text');
        const previewContainer = document.getElementById('preview-container');
        const imagePreview = document.getElementById('image-preview');
        const pdfPreview = document.getElementById('pdf-preview');

        if (this.files && this.files[0]) {
            const file = this.files[0];
            const fileType = file.type;

            if (fileType.startsWith('image/')) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    imagePreview.src = e.target.result;
                    imagePreview.style.display = 'block';
                    pdfPreview.style.display = 'none';
                    previewContainer.style.display = 'block';
                    uploadText.textContent = 'Invoice Added';
                };
                reader.readAsDataURL(file);
            } else if (fileType === 'application/pdf') {
                imagePreview.style.display = 'none';
                pdfPreview.textContent = `Uploaded File: ${file.name}`;
                pdfPreview.style.display = 'block';
                previewContainer.style.display = 'block';
                uploadText.textContent = 'Invoice Added';
            } else {
                previewContainer.style.display = 'none';
                uploadText.textContent = 'Invalid File Type';
            }
        } else {
            previewContainer.style.display = 'none';
            uploadText.textContent = 'Upload Invoice';
        }
    });


    $('#expenseAddModal').on('hidden.bs.modal', function() {
        $('#expenseAddForm')[0].reset();

        const validator = $('#expenseAddForm').validate();
        validator.resetForm();

        const uploadText = document.getElementById('upload-text');
        uploadText.textContent = 'Upload Invoice';

        const imagePreview = document.getElementById('image-preview');
        const pdfPreview = document.getElementById('pdf-preview');
        const previewContainer = document.getElementById('preview-container');

        if (imagePreview) {
            imagePreview.src = '#';
            imagePreview.style.display = 'none';
        }

        if (pdfPreview) {
            pdfPreview.textContent = '';
            pdfPreview.style.display = 'none';
        }

        if (previewContainer) {
            previewContainer.style.display = 'none';
        }
    });


    $('#expense_camp_id').on('change', function () {
        var selectedCampId = $(this).val();
        $('#expense_camp_activity_id').empty();
        $('#expense_id').empty();
        $.ajax({
            url: "{{ route('division.camp.expense.getActivities') }}",
            method: 'GET',
            data: {
                camp_id: selectedCampId
            },
            success: function (response) {
                $.each(response.camps, function(index, camp) {
                    if (camp.iCampAnalyticsID != null) {
                        $('#expense_camp_activity_id').append(`<option value="${camp.iCampAnalyticsID}">${camp.vCampDCSID} - ${camp.eCampStatus}</option>`);
                    }
                });

                $.each(response.expenses, function(index, expense) {
                    if (expense.iExpenseID != null) {
                        console.log(expense);
                        $('#expense_id').append(`<option value="${expense.expense.iExpenseID}">${expense.expense.vExpenseName}</option>`);
                    }
                });
            },
            error: function (xhr, status, error) {
                console.error('Error:', error);
            }
        });
    });

    $("#expenseAddForm").validate({
            ignore: ".ignore",
            rules: {
                expense_camp_id: {
                    required: true
                },
                expense_camp_activity_id: {
                    required: true
                },
                expense_id: {
                    required: true
                },
                expense_amount: {
                    required: true
                },
                beneficiary_name: {
                    required: true
                },
                payment_type: {
                    required: true
                },
                invoice_image:{
                    required: true
                }
            },
            submitHandler: function(form) {
                $("#submit").html('<span> Processing...</span>');
                $("#submit").attr('disabled', true);

                var formData = new FormData(form);
                $.ajax({
                    url: "{{ route('division.camp.expense.store') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(response) {
                        $("#submit").html('Submit');
                        $("#submit").attr('disabled', false);

                        if (response.status == 0) {
                            $.notify(response.message, "error");
                        } else {
                            $.notify(response.message, "success");
                            $('#dataTable').DataTable().ajax.reload(null, false);
                            $("#expenseAddForm").trigger("reset");
                            setTimeout(function() {
                                window.location.href =
                                    "{{ route('division.camp.expenses') }}";
                            }, 1000);
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        $("#submit").html('Submit');
                        $("#submit").attr('disabled', false);

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

                        $.each(jqXHR.responseJSON.errors, function(index, data) {
                            let $input = $('input[name="' + index + '"], select[name="' +
                                index + '"], textarea[name="' + index + '"]');
                            $input.after('<label id="' + index +
                                '-error" class="error" for="' + index + '">' + data +
                                '</label>');

                            if ($input.is(':input:not(:radio)') && !flag) {
                                $input.focus();
                                flag = 1;
                            }
                        });
                    }
                });
            }
        });

        function changeHOExpenseDecision(url) {
            $.ajax({
                url: url,
                type: 'POST',
                data: {
                    _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");
                }
            });
        }

        $(document).on('change', '[id^=imageInput_]', function(){
            var formData = new FormData();
            var recordId = $(this).data('id');  

            formData.append('invoice_image', this.files[0]);  
            formData.append('id', recordId);

            $.ajax({
                url: "{{ route('division.camp.expense.invoice-update') }}", 
                method: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if(response.success) {
                        $.notify(response.success, "success"); 
                    } else {
                        $.notify(response.error, "error"); 
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error occurred:', error);  
                }
            });
        });

        function openDocumentModal(id) {
            $.ajax({
                url: "{{ route('division.camp.expense.document.view') }}",
                type: 'POST',
                data: {
                    id: id,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    $('#documentModal .modal-content').html(response); 
                    $('#documentModal').modal('show');
                },
                error: function() {
                    alert('An error occurred. Please try again.');
                }
            });
        }
</script>
@endsection