@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: 11px !important;
            border: 1px solid #dbdbdb !important;

        }

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

        tr.footerrow {
            font-weight: bold;
        }

        p.text-center.reportHeading {
            font-size: 13px;
        }

        @media only screen and (max-width: 1320px) {

            .select2-container {
                min-width: 100% !important;
                height: 33px;
                width: 13vw !important;
            }
        }
    </style>

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


                    <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="exportExcelButton">
                                    <i class="glyphicon glyphicon-plus-sign addIcon"></i>Excel
                                </a>
                            </div>
                        </div>


                        <div class="panel-body panelBodyView printIcon" id="printDiv">
                            @php
                                $searchElements = [
                                    ['element' => 'supplierId'],
                                    ['element' => 'group_id'],
                                    ['element' => 'category_id'],
                                    ['element' => 'sub_category_id'],
                                    ['element' => 'model_id'],
                                ];
                            @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: 11px !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: 11px !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>
                                </p>

                                <p class="text-right" style="color:#fff;">Printed Date: {{ date('d-m-Y') }}</p>
                                <table
                                    class="table table-striped table-bordered table-condensed first-col-dark dataTable no-footer"
                                    cellpadding="0" cellspacing="0" width="100">
                                    <thead>
                                        <tr>
                                            <th width="0"><b>SL No</b></th>
                                            <th class="text-nowrap"><b>Supplier Name</b></th>
                                            <th class="text-nowrap"><b>Group Name</b></th>
                                            <th class="text-nowrap"><b>Category Name</b></th>
                                            <th class="text-nowrap"><b>Sub Category Name</b></th>
                                            <th class="text-nowrap"><b>Brand Name</b></th>
                                            <th class="text-nowrap"><b>Model Name</b></th>
                                            <th class="text-nowrap"><b>Size</b></th>
                                            <th class="text-nowrap"><b>Color</b></th>
                                            <th class="text-nowrap"><b>UOM</b></th>
                                            <th class="text-nowrap"><b>Name</b></th>
                                            <th class="text-nowrap"><b>Barcode</b></th>
                                            <th class="text-nowrap"><b>Cost Price</b></th>
                                            <th class="text-nowrap"><b>Sale Price</b></th>
                                        </tr>

                                    </thead>
                                    <tbody id="table_data">
                                    </tbody>
                                    <tfoot align="right" id="table_footer_data">
                                    </tfoot>
                                </table>

                                <div id="forDownLoadExcelDiv" style="display: none;">
                                    {{-- <div id="forDownLoadExcelDiv"> --}}
                                    <p class="text-center reportHeadingForExcell">
                                        <span style="color:#fff;"><b>{{ $data['pageTitle'] }}</b></span><br>
                                        <span style="color:#fff;"><b><span>Branch Name: </span></b></span> <span
                                            id="brnachNameForExcell" style="color:#fff;"></span><br>
                                    </p>
                                    <table id="forDownLoadExcelTable"
                                        class="table table-striped table-bordered table-condensed first-col-dark dataTable no-footer"
                                        cellpadding="0" cellspacing="0" width="100">
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="{{ asset('js/eims/sheetjs/xlsx.full.min.js') }}"></script>
    <script>
        $(document).ready(function() {

            $('form').submit(function(event) {
                event.preventDefault();
                $('#daterange').html('');
                $('#table_footer_data').html('');
                // for as on date
                var datehtml = '';
                var branchhtml = '';
                var dateTo = $('#fillDateTo').val();
                datehtml = dateTo;
                $('#daterange').html(datehtml);

                $('#loadingModal').show();
                var form = $('form').serialize();
                $('#table_data').html('');
                $('#forDownLoadExcelTable').html('');
                //check date is selected or not

                // var supplierId = $('#supplier_id').val();
                // if (supplierId == "") {

                //     $('#loadingModal').hide();
                //     Swal.fire({
                //         icon: 'error',
                //         title: 'Please select supplier!',
                //         showConfirmButton: true,
                //     })
                //     return false;
                // }


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

                            var htmlBodyDataForViewReport = '';

                            var htmlTableDataForDownLoadExcel = '';

                            htmlTableDataForDownLoadExcel = '<thead><tr>';
                            htmlTableDataForDownLoadExcel += '<th width="0">sl_no</th>';
                            htmlTableDataForDownLoadExcel +=
                                '<th class="text-nowrap">supplier_name</th>';
                            htmlTableDataForDownLoadExcel +=
                                '<th class="text-nowrap">supplier_company_name</th>';
                            htmlTableDataForDownLoadExcel +=
                                '<th class="text-nowrap">supplier_email</th>';
                            htmlTableDataForDownLoadExcel +=
                                '<th class="text-nowrap">supplier_phone</th>';
                            htmlTableDataForDownLoadExcel +=
                                '<th class="text-nowrap">supplier_address</th>';
                            htmlTableDataForDownLoadExcel +=
                                '<th class="text-nowrap">supplier_web_site</th>';
                            htmlTableDataForDownLoadExcel +=
                                '<th class="text-nowrap">supplier_ref_no</th>';
                            htmlTableDataForDownLoadExcel +=
                                '<th class="text-nowrap">supplier_attention_one</th>';
                            htmlTableDataForDownLoadExcel +=
                                '<th class="text-nowrap">supplier_attention_two</th>';
                            htmlTableDataForDownLoadExcel +=
                                '<th class="text-nowrap">group_name</th>';
                            htmlTableDataForDownLoadExcel +=
                                '<th class="text-nowrap">category_name</th>';
                            htmlTableDataForDownLoadExcel +=
                                '<th class="text-nowrap">sub_category_name</th>';
                            htmlTableDataForDownLoadExcel +=
                                '<th class="text-nowrap">brand_name</th>';
                            htmlTableDataForDownLoadExcel +=
                                '<th class="text-nowrap">model_name</th>';
                            htmlTableDataForDownLoadExcel +=
                                '<th class="text-nowrap">size_name</th>';
                            htmlTableDataForDownLoadExcel +=
                                '<th class="text-nowrap">color_name</th>';
                            htmlTableDataForDownLoadExcel +=
                                '<th class="text-nowrap">uom_name</th>';
                            htmlTableDataForDownLoadExcel +=
                            '<th class="text-nowrap">name</th>';
                            htmlTableDataForDownLoadExcel +=
                                '<th class="text-nowrap">pre_barcode</th>';
                            htmlTableDataForDownLoadExcel +=
                                '<th class="text-nowrap">barcode</th>';
                            htmlTableDataForDownLoadExcel +=
                                '<th class="text-nowrap">cost_price</th>';
                            htmlTableDataForDownLoadExcel +=
                                '<th class="text-nowrap">sales_price</th>';
                            htmlTableDataForDownLoadExcel += '<th class="text-nowrap">old_company_name_from_import</th>';
                            htmlTableDataForDownLoadExcel += '</thead></tr>';

                            $.each(_response.data, function(key, value) {
                                serial++;
                                htmlBodyDataForViewReport = '<tr>';
                                htmlBodyDataForViewReport += '<td>' + serial + ' </td>';
                                htmlBodyDataForViewReport +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_supplier_name + ' </td>';
                                htmlBodyDataForViewReport +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_group_name + ' </td>';
                                htmlBodyDataForViewReport +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_category_name + '  </td>';
                                htmlBodyDataForViewReport +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_sub_category_name + '  </td>';
                                htmlBodyDataForViewReport +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_brand_name + '  </td>';
                                htmlBodyDataForViewReport +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_model_name + '  </td>';
                                htmlBodyDataForViewReport +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_size_name + '  </td>';
                                htmlBodyDataForViewReport +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_color_name + '  </td>';
                                htmlBodyDataForViewReport +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_uom_name + '  </td>';
                                htmlBodyDataForViewReport +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_name + '  </td>';
                                htmlBodyDataForViewReport +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_barcode + '  </td>';
                                htmlBodyDataForViewReport +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_cost_price + '  </td>';
                                htmlBodyDataForViewReport +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_sales_price + '  </td>';
                                htmlBodyDataForViewReport += '</tr> ';

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

                                htmlTableDataForDownLoadExcel += '<tr>';
                                htmlTableDataForDownLoadExcel += '<td>' + serial +
                                    ' </td>';
                                htmlTableDataForDownLoadExcel +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_supplier_name + ' </td>';
                                htmlTableDataForDownLoadExcel +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_supplier_company_name + ' </td>';
                                htmlTableDataForDownLoadExcel +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_supplier_email + ' </td>';
                                htmlTableDataForDownLoadExcel +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_supplier_phone + ' </td>';
                                htmlTableDataForDownLoadExcel +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_supplier_address + ' </td>';
                                htmlTableDataForDownLoadExcel +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_supplier_web_site + ' </td>';
                                htmlTableDataForDownLoadExcel +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_supplier_ref_no + ' </td>';
                                htmlTableDataForDownLoadExcel +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_supplier_attention_one + ' </td>';
                                htmlTableDataForDownLoadExcel +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_supplier_attention_two + ' </td>';
                                htmlTableDataForDownLoadExcel +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_group_name + ' </td>';
                                htmlTableDataForDownLoadExcel +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_category_name + ' </td>';
                                htmlTableDataForDownLoadExcel +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_sub_category_name + '  </td>';
                                htmlTableDataForDownLoadExcel +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_brand_name + '  </td>';
                                htmlTableDataForDownLoadExcel +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_model_name + '  </td>';
                                htmlTableDataForDownLoadExcel +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_size_name + '  </td>';
                                htmlTableDataForDownLoadExcel +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_color_name + '  </td>';
                                htmlTableDataForDownLoadExcel +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_uom_name + '  </td>';
                                htmlTableDataForDownLoadExcel +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_name + '  </td>';
                                htmlTableDataForDownLoadExcel +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_pre_barcode + '  </td>';
                                htmlTableDataForDownLoadExcel +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_barcode + '  </td>';
                                htmlTableDataForDownLoadExcel +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_cost_price + '  </td>';
                                htmlTableDataForDownLoadExcel +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_sales_price + '  </td>';
                                htmlTableDataForDownLoadExcel +=
                                    '<td  style="text-align:center"> ' + value
                                    .view_old_company_name_from_import + '  </td>';
                                htmlTableDataForDownLoadExcel += '</tr> ';
                            });
                            // var htmlFooterDataForViewReport = '';
                            // htmlFooterDataForViewReport = '<tr class="footerrow">';
                            // htmlFooterDataForViewReport +=
                            //     '<td style="text-align:center" class="text-nowrap" colspan="7">Total</td>';
                            // htmlFooterDataForViewReport +=
                            //     '<td style="text-align:center" class="text-nowrap">' +
                            //     finalToalQuantity + '</td>';
                            // htmlFooterDataForViewReport += '<td style="text-align:right" >' +
                            //     zerocheck(finalToalAmount) + '</td>';
                            // htmlFooterDataForViewReport += '</tr> ';

                            // $('#table_data').append(htmlFooterDataForViewReport);
                            $('#forDownLoadExcelTable').append(htmlTableDataForDownLoadExcel);


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

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

                    }
                });
            });

        });

        function zerocheck(value) {

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

        }


        document.getElementById('exportExcelButton').addEventListener('click', (event) => {
            event.preventDefault(); // Prevent default action if this button triggers one
            generateXLSX('xlsx'); // Call the export function
            //exportTableToText('forDownLoadExcelTable'); // Call the export function
        });

        function readTableData(tableId) {
            const table = document.getElementById(tableId); // Use tableId passed as argument
            const rows = table.getElementsByTagName('tr');
            const data = [];

            // Read headings (assuming headings are in the first row <th> elements)
            const headings = rows[0].getElementsByTagName('th');
            const headerData = [];
            for (let i = 0; i < headings.length; i++) {
                headerData.push(headings[i].textContent.trim()); // Trim spaces from header text
            }
            data.push(headerData); // Add headings as the first row

            // Read table rows
            for (let i = 1; i < rows.length; i++) {
                const cells = rows[i].getElementsByTagName('td');
                const rowData = [];
                for (let j = 0; j < cells.length; j++) {
                    rowData.push(cells[j].textContent.trim()); // Trim spaces from cell text
                }
                data.push(rowData);
            }

            return data;
        }

        // function readTableData(tableId) {
        //     const table = document.getElementById(tableId); // Use tableId passed as argument
        //     const rows = table.getElementsByTagName('tr');
        //     const data = [];

        //     // Read headings (assuming headings are in the first row <th> elements)
        //     const headings = rows[0].getElementsByTagName('th');
        //     const headerData = [];
        //     for (let i = 0; i < headings.length; i++) {
        //         headerData.push(headings[i].textContent);
        //     }
        //     data.push(headerData); // Add headings as the first row

        //     // Read table rows
        //     for (let i = 1; i < rows.length; i++) {
        //         const cells = rows[i].getElementsByTagName('td');
        //         const rowData = [];
        //         for (let j = 0; j < cells.length; j++) {
        //             rowData.push(cells[j].textContent);
        //         }
        //         data.push(rowData);
        //     }

        //     return data;
        // }

        function generateXLSX(fileFormat = 'xlsx') {
            const fileName1 = `pos_product_info_${new Date().toISOString().replace(/[:.]/g, '-')}`.toLowerCase();

            const tableData = readTableData('forDownLoadExcelTable'); // Pass tableId here
            const ws = XLSX.utils.aoa_to_sheet(tableData);
            const wb = XLSX.utils.book_new();

            XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

            let extension;
            switch (fileFormat.toLowerCase()) {
                case 'xls':
                    extension = '.xls';
                    break;
                case 'csv':
                    extension = '.csv';
                    break;
                case 'xlsx':
                default:
                    extension = '.xlsx';
                    break;
            }

            // Generate the file name with the specified extension
            const fileName = `${fileName1}${extension}`;

            // Save the file based on the format
            if (fileFormat === 'csv') {
                XLSX.writeFile(wb, fileName, {
                    bookType: 'csv'
                });
            } else if (fileFormat === 'xls') {
                XLSX.writeFile(wb, fileName, {
                    bookType: 'xls'
                });
            } else {
                XLSX.writeFile(wb, fileName, {
                    bookType: 'xlsx'
                });
            }
        }

        $("#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>
@endsection