@extends('main.layouts.app')
@section('content')
<a href="{{ route('feeds.create') }}" class="btn btn-primary mb-3 mt-3">Create Feed</a>
<table class="table table-bordered table-striped">
    <thead class="table">
        <tr>
            <th>Name</th>
            <th>Status</th>
            <th>Index</th>
            <th style="width: 150px;">Actions</th>
        </tr>
    </thead>
    <tbody>
        @forelse ($feeds as $feed)
            <tr>
                <td>{{ $feed->name }}</td>
                <td>
                    <span class="badge {{ $feed->is_enabled ? 'bg-success' : 'bg-secondary' }}">
                        {{ $feed->is_enabled ? 'Enabled' : 'Disabled' }}
                    </span>
                </td>
              <td>
    <input type="number" 
           class="form-control feed-order" 
           data-id="{{ $feed->id }}" 
           value="{{ $feed->display_order }}">
</td>

                <td>
                    <a href="{{ route('feeds.edit', $feed->id) }}" class="btn btn-sm btn-warning">Edit</a>
                    <form action="{{ route('feeds.destroy', $feed->id) }}" method="POST" style="display:inline-block;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-danger"
                            onclick="return confirm('Are you sure you want to delete this feed?')">
                            Delete
                        </button>
                    </form>
                </td>
            </tr>
        @empty
            <tr>
                <td colspan="4" class="text-center">No feeds found.</td>
            </tr>
        @endforelse
    </tbody>
</table>

<script>
document.querySelectorAll('.feed-order').forEach(input => {
    input.addEventListener('change', function() {
        let id = this.dataset.id;
        let display_order = this.value;

        fetch("{{ route('feeds.updateOrder') }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },
            body: JSON.stringify({ id, display_order })
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                alert(data.message);
            }
        });
    });
});
</script>


@endsection