@extends ('backend.layouts.app')

@section('title', trans('articlesrelated.backend.management') . ' | ' . trans('articlesrelated.backend.edit'))

@section('page-header')
    <h1>
        {{ trans('articlesrelated.backend.management') }}
        <small>{{ trans('articlesrelated.backend.edit') }}</small>
    </h1>
@endsection

@section('content')

    @if (!empty($articleRelated))

        <div class="box box-info" style="margin-top: 20px;">
            <div class="box-header with-border card-header">
                <h3 class="box-title" style="display: block;">
                    {{ trans('articlesrelated.backend.relatedList.title', ['parentID' => $articleRelated['parent_id']]) }}
                </h3>

                <span>
                    <p id="message"></p>
                </span>
                <div class="box-body" style="padding: 0;">
                    <div class="table-responsive data-table-wrapper">
                        <div class="table-responsive data-table-wrapper">
                            <div id="stays-table_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                                <div class="dataTables_length" id="stays-table_length">
                                </div>
                                <table id="articles-table" class="table table-condensed table-hover table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Sr. No.</th>
                                            <th>{{ trans('articlesrelated.backend.relatedList.table.articleID') }}</th>
                                            <th>{{ trans('articlesrelated.backend.relatedList.table.articleTitle') }}</th>
                                            <th>{{ trans('articlesrelated.backend.relatedList.table.actions') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody class="transparent-bg">
                                        @php $i = 1; @endphp

                                        @foreach ($articleRelated['related_articles'] as $raVals)
                                            <tr id="view_{{ $raVals['article_id'] }}">
                                                <td id="seq">
                                                    {{ $i }}
                                                </td>
                                                <td>{{ $raVals['article_id'] }}</td>
                                                <td>
                                                    {{ $raVals['title'] }}
                                                </td>
                                                <td>
                                                    <a class="btn btn-flat btn-danger removethis"
                                                        data-id="{{ $raVals['article_id'] }}">
                                                        <i class="fa fa-minus" aria-hidden="true"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                            @php $i++; @endphp
                                        @endforeach
                                    </tbody>
                                </table>

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

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


        <form method="POST" action="{{ route('admin.articles-related.update', $articleRelated['id']) }}" role="form"
            id="edit-articlerelated" class="form-horizontal">
            @csrf
            <input type="hidden" name="collectionId" id="collectionId" value="{{ $articleRelated['id'] }}" />
            <div class="box box-info">
                <div class="box-header with-border card-header">
                    <h3 class="box-title">{{ trans('articlesrelated.backend.form.formTitle') }}</h3>
                </div><!--box-header with-border-->

                <div class="box-body">
                    <div class="row" style="margin-bottom: 2rem;">
                        {!! Html::label('article_id', 'New Related Article', ['class' => 'col-lg-2 control-label required']) !!}

                        <div class="col-lg-10">
                            {!! Html::text('article_id')->class('form-control box-size')->placeholder('New Related Article')->required()->style('float:left;') !!} <a style="margin-left:1rem;float:left;"
                                class="btn btn-flat btn-success addthis">
                                <i class="fa fa-plus" aria-hidden="true"></i>
                            </a>
                        </div><!--col-lg-10-->
                    </div><!--row-->
                </div><!--box-body-->

            </div><!--box box-info -->
        </form>

    @endif

@endsection

@section('before-scripts')
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $(document).on('click', '.removethis', function() {
                var article_id = $(this).attr("data-id");
                var collectionId = $('#collectionId').val();
                swal({
                    title: "Are you sure?",
                    text: "Sure to remove this article from related list ?",
                    type: "warning",
                    showCancelButton: true,
                    closeOnConfirm: false,
                    confirmButtonText: "Yes, Do it!",
                    confirmButtonColor: "#ec6c62"
                }, function() {
                    $.ajax({
                            url: "{{ route('admin.articlesrelated.remove-article') }}",
                            method: "POST",
                            data: {
                                collectionId: collectionId,
                                article_id: article_id
                            },
                            success: function(data) {
                                location.reload();
                            }
                        })
                        .error(function(data) {
                            swal("Oops", data.responseJSON.message, "error");
                        });
                });
            });

            $(document).on('click', '.addthis', function() {
                var article_id = $('#article_id').val();
                var collectionId = $('#collectionId').val();
                if (article_id == '') {
                    swal("Oops", "Please input the article id you want to add in related list", "error");
                    return false;
                }
                swal({
                    title: "Are you sure?",
                    text: "Sure to add this article in related list ?",
                    type: "warning",
                    showCancelButton: true,
                    closeOnConfirm: false,
                    confirmButtonText: "Yes, Do it!",
                    confirmButtonColor: "#ec6c62"
                }, function() {
                    $.ajax({
                            url: "{{ route('admin.articlesrelated.add-article') }}",
                            method: "POST",
                            data: {
                                collectionId: collectionId,
                                article_id: article_id
                            },
                            success: function(data) {
                                location.reload();
                            }
                        })
                        .error(function(data) {
                            swal("Oops", data.responseJSON.message, "error");
                        });
                });
            });

        });
    </script>
@endsection