@extends('admin.layouts.master')

@section('title', 'Manage Daily News')


@section('css')
    <style>
        #filterForm .form-control {
            border-radius: 8px;
            height: 38px;
            font-size: 14px;
            border: 1px solid #dcdfe3;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            transition: 0.2s;
        }

        #filterForm .form-control:focus {
            border-color: #0d6efd;
            box-shadow: 0 0 5px rgba(13, 110, 253, 0.3);
        }

        #filterForm {
            background: #f8f9fa;
            padding: 12px 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            border: 1px solid #e8e8e8;
        }
    </style>

@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="text-left">
                        Daily News List
                        <!-- Refresh Button -->
                        <button id="refreshFilters" class="btn btn-secondary" style="float: right; margin-left:5px;">
                            <span class="fa fa-sync"></span> Refresh Filters
                        </button>

                        <a class="btn btn-info text-white   " data-toggle="modal" data-target="#createVideoModal"
                            style="float: right; margin-left:5px;">
                            <span class="fa fa-plus"></span> New Video
                        </a>

                    </h3>
                </div>
                <div class="card-body">

                    {{-- Filter Form --}}
                    <div class="card collapse"id="filterCollapse">
                        <div class="row justify-content-center py-3">
                            <div class="col-md-3">
                                <input type="text" name="search" class="form-control filter-input" id="search"
                                    value="{{ request('search') }}" placeholder="Search by ID or Title">
                            </div>

                            <div class="col-md-2">
                                <select name="category" class="form-control filter-select" id="category_id">
                                    <option value="">Category</option>
                                    @foreach ($categories as $cat)
                                        <option value="{{ $cat->id }}"
                                            {{ request('category') == $cat->id ? 'selected' : '' }}>
                                            {{ $cat->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-2">
                                <input type="date" name="date" class="form-control filter-input" id="date"
                                    value="{{ request('date') }}">
                            </div>

                        </div>
                    </div>




                    {{-- Table Wrapper --}}
                    <div id="postsTable" style="position: relative;">
                        <div id="tableContent">
                            @include('admin.video.partial.video-list', ['videos' => $videos])
                        </div>

                        {{-- Loader overlay --}}
                        <div id="tableLoader" style="display:none;">
                            <div class="spinner"></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <style>
        img.img.img-circle.mr-3 {
            width: 60px;
            height: 60px;
        }

        #tableLoader {
            position: fixed;
            top: 40%;
            left: 60%;
            transform: translateX(-50%);
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            z-index: 9999;
            padding-top: 20px;
        }

        .spinner {
            border: 6px solid #f3f3f3;
            border-top: 6px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .dropdown-menu.p-2.shadow.border-0.show {
            left: -87px !important;
            box-shadow: 0px 13px 17px 3px #98bcff7d !important;
        }

        .custom-table-wrapper {
            background: #ffffff;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .custom-table {
            font-size: 13px;
            /* Compact font */
            border-collapse: separate;
            border-spacing: 0 4px;
            /* Row spacing for clean look */
        }

        .custom-table thead th {
            font-weight: 600;
            color: #495057;
            font-size: 16px;
            background: #f1f3f6;
            border-bottom: none;
            text-align: center;
            vertical-align: middle;
        }

        .custom-table tbody td {
            vertical-align: middle;
            padding: 6px 8px;
        }

        .custom-table tbody tr {
            background: #ffffff;
            transition: 0.2s;
            border-radius: 6px;
        }

        .custom-table tbody tr:hover {
            background: #f0f4f8 !important;
        }

        .table-thumbnail {
            width: 50px;
            height: 50px;
            object-fit: cover;
            border-radius: 6px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
        }

        /* Action Button */
        .action-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            background: #f2f4f7;
            border: none;
            transition: .2s;
        }

        .action-btn:hover {
            background: #e2e6ea;
        }

        /* Dropdown Menu */
        .dropdown-menu {
            border-radius: 8px !important;
            padding: 6px 0 !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
        }

        .dropdown-item {
            padding: 5px 12px !important;
            font-size: 14px;
            border-radius: 4px;
        }

        .dropdown-item:hover {
            background: #f0f4fa !important;
        }

        /* Pagination Styling */
        .pagination {
            justify-content: center;
            margin-top: 10px;
        }

        .pagination .page-item .page-link {
            font-size: 14px;
            border-radius: 4px;
            padding: 4px 10px;
        }
    </style>


    {{-- ======================================================= --}}
    {{--                VIDEO CREATE MODAL                        --}}
    {{-- ======================================================= --}}
    <div class="modal fade" id="createVideoModal">
        <div class="modal-dialog modal-lg">
            <form action="{{ route('video.store') }}" method="POST" enctype="multipart/form-data" class="modal-content">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Add New Video</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <div class="modal-body">
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label>Title</label>
                            <input type="text" name="title" class="form-control">
                        </div>
                        <div class="form-group col-md-6">
                            <label>Sub Title</label>
                            <input type="text" name="sub_title" class="form-control">
                        </div>
                        <div class="form-group col-md-6">
                            <label>Video Link</label>
                            <input type="text" name="video_link" class="form-control">
                        </div>
                        <div class="form-group col-md-6">
                            <label>Category</label>
                            <select name="category_id" class="form-control">
                                <option value="">Select</option>
                                @foreach ($categories as $cat)
                                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-md-6">
                            <label>Start Datetime</label>
                            <input type="datetime-local" name="start_datetime" class="form-control">
                        </div>
                        <div class="form-group col-md-6">
                            <label>End Datetime</label>
                            <input type="datetime-local" name="end_datetime" class="form-control">
                        </div>
                        <div class="form-group col-md-6">
                            <label>Date</label>
                            <input type="date" name="date" class="form-control">
                        </div>
                        <div class="form-group col-md-6">
                            <label>Status</label>
                            <select name="status" class="form-control">
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>
                        <div class="form-group col-md-12">
                            <label>Thumbnail</label>
                            <input type="file" name="thumbnail" class="form-control" accept="image/*"
                                onchange="previewCreateThumb(event)">
                            <img id="createThumbPreview" src="https://placehold.co/250x150?text=Thumbnail"
                                class="img-thumbnail mt-2" width="200">
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button class="btn btn-success">Save</button>
                </div>
            </form>
        </div>
    </div>
@endsection
@section('js')
    <script>
        $(document).ready(function() {

            // ============================
            // Main AJAX Function
            // ============================
            function fetchData(page = 1) {

                var perPage = $('.perPage').val();
                var search = $('#search').val();
                var category = $('#category_id').val();
                var date = $('#date').val();

                $.ajax({
                    url: "{{ route('video.index') }}",
                    method: "GET",
                    data: {
                        page: page,
                        perPage: perPage,
                        search: search,
                        category: category,
                        date: date
                    },
                    beforeSend: function() {
                        $("#tableLoader").show();
                    },
                    success: function(response) {

                        // Update table
                        $('#tableContent').html(response.table);

                        // Update pagination
                        $('.pagination-wrapper').html(response.pagination);

                        $("#tableLoader").hide();

                        // Re-attach pagination links
                        attachPaginationLinks();
                    },
                    error: function() {
                        $("#tableLoader").hide();
                    }
                });
            }

            // ============================
            // Pagination Click Event
            // ============================
            function attachPaginationLinks() {
                $(".pagination a").off("click").on("click", function(e) {
                    e.preventDefault();
                    var page = $(this).attr("href").split("page=")[1] || 1;
                    fetchData(page);
                });
            }

            // ============================
            // Filters & PerPage Change
            // ============================
            $(document).on("change keyup", "#search, #category_id, #date, .perPage",
                function() {
                    console.log("perPage Changed:", $(".perPage").val());
                    fetchData(1);
                });

            // First Load
            fetchData(1);

            $("#refreshFilters").click(function() {

                // Clear all filters
                $("#search").val("");
                $("#category_id").val("");
                $("#date").val("");
                $(".perPage").val("10"); // Default per-page

                // Fetch data again
                fetchData(1);
            });

        });

        $(document).on('click', '.copyLink', function() {
            var link = $(this).data('link');

            // Create a temporary input to copy text
            var $temp = $("<input>");
            $("body").append($temp);
            $temp.val(link).select();
            document.execCommand("copy");
            $temp.remove();

            // Optional: show alert or toast
            alert('Link copied to clipboard!');
        });
    </script>
@endsection