@extends('Admin.layout')

<link rel="stylesheet" href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.css">

@section('content')

<div class="row align-items-center mb-3">
    <div class="col d-flex align-items-center gap-3">
        <h5 class="mb-0">Backup History</h5>
    </div>
</div>

<div class="card">
    <div class="card-datatable table-responsive pt-0">
        <div class="row card-header flex-column flex-md-row border-bottom mx-0 px-3">
            <div class="justify-content-between dt-layout-table">
                <div class="justify-content-between align-items-center dt-layout-full table-responsive">

                    <table id="backupTable" class="table">
                        <thead>
                            <tr>
                                <th>SNO</th>
                                <th>CREATED DATE</th>

                                <th>FILE NAME</th>
                                <th>FILE SIZE</th>
                                <th>BACKUP STATUS</th>
                                <th>MAIL STATUS</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.js"></script>

<script>
    var jq = jQuery.noConflict();

    jq(document).ready(function() {

        jq('#backupTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('admin.backup.history.data') }}",

            columnDefs: [{
                targets: '_all',
                className: 'text-nowrap'
            }],

            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                  {
                    data: 'created_at',
                    name: 'created_at'
                },
                {
                    data: 'file_name',
                    name: 'file_name'
                },
                {
                    data: 'file_size',
                    name: 'file_size'
                },
                {
                    data: 'backup_status',
                    name: 'backup_status'
                },
                {
                    data: 'mail_status',
                    name: 'mail_status'
                },
              
               
            ],

            order: [
                [5, 'desc']
            ],

            lengthMenu: [
                [10, 25, 50, 100, -1],
                ["10", "25", "50", "100", "All"]
            ],

            language: {
                search: "",
                searchPlaceholder: "Search",
                lengthMenu: "_MENU_"
            }
        });

    });
</script>

@endsection