@extends('reachassuree_admin/layouts.main')
@section('title', $data['title'])
@section('content')

<style>
    .scrollable-menu {
        height: auto;
        max-height: 400px;
        overflow-x: hidden;
    }

    ::-webkit-scrollbar {
        width: 16px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #d6dee1;
        border-radius: 20px;
        border: 4px solid transparent;
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #a8bbbf;
    }

    ::-webkit-scrollbar-track {
        background-color: transparent;
    }
    input[type="radio"]:checked+label {
        background-color: #2762e4;
        color: #fff;
    }

    input[type="radio"]+label {
        display: inline-block;
        padding: 5px 10px;
        background-color: #f1f5fe;
        border-radius: 4px;
        cursor: pointer;
    }

    input[type="radio"] {
        display: none;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    th,
    td {
        border: 1px solid lightgray;
        padding: 8px;
        text-align: center;
    }

    th {
        background-color: #f2f2f2;
        vertical-align: middle;
    }

    div#datatable_info {
        display: none;
    }

    div#datatable_paginate {
        display: none;
    }

    div#table-responsive #datatable_wrapper #datatable tbody tr:nth-child(1) {
        display: none;
    }

    .table-responsive .dataTables_wrapper div.row:first-child {
        display: none;
    }


    #datatable tbody tr td:nth-child(7) {
        white-space: normal;
        word-wrap: break-word;
        font-size: smaller;

    }

    #datatable tbody tr td:nth-child(11) {
        white-space: normal;
        word-wrap: break-word;
        font-size: smaller;
    }

    #datatable tbody tr td:nth-child(15) {
        white-space: normal;
        word-wrap: break-word;
        max-width: 1000px;
        font-size: smaller;
    }

    #month.sorting_desc:after {
        content: none;
    }

    #month.sorting_desc::before {
        content: none;
    }

    #particulars.sorting_asc:after {
        content: none;
    }

    #particulars.sorting_asc::before {
        content: none;
    }

    .cal-year .form-check-label {
        padding: 10px 30px;
        margin-right: 5px;
    }

    .cal-year .form-check {
        padding-left: 0px !important;
    }

    input[type="checkbox"] {
        display: none;
    }

    .sorting_desc {
        padding: 0px 25px !important;
        vertical-align: middle;
    }

    #unit {
        vertical-align: middle;
    }

    #particulars {
        padding: 0px 25px !important;
        vertical-align: middle;
    }

    #particulars {
        padding: 0px 25px !important;
        vertical-align: middle;
    }

    input[type="checkbox"]+label {
        display: inline-block;
        padding: 5px 10px;
        background-color: #f1f5fe;
        border-radius: 4px;
        cursor: pointer;
    }

    input[type="checkbox"]:checked+label {
        background-color: #2762e4;
        color: #fff;
        pointer-events: none;
    }

 /*less than 575px*/
    @media only screen and (max-width: 991px) {
        .cal-year {
            justify-content: start !important;
            display: flex;
            margin-bottom: 10px;
            
        }
      
        .col-xxl-6.d-flex.justify-content-end.mb-3 {
            align-items: flex-start; /* Aligns the items to the start (top) of the flex container */
            padding-top: 0px; /* Adds padding at the top to achieve similar spacing without using negative margin */
            transform: translateY(-44px);
        }
    }

    @media only screen and (max-width: 425px) {
        .cal-year .form-check {
                padding-left: 45px !important;
        }
        .form-check, .form-check-input, .form-check-label {
            cursor: pointer;
            margin-bottom: 12px !important;
            font-size: 13px;
            letter-spacing: 0.3px;
        }
        .col-xxl-6.d-flex.justify-content-end.mb-3 {
            align-items: flex-start; /* Aligns the items to the start (top) of the flex container */
            padding-top: 19px; /* Adds padding at the top to achieve similar spacing without using negative margin */
            transform: translateY(-44px);
        }
         
    }



</style>

<div class="page-content">
    <div class="container-fluid">

        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0 font-size-18">
                <a href="javascript:void(0);" onclick="history.back();" class="btn btn-primary px-3 waves-effect waves-light btn-sm backToButton" id="backToButton"><i class="mdi mdi-arrow-left font-size-20"></i></a>&nbsp;&nbsp;&nbsp; {{$data['title']}}
            </h4>
        </div>

        <div class="card p-1">
            <div class="card-body">
                <div class="row">
                    <div class="col-xxl-8 col-lg-12 col-md-8 cal-year">
                        <div class="form-check ">
                            <input type="hidden" name="bussiness_hidden_id" id="bussiness_hidden_id" value="1">
                            <input type="hidden" name="operational_hidden_id" id="operational_hidden_id" value="0">
                            <input type="hidden" name="selectedYearChecked" id="selectedYearChecked" value="Financial_Year">
                            <input type="hidden" name="current_year_arrow" id="current_year_arrow" value="">
                            <input class="form-check-inline" type="checkbox" onchange="bussinessReviewCheckbox()" name="bussiness_review" id="bussiness_review" value="1" checked="checked">
                            <label class="form-check-label" for="bussiness_review">Bussiness Review Report </label>
                            <input class="form-check-inline" type="checkbox" onchange="operationalReviewCheckbox()" name="operational_review" id="operational_review" value="0">
                            <label class="form-check-label" for="operational_review">Operational Review Report</label>
                        </div>
                    </div>
                    <div class="col-xxl-4 col-lg-12 col-md-4 ">
                        <div class="mb-sm-4 font-size-18 float-end cal-year">
                            <div class="form-check">
                                <input class="form-check-inline" type="radio" name="calenderYear" id="Financial_Year" onclick="CalenderYear()" value="Financial_Year" checked="">
                                <label class="form-check-label" for="Financial_Year">Financial Year</label>
                                <input class="form-check-inline" type="radio" name="calenderYear" id="Calendar_Year" onclick="CalenderYear()" value="Calendar_Year">
                                <label class="form-check-label" for="Calendar_Year">Calendar Year</label>
                                <button class="btn btn-secondary down-pdf" onclick="return downloadPdf();" title="Download PDF" type="button"><span class="mdi mdi-download"></span></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="table-responsive">
                    <table id="datatable" class="table align-middle table-nowrap table-striped display nowrap w-100 scrollable-element plan ">
                        <thead class="table-light">
                            <tr>
                                <th rowspan="2" id="month">Month</th>
                                <th rowspan="2" id="particulars">Particulars</th>
                                <th rowspan="2" id="unit">Unit</th>
                                <th colspan="1"> <button class="btn btn-sm btn-primary navigator-left" onclick="navigatorArrowLeftYear()" title="Previour Year">
                                        <i class="mdi mdi-arrow-left-bold"></i>
                                    </button> </th>

                                <th colspan="3">
                                    <p id="navigatoryear" class="mb-0">Current Year</p>
                                    <p id="current_year" class="mb-0"></p>
                                </th>
                                <th colspan="4">Next Year <p id="next_year" class="mb-0"></p>
                                </th>
                                <th colspan="3">Next To Next Year <p id="next_to_next_year" class="mb-0"></p>
                                </th>
                                <th colspan="1"> <button class="btn btn-sm btn-primary navigator-right" onclick="navigatorArrowRightYear()" title="Next Year">
                                        <i class="mdi mdi-arrow-right-bold"></i>
                                    </button></th>
                            </tr>
                            <tr>
                                <th>Target</th>
                                <th>Achieved</th>
                                <th>Difference</th>
                                <th>Reason</th>
                                <th>Target</th>
                                <th>Achieved</th>
                                <th>Difference</th>
                                <th>Reason</th>
                                <th>Target</th>
                                <th>Achieved</th>
                                <th>Difference</th>
                                <th>Reason</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                    @csrf
                </div>
            </div>
        </div>

    </div>
</div>

@endsection

@section('custom-scripts')
<script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-validation.init.js') }}?v=2"></script>
<script src="{{ asset('assets/js/pages/kendo.all.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>
<script src="{{ asset('assets/js/pages/dataTables.rowsGroup.js') }}"></script>
<script type="text/javascript">
    var ajaxURLGetTarget = '{{route("target.report.ajax")}}';
    var ajaxURLGetTargetReason = "{{route('target.reason.ajax')}}";
    var targetReviewReasonDelete = "{{route('delete.target.reason')}}";
    var targetReviewReasonEdit = "{{route('edit.target.reason')}}";
    var targetReviewDelete = "{{route('delete.target')}}";
    var targetReviewEdit = "{{route('edit.target')}}";
    var table, table1;
    var bussiness_review;
    var operational_review;
    var csrfToken = $("[name=_token]").val();
    var year;
    var currentDate = new Date();
    var currentYear = currentDate.getFullYear();
    var nextYear = currentYear + 1;
    var nextToNextYear = currentYear + 2;
    var financialYear;
    var nextFinancialYear;
    var nextToNextFinancialYear;
    var prvYear = currentYear - 1;
    var buttonValue = 0;

    $(document).ready(function() {

        financialYear = getFinancialYear();
        nextFinancialYear = getNextFinancialYear();
        nextToNextFinancialYear = getNextToNextFinancialYear();
        CalenderYear()
        year = document.querySelector('input[name="calenderYear"]:checked').value;
        if (year == "Financial_Year") {
            $("#current_year").text(financialYear);
            $("#current_year_arrow").val(financialYear);
            $("#next_year").text(nextFinancialYear);
            $("#next_to_next_year").text(nextToNextFinancialYear);
        } else if (year == "Calendar_Year") {
            $("#current_year").text(currentYear);
            $("#next_year").text(nextYear);
            $("#next_to_next_year").text(nextToNextYear);
            $("#current_year_arrow").val(currentYear);
        }
    });

    function CalenderYear() {
        var csrfToken = $("[name=_token]").val();
        year = document.querySelector('input[name="calenderYear"]:checked').value;
        document.getElementById("current_year_arrow").value = financialYear;
        if (year == "Financial_Year") {
            $("#current_year").text(financialYear);
            document.getElementById("current_year_arrow").value = financialYear;
            $("#next_year").text(nextFinancialYear);
            $("#next_to_next_year").text(nextToNextFinancialYear);
        } else if (year == "Calendar_Year") {
            $("#current_year").text(currentYear);
            document.getElementById("current_year_arrow").value = currentYear;
            $("#next_year").text(nextYear);
            $("#next_to_next_year").text(nextToNextYear);
        }
        $("#selectedYearChecked").val(year);
        $('#datatable').DataTable().ajax.reload(null, false);
    }

    function navigatorArrowLeftYear() {
        year = document.querySelector('input[name="calenderYear"]:checked').value;
        buttonValue = $(".navigator-left").attr("title");
        if (year == "Financial_Year") {

            current_year = $("#current_year").text();
            var yearParts = current_year.split('-');
            var currentYearNumber = parseInt(yearParts[0], 10);
            var previousYearNumber = currentYearNumber - 1;
            var previousYearNextNumber = currentYearNumber + 1;
            var previousYearNextToNextNumber = previousYearNextNumber + 1;
            var previousYearText = previousYearNumber + '-' + currentYearNumber.toString().substring(2);
            var previousNextYearText = currentYearNumber.toString() + '-' + previousYearNextNumber.toString().substring(2);
            var previousNextToNextYearText = previousYearNextNumber.toString() + '-' + previousYearNextToNextNumber.toString().substring(2);

            document.getElementById("current_year_arrow").value = previousYearText;
            $("#navigatoryear").text('Previous Year');
            $("#current_year").text(previousYearText);
            $("#next_year").text(previousNextYearText);
            $("#next_to_next_year").text(previousNextToNextYearText);
            $('#datatable').DataTable().ajax.reload(null, false);

        } else if (year == "Calendar_Year") {
            current_year = $("#current_year").text();
            current_year = current_year - 1;
            $("#navigatoryear").text('Previous Year');
            $("#current_year").text(current_year);
            $("#next_year").text(current_year + 1);
            $("#next_to_next_year").text(current_year + 2);
            document.getElementById("current_year_arrow").value = current_year;
            $('#datatable').DataTable().ajax.reload(null, false);
        }

    }

    function navigatorArrowRightYear() {

        year = document.querySelector('input[name="calenderYear"]:checked').value;
        buttonValue = $(".navigator-right").attr("title");
        if (year == "Financial_Year") {

            current_year = $("#current_year").text();
            var yearParts = current_year.split('-');
            var currentYearNumber = parseInt(yearParts[0], 10);
            var previousYearNumber = currentYearNumber + 1;
            var previousYearNextNumber = currentYearNumber + 2;
            var previousYearNextToNextNumber = previousYearNextNumber + 1;
            var NextToNextNumber = previousYearNextNumber + 2;
            var previousYearText = previousYearNumber + '-' + previousYearNextNumber.toString().substring(2);
            var previousNextYearText = previousYearNextNumber.toString() + '-' + previousYearNextToNextNumber.toString().substring(2);
            var previousNextToNextYearText = previousYearNextToNextNumber.toString() + '-' + NextToNextNumber.toString().substring(2);
            var currentDate = new Date();
            var currentMonth = currentDate.getMonth() + 1; // Months are zero-indexed in JavaScript, so we add 1

            // Determine financial year start and end months
            var fiscalYearStartMonth = 4; // April
            var fiscalYearEndMonth = 3; // March

            // Calculate the financial year based on the current date
            var financialYear = currentMonth >= fiscalYearStartMonth ?
                currentDate.getFullYear() :
                currentDate.getFullYear() - 1;

            // Convert the financial year to the desired format
            var endYear = financialYear.toString().slice(-2); // Extract the last two digits
            var financialYearFormatted = financialYear - 1 + "-" + endYear;

            if (financialYearFormatted > current_year) {
                $("#navigatoryear").text('Previous Year');
            } else if (financialYearFormatted < current_year) {
                $("#navigatoryear").text('Current Year');
            } else {
                $("#navigatoryear").text('Current Year');
            }
            document.getElementById("current_year_arrow").value = previousYearText;
            $("#current_year").text(previousYearText);
            $("#next_year").text(previousNextYearText);
            $("#next_to_next_year").text(previousNextToNextYearText);
            $('#datatable').DataTable().ajax.reload(null, false);
        } else if (year == "Calendar_Year") {
            var current_year = parseInt($("#current_year").text());
            current_year = current_year + 1;
            var currentYearFormatted = new Date().getFullYear();
            if (currentYearFormatted > current_year) {
                $("#navigatoryear").text('Previous Year');
            } else if (currentYearFormatted < current_year) {
                $("#navigatoryear").text('Current Year');
            } else {
                $("#navigatoryear").text('Current Year');
            }
            $("#current_year").text(current_year);
            $("#next_year").text(current_year + 1);
            $("#next_to_next_year").text(current_year + 2);
            document.getElementById("current_year_arrow").value = current_year;
            $('#datatable').DataTable().ajax.reload(null, false);
        }

    }

    function getFinancialYear() {
        const currentDate = new Date();
        const currentYear = currentDate.getFullYear();
        const financialYearStartMonth = 4; // April

        if (currentDate.getMonth() + 1 < financialYearStartMonth) {
            // If the current month is before April, consider the previous year as the start of the financial year
            return `${currentYear - 1}-${currentYear.toString().slice(2)}`;
        } else {
            // If the current month is April or later, consider the current year as the start of the financial year
            return `${currentYear}-${(currentYear + 1).toString().slice(2)}`;
        }
    }

    function getNextFinancialYear() {
        const currentDate = new Date();
        const currentYear = currentDate.getFullYear();
        const financialYearStartMonth = 4; // April

        if (currentDate.getMonth() + 1 < financialYearStartMonth) {
            // If the current month is before April, consider the next year as the start of the financial year
            return `${currentYear}-${(currentYear + 1).toString().slice(2)}`;
        } else {
            // If the current month is April or later, consider the next year as the start of the financial year
            return `${currentYear + 1}-${(currentYear + 2).toString().slice(2)}`;
        }
    }

    function getNextToNextFinancialYear() {
        const currentDate = new Date();
        const currentYear = currentDate.getFullYear();
        const financialYearStartMonth = 4; // April

        if (currentDate.getMonth() + 1 < financialYearStartMonth) {
            // If the current month is before April, consider the year after the next year as the start of the financial year
            return `${currentYear + 1}-${(currentYear + 2).toString().slice(2)}`;
        } else {
            // If the current month is April or later, consider the year after the next year as the start of the financial year
            return `${currentYear + 2}-${(currentYear + 3).toString().slice(2)}`;
        }
    }

    function bussinessReviewCheckbox() {
        var checkbox1 = document.getElementById("bussiness_review");
        var checkbox2 = document.getElementById("operational_review");
        var csrfToken = $("[name=_token]").val();
        if (checkbox1.checked) {
            checkbox2.checked = false;
            $("#bussiness_hidden_id").val(1);
            $("#operational_hidden_id").val(0);
            $('#datatable').DataTable().ajax.reload(null, false);
        } else {
            checkbox1.checked = false;
            $('#datatable').DataTable().ajax.reload(null, false);
        }
    }

    function operationalReviewCheckbox() {

        var checkbox1 = document.getElementById("bussiness_review");
        var checkbox2 = document.getElementById("operational_review");

        if (checkbox2.checked) {
            //  value 1 consider checked 
            $("#bussiness_hidden_id").val(0);
            $("#operational_hidden_id").val(1);
            checkbox1.checked = false;
            $('#datatable').DataTable().ajax.reload(null, false);
        } else {
            checkbox2.checked = false;
            $('#datatable').DataTable().ajax.reload(null, false);
        }
    }
    
    var table = $('#datatable').DataTable({
        "aoColumnDefs": [{"bSortable": false,"aTargets": []}],
        "order": [[0, 'desc']],
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() {return $(window).height() - 320;},
        "lengthMenu": [[10, 50, 100, 150],[10, 50, 100, 150]],
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxURLGetTarget,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "bussiness_hidden_id": function() {return $("#bussiness_hidden_id").val();},
                "operational_hidden_id": function() {return $("#operational_hidden_id").val();},
                "selectedYearChecked": function() {return $("#selectedYearChecked").val();},
                "current_year_left_arrow": function() {return $("#current_year_arrow").val();},
                "navigator_arrow": function() {return buttonValue;},
            },
        },
        "aoColumns": [
            {"mData": "month","bSortable": false},
            {"mData": "particulars","bSortable": false},
            {"mData": "unit","bSortable": false},
            {"mData": "current_year_target_set","bSortable": false},
            {"mData": "current_year_achieved","bSortable": false},
            {"mData": "current_year_difference","bSortable": false},
            {"mData": "reason","bSortable": false,"sWidth": "190px"},
            {"mData": "previours_year_target_set","bSortable": false},
            {"mData": "previours_year_achieved","bSortable": false},
            {"mData": "previours_year_difference","bSortable": false},
            {"mData": "reason1","bSortable": false,"sWidth": "190px"},
            {"mData": "next_previours_year_target_set","bSortable": false},
            {"mData": "next_previours_year_achieved","bSortable": false},
            {"mData": "next_previours_year_difference","bSortable": false},
            {"mData": "reason2","bSortable": false,"sWidth": "190px"},
        ],
        "rowsGroup": [0, 1],
    });

    table.on("xhr", function() {
        var responseData = table.ajax.json();

        if (responseData["recordsTotal"] === 0) {
            if (responseData["navigatorArrow"] === 'Previour Year') {
                $(".navigator-left").prop("disabled", true);
                $(".navigator-right").prop("disabled", false);
            } else if (responseData["navigatorArrow"] === 'Next Year') {
                $(".navigator-right").prop("disabled", true);
                $(".navigator-left").prop("disabled", false);
            } else {
                $(".navigator-right, .navigator-left").prop("disabled", false);
            }

        } else {
            $(".navigator-right, .navigator-left").prop("disabled", false);
        }
    });

    // download pdf for target review
    var downloadReportPdf = "{{ route('download.target.review.pdf') }}";

    function downloadPdf() {
        var objectS = table.ajax.json().data;
        if (objectS.length != 0) {
            $.ajax({
                type: 'POST',
                url: downloadReportPdf,
                "data": {
                    "_token": csrfToken,
                    "ids": JSON.stringify(objectS),
                    "current_year": $("#current_year").html(),
                    "next_year": $("#next_year").html(),
                    "next_to_next_year": $("#next_to_next_year").html(),
                },
                beforeSend: function() {
                    $('#preloader').show();
                    $('#preloader').css('background-color', '#ffffff69');
                    $('#status').show();
                },
                success: function(resultData) {
                    $('#status').hide();
                    $('#preloader').hide();
                    path = resultData['path'];
                    window.open(path, '_blank');
                }
            });
        } else {
            toastr["error"]("Data Not Found ");
        }
    }
</script>
@endsection