@extends('layouts.app')
@section('title')
    SUPPLIER
@endsection
@section('button')
    <button class="btn btn-danger" id="export-btn">
        <i class="bi bi-download"></i> Export
    </button>
    <a type="button" class="btn btn-info" href="{{ route('supplier.create') }}">
        <i class="bi bi-plus-square"></i> Create
    </a>
@endsection
@section('content')
    <style>
        .table thead tr input {
            background: transparent;
            color: white;
        }
    </style>
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered m-0 datatable" id="Table">
                    <thead>
                        <tr>
                            <th>Sr.</th>
                            <th>Supplier Name</th>
                            <th>Supplier Code</th>
                            <th>Phone No</th>
                            <th>Fax</th>
                            <th>Address</th>
                            <th>Group</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <thead>
                        <tr>
                            <th></th>
                            <th><input type="text" id="search-name" placeholder="Search Name"></th>
                            <th><input type="text" id="search-code" placeholder="Search Code"></th>
                            <th><input type="text" id="search-contact" placeholder="Search Phone No"></th>
                            <th><input type="text" id="search-fax" placeholder="Search Fax"></th>
                            <th><input type="text" id="search-address" placeholder="Search Address"></th>
                            <th><input type="text" id="search-group" placeholder="Search Group"></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script>
        var searchTimeout;
        var data = "{{ route('supplier.data') }}";
        var table;
        let allData = {};
        $(document).ready(function() {
            let bool = true;
            const tableKey = 'DataTables_DataTables_Table_0_' + window.location.pathname;
            const savedState = localStorage.getItem(tableKey);

            if (savedState) {
                allData = JSON.parse(savedState);
                if (allData.columns) {
                    allData.columns.forEach((col, i) => {
                        if (col.search) {
                            $('thead tr:eq(1) th').eq(i).find('input').val(col.search);
                        }
                    });
                }

                if (allData.search && allData.search.sSearch) {
                    $('#dt-search-0').val(allData.search.sSearch);
                }
                bool = false;
            }
            
            var table = $('.datatable').DataTable({
                processing: true,
                serverSide: true,
                displayStart: allData.start || 0,
                pageLength: allData.length || 10,
                order: allData.order || [],
                search: allData.search || {},
                language: {
                    processing: 'Processing'
                },
                ajax: {
                    url: data,
                    type: 'GET',
                    data: function(d) {
                        d.name = $('#search-name').val();
                        d.code = $('#search-code').val();
                        d.contact = $('#search-contact').val();
                        d.fax = $('#search-fax').val();
                        d.address = $('#search-address').val();
                        d.group = $('#search-group').val();
                    d.bool = bool;
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    }, {
                        data: 'name',
                        name: 'name',
                    },
                    {
                        data: 'code',
                        name: 'code',
                    },
                    {
                        data: 'phone_no',
                        name: 'phone_no',
                    },
                    {
                        data: 'fax',
                        name: 'fax',
                    },
                    {
                        data: 'address',
                        name: 'address',
                        render: function(data, type, row) {
                            if (data && data.trim() !== '') {
                                return '<div class="description">' +
                                    '<p class="short-desc">' + data.substring(0, 100) + '</p>' +
                                    '<p class="full-desc" style="display:none;">' + data + '</p>' +
                                    '<a href="#" class="read-more">Read More</a>' +
                                    '</div>';
                            } else {
                                return '';
                            }
                        }
                    },
                    {
                        data: 'group',
                        name: 'group',
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ],
                paging: true,
                pagingType: 'input',
            });

            

            $('.datatable thead tr:eq(1) th').each(function(i) {
                $('input', this).on('keyup change', function() {
                    if (table.column(i).search() !== this.value) {
                        table
                            .column(i)
                            .search(this.value)
                            .draw();
                    }
                });
            });

            let state = table.state.loaded();
            if (state) {
                table.columns().eq(0).each(function (colIdx) {
                    var colSearch = state.columns[colIdx].search.search;
                    if (colSearch) {
                        $('input', $('.datatable thead tr:eq(1) th').eq(colIdx)).val(colSearch);
                    }
                });
            }


        });
    </script>

    <script>
        function exportToExcel() {
            const table = document.getElementById("Table");

            const buttons = table.querySelectorAll(".read-more");
            buttons.forEach(button => {
                button.style.display = "none";
                button.click();
            });

            const rows = table.querySelectorAll("tr");
            let csv = [];

            for (let i = 0; i < rows.length; i++) {
                const cells = rows[i].querySelectorAll("td, th");
                let row = [];

                for (let j = 0; j < cells.length; j++) {
                    if (j === cells.length - 1) {
                        continue;
                    }

                    row.push('"' + cells[j].innerText.replace(/"/g, '""') + '"');
                }

                csv.push(row.join(","));
            }

            const csvContent = "\uFEFF" + csv.join("\n");
            const blob = new Blob([csvContent], {
                type: 'text/csv;charset=utf-8;'
            });

            if (typeof navigator.msSaveOrOpenBlob === 'function') {
                navigator.msSaveOrOpenBlob(blob, "Supplier.csv");
            } else {
                const link = document.createElement('a');
                const csvUrl = URL.createObjectURL(blob);

                link.href = csvUrl;
                link.setAttribute('download', "Supplier.csv");
                link.style.visibility = 'hidden';

                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }

            buttons.forEach(button => {
                button.style.display = "inline";
                button.click();
            });
        }

        document.getElementById("export-btn").addEventListener("click", exportToExcel);
    </script>
@endsection