@extends('layouts.master')

@section('titel', 'Detail Account | ')
@section('content')
    @include('partials.header')
    @include('partials.sidebar')

    <!-- Loader -->
    <div id="loader" class="text-center" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block;">
        <img src="{{ asset('images/loader.gif') }}" alt="Loading..." width="100">
        <p>Loading data, please wait...</p>
    </div>

    <!-- Page Content (Initially Hidden) -->
    <main class="app-content" id="main-content" style="display: none;">
        <div class="app-title">
            <div>
                <h1><i class="fa fa-th-list"></i> Detail Account Table</h1>
            </div>
            <ul class="app-breadcrumb breadcrumb side">
                <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
                <li class="breadcrumb-item">Accounts</li>
                <li class="breadcrumb-item active"><a href="#">Detail Account Table</a></li>
            </ul>
        </div>

        <div class="row mt-2">
            <div class="col-md-12">
                <div class="tile">
                    <div class="tile-body">
                         <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Account ID</th>
                    <th>Account Title</th>
                    <th>Control Account</th>
                </tr>
            </thead>
            <tbody>
                @foreach($accounts as $account)
                <tr>
                    <td>{{ $account->Account_ID }}</td>
                    <td>{{ $account->Account_Title }}</td>
                    <td>{{ $account->Control_Title }}</td>
 <td>
                    <!-- Show button with a FontAwesome icon -->
                    <a href="{{ route('detailaccount.show', $account->Account_ID) }}" class="btn btn-primary btn-sm">
                        <i class="fas fa-eye"></i> Show
                    </a>
                </td>
                </tr>
                @endforeach
            </tbody>
        </table>                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@push('js')
    <!-- jQuery & DataTables -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>

    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css">

    <script type="text/javascript">
        $(document).ready(function () {
            console.log("Page is loading...");

            // Hide Loader and Show Content When Page is Fully Loaded
            $(window).on('load', function () {
                console.log("Page loaded completely.");
                $('#loader').fadeOut(500);
                $('#main-content').fadeIn(500);

                // Initialize DataTable AFTER page is fully loaded
                $('#sampleTable').DataTable({
                    "paging": true,
                    "searching": true,
                    "ordering": true,
                    "info": true
                });
            });
        });
    </script>
@endpush