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

<style>
    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,
    div#datatable_paginate,
    div#table-responsive #datatable_wrapper #datatable tbody tr:nth-child(1),
    .table-responsive .dataTables_wrapper div.row:first-child {
        display: none;
    }

    #datatable tbody tr td:nth-child(7),
    #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,
    #month.sorting_desc::before,
    #department.sorting_asc:after,
    #department.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,
    #department {
        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;
    }

    @media only screen and (max-width: 1399px) {
        .cal-year {
            justify-content: center !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(10px);
            margin-left: 13px;
            justify-content: center !important;
        }
    }

    @media only screen and (max-width: 600px) {
        .cal-year {
            flex-wrap: wrap; /* Allow items to wrap if necessary */
            justify-content: space-between;
            padding: 5px;
            overflow-x: auto;
        }

        .cal-year .form-check-label {
            padding: 5px 10px;
            white-space: nowrap;
        }

        .cal-year .form-check {
            display: flex;
        }
       
        .form-check, .form-check-input, .form-check-label {
            cursor: pointer;
            font-size: 12px;
            letter-spacing: 0.3px;
        }

        .btn.btn-secondary {
            font-size: 10px; /* Adjust font size */
            padding: 5px 10px; /* Adjust padding to make the button smaller */
        }

        .mdi-download {
            font-size: 12px; /* Adjust icon size if needed */
        }
    }
     
    @media only screen and (max-width: 450px) {
        .cal-year {
            justify-content: space-between !important;
        }

        .col-xxl-6.d-flex.justify-content-end.mb-3 {
            margin-left: 0px;
        }
    }
    .btn-top-bottom-set{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 44px;
    }
   .btn-width-set{
        width:60px;
    }
</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-6 cal-year">
                        <div class="form-check ">
                            <input type="hidden" name="bussiness_review_report" id="bussiness_review_report" value="1">
                            <input type="hidden" name="commission_review_report" id="commission_review_report" 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="radio" 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="radio" onchange="CommissionReviewCheckbox()" name="commission_review" id="commission_review" value="0">
                            <label class="form-check-label" for="commission_review">Commission Review Report</label>
                        </div>
                    </div>
                    <div class="col-xxl-6 d-flex justify-content-end mb-3">
                        <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" 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="department">Department</th>
                                <th rowspan="2" id="factor">Factor</th>
                                <th colspan="1" class="btn-top-bottom-set">
                                    <button class="btn btn-sm btn-primary navigator-left btn-width-set" onclick="navigatorArrowLeftYear()" title="Previous Year">
                                        <i class="mdi mdi-arrow-left-bold"></i>
                                    </button>
                                    <button class="btn btn-sm btn-primary navigator-right btn-width-set" onclick="navigatorArrowRightYear()" title="Next Year">
                                        <i class="mdi mdi-arrow-right-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" class="btn-top-bottom-set">
                                    <button class="btn btn-sm btn-primary navigator-right btn-width-set" onclick="navigatorArrowRightYear()" title="Next Year">
                                        <i class="mdi mdi-arrow-right-bold"></i>
                                    </button>
                                    <button class="btn btn-sm btn-primary navigator-left btn-width-set" onclick="navigatorArrowLeftYear()" title="Previous Year">
                                        <i class="mdi mdi-arrow-left-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.reviews.report.ajax")}}';
    var table;
    var bussiness_review;
    var commission_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 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, #current_year_arrow").text(financialYear);            
            $("#next_year").text(nextFinancialYear);
            $("#next_to_next_year").text(nextToNextFinancialYear);
        } else if (year == "Calendar_Year") {
            $("#current_year, #current_year_arrow").text(currentYear);
            $("#next_year").text(nextYear);
            $("#next_to_next_year").text(nextToNextYear);
        }
    });

    function CalenderYear() {
        year = document.querySelector('input[name="calenderYear"]:checked').value;
        document.getElementById("current_year_arrow").value = financialYear;

        if (year == "Financial_Year") {
            $("#current_year").text(financialYear);
            $("#next_year").text(nextFinancialYear);
            $("#next_to_next_year").text(nextToNextFinancialYear);
            
            document.getElementById("current_year_arrow").value = financialYear;

        } else if (year == "Calendar_Year") {
            $("#current_year").text(currentYear);
            $("#next_year").text(nextYear);
            $("#next_to_next_year").text(nextToNextYear);
            
            document.getElementById("current_year_arrow").value = currentYear;
        }

        $("#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("commission_review");

        if (checkbox1.checked) {
            checkbox2.checked = false;
            
            $("#bussiness_review_report").val(1);
            $("#commission_review_report").val(0);

        } else {
            checkbox1.checked = false;
        }

        $('#datatable').DataTable().ajax.reload(null, false);
    }

    function CommissionReviewCheckbox() {
        var checkbox1 = document.getElementById("bussiness_review");
        var checkbox2 = document.getElementById("commission_review");

        if (checkbox2.checked) {
            checkbox1.checked = false;

            $("#bussiness_review_report").val(0);
            $("#commission_review_report").val(1);

        } 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() - 350; },
        "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_review_report": function() {return $("#bussiness_review_report").val();},
                "commission_review_report": function() {return $("#commission_review_report").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": "department","bSortable": false,},
            {"mData": "factor","bSortable": false,},
            {"mData": "current_year_target_set","bSortable": false,
                "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).css('text-align', 'right');
                    }
            },
            {"mData": "current_year_achieved","bSortable": false,
                "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).css('text-align', 'right');
                    }
            },
            {"mData": "current_year_difference","bSortable": false,
                "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).css('text-align', 'right');
                    }
            },
            {"mData": "reason","bSortable": false,"sWidth": "190px",},
            {"mData": "previours_year_target_set","bSortable": false,
                "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).css('text-align', 'right');
                    }
            },
            {"mData": "previours_year_achieved","bSortable": false,
                "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).css('text-align', 'right');
                    }
            },
            {"mData": "previours_year_difference","bSortable": false,
                "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).css('text-align', 'right');
                    }
            },
            {"mData": "reason1","bSortable": false,"sWidth": "190px",},
            {"mData": "next_previours_year_target_set","bSortable": false,
                "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).css('text-align', 'right');
                    }
            },
            {"mData": "next_previours_year_achieved", "bSortable": false,
                "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).css('text-align', 'right');
                    }
            },
            {"mData": "next_previours_year_difference","bSortable": false,
                "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).css('text-align', 'right');
                    }
            },
            {"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"] === 'Previous 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('target.review.report.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() {
                   showLoader();
                },
                success: function(resultData) {
                    hideLoader();
                    
                    path = resultData['path'];
                    window.open(path, '_blank');
                }
            });
        } else {
            toastr["error"]("Data Not Found ");
        }
    }
</script>
@endsection