@extends('admin.admin_dashboard')
@section('admin')

<div class="page-content">
    <!-- Breadcrumb -->
    <div class="page-breadcrumb d-flex flex-column flex-sm-row align-items-center justify-content-between mb-3 p-3 bg-primary text-white rounded shadow-sm">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0 p-0">
                <li class="breadcrumb-item">
                    <a href="{{ route('admin.dashboard') }}" class="text-white">
                        <i class="bx bx-home-alt"></i>
                    </a>
                </li>
                <li class="breadcrumb-item active text-white" aria-current="page">Banks</li>
            </ol>
        </nav>
    
    </div>

    <!-- Accounts Table -->
    @can('accounts.view')
    <div class="card shadow border-0 rounded">
        <div class="card-body p-4">
            <div class="table-responsive">
                <table id="example" class="table table-hover table-striped table-bordered align-middle">
                    <thead class="table-dark">
                        <tr>
                            <th>#</th>
                            <th>Code</th>
                            <th>Name</th>
                            <th>Balance</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($accounts as $key => $acct)
                        <tr 
                          @can('account.view')
                            data-href="{{ route('view.account', $acct->id) }}"
                            style="cursor:pointer;"
                          @endcan
                        >
                            <td class="fw-bold text-center">{{ $key + 1 }}</td>
                            <td class="text-center">{{ $acct->code }}</td>
                            <td>{{ $acct->name }}</td>
                            <td>{{ number_format($acct->balance, 2) }}</td>
                           
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endcan
</div>

{{-- SweetAlert2 for delete confirmation --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    // 1) Row click
    document.querySelectorAll('tr[data-href]').forEach(function(row) {
        row.addEventListener('click', function() {
            window.location = this.dataset.href;
        });
    });

  
});
</script>
@endsection