@extends('adminlte::page')

@section('title', 'SEO Records')

@section('content_header')
    <h1>SEO Management</h1>
@stop

@section('content')
    <div class="card card-dark">
        <div class="card-header">
            <h3 class="card-title">SEO List</h3>
            <a href="{{ route('seo.create') }}" class="btn btn-dark float-right">+Add SEO        
            </a>
        </div>
        <div class="card-body">
            <table class="table table-bordered table-responsive w-100" id="seo-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Route Name</th>
                        <th>Meta Title</th>
                        <th>Meta Keywords</th>
                        <th>Meta Description</th>
                        <th>Canonical Tag</th>
                        <th>OG Title</th>
                        <th>OG Description</th>
                        <th>OG Image</th>
                        <th>OG URL</th>
                        <th>Twitter Card</th>
                        <th>Twitter Title</th>
                        <th>Twitter Description</th>
                        <th>Twitter Image</th>
                        <th>Actions</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
@stop

@section('js')
    <script>
        $(function () {
            $('#seo-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('seo.list') }}", // The route for fetching the list
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'route_name', name: 'route_name' },
                    { data: 'meta_title', name: 'meta_title' },
                    { data: 'meta_keywords', name: 'meta_keywords' },
                    { data: 'meta_description', name: 'meta_description' },
                    { data: 'canonical_tag', name: 'canonical_tag' },
                    { data: 'og_title', name: 'og_title' },
                    { data: 'og_description', name: 'og_description' },
                    { data: 'og_image', name: 'og_image' },
                    { data: 'og_url', name: 'og_url' },
                    { data: 'twitter_card', name: 'twitter_card' },
                    { data: 'twitter_title', name: 'twitter_title' },
                    { data: 'twitter_description', name: 'twitter_description' },
                    { data: 'twitter_image', name: 'twitter_image' },
                    { 
                        data: 'action', 
                        name: 'action', 
                        orderable: false, 
                        searchable: false, 
                        render: function(data, type, row) {
                            return '<a href="/seo/' + row.id + '/edit" class="btn btn-sm btn-primary">Edit</a>' +
                                   '<a href="/seo/' + row.id + '/delete" class="btn btn-sm btn-danger ml-2">Delete</a>';
                        }
                    }
                ],
            });
        });
    </script>
@stop