@extends("admin.layouts.master")

@section("title","Manage Tag")

@section("content")

<div class="row">
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h3 class="text-left">Tag Form</h3>
            </div>
            <div class="card-body">
                <form action="{{ route('tags.trending', ['store'=>true]) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('GET')

                <div class="form-group">
                    <label for="tag_id">Select</label>
                    <div class="">
                        <div class="form-group" style="margin-left: -7px">
                            <select name="tag_id[]" id="tag_id" autofocus class="form-control" multiple data-placeholder="Select From Database">
                                @forelse($tags as $key=>$tag)
                                    <option value="{{$tag->id}}"
                                        @forelse($trending as $trend)
                                            {{$tag->id == $trend->tag_id ? 'selected' : ''}}
                                        @empty
                                        @endforelse
                                    >
                                     {{$tag->name}}</option>
                                @empty
                                @endforelse
                            </select>
                            @error('tag_id')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-block btn-success">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="col-lg-8">

    <div class="card">
        <div class="card-header">
            <h3 class="text-left">All Tags</h3>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover" id="sortable-table">
                    <thead>
                    <tr>
                        <th>SL</th>
                        <th>Name</th>
                    </tr>
                    </thead>
                    <tbody id="sortable">
                    @forelse($trending as $key=>$info)
                        <tr class="ui-state-default" data-id="{{$key}}" info-id="{{$info->id}}">
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $info->tag->name ?? ''}}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5"><p class="bg-danger p-10 text-center">No Tag Found</p></td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>


</div>

</div>

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
    #sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
    $( function() {
        $( "#sortable" ).sortable();
    } );
</script>

<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        // Initialize the sortable UI
        $('#sortable').sortable({
            update: function(event, ui) {
                var serial = $(this).sortable('toArray', { attribute: 'data-id' });
                var id = $(this).sortable('toArray', { attribute: 'info-id' });

                var url = window.location.href
                $.ajax({
                    url: url,
                    method: 'GET',
                    data: {
                        'serial': serial,
                        'id' : id,
                    },
                    success: function(res) {
                        // alert(res.success)
                    },
                    error: function(xhr) {
                        // alert('position not updated')
                    }
                });
            }
        });
    });
</script>

@endsection

@section("js")

<!-- Style -->

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<!-- Script -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        $('select').select2();
    });
</script>
@endsection