@extends('layouts.admin')
@section('css')
<link rel="stylesheet" href="{{ asset_public_admin('css/select2.css') }}">
<style>
    .select2-container--default .select2-selection--single {
        padding: 0rem 1.375rem;
    }
</style>
@endsection
@section('content')
    <div class="row">
        <div class="col-md-12 grid-margin">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Store Kid Friendly</h4>
                    {{ Form::open(['route' => ['admin.kidfriendly.store'],'id' => 'kidfriendly_form', 'method'=>'post']) }}
                    @csrf
                    <div class="row">
                        <div class="col-4 col-xl-4">
                            {{ Form::select('title_id', array('0' => 'Add New') + $Title, null, ['class' => 'form-select title_select select2', 'id'=>'title_id']) }}
                            {{-- <a href="{{ route('admin.kidfriendly.create') }}" class="btn btn-primary">Add new</a> --}}
                        </div>
                        <div class="col-3 col-xl-3">
                            <button type="submit" class="btn btn-primary" id="reviewlog1" ref="0">Create</button>
                        </div>
                    </div>
                    {{ Form::close() }}
                </div>
            </div>
        </div>

        <div class="col-lg-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">All Kid Friendly</h4>
                    <div class="table-responsive">
                        <table class="table table-hover" id="kidfriendly-table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Title</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="tablecontents">
                                @foreach ($KidFriendly as $ne)
                                    <tr class="row1" id="remove_{{ $ne->id }}" data-id="{{ $ne->id }}">
                                        <td>
                                            <div style="color:rgb(124,77,255); padding-left: 10px; float: left; font-size: 20px; cursor: pointer;" title="change display order">
                                                <i class="fa fa-ellipsis-v"></i>
                                                <i class="fa fa-ellipsis-v"></i>
                                            </div>
                                        </td>
                                        <td>{{$ne->title->title}}</td>
                                        <td>
                                            <a href="javascript:void(0)" class="delete-kidfriendly delete-icon" data-id="{{ $ne->id }}" data-toggle="tooltip" data-placement="top" title="Delete"><i class="mdi mdi-delete"></i></a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
<script src="{{ asset_public_admin('js/select2.min.js') }}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
    $(function () {
        $('.select2').select2();
        $("#kidfriendly-table").DataTable();

        $( "#tablecontents" ).sortable({
            items: "tr",
            cursor: 'move',
            opacity: 0.6,
            update: function() {
                sendOrderToServer();
            }
        });

        function sendOrderToServer() {
            var order = [];
            $('tr.row1').each(function(index,element) {
                order.push({
                    id: $(this).attr('data-id'),
                    position: index+1
                });
            });

            $.ajax({
                type: "POST",
                dataType: "json",
                url: "{{ route('admin.kidfriendly.changeorder') }}",
                data: {
                    order:order,
                    _token: '{{csrf_token()}}'
                },
                success: function(response) {
                    if (response.status == "success") {
                        console.log(response);
                    } else {
                        console.log(response);
                    }
                }
            });
        }
    });

    $(document).on("click", ".delete-kidfriendly", function () {
        var confirmation = confirm(
            "Are you sure you want to delete this item?"
        );
        if (confirmation) {
            var id = $(this).data("id");
            $.ajax({
                type: "post",
                url: "{{ route('admin.kidfriendly.delete',['_id']) }}".replace('_id', id),
                dataType: "json",
                success: function (response) {
                    if (response.status) {
                        toastCall("success", response.message);
                    } else {
                        toastCall("error", response.message);
                    }
                    $('#remove_' + id).remove();
                },
            });
        }
    });
</script>
@endsection