@include('division.layout.header')

<link href="https://unpkg.com/multiple-select@2.1.1/dist/multiple-select.min.css" rel="stylesheet">

<style>
    .dasboard-3 {
        overflow: hidden;
        overflow: hidden;
        flex-direction: row-reverse;
    }

    .dasboard-3 {
        padding: 15px 50px 20px 20px;
        align-items: center;
        background: rgb(7 82 155);
        color: #fff;
        border-radius: 8px;
        z-index: 1;
    }

    .white_shadow {
        position: relative;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        box-shadow: 0 0 5px 2px #d6d6d6;
    }

    .dasboard-3 .left {
        padding-left: 25px;
        padding-right: 0;
    }

    .rs_count {
        position: absolute;
        bottom: 0;
        right: 0;
        background-color: #fff !important;
        color: #07529b;
        font-weight: 700;
        width: 55px;
        height: 55px;
        line-height: 64px;
        padding: 0 0 0 7px;
        border-radius: 62px 0px 0px 0px;
        display: inline-block;
        font-size: 14px;
        text-align: center;
    }

    .ms-choice {
        border: 1px solid #a1a1a1;
        padding: 10px 16px;
        height: 40px !important;
        line-height: 40px;
    }

    .ms-choice>span.ms-placeholder {
        color: #000 !important;
    }

    .ms-drop ul>li {
        text-align: left;
    }

    .ms-parent {
        width: 100% !important;
    }

    .ms-drop ul>li.multiple {
        width: 100% !important;
    }

    .ms-choice>span.ms-placeholder {
        line-height: 43px;
    }

    .ms-choice>span {
        color: #000 !important;
    }

    .ms-choice>span {
        line-height: 43px;
    }

    button.ms-choice {
        border: 1px solid #c2c2c2;
        border-radius: 8px;
        height: 43px !important;
    }

    table.dataTable td,
    table.dataTable th {
        font-size: 14px;
        text-align: center !important;
        padding: 5px 10px !important;
        vertical-align: middle;
    }

    .data-table-dr-12 tbody tr.quarterly {
        background: #e6edf5 !important;
    }

    .text-bg-success {
        color: #fff !important;
        background: green !important;
    }

    .text-bg-primary {
        color: #fff !important;
        background: #07529b !important;
    }
</style>

<div class="container-fluid">
    <div class="row g-2">
        <div class="col-auto my-auto me-auto">
            <h2 class="main_title">Finance Dashboard</h2>
        </div>
        <div class="col-lg-2">
            <select multiple="multiple" id="division_filter" class="budget_select" placeholder="Select division">
                @foreach ($data['divisionList'] as $key => $value)
                    <option value="{{ $value['id'] }}">{{ $value['name'] }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-lg-2 ">
            <select class="select2 js-example-basic-single select-label form-control w-100" name="financial_year_filter"
                id="financial_year_filter">
                <option value="" disabled>Select FY Year</option>
                @foreach ($data['financialYears'] as $key => $value)
                    <option value="{{ $value['id'] }}">{{ $value['fy_year'] }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-lg-auto">
            <div class="d-flex align-items-center">
                <a href="javascript:void(0);" class="btn btn-primary ms-0" onclick="setFilter()"><i
                        class="fa fa-search"></i></a>
                <a href="javascript:void(0);" class="btn btn-danger ms-2" onclick="resetFilter()"><i
                        class="fa fa-times"></i></a>
            </div>
        </div>
        <div class="col-lg-auto">
            <a href="javascript:void(0);" class="btn btn-success" onclick="exportBudgetData()">
                <i class="fa fa-download me-2"></i>Export
            </a>
        </div>
    </div>

    <div class="row g-2 pt-3">
        <div class="col-lg-auto">
            <div class="white_shadow dasboard-3">
                <div class="left">
                    <span>Finance Approval Pending</span>
                    <h3><i class="fa-solid fa-indian-rupee-sign me-1"></i> <span
                            id="financeApprovalPendingAmount"></span> </h3>
                </div>
                <div class="right">
                    <span><i class="fa-solid fa-hourglass-half"></i></span>
                </div>
                <span class="rs_count" id="financeApprovalPending">0</span>
            </div>
        </div>
        <div class="col-lg-auto">
            <div class="white_shadow dasboard-3">
                <div class="left">
                    <span>Finance Approved Contract </span>
                    <h3><i class="fa-solid fa-indian-rupee-sign me-1"></i> <span id="financeApprovedAmount">0</span>
                    </h3>
                </div>
                <div class="right">
                    {{-- fa-check-circle --}}
                    <span><i class="fa-solid fa-check"></i></span>
                </div>
                <span class="rs_count" id="financeApproved">0</span>
            </div>
        </div>
        <div class="col-lg-auto">
            <div class="white_shadow dasboard-3">
                <div class="left">
                    <span>Finance Rejected Contract </span>
                    <h3><i class="fa-solid fa-indian-rupee-sign me-1"></i> <span id="financeRejectedAmount">0</span>
                    </h3>
                </div>
                <div class="right">
                    <span><i class="fa-solid fa-xmark"></i></span>
                </div>
                <span class="rs_count" id="financeRejected">0</span>
            </div>
        </div>
        <div class="col-lg-auto">
            <div class="white_shadow dasboard-3">
                <div class="left">
                    <span>Deleted Contract </span>
                    <h3><i class="fa-solid fa-indian-rupee-sign me-1"></i> <span id="deletedContractAmount">0</span>
                    </h3>
                </div>
                <div class="right">
                    <span><i class="fa-solid fa-trash-can"></i></span>
                </div>
                <span class="rs_count" id="deletedContracts">0</span>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <table id="dataTable" class="table table-striped data-table-dr-12" style="width:100%">
                <thead>
                    <tr>
                        <th>Sr No</th>
                        <th>Month</th>
                        <th>Sanctioned Budget</th>
                        <th>Finance Approved Contract</th>
                        <th>Finance Approved Contract Amount</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                    <tr>
                        <td></td>
                        <td class="finance_quarter"><strong>Total Amount</strong></td>
                        <td id="totalBudget">0</td>
                        <td id="totalContracts">0</td>
                        <td id="totalAmount">0</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
</div>


</div>

</div>

@include('division.layout.footer')

{{-- modal after footer defined --}}
<div class="modal fade" id="financeBudgetUpdateLogsModal" tabindex="-1" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel"> View History </h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="col-12">
                    <table id="financeBudgetUpdateLogsTable" class="table table-striped data-table-dr-12"
                        style="width:100%">
                        <thead>
                            <tr>
                                <th>Sr No</th>
                                <th>Old Budget</th>
                                <th>New Budget</th>
                                <th>Date and Time</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="sanctionedBudgetUpdateModal" tabindex="-1" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel"
                    style="display: flex;align-items: center;justify-content: space-between;width: 100%;"> Budget
                    <button type="button" id="financeBudgetUpdateLogsViewBtn" class="btn btn-primary me-4"
                        data-bs-toggle="modal" data-record_id="" data-bs-target="#financeBudgetUpdateLogsModal"
                        style="padding: 3px 10px; font-size: 14px;">View history</button>
                </h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            {{ Form::open(['url' => '#', 'name' => 'sanctionedBudgetUpdateForm', 'id' => 'sanctionedBudgetUpdateForm', 'enctype' => 'multipart/form-data']) }}
            <div class="modal-body">
                <input type="hidden" name="id" id="sanctionedBudgetUpdateId">
                <div class="mb-3 field-group" id="sanctioned_budget_group">
                    <label for="sanctioned_budget" class="form-label">Sanctioned Budget <span
                            class="red">*</span></label>
                    <input type="text" class="form-control" name="sanctioned_budget" id="sanctioned_budget"
                        placeholder="Enter Sanctioned Budget">
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
                <button type="submit" class="btn btn-primary" id="sanctionedBudgetUpdateSubmitBtn">Update</button>
            </div>
            {{ Form::close() }}
        </div>
    </div>
</div>

<script src="https://unpkg.com/multiple-select@2.1.1/dist/multiple-select.min.js"></script>

<script>
    let financeBudgetLogDataTable;

    $('#division_filter').multipleSelect({
        multiple: true,
        placeholder: "Select division",
        filter: true,
        formatAllSelected: function () {
            return 'All Division Selected'; // <-- Custom text when all selected
        },
        formatSelectAll: function () {
            return 'Select All Divisions'; // This changes the "Select all" checkbox label
        },
        formatNoMatchesFound: function () {
            return 'No Division Found';
        }
    });

    // $('#division_filter').on('change', function() {
    //     let selected = $('#division_filter').multipleSelect('getSelects');

    //     // Re-select all or show alert and reselect last valid state
    //     $.notify('At least one division must be selected.', "warn");
    //     $('#division_filter').multipleSelect('checkAll');
    // });

    $('#financeBudgetUpdateLogsViewBtn').on('click', function() {
        getFinanceBudgetPaginateLogDataTable();
    });

    function exportBudgetData() {
        let divisionIds = $('#division_filter').multipleSelect('getSelects');

        let url = "{{ route('exportBudgetData') }}" +
            "?financial_year_filter=" + encodeURIComponent($('#financial_year_filter').val()) +
            "&division_id[]=" + divisionIds.map(encodeURIComponent).join('&division_id[]=');

        window.location.href = url;
    }

    function getCount() {
        $.ajax({
            url: "{{ route('financeDashboardCount') }}",
            type: 'POST',
            data: {
                '_token': '{{ csrf_token() }}',
                'financial_year_filter': $('#financial_year_filter').val(),
                'division_id': $('#division_filter').multipleSelect('getSelects').filter(function(code) {
                    return code;
                })
            },
            dataType: "json",
            success: function(response, textStatus, xhr) {
                function formatINR(amount) {
                    return amount.toLocaleString('en-IN', {
                        // style: 'currency',
                        currency: 'INR'
                    });
                    // without currency sign
                    // amount.toLocaleString();
                }

                function formatNumber(num) {
                    if (num >= 10000000) return (num / 10000000).toFixed(1).replace(/\.0$/, '') + 'Cr';
                    if (num >= 100000) return (num / 100000).toFixed(1).replace(/\.0$/, '') + 'L';
                    if (num >= 1000) return (num / 1000).toFixed(1).replace(/\.0$/, '') + 'k';
                    return num;
                }

                $("#financeApprovalPending").html(formatNumber(response.data.financeApprovalPending));
                $("#financeApprovalPendingAmount").html(formatINR(response.data
                    .financeApprovalPendingAmount));
                $("#financeApproved").html(formatNumber(response.data.financeApproved));
                $("#financeApprovedAmount").html(formatINR(response.data.financeApprovedAmount));
                $("#financeRejected").html(formatNumber(response.data.financeRejected));
                $("#financeRejectedAmount").html(formatINR(response.data.financeRejectedAmount));
                $("#deletedContracts").html(formatNumber(response.data.deletedContracts));
                $("#deletedContractAmount").html(formatINR(response.data.deletedContractAmount));
            },
            error: function(xhr, status, error) {
                if (xhr.status == 419) {
                    // Session expired, redirect to login and show notify
                    $.notify('Your session has expired. Please log in again.');
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                } else if (xhr.status == 500) {
                    $.notify("Please try after a few minutes", "error");
                } else {
                    $.notify(xhr.responseJSON?.message || "An unexpected error occurred", "error");
                }
            }
        });
    }

    function sanctionedBudgetUpdateFormSet(id, sanctioned_budget) {
        $("#financeBudgetUpdateLogsViewBtn").attr("data-record_id", id);
        $("#sanctionedBudgetUpdateId").val(id);
        $("#sanctioned_budget").val(sanctioned_budget);
    }

    function setFilter() {
        let selected = $('#division_filter').multipleSelect('getSelects');
        if (selected.length == 0) {
            // Re-select all or show alert and reselect last valid state
            $.notify('At least one division must be selected.', "warn");
            // Set to default all division selected
            // $('#division_filter').multipleSelect('checkAll');

            return 0;
        } else {
            getCount();
            financeBudgetPaginate();
        }
    }

    function resetFilter() {
        // not production grade reset
        // $('#division_filter').multipleSelect('checkAll');

        // production grade reset for multipleSelect
        const $filter = $('#division_filter');

        // Clear any existing selections
        $filter.multipleSelect('uncheckAll');

        // Check all non-disabled options
        const allEnabledValues = $filter.find('option:not(:disabled)').map(function() {
            return this.value;
        }).get();

        $filter.multipleSelect('setSelects', allEnabledValues);


        let $firstValidOption = $('#financial_year_filter option:not(:disabled):first').val();
        $('#financial_year_filter').val($firstValidOption).trigger('change');

        getCount();
        financeBudgetPaginate();
    }


    function financeBudgetPaginate() {
        let $tbody = $('#dataTable tbody:last');
        let $totalBudgetCell = $('#totalBudget');
        let $totalContractsCell = $('#totalContracts');
        let $totalAmountCell = $('#totalAmount');

        $.ajax({
            url: "{{ route('getFinanceBudgetData') }}",
            type: 'POST',
            data: {
                '_token': '{{ csrf_token() }}',
                'financial_year_filter': $('#financial_year_filter').val(),
                'division_id': $('#division_filter').multipleSelect('getSelects').filter(code =>
                    code)
            },
            dataType: "json",
            columnDefs: [{ width: '50%', targets: 2 }],
            success: function(response) {
                if (response.success !== 1) {
                    $.notify('Failed to load budget data: ' + (response.message ||
                            'Unknown error'),
                        'error');
                    return;
                }

                let data = response.data;
                if (!Array.isArray(data)) {
                    $.notify('Invalid data format received from server', 'error');
                    console.error('Expected an array, received:', data);
                    return;
                }

                // Clear existing rows
                $tbody.html('');
                $totalBudgetCell.html('₹0');
                $totalContractsCell.html('0');
                $totalAmountCell.html('₹0');

                // Counter for Sr No
                let srNo = 1;

                // Append quarter and month rows
                data.forEach(quarter => {
                    if (quarter.quarter) {
                        $tbody.append(`<tr style="background:#e6edf5;">
                                            <td></td>
                                            <td class="finance_quarter"><b>${quarter.quarter}</b></td>
                                            <td><span class="badge text-bg-success"><i class="fa-solid fa-indian-rupee-sign me-1"></i> ${quarter.sanctioned_budget.toLocaleString('en-IN')}</span></td>
                                            <td><span class="badge text-bg-info">${quarter.approved_contracts}</span></td>
                                            <td><span class="badge text-bg-primary"><i class="fa-solid fa-indian-rupee-sign me-1"></i> ${quarter.approved_contract_amount.toLocaleString('en-IN')}</span></td>
                                        </tr>`);

                        quarter.months.forEach(month => {
                            // Include edit link if id exists (single division)
                            let editLink = month.id ? `
                                <div class="d-flex justify-content-center align-content-center">
                                    <span><i class="fa-solid fa-indian-rupee-sign me-1"></i> ${month.sanctioned_budget.toLocaleString('en-IN')}</span>&nbsp;
                                    <a href="javascript:void(0);" onClick="sanctionedBudgetUpdateFormSet('${month.id}', '${month.sanctioned_budget}')" data-bs-toggle="modal" data-bs-target="#sanctionedBudgetUpdateModal">
                                        <i class="fa-regular fa-edit text-primary me-2 fs-5"></i>
                                    </a>
                                </div>
                            ` : `
                                <div class="d-flex justify-content-center align-content-center">
                                    <span><i class="fa-solid fa-indian-rupee-sign me-1"></i> ${month.sanctioned_budget.toLocaleString('en-IN')}</span>
                                </div>`;

                            $tbody.append(`
                                <tr>
                                    <td>${srNo++}</td>
                                    <td>${month.month}</td>
                                    <td>${editLink}</td>
                                    <td><span class="badge text-bg-dark">${month.approved_contracts}</span></td>
                                    <td><i class="fa-solid fa-indian-rupee-sign me-1"></i> ${month.approved_contract_amount.toLocaleString('en-IN')}</td>
                                </tr>
                            `);
                        });
                    }
                });

                // Find totals
                let totals = data.find(item => item.totals)?.totals;
                if (totals) {
                    $totalBudgetCell.html(
                        `<span class="badge text-bg-success"><i class="fa-solid fa-indian-rupee-sign me-1"></i> ${totals.total_budget.toLocaleString('en-IN')}</span>`
                    );
                    $totalContractsCell.html(
                        `<span class="badge text-bg-info">${totals.total_contracts}</span>`);
                    $totalAmountCell.html(
                        `<span class="badge text-bg-primary"><i class="fa-solid fa-indian-rupee-sign me-1"></i> ${totals.total_amount.toLocaleString('en-IN')}</span>`
                    );
                } else {
                    $.notify('Totals data missing from server response', 'error');
                }
            },
            error: function(xhr, status, error) {
                if (xhr.status == 419) {
                    // Session expired, redirect to login and show notify
                    $.notify('Your session has expired. Please log in again.');
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                } else if (xhr.status == 500) {
                    $.notify("Please try after a few minutes", "error");
                } else {
                    $.notify(xhr.responseJSON?.message || "An unexpected error occurred", "error");
                }
                $("#sanctionedBudgetUpdateSubmitBtn").attr('disabled', false);
            }
        });
    }

    // record_id
    function getFinanceBudgetPaginateLogDataTable() {
        let recordId = $('#financeBudgetUpdateLogsViewBtn').attr('data-record_id');
        // console.info('getFinanceBudgetPaginateLogDataTable', recordId);

        financeBudgetLogDataTable = $('#financeBudgetUpdateLogsTable').DataTable({
            scrollX: true,
            destroy: true,
            processing: true,
            // pageLength: 25,
            serverSide: true,
            responsive: false,
            autoWidth: false,
            searching: false, // ❌ Disable search box
            info: false, // ❌ Hide "Showing X to Y of Z entries"
            ordering: false,
            ajax: {
                method: 'post',
                url: "{{ route('financeBudgetLogPaginate') }}",
                data: function(d) {
                    d._token = "{{ csrf_token() }}";
                    d.record_id = recordId;
                },
                error: function(xhr, status, error) {
                    if (xhr.status == 419) {
                        // Session expired, redirect to login and show notify
                        $.notify('Your session has expired. Please log in again.');
                        setTimeout(function() {
                            location.reload();
                        }, 1000);
                    } else if (xhr.status == 500) {
                        $.notify("Please try after a few minutes", "error");
                    } else {
                        $.notify(xhr.responseJSON?.message || "An unexpected error occurred", "error");
                    }
                }
            },
            "drawCallback": function(settings) {},
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'old_budget',
                    name: 'old_budget'
                },
                {
                    data: 'new_budget',
                    name: 'new_budget'
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                }
            ],
            columnDefs: [{
                "aTargets": [1, 2], // Column to target
                "mRender": function(data, type, full) {
                    if (data != null) {
                        return '<b><i class="fa-solid fa-indian-rupee-sign me-1"></i> ' + Number(
                            data).toLocaleString('en-IN', {
                            currency: 'INR'
                        }) + '</b>';
                    } else {
                        return '-';
                    }
                }
            }]
        });
    }


    $(document).ready(function() {
        // Select all options by default
        $('#division_filter').multipleSelect('checkAll');

        getCount();
        // Call dataTable Paginate on page load
        financeBudgetPaginate();

        // $('#financeBudgetUpdateLogsTable').on('shown.bs.modal', function() {
        //     $('.data-table-dr-12').DataTable().columns.adjust().draw();
        // });

        $('.data-table-dr-12').DataTable({
            scrollX: true,
            fixedHeader: true,
            paging: false, // ❌ Disable pagination
            searching: false, // ❌ Disable search box
            info: false, // ❌ Hide "Showing X to Y of Z entries"
            // pageLength: 1000,
            ordering: false
        });

        $('#sanctionedBudgetUpdateForm').validate({
            ignore: ".ignore",
            rules: {
                id: {
                    required: true
                },
                sanctioned_budget: {
                    required: true,
                    number: true
                }
            },
            messages: {
                id: {
                    required: "Please refresh the page"
                },
                sanctioned_budget: {
                    number: "The Sanctioned Budget must be a valid number."
                }
            },
            submitHandler: function(form) {
                $("#sanctionedBudgetUpdateSubmitBtn").attr('disabled', true);
                var formData = new FormData($("#sanctionedBudgetUpdateForm")[0]);
                $.ajax({
                    url: "{{ route('sanctionedBudgetUpdate') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(response) {
                        if (response.status == 1) {
                            $("#sanctionedBudgetUpdateModal").modal('hide');
                            $.notify(response.message, "success");

                            getCount();
                            financeBudgetPaginate();
                        } else {
                            $.notify(response.message, "warn");
                        }

                        $("#sanctionedBudgetUpdateSubmitBtn").attr('disabled', false);
                    },
                    error: function(xhr, status, error) {
                        if (xhr.status == 419) {
                            // Session expired, redirect to login and show notify
                            $.notify('Your session has expired. Please log in again.');
                            setTimeout(function() {
                                location.reload();
                            }, 1000);
                        } else if (xhr.status == 500) {
                            $.notify("Please try after a few minutes", "error");
                        } else {
                            $.notify(xhr.responseJSON?.message || "An unexpected error occurred", "error");
                        }
                        $("#sanctionedBudgetUpdateSubmitBtn").attr('disabled', false);
                    }
                });
            }
        });
    });
</script>