@extends('back_office.layouts.app')
<style>
    .table> :not(caption)>*>* {
        padding: 0.5rem 1.5rem !important;
        background-color: var(--bs-table-bg);
        border-bottom-width: 1px;
        box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
    }
</style>
@section('content')
    <section class="content">
        <div class="container-fluid">
            <div class="card">
                <div class="card-body" id="notifications">

                    <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Type</th>
                                    <th>Number Of Notification Sent</th>
                                    <th>Delivered</th>
                                    <th>Undelivered</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($types as $key => $type)
                                    <tr>
                                        <td>{{ $type }}</td>
                                        <td>{{ $numberOfSentNotification[$key] }}</td>
                                        <td>{{ $deliveredNotification[$key] }}</td>
                                        <td>{{ $undeliveredNotification[$key] }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                      </table>
                </div>
            </div>
        </div>
    </section>

    @push('scripts')
        <link rel="stylesheet" href="{{asset('css/tables.css')}}">
        <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.bootstrap4.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css">
        <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.bootstrap4.min.js"></script>
        <script src="{{env('APP_URL')}}/vendor/datatables/buttons.server-side.js"></script>
        {{-- {!! $dataTable->scripts() !!} --}}
        <script src="{{ $cdn ?? asset('vendor/sweetalert/sweetalert.all.js')  }}"></script>
    @endpush
@endsection