<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml"
      xmlns:uind="http://www.w3.org/1999/xhtml" xmlns:ctp="http://www.w3.org/1999/xhtml">
    <head th:replace="_fragments :: head('Stitching Inventory Accounts')"></head>
    <body>
        <div class="container-fluid">
            <header class="row page-header" th:replace="_fragments :: page-header"></header>
            <main class="row page-main">
                <!-- sidebar starts -->
                <aside class="col-sm-2" th:replace="/cutting/_cutting-inventory-account-sidebar :: sidebar"></aside>
                <!-- sidebar ends -->
                <!--header starts-->
                <div class="col-sm">
                    <div th:replace="_notices :: page-notices"></div>
                    <div class="mb-4 d-flex justify-content-between">
                        <h3>Stitching Inventory Accounts</h3>
                    </div>
                    <div th:replace="_fragments :: table-loading-skeleton"></div>
                    <table class="table table-striped" data-account-table data-order="[[ 0, &quot;asc&quot; ]]">
                        <thead>
                            <tr>
                                <th></th>
                                <th></th>
                                <th>ID</th>
                                <th>Title</th>
                                <th>Parent Type</th>
                                <th>Active</th>
                                <th>Created By</th>
                                <th>Created At</th>
                                <th>Location</th>
                                <th>Note</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="account : ${accounts}" th:object="${account}">
                                <td data-show-dropdown-transactions
                                    th:data-account-id="${account.id}" title="Transactions">
                                    <span data-dropdown-icon-transactions class="bi bi-caret-right-fill"></span>
                                </td>
                                <td data-show-dropdown-summary
                                    th:data-account-id="${account.id}" title="Summary">
                                    <span data-dropdown-icon-summary class="bi bi-caret-right"></span>
                                </td>
                                <td th:text="*{id}"></td>
                                <td th:text="*{title}"></td>
                                <td th:text="*{parentEntityType}"></td>
                                <td>
                                    <span class="badge badge-ACTIVE" th:if="*{active}">ACTIVE</span>
                                    <span class="badge badge-danger" th:unless="*{active}" >INACTIVE</span>
                                </td>
                                <td th:text="*{createdBy}"></td>
                                <td ctp:formatdatetime="*{createdAt}"></td>
                                <td >
                                    <th:block th:switch="*{locationSiteId}">
                                        <span th:each="location: ${locations}" th:case="${location.id}" th:text="${location.title}"></span>
                                    </th:block>
                                </td>
                                <td class="font-italic" th:text="*{notes}"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </main>
        </div>
        <div th:replace="_fragments :: page-footer-scripts"></div>
        <script>
            const $body = $( 'body' );
            // custom data table config
            const dataTableConfig = {
                pageLength: 100,
                searching: true,
                lengthChange: false,
                processing: false,
                dom: `
				   <'row'<'col-sm-5'B><'col-sm-7'f>>
				   <'row'<'col-sm-12't>>
				   <'row'<'col-sm-5'i><'col-sm-7'p>>`,
                buttons: [{
                    extend: 'excel',
                    text: '',
                    className: 'bi bi-file-earmark-spreadsheet btn-sm'
                }]

            }
            const accTable = $( '[data-account-table]' ).DataTable( dataTableConfig );

            // handle click on dropdown
            $body.on( 'click', '[data-show-dropdown-transactions]', function( e ) {
                e.preventDefault();
                const $this = $( this );
                const $tr = $this.closest( 'tr' );
                const $row = accTable.row( $tr );
                const $spanDropdown = $tr.find( '[data-dropdown-icon-transactions]' );
                const accountId= $this.data( 'account-id' );
                $spanDropdown.toggleClass( 'bi-caret-right-fill bi-caret-down-fill' );
                if( $row.child.isShown() ){
                    $row.child.hide();
                }
                else {
                    $row.child(`<span class="spinner-border text-center spinner-border-md" role="status"></span>`).show();
                    $.ajax({
                        url: `/ctp/inventory-transactions?account-id=${accountId}`,
                        success: function( data ){
                            // show fetched page
                            $row.child( data ).show();
                        }
                    });
                }
            });

            $body.on( 'click', '[data-show-dropdown-summary]', function( e ) {
                e.preventDefault();
                const $this = $( this );
                const $tr = $this.closest( 'tr' );
                const $row = accTable.row( $tr );
                const $spanDropdown = $tr.find( '[data-dropdown-icon-summary]' );
                const accountId= $this.data( 'account-id' );
                $spanDropdown.toggleClass( 'bi-caret-right bi-caret-down' );
                if( $row.child.isShown() ){
                    $row.child.hide();
                }
                else {
                    $row.child(`<span class="spinner-border text-center spinner-border-md" role="status"></span>`).show();
                    $.ajax({
                        url: `/ctp/inventory-summary?account-id=${accountId}`,
                        success: function( data ){
                            // show fetched page
                            $row.child( data ).show();
                        }
                    });
                }
            });
        </script>
    </body>
</html>