@extends('layouts.admin.app')

@section('title', 'Feed Management')


@push('style')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <style>
        .feedmanagement .final_squads .top-bar {
            margin-bottom: 16px;
        }
        .feedmanagement .final_squads .top-bar h3 {
            color: #fff;
            font-size: 18px;
            font-weight: 600;
            margin: 0;
        }
        .feedmanagement .thumbnail {
            width: 56px;
            height: 40px;
            border-radius: 8px;
            overflow: hidden;
            background: #222;
        }
        .feedmanagement .thumbnail img,
        .feedmanagement .thumbnail video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .feedmanagement .thumbnail-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #222;
        }
        .feedmanagement .table-box h5 {
            color: #fff;
            font-size: 14px;
            font-weight: 500;
            margin: 0 0 4px;
        }
        .feedmanagement .table-box td span[style] {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
        }
        .feedmanagement .badge.pending {
            background: #F59E0B1A;
            border: 1px solid #F59E0B33;
            color: #F59E0B !important;
            font-weight: 500;
        }
        .feedmanagement .badge.archived {
            background: #71717A1A;
            border: 1px solid #71717A33;
            color: #A1A1AA !important;
            font-weight: 500;
        }
        .feedmanagement .table-box table.dataTable {
            width: 100% !important;
            margin: 0 !important;
            border-collapse: collapse;
        }
        .feedmanagement .table-box table.dataTable thead th {
            border-bottom: none;
            padding: 15px;
            font-size: 13px;
            color: #aaa;
            font-weight: 400;
        }
        .feedmanagement .table-box table.dataTable tbody td {
            border-top: 1px solid #222;
            padding: 18px 15px;
            font-size: 14px;
            vertical-align: middle;
        }
        .feedmanagement .table-box table.dataTable.no-footer {
            border-bottom: none;
        }
        .feedmanagement .table-box .dataTables_wrapper {
            padding: 0;
        }
        .feedmanagement .dataTables_wrapper .dataTables_info,
        .feedmanagement .dataTables_wrapper .dataTables_paginate {
            display: none !important;
        }
        .feedmanagement .posts-table-wrap.users_list {
            width: 100%;
        }
        .feedmanagement .posts-table-wrap.users_list .table-wrap {
            background: transparent;
            border-radius: 0;
            overflow: visible;
            float: none;
        }
        .feedmanagement .posts-table-wrap.users_list .page[data-disabled] {
            opacity: 0.35;
            cursor: default;
            pointer-events: none;
        }
        .feedmanagement .dataTables_wrapper .dataTables_processing {
            background: rgba(17, 17, 17, 0.9);
            color: #fff;
        }
        .feedmanagement .right-box td a,
        .feedmanagement .right-box td form {
            display: inline-block;
            vertical-align: middle;
        }
    </style>
@endpush

@section('content')
<div class="content_area feedmanagement">
    @include('admin.layouts.alert')
                <div class="search-bar">

                    <!-- Search -->
                    <div class="search-box">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M11 20C15.9706 20 20 15.9706 20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20Z"
                                stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                            </path>
                            <path
                                d="M18.9285 20.6888C19.4585 22.2888 20.6685 22.4488 21.5985 21.0488C22.4485 19.7688 21.8885 18.7188 20.3485 18.7188C19.2085 18.7088 18.5685 19.5988 18.9285 20.6888Z"
                                stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                            </path>
                        </svg>
                        <input type="text" id="post_title_search" placeholder="Search Here...">
                    </div>

                    <!-- Button -->
                    <a href="{{ route('admin.posts.create') }}" class="create-btn">+ Create Post</a>

                </div>


                <div class="filter-card">

                    <div class="filter-grid">

                        <div class="field">

                            <div class="label">
                                Content Type
                            </div>

                            <div class="select-wrap">

                                <select id="media_type_filter">
                                    <option value="">All Types</option>
                                    <option value="1">Image</option>
                                    <option value="2">Video</option>
                                </select>

                                <div class="arrow">
                                    <svg width="14" height="14" viewBox="0 0 20 20">
                                        <path d="M5 7L10 12L15 7" stroke="white" stroke-width="2" fill="none"
                                            stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                </div>

                            </div>

                        </div>

                        <div class="field">

                            <div class="label">
                                Status
                            </div>

                            <div class="select-wrap">

                                <select id="status_filter">
                                <option value="all">All Status</option>
                                <!-- <option value="0">Pending</option> -->
                                <option value="1">Published</option>
                                <!-- <option value="2">Archived</option> -->
                                </select>

                                <div class="arrow">
                                    <svg width="14" height="14" viewBox="0 0 20 20">
                                        <path d="M5 7L10 12L15 7" stroke="white" stroke-width="2" fill="none"
                                            stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                </div>

                            </div>

                        </div>

                        <div class="field">

                            <div class="label">
                                League
                            </div>

                            <div class="select-wrap">

                                <select id="league_id">
                                    <option value="">All Leagues</option>
                                </select>

                                <div class="arrow">
                                    <svg width="14" height="14" viewBox="0 0 20 20">
                                        <path d="M5 7L10 12L15 7" stroke="white" stroke-width="2" fill="none"
                                            stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                </div>

                            </div>

                        </div>

                        <div class="field">

                            <div class="label">
                                Date Range
                            </div>

                            <div class="date-wrap">

                                <input id="dateRange" placeholder="Select Date Range">
                                <input type="hidden" id="date_from">
                                <input type="hidden" id="date_to">

                                <div class="calendar">
                                    <svg width="18" height="18" viewBox="0 0 24 24">
                                        <path fill="#fff" d="M19 4h-1V2h-2v2H8V2H6v2H5a2
                            2 0 0 0-2 2v13a2 2 0 0 0 2 2h14a2
                            2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0
                            15H5V9h14z" />
                                    </svg>
                                </div>

                            </div>

                        </div>

                    </div>

                </div>

                <!-- Stats Grid -->
                <div class="stats-grid">
                    <div class="stat-card" data-color="yellow">
                        <div class="stat-label">Total Posts</div>
                        <div class="stat-value"><span id="stat-total">0</span> <span class="per">+12%</span></div>
                    </div>
                    <div class="stat-card" data-color="red">
                        <div class="stat-label">Published</div>
                        <div class="stat-value"><span id="stat-published">0</span> <span class="per"><svg width="20" height="20" viewBox="0 0 20 20"
                                    fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M1.6665 9.9974C1.6665 14.5967 5.40055 18.3307 9.99984 18.3307C14.5991 18.3307 18.3332 14.5967 18.3332 9.9974C18.3332 5.3981 14.5991 1.66406 9.99984 1.66406C5.40055 1.66406 1.6665 5.3981 1.6665 9.9974V9.9974"
                                        stroke="#3B82F6" stroke-width="1.66667" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path d="M7.5 10.0026L9.16667 11.6693L12.5 8.33594" stroke="#3B82F6"
                                        stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
                                </svg></span></div>
                    </div>
                    <div class="stat-card" data-color="green">
                        <div class="stat-label">Pending Review</div>
                        <div class="stat-value"><span id="stat-pending">0</span> <span class="stable">
                                <svg width="32" height="32" viewBox="0 0 32 32" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect width="32" height="32" rx="16" fill="#F59E0B" fill-opacity="0.1" />
                                    <path
                                        d="M7.6665 15.9974C7.6665 20.5967 11.4005 24.3307 15.9998 24.3307C20.5991 24.3307 24.3332 20.5967 24.3332 15.9974C24.3332 11.3981 20.5991 7.66406 15.9998 7.66406C11.4005 7.66406 7.6665 11.3981 7.6665 15.9974V15.9974"
                                        stroke="#F59E0B" stroke-width="1.66667" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path d="M16 12.6641V15.9974" stroke="#F59E0B" stroke-width="1.66667"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M16 19.3359H16.0083" stroke="#F59E0B" stroke-width="1.66667"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </span></div>
                    </div>
                </div>

                <div class="final_squads">
                    <div class="right-box">

                        <div class="top-bar">
                            <h3>Final Squads &amp; Player List</h3>
                        </div>

                        <div class="table-box">
                            <div class="users_list posts-table-wrap">
                                <div class="table-wrap">
                                    <table id="postsTable">
                                        <thead>
                                            <tr>
                                                <th>Media</th>
                                                <th>Title & Type</th>
                                                <th>League</th>
                                                <th>Status</th>
                                                <th>Shares</th>
                                                <th>Engagement</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>

                                    <div class="pagination">
                                        <div>Total Records : <span id="posts-total">00</span></div>
                                        <div class="pages" id="posts-pages"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
@endsection

@push('script')
<script src="{{ asset('assets/js/admin/toast.js') }}"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    let table;
    let dateRangePicker;
    const datatableUrl = "{{ route('admin.posts.data') }}";
    const PREV_SVG = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.99973 13.2807L5.65307 8.93404C5.13973 8.4207 5.13973 7.5807 5.65307 7.06737L9.99973 2.7207" stroke="#A0E86F" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" /></svg>';
    const NEXT_SVG = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.00027 13.2807L10.3469 8.93404C10.8603 8.4207 10.8603 7.5807 10.3469 7.06737L6.00027 2.7207" stroke="#A0E86F" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" /></svg>';

    function hideDefaultDtPagination() {
        $('#postsTable_wrapper .dataTables_info, #postsTable_wrapper .dataTables_paginate').remove();
    }

    function renderPostsPagination() {
        if (!table) return;

        const info = table.page.info();
        const total = info.recordsDisplay;
        const page = info.page + 1;
        const totalPages = Math.max(1, info.pages);
        const prevPage = Math.max(1, page - 1);
        const nextPage = Math.min(totalPages, page + 1);

        $('#posts-total').text(String(total).padStart(2, '0'));

        let html = '<a href="#" class="page" data-page="' + prevPage + '"' + (page <= 1 ? ' data-disabled' : '') + '>' + PREV_SVG + '</a>';
        for (let i = 1; i <= totalPages; i++) {
            html += '<a href="#" class="page' + (i === page ? ' active' : '') + '" data-page="' + i + '">' + i + '</a>';
        }
        html += '<a href="#" class="page" data-page="' + nextPage + '"' + (page >= totalPages ? ' data-disabled' : '') + '>' + NEXT_SVG + '</a>';

        $('#posts-pages').html(html);
    }

    function loadTable() {
        if ($.fn.DataTable.isDataTable('#postsTable')) {
            $('#postsTable').DataTable().clear().destroy();
        }

        table = $('#postsTable').DataTable({
            processing: true,
            serverSide: true,
            searching: false,
            lengthChange: false,
            autoWidth: false,
            dom: 'rt',
            pageLength: 10,
            order: [[1, 'desc']],
            ajax: {
                url: datatableUrl,
                data: function (d) {
                    d.title_search = $('#post_title_search').val();
                    d.media_type = $('#media_type_filter').val();
                    d.status = $('#status_filter').val();
                    d.league_id = $('#league_id').val();
                    d.date_from = $('#date_from').val();
                    d.date_to = $('#date_to').val();
                }
            },
            columnDefs: [
                { targets: 2, createdCell: function (td) { $(td).addClass('role'); } },
                { targets: 4, createdCell: function (td) { $(td).addClass('price'); } },
            ],
            columns: [
                { data: 'thumbnail', name: 'thumbnail', orderable: false, searchable: false },
                { data: 'title_type', name: 'posts.created_at' },
                { data: 'league_name', name: 'league.name' },
                { data: 'status', name: 'status', orderable: false, searchable: false },
                { data: 'views', name: 'shares_count' },
                { data: 'engagement', name: 'engagement', orderable: false, searchable: false },
                { data: 'actions', name: 'actions', orderable: false, searchable: false },
            ],
            drawCallback: function () {
                hideDefaultDtPagination();
                renderPostsPagination();
            },
            initComplete: function () {
                hideDefaultDtPagination();
                renderPostsPagination();
            }
        });
    }

    $(document).ready(function () {
        dateRangePicker = flatpickr('#dateRange', {
            mode: 'range',
            dateFormat: 'Y-m-d',
            onChange: function (selectedDates) {
                $('#date_from').val(selectedDates[0] ? dateRangePicker.formatDate(selectedDates[0], 'Y-m-d') : '');
                $('#date_to').val(selectedDates[1] ? dateRangePicker.formatDate(selectedDates[1], 'Y-m-d') : '');

                if (table && selectedDates.length === 2) {
                    table.ajax.reload();
                }

                if (!selectedDates.length) {
                    if (table) table.ajax.reload();
                }
            },
        });

        $.ajax({
            url: "{{ route('admin.posts.index') }}",
            type: 'GET',
            dataType: 'json',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function (response) {
                $('#league_id').html('<option value="">All Leagues</option>');
                $.each(response.leagues, function (i, league) {
                    $('#league_id').append(`<option value="${league.id}">${league.name}</option>`);
                });
                $('#stat-total').text(response.stats.total);
                $('#stat-published').text(response.stats.published);
                $('#stat-pending').text(response.stats.pending);
                loadTable();
            },
            error: function () {
                loadTable();
            }
        });

        let searchTimer;
        $('#post_title_search').on('keyup input', function () {
            clearTimeout(searchTimer);
            searchTimer = setTimeout(function () {
                if (table) table.ajax.reload();
            }, 300);
        });

        $('#media_type_filter, #status_filter, #league_id').on('change', function () {
            if (table) table.ajax.reload();
        });

        $('#posts-pages').on('click', '.page', function (e) {
            e.preventDefault();
            if ($(this).is('[data-disabled]')) return;
            const page = parseInt($(this).data('page'), 10);
            if (table && page) {
                table.page(page - 1).draw('page');
            }
        });

        $(document).on('submit', '.post-delete-form', function (e) {
            if (!confirm('Delete this post?')) {
                e.preventDefault();
            }
        });
    });
</script>
@endpush