@extends('admin.layouts.app')

@push('style')
<!-- third party css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

<link href="{{asset('admin/assets/libs/datatables.net-bs5/css/dataTables.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('admin/assets/libs/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('admin/assets/libs/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('admin/assets/libs/datatables.net-select-bs5/css//select.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<!-- third party css end -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-KzY5v3Z/y2mc6TBx1+YpwwBR2cM5GRFd4iEQjIqtsydLb9ncppntq62GK6ad4CCekfT0HTl4Z5BjUdgHmR4vww==" crossorigin="anonymous" />

@endpush

@section('content')
<section class="content home">
    <div class="block-header">

        <!-- Start Content-->
        <div class="container-fluid">

            <!-- start page title -->

            <div class="row">
                <div class="col-12">
                    <div class="page-title-box">
                        <div class="page-title-right">
                            <ol class="breadcrumb mb-4">
                                <li class="breadcrumb-item"><a href="{{route('admin-dashboard')}}">Animal Consultation</a></li>
                                <li class="breadcrumb-item">Manage Content</li>
                                <li class="breadcrumb-item active">About Us</li>
                            </ol>
                        </div>
                        <!-- <h4 class="page-title">PRODUCT LISTING</h4> -->
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <a href="{{ route('admin-add_about_us') }}" class="btn btn-primary mb-3 mt-2">Add Content</a>

                            @include('admin.common.flash')
                            <div class="table-responsive">
                                <table id="aboutus-datatable" class="table table-striped">
                                    <thead class="text">
                                        <tr>
                                            <th>#</th>
                                            <th>Content Title</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>

                                    <tbody class="text">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- container -->

    </div> <!-- content -->

    </div>

    @endsection

    @push('script')
    <script src="https://cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css"></script>

    <script>
        var table;

        $(document).ready(function() {

            table = $('#aboutus-datatable').DataTable({
                searching: true,
                processing: true,
                serverSide: true,
                aaSorting: [
                    [0, 'asc']
                ],
                "ajax": '{{route("admin-get_about_us")}}',
                columns: [{
                        data: 'id',
                        orderable: false,
                        visible: false,
                    },
                    {
                        data: 'content',
                        orderable: false,

                    },
                    {
                        data: 'action',
                        orderable: false,
                    },
                ],

            });
        });
    </script>
    @endpush