@extends('indexlayout')

@section('title', 'Dinas')
@push('style')
@endpush
@section('content')
    <main id="js-page-content" role="main" class="page-content">
        <ol class="breadcrumb page-breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);">SmartAdmin</a></li>
            <li class="breadcrumb-item">Datatables</li>
            <li class="breadcrumb-item active">AltEditor (beta)</li>
            <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
        </ol>
        <div class="subheader">
            <h1 class="subheader-title">
                <i class='subheader-icon fal fa-table'></i> DataTables: <span class='fw-300'>AltEditor (beta)</span> <sup
                    class='badge badge-primary fw-500'>ADDON</sup>
                <small>
                    Custom made editor plugin designed for Datatables
                </small>
            </h1>
        </div>
        <div class="alert alert-primary">
            <div class="d-flex flex-start w-100">
                <div class="mr-2 hidden-md-down">
                    <span class="icon-stack icon-stack-lg">
                        <i class="base base-2 icon-stack-3x opacity-100 color-primary-500"></i>
                        <i class="base base-2 icon-stack-2x opacity-100 color-primary-300"></i>
                        <i class="fal fa-info icon-stack-1x opacity-100 color-white"></i>
                    </span>
                </div>
                <div class="d-flex flex-fill">
                    <div class="flex-fill">
                        <span class="h5">About</span>
                        <p>
                            DataTables AltEditor is a MIT licensed free editor. The plugin adds capabilities to add, edit
                            and delete rows in your datatables through the use of modals. We have modified the editor
                            extensively to be used with SmartAdmin WebApp and make your job a little easier. This current
                            version of AltEditor is exclusive to SmartAdmin and we intend to keep it up to date to be
                            compatible with DataTables.
                        </p>
                        <p class="m-0">
                            You can find the definitions of its elements on their <a
                                href="https://github.com/KasperOlesen/DataTable-AltEditor" target="_blank">official
                                github</a> page. Note: Only use the exclusive plugin included with this WebApp as the one on
                            github contains a lot of bugs.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-12">
                <div id="panel-1" class="panel">
                    <div class="panel-hdr">
                        <h2>
                            Example <span class="fw-300"><i>Table</i></span>
                        </h2>
                        <div class="panel-toolbar">
                            <button class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip"
                                data-offset="0,10" data-original-title="Collapse"></button>
                            <button class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip"
                                data-offset="0,10" data-original-title="Fullscreen"></button>
                            <button class="btn btn-panel" data-action="panel-close" data-toggle="tooltip" data-offset="0,10"
                                data-original-title="Close"></button>
                        </div>
                    </div>
                    <h2>Editable Table 1</h2>
                    <table id="table1">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Age</th>
                                <th>City</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>John Doe</td>
                                <td>30</td>
                                <td>New York</td>
                                <td><span class="edit-button" onclick="editRow(this)">Edit</span></td>
                            </tr>
                            <tr>
                                <td>Jane Smith</td>
                                <td>25</td>
                                <td>Los Angeles</td>
                                <td><span class="edit-button" onclick="editRow(this)">Edit</span></td>
                            </tr>
                        </tbody>
                    </table>

                    <h2>Editable Table 2</h2>
                    <table id="table2">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Price</th>
                                <th>Stock</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Apple</td>
                                <td>$1</td>
                                <td>100</td>
                                <td><span class="edit-button" onclick="editRow(this)">Edit</span></td>
                            </tr>
                            <tr>
                                <td>Banana</td>
                                <td>$0.5</td>
                                <td>150</td>
                                <td><span class="edit-button" onclick="editRow(this)">Edit</span></td>
                            </tr>
                        </tbody>
                </div>
            </div>
        </div>
    </main>

@endsection

@push('script')
    <script src="{{ asset('layout/dist/js/datagrid/datatables/datatables.bundle.js') }}"></script>
    <script src="{{ asset('layout/dist/js/programanggaran.js') }}"></script>
    <script>
        function editRow(button) {
            // Get the row containing the button
            const row = button.parentNode.parentNode;
            const cells = row.getElementsByTagName('td');

            // Make cells editable
            for (let i = 0; i < cells.length - 1; i++) { // Exclude the last cell (Action)
                const cell = cells[i];
                const currentValue = cell.innerText;

                // Create an input element
                const input = document.createElement('input');
                input.type = 'text';
                input.value = currentValue;

                // Replace cell content with the input
                cell.innerHTML = '';
                cell.appendChild(input);
            }

            // Change the button to Save
            button.innerText = 'Save';
            button.setAttribute('onclick', 'saveRow(this)');
        }

        function saveRow(button) {
            // Get the row containing the button
            const row = button.parentNode.parentNode;
            const cells = row.getElementsByTagName('td');

            // Save the edited values
            for (let i = 0; i < cells.length - 1; i++) { // Exclude the last cell (Action)
                const cell = cells[i];
                const input = cell.getElementsByTagName('input')[0];
                cell.innerText = input.value; // Save the value back to the cell
            }

            // Change the button back to Edit
            button.innerText = 'Edit';
            button.setAttribute('onclick', 'editRow(this)');

            // Save the table data to local storage
            saveTableData();
        }

        function saveTableData() {
            const tables = document.querySelectorAll('table');
            tables.forEach(table => {
                const rows = Array.from(table.rows).map(row => {
                    return Array.from(row.cells).slice(0, -1).map(cell => cell.innerText);
                });
                localStorage.setItem(table.id, JSON.stringify(rows));
            });
        }

        function loadTableData() {
            const tables = document.querySelectorAll('table');
            tables.forEach(table => {
                const storedData = localStorage.getItem(table.id);
                if (storedData) {
                    const rows = JSON.parse(storedData);
                    const tbody = table.querySelector('tbody');
                    tbody.innerHTML = ''; // Clear existing rows
                    rows.forEach(rowData => {
                        const row = document.createElement('tr');
                        rowData.forEach(cellData => {
                            const cell = document.createElement('td');
                            cell.innerText = cellData;
                            row.appendChild(cell);
                        });
                        const actionCell = document.createElement('td');
                        actionCell.innerHTML =
                            '<span class="edit-button" onclick="editRow(this)">Edit</span>';
                        row.appendChild(actionCell);
                        tbody.appendChild(row);
                    });
                }
            });
        }

        // Load table data when the page is loaded
        window.onload = loadTableData;
    </script>
@endpush