@section('optional_css')
    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="{{ asset('plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css') }}">
    <!-- DataTables -->
    <link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">
@endsection
@section('optional_js')
    <!-- SweetAlert2 -->
    <script src="{{ asset('plugins/sweetalert2/sweetalert2.min.js') }}"></script>
    <!-- DataTables  & Plugins -->
    <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>

    <script>
        $(document).ready(function () {
            var table = $('.table').DataTable({
                order: [ 0, "desc" ],
                responsive: true,
                pageLength: 10,
                processing: true,
                serverSide: true,
                ajax: '{!! route('admin.tagihanbpjs.datatable') !!}',
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'transaction_code', name: 'transaction_code' },
                    { data: 'msisdn', name: 'msisdn' },
                    { data: 'customer_id', name: 'customer_id' },
                    { data: 'payment', name: 'payment' },
                    { data: 'status', name: 'status' },
                    { data: 'action', name: 'action', 'orderable': false },
                ]
            });
        })
    </script>
@endsection

<x-app-layout>
    <x-slot name="header">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">{{ __('BPJS') }}</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
            </div><!-- /.col -->
        </div><!-- /.row -->
    </x-slot>
    @if(session('success'))
        <x-alert-success>
            {{ session('success') }}
        </x-alert-success>
    @endif
    @if(session('delete'))
        <x-alert-danger>
            {{ session('delete') }}
        </x-alert-danger>
    @endif
    <x-card class="col-4">
        <x-slot name="title">{{ __('Saldo BPJS') }}</x-slot>
        <h2>Rp. {{ number_format($balance, '0', ',', '.') }}</h2>
    </x-card>
    <x-card>
        <x-slot name="title">{{ __('Tagihan BPJS') }}</x-slot>
        @can('tagihanbpjs.create')
            <x-slot name="tools">
                <x-button-link href="{{ route('admin.tagihanbpjs.orderform') }}">{{ __('Create') }} {{ __('Tagihan') }}</x-button>
            </x-slot>
        @endcan
        <div class="col-12 table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>{{ __('ID') }}</th>
                        <th>{{ __('Kode Transaksi') }}</th>
                        <th>{{ __('Nomor Telpon') }}</th>
                        <th>{{ __('Customer Id') }}</th>
                        <th>{{ __('Tagihan') }}</th>
                        <th>{{ __('Status') }}</th>
                        <th>{{ __('Action') }}</th>
                    </tr>
                </thead>
                <tbody>
                    
                </tbody>
            </table>
        </div>
    </x-card>
</x-app-layout>