@section('headerMeta')
@php
$metaTitle = $metaDescription = $metaKeywords = strFilter(config('app.name'));
$metaImage = 'images/website.png';
if (!empty($info)) {
$metaTitle = !empty($info->meta_title) ? $info->meta_title : $siteInfo->meta_title;
$metaDescription = $info->meta_description;
$metaKeywords = $info->meta_tag;
$metaImage = !empty($info->meta_image) ? $info->meta_image : $metaImage;
} elseif (!empty($siteInfo)) {
$metaTitle = $siteInfo->meta_title;
$metaDescription = $siteInfo->meta_description;
$metaKeywords = $siteInfo->meta_tag;
$metaImage = !empty($siteInfo->meta_image) ? $siteInfo->meta_image : $metaImage;
}
@endphp
<title>{{ $metaTitle }}</title>

<meta name="title" content="{{ $metaTitle }}">
<meta name="description" content="{{ $metaDescription }}">
<meta name="keywords" content="{{ $metaKeywords }}">

<meta name='og:title' content="{{ $metaTitle }}">
<meta name='og:image' content="{{ asset( $metaImage) }}">
<meta name='og:site_name' content="{{ $metaTitle }}">
<meta name='og:description' content="{{ $metaDescription }}">
@endsection

@extends('layouts.frontend')
@section('content')

@include('layouts.frontend-partial.breadcrumb')

<section class="sectionGap">
    <div class="container">
        <div class="mb-8 space-y-3">
            <h1 class="sectionTitle lg:text-4xl">
                {{ !empty($info->title) ? $info->title : '' }}
            </h1>

            <p class=" text-[#627193] md:text-lg">
                {{ !empty($info->subtitle) ? $info->subtitle : '' }}
            </p>
        </div>

        {{-- =====================================================
        site cart table section begins here
        ============================================= --}}
        <div class="overflow-hidden">
            <table
                class="display text-sm md:text-base responsive nowrap text-[#627193] stripe font-normal rounded-[8px] overflow-hidden"
                id="dataTable" width="100%">
                <thead class="text-white bg-primary">
                    <tr class="border-[#D9D9D9]">
                        <th data-priority="1" class="border">Website URL</th>
                        <th class="border !text-center">DA</th>
                        <th class="border !text-center">DR</th>
                        <th data-priority="3" class="border !text-center">Traffic</th>
                        <th class="border !text-center">Keywords</th>
                        <th class="border">Niche</th>
                        <th data-priority="2" class="border !text-center">Price</th>
                        <th class="border !text-center w-36">Buy Now</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</section>

@endsection
@push('headerPartial')
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.6/css/dataTables.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/3.0.2/css/responsive.dataTables.css">

<style>
    .cta-area {
        padding: 0 !important;
    }

    table.dataTable>thead>tr>th,
    table.dataTable>thead>tr>td {
        padding: 15px 10px !important;
    }

    .dt-paging.paging_full_numbers {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .dt-paging.paging_full_numbers .dt-paging-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
    }

    div.dt-container .dt-paging .dt-paging-button.current:hover {
        background: linear-gradient(to bottom, #585858 0%, #111 100%) !important;
        color: #eee !important;
    }

    .dt-layout-cell.dt-start .dt-length {}

    div.dt-container div.dt-layout-cell.dt-end {
        text-align: left !important;
    }

    .dt-length .dt-input {
        width: 80px;
    }

    .dt-layout-cell .dt-info {
        font-size: 16px;
    }

    .dt-type-numeric {
        text-align: left;
    }

    .dataTables_filter label input[type=search] {
        left: 15px;
        top: 2px;
        width: 100%;
        border-radius: 8px;
        padding-left: 40px;
        padding-top: 12px;
        padding-bottom: 12px;
        border-color: #D9D9D9;
    }

    .dt-search .dt-input {
        border-radius: 8px;
    }

    .dt-length label {
        font-size: 16px;
    }

    .dataTables_filter label input[type=search]:focus,
    select:not([size]):focus,
    .dt-search .dt-input:focus {
        border: 1px solid #7572FD !important;
        outline: none !important;
        box-shadow: none !important;
    }

    .bottom {
        display: table;
        width: 100%;
        padding-top: 15px;
    }

    .dataTables_info {
        display: table-cell;
        vertical-align: middle;
        width: 50%;
        padding-left: 15px;
    }

    .dataTables_paginate.paging_simple_numbers {
        display: table-cell;
        padding: 10px 15px;
        margin-top: 10px;
        vertical-align: middle;
        width: 50%;
        text-align: right;
    }

    #dataTable_wrapper .bottom {
        margin-top: 30px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        justify-content: space-between
    }

    .dt-paging.paging_simple_numbers {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap
    }

    .dt-paging-button {
        background: transparent;
        border: 1px solid #D9D9D9 !important;
        border-radius: 10px !important;
        margin: 0 5px;
        cursor: pointer;
        transition: .35s;
        flex-shrink: 0;
        font-weight: 400;
        min-width: 35px !important;
        height: 35px;
        padding: 0 5px !important;
        font-size: 14px;
    }


    div.dt-container .dt-paging .dt-paging-button.current,
    div.dt-container .dt-paging .dt-paging-button.current:hover,
    div.dt-container .dt-paging .dt-paging-button:hover {
        background: linear-gradient(#00005C, #00005C) !important;
        border: 1px solid #00005C !important;
        color: white !important;
    }

    div.dt-container .dt-paging .dt-paging-button.disabled {
        background: #f2f2f2 !important;
        color: #333 !important;
        border: none;
    }

    div.dt-container .dt-paging .dt-paging-button.disabled:hover {
        background: #f2f2f2 !important;
        border: 1px solid #D9D9D9 !important;
    }

    .dt-paging-button {
        color: white !important;
    }

    @keyframes css-progress {
        to {
            --progress-value: 70;
        }
    }

    .circle {
        --percent: 0%;
        font-size: 1em;
        font-weight: 400;
        width: 42px;
        height: 42px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        position: relative;
        z-index: 0;
    }

    .circle::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: inherit;
        padding: 5px;
    }

    .da-progress-value::before {
        background: linear-gradient(white, white) content-box, conic-gradient(#008D00 0 var(--percent), #D9D9D9 0);
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #fff calc(100% - 15px));
    }

    .pa-progress-value::before {
        background: linear-gradient(white, white) content-box, conic-gradient(#FF7C22 0 var(--percent), #D9D9D9 0);
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #fff calc(100% - 15px));
    }

    .dr-progress-value::before {
        background: linear-gradient(white, white) content-box, conic-gradient(#407BFF 0 var(--percent), #D9D9D9 0);
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #fff calc(100% - 15px));
    }

    @media only screen and (max-width: 576px) {

        #dataTable_wrapper .top,
        #dataTable_wrapper .bottom {
            display: flex;
            flex-direction: column;
            gap: 10px;
            justify-content: center;
            align-items: flex-start;
            padding: .5rem;
        }

        .dataTables_filter,
        .dataTables_info {
            width: 100%;
        }
    }

    @media only screen and (min-width: 768px) {
        .dt-paging-button {
            min-width: 40px !important;
            height: 40px;
            padding: 0 7px !important;
            font-size: 16px;
        }

        .dt-paging.paging_simple_numbers {
            justify-content: flex-end;
        }
    }

    table.dataTable>tbody>tr,
    table.dataTable>tbody>tr>td {
        border: 1px solid #D9D9D9 !important
    }

    table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:before,
    table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:after,
    table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:before,
    table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:after,
    table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,
    table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:after,
    table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:before,
    table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,
    table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:before,
    table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:after,
    table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:before,
    table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:after,
    table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before,
    table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:after,
    table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:before,
    table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after {
        opacity: .5;
    }

    table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,
    table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,
    table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before,
    table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after {
        opacity: 1;
    }



    .dt-search {
        display: flex;
        align-items: center;
        gap: 6px;
        justify-content: flex-end;
    }

    .dt-search input[type=search] {
        padding: 8px 15px !important;
        font-size: 18px;
        border-radius: 10px !important;
    }
</style>
@endpush
@push('footerPartial')
<script src="https://cdn.datatables.net/2.0.6/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/responsive/3.0.2/js/dataTables.responsive.js"></script>
<script src="https://cdn.datatables.net/responsive/3.0.2/js/responsive.dataTables.js"></script>

<script>
    $(document).ready(function () {
            $('#dataTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ url('websites') }}",
                    data: function (d) {
                        // You can pass extra parameters here if needed
                    }
                },
                order: [[3, 'desc']],
                columns: [
                    {data: 'url', name: 'url'},
                    {data: 'da', name: 'da', searchable: false, className: 'text-center'},
                    {data: 'dr', name: 'dr', searchable: false, className: 'text-center'},
                    {data: 'traffic', name: 'traffic', searchable: false},
                    {data: 'organic_keyword', name: 'organic_keyword', searchable: false},
                    {data: 'niche', name: 'niche', orderable: false, searchable: false},
                    {data: 'general_price', name: 'general_price', searchable: false},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ],
                lengthMenu: [
                    [25, 50, 100, 250, 500],
                    [25, 50, 100, 250, 500]
                ],
            });

        });
</script>
@endpush