@extends('admin.layouts.master')

@section('title', 'Manage post List')

@section('css')
    <style>
        /* Loader Overlay */
        #tableLoader {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
        }

        /* Spinner */
        #tableLoader .spinner {
            border: 4px solid #f3f3f3;
            /* Light grey */
            border-top: 4px solid #3498db;
            /* Blue */
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }

        /* Spin Animation */
        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>

    <style>
        /* Wrapper */
        .custom-table-wrapper {
            background: #ffffff;
            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        /* Table */
        .custom-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0 6px;
            /* Row spacing like Excel */
        }

        .custom-table thead th {
            background: #e9ecef;
            font-weight: 600;
            padding: 10px;
            text-align: left;
            border: 1px solid rgb(140, 169, 247);
        }

        .custom-table tbody td {
            vertical-align: middle;
            background: #fff;
            padding: 4px;
            border-bottom: 1px solid rgba(204, 204, 204, 0.397);
        }

        .custom-table tbody tr:hover td {
            background: #f1f6fa;
        }

        /* Title column */
        .title-column {
            max-width: 300px;
        }

        .title-text {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            font-weight: 500;
            color: #001f3f;
        }

        .badge-info {
            font-size: 0.75rem;
            margin-top: 4px;
            display: inline-block;
        }

        /* Buttons */
        .action-btn,
        .dropdown .btn {
            border-radius: 6px;
            padding: 5px 13px !important;
            font-size: 14px;
            background: #c5c5c5d5;
            color: #1a1a1a;
            border: none;
        }

        .dropdown-menu {
            border-radius: 6px !important;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
            left: -80px !important;
        }

        .pagination {
            justify-content: center;
            margin-top: 15px;
        }

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

        .table-header-sticky th {
            position: sticky;
            top: 0;
            background-color: #fff;
            /* header background */
            z-index: 10;
            box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
            /* optional shadow */
        }
    </style>
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="">


                <div class="custom-table-wrapper">

                    <!-- Top Controls -->
                    <div class="d-flex justify-content-between pl-4 pr-4 pt-4">
                        <!-- Show Entries -->
                        <div>
                            <label class="small mr-2">Show</label>
                            <select id="perPage" class="form-control form-control-sm d-inline-block" style="width:auto;">
                                <option value="10" {{ @$perPage == 10 ? 'selected' : '' }}>10</option>
                                <option value="20" {{ @$perPage == 20 ? 'selected' : '' }}>20</option>
                                <option value="50" {{ @$perPage == 50 ? 'selected' : '' }}>50</option>
                                <option value="all" {{ @$perPage == '10000' ? 'selected' : '' }}>All</option>
                            </select>
                            <span class="small">entries</span>
                        </div>


                        <!-- Search -->
                        <div class="col-md-3">
                            <input type="text" name="title" id="search" class="form-control filter-input"
                                value="{{ request('title') }}" placeholder="Search by Title">
                        </div>
                    </div>
                    <div class="card-body" style="margin-top: 0px;padding-top:0px">

                        <!-- Collapse Toggle Button -->
                        <div class="mb-2">

                        </div>

                        <!-- Collapsible Filter Form -->
                        <div class="collapse" id="filterCollapse">
                            <div class=" p-3 mb-3">
                                <div class="row g-2 align-items-center">
                                    {{-- Category --}}
                                    <div class="col-md-2 d-flex align-items-center">
                                        <select name="category" id="category_id" class="form-control filter-select">
                                            <option value="">-- Cat --</option>
                                            @foreach (categories() as $cat)
                                                <option value="{{ $cat->id }}"
                                                    {{ request('category') == $cat->id ? 'selected' : '' }}>
                                                    {{ $cat->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    {{-- Division --}}
                                    <div class="col-md-2 d-flex align-items-center">
                                        <select name="division" id="division_id" class="form-control filter-select">
                                            <option value="">-- Div --</option>
                                            @foreach (divisions() as $division)
                                                <option value="{{ $division->id }}"
                                                    {{ request('division') == $division->id ? 'selected' : '' }}>
                                                    {{ $division->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    {{-- City --}}
                                    <div class="col-md-1 d-flex align-items-center">
                                        <select name="city" id="city_id" class="form-control filter-select">
                                            <option value="">-- City --</option>
                                            @foreach (cities() as $city)
                                                <option value="{{ $city->id }}"
                                                    {{ request('city') == $city->id ? 'selected' : '' }}>
                                                    {{ $city->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    {{-- Upazila --}}
                                    <div class="col-md-1 d-flex align-items-center">
                                        <select name="upazila" id="upazila_id" class="form-control filter-select">
                                            <option value="">-- Upz --</option>
                                            @foreach (upazillas() as $upazila)
                                                <option value="{{ $upazila->id }}"
                                                    {{ request('upazila') == $upazila->id ? 'selected' : '' }}>
                                                    {{ $upazila->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    {{-- Status --}}
                                    <div class="col-md-1 d-flex align-items-center">
                                        <select name="status" id="status_id" class="form-control filter-select">
                                            <option value="">-- Status --</option>
                                            <option value="1" {{ request('status') == '1' ? 'selected' : '' }}>Active
                                            </option>
                                            <option value="0" {{ request('status') == '0' ? 'selected' : '' }}>
                                                Inactive
                                            </option>
                                        </select>
                                    </div>

                                    {{-- From Date --}}
                                    <div class="col-md-2 d-flex align-items-center">
                                        <input type="date" name="from_date" id="from_date"
                                            class="form-control filter-input" value="{{ request('from_date') }}"
                                            placeholder="From Date">
                                    </div>

                                    {{-- To Date --}}
                                    <div class="col-md-2 d-flex align-items-center">
                                        <input type="date" name="to_date" id="to_date"
                                            class="form-control filter-input" value="{{ request('to_date') }}"
                                            placeholder="To Date">
                                    </div>

                                    {{-- Refresh Button --}}
                                    <div class="col-md-1 d-flex align-items-center">
                                        <button id="refreshFilters" class="btn btn-secondary w-100">
                                            <i class="fa fa-sync"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>



                        {{-- Table Wrapper --}}
                        <div id="postsTable" style="position: relative;">
                            <div id="tableContent">
                                @include('admin.news.partials.news-table', ['posts' => $posts])
                            </div>

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

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


    <div class="modal fade" id="leadNewsPositionModal" tabindex="-1">
        <div class="modal-dialog modal-sm">
            <form id="positionForm" method="POST">
                @csrf
                <input type="hidden" name="_method" id="formMethod" value="POST">

                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalTitle">Update Position</h5>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <div class="modal-body">
                        <div class="">
                            <h3 class="mainNewsTitle two-line-text" style="font-size: 15px"></h3>
                        </div>
                        <div>
                            <label>Position</label>
                            <input type="hidden" name="type" id="leadMainType" class="form-control">
                            <input type="hidden" name="id" id="modalId" class="form-control">
                            <input type="hidden" name="news_id" id="modalNewsId" class="form-control">
                            <input type="text" name="position" id="modalPosition" class="form-control">
                            <span class="text-danger" id="nameError"></span>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button class="btn btn-success" type="submit">Save</button>
                    </div>
                </div>

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

@endsection


{{-- JS Section --}}
@section('js')
    <script>
        $(document).ready(function() {

            function fetchData(page = 1) {

                var title = $('#search').val();
                var perPage = $('#perPage').val();
                var category = $('#category_id').val();
                var division = $('#division_id').val();
                var city = $('#city_id').val();
                var upazila = $('#upazila_id').val();
                var status = $('#status_id').val();
                var from_date = $('#from_date').val();
                var to_date = $('#to_date').val();

                $.ajax({
                    url: "{{ route('news.index') }}",
                    method: "GET",
                    data: {
                        page: page,
                        title: title,
                        category: category,
                        division: division,
                        city: city,
                        upazila: upazila,
                        status: status,
                        from_date: from_date,
                        to_date: to_date,
                        perPage: perPage
                    },
                    beforeSend: function() {
                        $("#tableLoader").show();
                    },
                    success: function(response) {
                        $('#tableContent').html(response.table);
                        $('.pagination-wrapper').html(response.pagination);
                        $("#tableLoader").hide();
                        attachPaginationLinks();
                    },
                    error: function() {
                        $("#tableLoader").hide();
                    }
                });
            }

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

            // Trigger fetch on filter change
            $(document).on("change keyup",
                "#search, #category_id, #division_id, #city_id, #upazila_id, #status_id, #from_date, #to_date, #perPage",
                function() {
                    fetchData(1);
                });

            // First load
            fetchData(1);

            // Refresh filters
            $("#refreshFilters").click(function() {
                $('#filterForm')[0].reset();
                fetchData(1);
            });

            // Copy link functionality
            $(document).on('click', '.copyLink', function() {
                var link = $(this).data('link');
                var $temp = $("<input>");
                $("body").append($temp);
                $temp.val(link).select();
                document.execCommand("copy");
                $temp.remove();
                alert('Link copied to clipboard!');
            });

            // News status toggle
            $(document).on('click', '.newsStatus', function() {
                var button = $(this);
                var postId = button.data('id');

                if (!confirm('Are you sure you want to change status?')) return;

                $.post('{{ route('news.update.status') }}', {
                    _token: '{{ csrf_token() }}',
                    id: postId
                }, function(response) {
                    if (response.status) {
                        if (response.data.isActive) {
                            button.removeClass('btn-danger').addClass('btn-success').html(
                                '<i class="fa fa-check-circle"></i>');
                        } else {
                            button.removeClass('btn-success').addClass('btn-danger').html(
                                '<i class="fa fa-times-circle"></i>');
                        }
                        toastr.success(response.success);
                    } else {
                        toastr.error('Failed to update status');
                    }
                });
            });

        });

        window.leadMain = function(id, type = 'lead') {
            $("#positionForm").attr("action", "news/main-lead/update");
            $("#formMethod").val("get");
            $("#leadMainType").val(type);
            $("#modalNewsId").val(id);
            $("#leadNewsPositionModal").modal('show');
        };


        window.deleteNews = function(id, type = 'news') {
            if (!confirm("Are you sure you want to delete this item?")) return;
            $.ajax({
                url: "/news/delete/" + id,
                method: "GET",
                data: {
                    type: type,
                },
                success: function(res) {
                    showToast('success', res.success);
                    // Remove deleted row
                    $("#row-" + id).fadeOut(300, function() {
                        $(this).remove();
                        refreshSerial(); // re-index SL numbers
                    });
                },
                error: function() {
                    showToast('error', 'Delete failed');
                }
            });
        };

        $(document).on('submit', '.delete-news-form', function(e) {
            e.preventDefault();

            if (!confirm('Are you sure?')) {
                return false;
            }

            let form = $(this);
            let actionUrl = form.attr('action');

            $.ajax({
                url: actionUrl,
                type: 'POST',
                data: form.serialize(),
                success: function(response) {

                    // চাইলে row remove করতে পারো
                    form.closest('tr').fadeOut(300, function() {
                        $(this).remove();
                    });

                    // Optional alert
                    alert('News deleted successfully!');
                },
                error: function(xhr) {
                    alert('Something went wrong. Please try again.');
                }
            });
        });
    </script>

@endsection