@extends('layouts.app')

@section('content')

    <!-- Link List Header -->
    <div class="panelHeader">
        <h3 class="panelHeaderTitle">All Website</h3>
        @if (canAccess(['sites create']))
            <a href="{{ route('admin.site-list.create') }}" class="panelHeaderBtn">
                <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
                     stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="10"></circle>
                    <line x1="12" y1="8" x2="12" y2="16"></line>
                    <line x1="8" y1="12" x2="16" y2="12"></line>
                </svg>
                Create Site
            </a>
        @endif
    </div>

    <!-- Link List Table -->
    <div class="custom-data-table">
        <table class="table" id="dataTable">
            <thead>
            <tr>
                <th>Website URL</th>
                <th>Img.</th>
                <th>DA</th>
                <th>PA</th>
                <th>DR</th>
                <th>Niche</th>
                <th>Traffic</th>
                <th>Organic Keyword</th>
                <th>General Price</th>
                <th>Others Price</th>
                <th>Is Visible</th>
                <th>Auto update</th>
                <th class="!text-right">Action</th>
            </tr>
            </thead>
        </table>
    </div>

@endsection

@push('footerPartial')
    <link rel="stylesheet" href="https://cdn.datatables.net/2.0.1/css/dataTables.dataTables.css">
    <link rel="stylesheet" href="{{ asset('css/custom-data-table.css') }}">
    <script src="https://cdn.datatables.net/2.0.1/js/dataTables.js"></script>

    {{--<style>
        .custom-data-table .dt-layout-table {
            overflow-x: auto
        }

        #edit-modal button[data-modal-hide] {
            display: none
        }
    </style>--}}

    <script>
        $(document).ready(function () {
            $('#dataTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.site-list') }}",
                    data: function (d) {
                        // You can pass extra parameters here if needed
                    }
                },
                order: [[6, 'desc']], // Ensure proper default column and direction
                columns: [
                    {data: 'url', name: 'url'},
                    {data: 'image', name: 'image', orderable: false, searchable: false},
                    {data: 'da', name: 'da', searchable: false},
                    {data: 'pa', name: 'pa', searchable: false},
                    {data: 'dr', name: 'dr', searchable: false},
                    {data: 'niche', name: 'niche', orderable: false, searchable: false},
                    {data: 'traffic', name: 'traffic', searchable: false},
                    {data: 'organic_keyword', name: 'organic_keyword', searchable: false},
                    {data: 'general_price', name: 'general_price', searchable: false},
                    {data: 'other_price', name: 'other_price', searchable: false},
                    {data: 'is_visible', name: 'is_visible', searchable: false},
                    {data: 'auto_update', name: 'auto_update', searchable: false},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ],
                lengthMenu: [
                    [25, 50, 100, 250, 500, 1000],
                    [25, 50, 100, 250, 500, 1000]
                ],
            });

        });
    </script>
@endpush