@extends('admin.layouts.master')

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

@section('css')
    <style>
        /* Modern Excel-like Table Card */
        .card {
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
            border: none;
        }

        /* Header */
        .card-header {
            background-color: #0073e6;
            color: #fff;
            font-weight: 600;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            font-size: 1.1rem;
        }

        .table {
            border-collapse: collapse;
            width: 100%;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #1f2d3d;
        }

        .table thead th {
            background-color: #0066ec;
            color: #ffffff;
            font-weight: 700;
            border: 1px solid #c1d4ff;
            text-align: center;
            padding: 12px;
        }

        .table tbody td {
            border: 1px solid #d1d9e6;
            padding: 10px;
            vertical-align: middle;
            font-size: 0.9rem;
        }

        .table tbody tr:nth-child(even) {
            background-color: #f8fbff;
        }

        .table tbody tr:hover {
            background-color: #3100a5;
            color: #fff !important;
            transition: background-color 0.2s ease-in-out;
        }

        .table tbody tr .two-line-text:hover {
            color: #fff !important;
        }

        /* Two-line title with ellipsis */
        .two-line-text {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 500;
        }

        /* Status Button */
        .newsStatus {
            min-width: 40px;
            border-radius: 6px;
            color: #fff;
            font-size: 0.85rem;
            padding: 0.35rem 0.65rem;
            transition: all 0.2s ease;
        }

        .newsStatus.btn-success {
            background: linear-gradient(45deg, #28a745, #00c853);
            border: none;
        }

        .newsStatus.btn-danger {
            background: linear-gradient(45deg, #ff4d4d, #ff1a1a);
            border: none;
        }

        .newsStatus:hover {
            transform: translateY(-2px);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }

        /* Buttons Styling */
        .btn-group .btn {
            border-radius: 6px;
            font-size: 0.85rem;
            padding: 0.35rem 0.8rem;
            transition: all 0.2s ease-in-out;
        }

        .btn-group .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
        }

        .btn-sm {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }

        /* Search input */
        .input-group .form-control {
            border-radius: 6px 0 0 6px;
            border: 1px solid #c1d4ff;
        }

        .input-group .btn {
            border-radius: 0 6px 6px 0;
            background-color: #0073e6;
            color: #fff;
            border: none;
            transition: all 0.2s ease;
        }

        .input-group .btn:hover {
            background-color: #b50000;
            color: #fff;
        }

        /* Drag handle cursor */
        #sortable tr {
            cursor: grab;
        }
    </style>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
@endsection

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



                <div class="card-body">
                    {{-- Excel-like Table --}}
                    <div class="table-responsive">
                        <table class="table table-hover" id="sortable-table">
                            <thead>
                                <tr>
                                    <th style="width:50px;">SL</th>
                                    <th style="width:80px;">Status</th>
                                    <th>Title</th>
                                    <th style="width:150px;">Start From</th>
                                    <th style="width:150px;">End From</th>
                                    <th style="width:150px;">Update</th>
                                    <th style="width:120px;">Manage</th>
                                </tr>
                            </thead>
                            <tbody id="sortable">
                                @forelse($posts as $info)
                                    <tr class="ui-state-default" data-id="{{ $info['id'] }}" id="row-{{ $info['id'] }}">
                                        <td class="text-center">{{ $loop->iteration }}</td>
                                        <td class="text-center">
                                            <button type="button" data-id="{{ $info['id'] }}"
                                                class="newsStatus postClass{{ $info['id'] }} btn btn-{{ $info['isActive'] ? 'success' : 'danger' }}">
                                                {!! $info['isActive'] ? '<i class="fa fa-check-circle"></i>' : '<i class="fa fa-times-circle"></i>' !!}
                                            </button>
                                        </td>
                                        <td><span class="two-line-text">{{ $info['title'] }}</span></td>
                                        <td>{{ $info['start_from'] ? date_time_format($info['start_from']) : '-' }}
                                        <td>{{ $info['end_from'] ? date_time_format($info['end_from']) : '-' }}
                                        </td>
                                        <td class="text-center">{{ date_time_format($info['created_at']) }}</td>

                                        <td class="text-center">
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-sm btn-primary dropdown-toggle"
                                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="fa fa-cog"></i>
                                                </button>

                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <a class="dropdown-item" href="#" target="_blank">
                                                        <i class="fa fa-eye text-info"></i> View
                                                    </a>

                                                    <a class="dropdown-item edit-btn" data-id="{{ $info['id'] }}"
                                                        data-news_id="{{ $info['news_id'] }}"
                                                        data-position="{{ $info['position'] }}"
                                                        data-news_title="{{ $info['title'] }}" data-toggle="modal"
                                                        data-target="#mainNewsModal">

                                                        <i class="fa fa-list-ol text-primary mr-1"></i> Update Position
                                                    </a>


                                                    <a class="dropdown-item" href="{{ route('news.edit', $info['id']) }}">
                                                        <i class="fa fa-edit text-success"></i> Edit
                                                    </a>

                                                    <a href="javascript:void(0)" class="dropdown-item text-danger"
                                                        onclick="deleteNews({{ $info['id'] }}, 'lead')">
                                                        <i class="fa fa-trash"></i> Delete
                                                    </a>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center bg-danger text-white">No Lead News Found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>

                    </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 class="">
                            <label>Position</label>
                            <input type="hidden" name="type" value="lead" 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
@section('js')
    @include('components.alert')

    <script>
        // Edit Modal using data attributes
        $(document).on('click', '.edit-btn', function() {
            var id = $(this).data('id');
            $("#positionForm").attr("action", "main-lead/update");
            $("#formMethod").val("get");
            $("#modalPosition").val($(this).data('position'));
            $("#modalId").val($(this).data('id'));
            $("#modalNewsId").val($(this).data('news_id'));
            $(".mainNewsTitle").html($(this).data('news_title'));
            $("#leadNewsPositionModal").modal('show');
        });

        function savePosition() {
            let id = $("#modal_news_id").val();
            let position = $("#modal_position").val();
            $.ajax({
                method: "GET",
                data: {
                    id: id,
                    position: position,
                    type: "lead" // ✅ TYPE ADDED
                },
                success: function(res) {
                    $("#updatePositionModal").modal("hide");
                    showToast('success', res.success);
                    location.reload();
                },
                error: function() {
                    showToast('error', 'Failed to update position');
                }
            });
        }

        $(function() {
            // Table sortable
            $("#sortable").sortable({
                update: function(event, ui) {
                    var ids = $(this).sortable('toArray', {
                        attribute: 'data-id'
                    });
                    showLoader();
                    $.ajax({
                        url: "{{ route('news.main-lead.update') }}",
                        method: 'GET',
                        data: {
                            id: ids,
                            type: "lead" // ✅ TYPE ADDED
                        },
                        success: function(res) {
                            console.log(res)
                            showToast('success', res.success);
                            refreshSerial();
                            hideLoader();
                        },
                        error: function(xhr) {
                            showToast('error', 'Failed to update position');
                            hideLoader();
                        }
                    });
                }
            });



            // Refresh SL column
            function refreshSerial() {
                $("#sortable tr").each(function(index) {
                    $(this).find("td:first").text(index + 1);
                });
            }

            // Loader
            function showLoader() {
                $('#loader').addClass('active');
            }

            function hideLoader() {
                $('#loader').removeClass('active');
            }
        });


        // Status update (2nd function)
        $(document).on("click", ".newsStatus", function() {
            let id = $(this).data("id");
            updateNewsStatus(id);
        });

        function updateNewsStatus(id) {
            $.ajax({
                method: "get",
                url: "{{ route('news.update.status') }}",
                data: {
                    id: id,
                    type: "lead", // ✅ TYPE ADDED
                    statusUpdate: true
                },
                dataType: "JSON",
                success: function(res) {
                    console.log(res)
                    let activeIcon = `<i class="fa fa-check-circle"></i>`;
                    let inActiveIcon = `<i class="fa fa-times-circle"></i>`;

                    let newsStatus = $(`.postClass${id}`);

                    newsStatus.removeClass(res.data.isActive ? 'btn-danger' : 'btn-success')
                        .addClass(res.data.isActive ? 'btn-success' : 'btn-danger')
                        .html(res.data.isActive ? activeIcon : inActiveIcon);

                    showToast('success', res.success)
                },
                error: function(xhr) {
                    showToast('error', 'Failed to update status')
                }
            });
        }

        function refreshSerial() {
            $("#sortable tr").each(function(index) {
                $(this).find("td:first").text(index + 1);
            });
        }


        window.deleteNews = function(id, type = 'lead') {
            if (!confirm("Are you sure you want to delete this item?")) return;
            $.ajax({
                url: "/news/main-lead/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');
                }
            });
        };
    </script>
@endsection