@extends('layouts.excel')
@push('style')
<style>
    .x-spreadsheet-toolbar{
        width:100% !important;
    }
    /* .jss_worksheet > tbody > tr > td.readonly {
        color: #000 !important;
    } */
    .jss_worksheet > tbody > tr:first-child .readonly {
        color: #000 !important;
    }
    .jss_worksheet > tbody > tr > td {
        line-height: normal !important;
    }
    .jss_worksheet > thead > tr > td {
        text-align: center !important;
    }
    .jss_worksheet > tfoot > tr > td {
        text-align: center !important;
        font-weight: bold;
        background-color: transparent !important
    }
    .jss_worksheet > tfoot > tr > td:last-child {
        text-align: right !important;
        font-weight: bold;
        background-color: transparent !important
    }
    .jss_worksheet > tfoot > tr > td:first-child {
        background-color: #f3f3f3 !important
    }
    .jss_worksheet > tfoot > tr > td:last-child {
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        border-bottom: 3px solid #000;
        border-bottom-style: double;
    }
    .hidden-header{
        display: none;
    }
</style>
@endpush
@section('content')
<div class="row mt-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col"><h3>Tender owner tender summary excel<h3></div>
                    <div class="col">
                        <button class="btn btn-primary float-end">Save</button>
                        {{--<a href="{{route('showUploadExl')}}" class="btn btn-danger mx-2 float-end">Cancel</a> --}}
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div id='spreadsheet'></div>
                <div class="my-2 p-2"><small class="error text-danger"></small></div>
                <button class="btn btn-primary" id="btn1">Add Row</button>
                <button class="btn btn-danger" id="removeRow" style="display:none;">Remove Row</button>
            </div>
        </div>
    </div>
</div>
@endsection
@push('script')
<script>
    let rowSelection = [];
    // Regenrate the reference after selected row
    function regenrateReferenceAfterSelectedRow(){
        // get worksheet
        let worksheet =  table[0];
        // get length of worksheet
        let rowLength = worksheet.rows.length;
        for(let rows=1;rows<rowLength;rows++){
            let currentRowReferenceCellName = jspreadsheet.helpers.getCellNameFromCoords(0,rows);
            let previousRow =  jspreadsheet.helpers.getCellNameFromCoords(0,rows-1);
            let previousRowReferenceValue = worksheet.getValue(previousRow)!='Reference' ? worksheet.getValue(previousRow): 0;
            console.log('previousRowReferenceValue',previousRowReferenceValue);
            let newReference = parseInt(previousRowReferenceValue) + 1;
            worksheet.setValue(currentRowReferenceCellName,newReference,true);
        }
    }
    // Regenrate the price to 0 after selected row
    function regenratePriceAfterSelectedRow()
    {
        // get worksheet
        let worksheet =  table[0];
        // get length of worksheet
        let rowLength = worksheet.rows.length;
        for(let rows=1;rows<rowLength;rows++){
            let currentRowPricingCellName = jspreadsheet.helpers.getCellNameFromCoords(2,rows);
            worksheet.setValue(currentRowPricingCellName,0.00,true);
            // let currentRowPricingValue = worksheet.getValue(currentRowPricingCellName) != ''?worksheet.getValue(currentRowPricingCellName):0.00
        }
    }
    // validate the item description
    function validateRow () {
        // get worksheet
        let worksheet =  table[0];
        // get length of worksheet
        let rowLength = worksheet.rows.length;
        // error count if greater then 0 then return false (for not add the new row)
        let errorCount = 0;
        for(let rows=0;rows<rowLength;rows++){
            let row = worksheet.getRowData([rows]);
            let rowItemDescription = row[1];
            let rowPricing = row[2];
            let currentCellName = jspreadsheet.helpers.getCellNameFromCoords(1,rows);
            if(rowItemDescription == ''){
                worksheet.getCell(currentCellName).style.backgroundColor = 'red';
                $('.error').text('Section Heading cannot be empty');
                $('#btn1').attr('disabled',true);
                errorCount++;
            }
            else{
                worksheet.getCell(currentCellName).style.backgroundColor = 'transparent';
                $('.error').text('');
                $('#btn1').attr('disabled',false);
            }
        }

        // check if the errorCount is greater than 0 then return false(not to add the new row)
        if(errorCount > 0){
            console.log('errorCount',errorCount);
            return false;
        }else{
            rowSelection = [];
            return true;
        }
    }
    let update = function (instance, cell, x, y, value) {
        console.log('instance',instance);
        console.log('cell',cell);
        console.log('x',x);
        console.log('y',y);
        console.log('value',value);
        let worksheet =  table[0];
        // Logic to check group_heading validation
        if(x==1 && y!=0) {

            let previousCellName = jspreadsheet.helpers.getCellNameFromCoords(1,y-1);
            let previousRowValue = worksheet.getValue(previousCellName);
            let currentCellName = jspreadsheet.helpers.getCellNameFromCoords(1,y);
            let currentRowValue = worksheet.getValue(currentCellName);

            console.log('currentCellName',currentCellName);
            console.log('currentRowValue',currentRowValue);

            if(currentRowValue=='') {
                worksheet.getCell(currentCellName).style.backgroundColor = 'red';
                $('.error').text('Section Heading cannot be empty');
                $('#btn1').attr('disabled',true);
            }
            else{

                worksheet.getCell(currentCellName).style.backgroundColor = 'transparent';
                $('.error').text('');
                $('#btn1').attr('disabled',false);
            }

        }
    }
    let beforeInsertRow = (worksheet,rows) => {
        // let currentRowIndex = worksheet.rows.length;
        // let rowIndex = worksheet.rows.length -1;
        // let row = worksheet.getRowData([rowIndex]);
        // let rowItemDescription = row[1];
        // let rowPricing = row[2];

        // if(rowItemDescription == ''){
        //     let currentCellName = jspreadsheet.helpers.getCellNameFromCoords(1,y);
        //     $('.error').text('Section Heading cannot be empty');
        //     $('#btn1').attr('disabled',true);
        //     return false;
        // }
        // else{
        //     $('.error').text('');
        //     $('#btn1').attr('disabled',false);
        // }

        let validate = validateRow();
        return validate;

    }
    let afterInsertRow = (worksheet,rows) => {
        // let rowIndex = rowSelection[0];
        // console.log('afterRowSelection',rowSelection[0]);
        // let currentRow = worksheet.getRowData([rowIndex]);
        // let currentRowReferenceCellName = jspreadsheet.helpers.getCellNameFromCoords(0,rowIndex);
        // let currentRowPricingCellName = jspreadsheet.helpers.getCellNameFromCoords(2,rowIndex);
        // let previousRow = worksheet.getRowData([rowIndex-1]);
        // console.log('afterInsertPricingCellName',currentRowPricingCellName);
        // worksheet.setValue(currentRowPricingCellName,0.00,true);
        regenrateReferenceAfterSelectedRow();
        regenratePriceAfterSelectedRow();

    }
    let selectionRow = () => {
        rowSelection = [];
        let worksheet =  table[0];
        let selectedRows = worksheet.getSelectedRows();
        rowSelection = selectedRows;
        $('#removeRow').css('display','inline-block');
        console.log('selectionRow',selectedRows);
    }
    let deleteExcelRow = (rows) =>{
        let worksheet = table[0];
        let selectedRows = rowSelection;

        if(selectedRows.length == 0){
            alert('Please select the row');
        }else{
            let confirmation = confirm("Are you sure you want to delete the selected rows?");
            if(confirmation){
                // Loop through each selected row and delete
                let arr = selectedRows.filter(x => x !== 0);
                worksheet.deleteRow(arr[0],arr.length);
                // arr.forEach(function(rowIndex,index) {
                //     console.log('rowIndex',rowIndex);
                //     console.log('index',index);

                //     if(index > 0){
                //         rowIndex = rowIndex-1;
                //     }
                //     // Delete the row by index
                //     worksheet.deleteRow(rowIndex,1);

                // });
                rowSelection = [];
                regenrateReferenceAfterSelectedRow();
            }
        }
    }
    let onpaste = () =>{
        regenrateReferenceAfterSelectedRow();
        regenratePriceAfterSelectedRow();
    }
    const table = jspreadsheet(document.getElementById('spreadsheet'),{
        worksheets: [{
            minDimensions: [3,1],
            data:[['Reference','Section Heading','Price(£)'],['1','','0.00']],
            tableOverflow: true,
            style:{
                A1:"text-align:center;font-weight:bold",
                B1:"text-align:center;font-weight:bold",
                C1:"text-align:center;font-weight:bold",
            },
            columns: [
                {
                    type: 'text',
                    tooltip: 'Reference',
                    width: '100px',
                    readOnly:true
                },
                {
                    type: 'text',
                    tooltip: 'Section Heading',
                    width: '400px',
                    align:'left',
                    wordWrap:true,
                    render: function(td, value, x, y) {
                        if (y === 0) {
                            td.classList.add('readonly');
                        }
                    }
                },
                {
                    type: 'text',
                    tooltip: 'Price',
                    width: '200px',
                    align:'right',
                    mask:'#,##0.00',
                    readOnly:true,
                }
            ],
            footers: [
            [
                '',
                'Tender Sum (carried to Form of Tender)',
                '0.00',
            ],

        ],
        allowInsertColumn:false,
        }],
        onchange:update,
        onbeforeinsertrow:beforeInsertRow,
        oninsertrow:afterInsertRow,
        onselection: selectionRow,
        onpaste: onpaste,
        contextMenu: function() {
            return false;
        }
    })
    document.getElementById("btn1").onclick = () =>  table[0].insertRow(1,rowSelection[0]);
    document.getElementById("removeRow").onclick = () => {
        if(table[0].rows.length > 2)
        {
            deleteExcelRow();
        }else{
            return false;
        }

    };

    /** Window Scroll functionality */

    let lastScrollTop = 0;
    const header = document.querySelectorAll('thead tr')[0];
    const secondRow = document.querySelectorAll('tbody tr')[0]; // Assuming you want to hide the <thead> section

    window.addEventListener('scroll', function () {
    let currentScroll = window.pageYOffset || document.documentElement.scrollTop;

    // Detect scroll direction
    if (currentScroll > lastScrollTop) {
        // Scroll down, hide the header
        header.classList.add('hidden-header');
        // Make the second row sticky when scrolling down
        if (currentScroll > secondRow.offsetTop) {
            secondRow.style.position = 'sticky';
            secondRow.style.backgroundColor="#fff";
            secondRow.style.top = '0';  // This ensures the row stays at the top
        }
    } else {
        // Remove sticky positioning when at the top of the page
        if (currentScroll <= 0) {
            // Scroll up, show the header
            header.classList.remove('hidden-header');
            secondRow.style.position = 'relative';  // Remove sticky when at the top
        }
    }

    // Update the last scroll position
    lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
    }, false);
</script>
@endpush