@extends('layouts/pos_layout')
@section('title', '| ' . $data['pageTitle'])
@section('content')
<style>
    .page-item.active .page-link {
        background-color: lightgrey !important;
        border: 1px solid black;
    }

    .page-link {
        color: black !important;
    }

    .table.table-condensed>thead>tr>td,
    .table.table-condensed>tbody>tr>td,
    .table.table-condensed>tfoot>tr>td,
    .table.table-condensed>thead>tr>th,
    .table.table-condensed>tbody>tr>th,
    .table.table-condensed>tfoot>tr>th {
        padding: 5px 3px !important;
        font-size: 10px !important;
        border: 1px solid #dbdbdb !important;

    }

    .table thead tr th {
        font-size: 8px !important;
    }

    tr.footerrow {
        font-weight: bold;
    }

    p.text-center.reportHeading {
        font-size: 15px;
    }
</style>

<div class="row page-wrap ">
    <div class="col-md-12">
        <div>
            <div>


                <div class="panel panel-default" style="background-color:#708090;">
                    <div class="panel-heading" style="padding-bottom:0px">
                        <div class="panel-title">
                            <h2>{{$data['pageTitle']}}</h2>
                        </div>
                        <div class="panel-options">
                            <a href="" class="btn btn-info pull-right addViewBtn printIcon" id="printIcon">
                                <i class="glyphicon glyphicon-plus-sign addIcon"></i>Print
                            </a>
                        </div>
                        <div class="panel-options">
                            <button class="btn btn-info pull-right addViewBtn" onclick="exportTableToExcel('tblData','Incentive_Report_{{ date('Y-m-d') }}')"><i class="glyphicon glyphicon-plus-sign addIcon"></i>Export</button>
                        </div>
                    </div>


                    <div class="panel-body panelBodyView printIcon" id="printDiv">
                        @php

                        $searchElements = [
                        ['element' => 'branchId'],
                        ['element' => 'IncentiveTypeId'],
                        ['element' => 'fillEmployeeStatus'],
                        ['element' => 'dateTo'],
                        ];
                        @endphp
                        @include('partials.searchPanel.main', ['searchElements' => $searchElements])

                        <div class="row vert-offset-top-2" id="stockReportPdf">

                            <style>
                                @media print {

                                    #stockReportPdf {
                                        visibility: visible;
                                        overflow-x: unset;
                                    }

                                    .text-nowrap {
                                        white-space: normal;
                                    }

                                    table th {
                                        border-top: 1px solid red !important;
                                    }

                                    .table thead tr th {
                                        font-size: 8px !important;
                                        border: 1px solid #474444 !important;
                                        font-weight: bold;
                                    }

                                    .table thead tr td {
                                        border: 1px solid #848484 !important;
                                    }

                                    .table.table-condensed>tbody>tr>td {
                                        border: 1px solid #848484 !important;
                                        color: #000 !important;
                                        padding: 5px 2px !important;
                                        font-size: 7px !important;
                                    }

                                    .table.table-condensed>tfoot>tr>th {
                                        border: 1px solid #827a7a !important;
                                        border-left: 1px solid #827a7a !important;
                                        border-right: 1px solid #827a7a !important;
                                    }

                                    tr.footerrow {
                                        font-weight: bold;
                                    }

                                    p.text-center.reportHeading {
                                        font-size: 15px;
                                    }
                                }
                            </style>
                            <p class="text-center reportHeading">
                                <span class="companyNameData" style="color:#fff;"><b> {{ $data['company']->name }} </b></span><br>
                                <span style="color:#fff;font-size:11px;"><b>{{$data['company']->address}}</b></span><br>
                                <span style="color:#fff;"><b>{{$data['pageTitle']}}</b></span><br>
                                <span style="color:#fff;"><b>Branch Name: </b></span> <span id="brnachName" style="color:#fff;"></span><br>
                                <span style="color:#fff;"><b>As on:</b> </span><span id="daterange" style="color:#fff;"></span><br>
                            </p>

                            <div class="row">
                                <div class="col-md-6">
                                </div>
                                <div class="col-md-6">
                                    <p style="text-align: right;color:#fff;"><b>Printed Date: 21-07-2026</b></p>
                                </div>
                            </div>
                            <table id="tblData" class="table table-striped table-bordered table-condensed first-col-dark dataTable no-footer" cellpadding="0" cellspacing="0" width="100">
                                <thead>
                                    <tr>
                                        <th >SL No.</th>
                                        <th >EMPLOYEE NAME</th>
                                        <th >EMPLOYEE ID</th>
                                        <th >DESIGNATION</th>
                                        <th >ROCKET ACCOUNT NO</th>
                                        <th >PREVIOUS MONTH SALE</th>
                                        <th >CURRENT MONTH SALE</th>
                                        <th >SALE INCREASE PERCENT</th>

                                    </tr>

                                </thead>
                                <tbody id="table_data">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {


        $('form').submit(function(event) {

            $('#brnachName').html('');
            $('#daterange').html('');

            var datehtml = '';
            var branchhtml = '';

            $('#loadingModal').show();
            $('#table_footer_data').html('');
            var form = $('form').serialize();
            $('#table_data').html(''),
                event.preventDefault();
            var enddate = $('#fillDateTo').val();

            if (enddate == "") {
                $('#loadingModal').hide();
                Swal.fire({
                    icon: 'error',
                    title: 'Please select end date first!',
                    showConfirmButton: true,
                })
                return false;
            }

            $.ajax({
                type: 'post',
                url: '{{ Request::url() }}',
                data: $('form').serialize(),
                dataType: 'json',
                success: function(_response) {
                    $('#loadingModal').hide();
                    console.log(_response.data);
                    //$('#loadingModal').hide();
                    if (_response.responseTitle == 'success') {
                        $('#brnachName').html(_response.branch);
                        $('#daterange').html(_response.seachmonth);

                        var html = '';

                        var totalPreviousMonthSaleAmount = 0;
                        var totalCurrentMonthSaleAmount = 0;

                        $.each(_response.data, function(key, value) {
                                html = '<tr >';
                                html += '<td style="text-align:center"> ' + value.sl + '</td>';
                                html += '<td class="text-nowrap">' + value.employee_name + '</td>';
                                html += '<td class="text-nowrap" style="text-align:center">' + value.employee_no + '</td>';
                                html += '<td class="text-nowrap" style="text-align:center">' + value.employee_position + '</td>';
                                html += '<td class="text-nowrap" style="vnd.ms-excel.numberformat:\@;text-align:center">' + value.employee_rocket_account + ' </td>';
                                html += '<td class="text-nowrap" style="text-align:right">' + zerocheck(value.view_previous_month_sale_amount) + ' </td>';
                                html += '<td class="text-nowrap" style="text-align:right">' + zerocheck(value.view_current_month_sale_amount) + ' </td>';
                                html += '<td class="text-nowrap" style="text-align:center">' + value.view_percent + '% </td>';
                                html += '</tr> ';

                                $('#table_data').append(html);

                                totalPreviousMonthSaleAmount += parseFloat(value.view_previous_month_sale_amount);
                                totalCurrentMonthSaleAmount += parseFloat(value.view_current_month_sale_amount);
                        });

                        var footer = '';

                        footer = '<tr style="font-weight:bold">';
                        footer += '<td class="text-nowrap" colspan="5" style="text-align:center"> TOTAL </td>';
                        footer += '<td class="text-nowrap" style="text-align:right"> ' + zerocheck(totalPreviousMonthSaleAmount) + ' </td>';
                        footer += '<td class="text-nowrap" style="text-align:right"> ' + zerocheck(totalCurrentMonthSaleAmount) + ' </td>';
                        footer += '<td class="text-nowrap" style="text-align:right"></td>';

                        footer += '</tr> ';

                        $('#table_data').append(footer);


                    } else {
                        $('#loadingModal').hide();
                        Swal.fire({
                            icon: 'error',
                            title: 'Something went wrong!',
                            showConfirmButton: true
                        })
                        return false;
                    }

                },
                error: function(_response) {
                    $('#loadingModal').hide();
                    toastr.error('_response.errors');

                }
            });
        });
    });

    function zerocheck(value) {

        if (value == 0) {
            return "-";
        } else {
            return value.toLocaleString("en-IN", {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });
            // return value.toLocaleString("bn-BD",2);

        }

    }

    $("#printIcon").click(function() {

        var printContents = document.getElementById("stockReportPdf").innerHTML;
        var printStyle = '<style>@page {size: auto;margin: 0mm;margin-top:20px;margin-bottom:20px;margin-right:10px;} @media print  { .table thead tr th {white-space: normal;} #stockReportPdf {width: 100%;height: auto;overflow: visible;} }</style>';
        var printDiv = '<div id="order-details-wrapper" style="margin-top:25px;padding-left:10px;padding-right:10px;">' + printStyle + printContents + '</div>';

        document.body.innerHTML = printDiv;

        var originalContents = document.body.innerHTML;
        window.print();
        document.body.innerHTML = originalContents;
        // location.reload();

    });
</script>
<script>
    function exportTableToExcel(tableID, filename = ''){
        var downloadLink;
        var dataType = 'application/vnd.ms-excel';
        var tableSelect = document.getElementById(tableID);
        var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');

        // Specify file name
        filename = filename?filename+'.xls':'incentive_report.xls';

        // Create download link element
        downloadLink = document.createElement("a");

        document.body.appendChild(downloadLink);

        if(navigator.msSaveOrOpenBlob){
            var blob = new Blob(['\ufeff', tableHTML], {
                type: dataType
            });
            navigator.msSaveOrOpenBlob( blob, filename);
        }else{
            // Create a link to the file
            downloadLink.href = 'data:' + dataType + ', ' + tableHTML;

            // Setting the file name
            downloadLink.download = filename;

            //triggering the function
            downloadLink.click();
        }
    }
</script>
@endsection