@extends('layouts.app')

@section('title')
    {{ __('Tài khoản đã xoá') }}
@endsection

@section('payment')
    active
@endsection

@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('Danh sách tài khoản đã xoá') }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('app.payment.index') }}">Tài khoản</a></li>
                        <li class="breadcrumb-item active">{{ __('Tài khoản đã xoá') }}</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
@endsection

@section('section.content')
    <section class="content">
        <section class="content">
            <!-- Default box -->
            <div class="col-lg-8 mx-auto">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">{{ __('Danh sách tài khoản đã xoá') }}</h3>
                        <button class="btn btn-success ml-3" onclick="exportToExcel()">Xuất Excel</button>
                    </div>
                    <div class="card-body">
                        <table class="table table-bordered table-striped dt-column-filters" id="listAccountsDeleted">
                            <thead style="text-align: center">
                                <th>{{ __('type') }}</th>
                                <th>{{ __('account') }}</th>
                                <th>{{ __('Số dư') }}</th>
                                <th>{{ __('Thời gian xoá') }}</th>
                            </thead>
                            <tbody style="text-align: center">
                                @foreach ($accounts as $account)
                                    <tr>
                                        <td>{{ $account->bank->name }}</td>
                                        <td>{{ $account->acc_no }} - {{ $account->acc_name }}</td>
                                        <td>{{ number_format($account->balance) }}</td>
                                        <td>{{ $account->deleted_at }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </section>
@endsection
@section('styles')
@endsection
@section('scripts')
    <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
    <script>
        function exportToExcel() {
            const table = document.getElementById('listAccountsDeleted');
            const rows = Array.from(table.querySelectorAll('tr'));
            const data = rows.map(row => Array.from(row.querySelectorAll('td, th')).slice(0, 4).map(cell => cell
                .innerText));

            /* Create a workbook */
            var wb = XLSX.utils.book_new();

            /* Convert the array to a worksheet */
            var ws = XLSX.utils.aoa_to_sheet(data);

            /* Add the worksheet to the workbook */
            XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

            /* Generate an XLSX file */
            XLSX.writeFile(wb, "list_accounts_deleted.xlsx");
        }
    </script>
@endsection