@extends('layouts.app')

@section('content')
    <div class="row">
        <div class="col-md-12 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>{{ $mode ?? 'Add' }} Article</h2>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        {{-- Article List --}}
        <div class="col-md-6 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>Articles <small>List</small></h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content table-responsive">
                    <table id="datatableArticle" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Article Type</th>
                                <th>NextArticleId</th>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Article Form --}}
        <div class="col-md-6 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>{{ $mode ?? 'Add' }}</h2>

                    <div class="clearfix"></div>
                </div>

                <div class="x_content responsive_form">
                    <br />
                    <form class="form-horizontal form-label-left input_mask" method="POST"
                        action="{{ isset($mode) && $mode == 'Edit' ? route('article.update') : route('article.add') }}"
                        enctype="multipart/form-data">
                        @csrf

                        @if (isset($mode) && $mode == 'Edit')
                            @method('PUT')
                            <input type="hidden" name="article_id"
                                value="{{ $articleData['iArticleId'] ?? old('article_id') }}">
                        @endif

                        <div class="item form-group">
                            <label class="control-label col-md-3">Article Type<span class="required">*</span></label>
                            <div class="col-md-9">
                                <input id="article_type" name="article_type" type="text" class="form-control"
                                    placeholder="Type" value="{{ $articleData['vArticleType'] ?? old('article_type') }}"
                                    required>
                                @error('article_type')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="item form-group">
                            <label class="control-label col-md-3">Button Text<span class="required">*</span></label>
                            <div class="col-md-9">
                                <input id="article_button" name="article_button" type="text" class="form-control"
                                    placeholder="Button Text"
                                    value="{{ $articleData['vButtonText'] ?? old('article_button') }}" required>
                                @error('article_button')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="item form-group">
                            <label class="control-label col-md-3">NextArticleId</label>
                            <div class="col-md-9">
                                <input id="iNextArticleId" name="iNextArticleId" type="number" class="form-control"
                                    placeholder="NextArticleId"
                                    value="{{ $articleData['iNextArticleId'] ?? old('iNextArticleId') }}">
                                @error('iNextArticleId')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="ln_solid"></div>
                        <div class="form-group">
                            <div class="col-md-9 col-md-offset-3">
                                @if (Auth::guard('admin')->user()->bContent == 1)
                                    <a href="{{ route('article.index') }}" class="btn btn-primary">Cancel</a>
                                    <button type="submit"
                                        class="btn btn-success">{{ isset($mode) && $mode == 'Edit' ? 'Save Changes' : 'Create' }}</button>
                                @endif
                            </div>
                        </div>

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

    <!-- BEGIN responsive modal-->
    <div id="deleteArticle" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <form class="form-horizontal" id="processrequest" method="post" action="{{ route('article.delete') }}">
                    @csrf
                    @method('PUT')
                    <div class="modal-header">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
                        <h4 class="modal-title">Delete Article</h4>
                    </div>
                    <div class="modal-body">
                        <h5>
                            <p>Are you sure want to delete <strong id="article_name"> </strong>?</p>
                        </h5>
                    </div>
                    <div class="modal-footer">
                        <input type='hidden' id="article_id" name='article_id' value=''>
                        <button type="button" data-bs-dismiss="modal" class="btn btn-default">Keep</button>
                        <button type="submit" class="btn btn-primary">Delete</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- END responsive modal-->
@endsection
@push('scripts')
    <script type="module">
        $(document).ready(function() {
            var datatableArticle = $('#datatableArticle').DataTable({
                processing: true,
                serverSide: true,
                searching: true,
                pageLength: 50,
                scrollX: true,
                order: [
                    [1, 'asc'],
                ],
                ajax: {
                    url: '{{ route('article.list') }}',
                    type: 'POST',
                    data: function(d) {
                        d._token = $('meta[name="csrf-token"]').attr("content"); // CSRF token
                    }
                },
                columns: [{
                        data: 'iArticleId',
                        name: 'iArticleId'
                    },
                    {
                        data: 'vArticleType',
                        name: 'vArticleType'
                    },
                    {
                        data: 'iNextArticleId',
                        name: 'iNextArticleId'
                    },
                    {
                        data: 'contentAction',
                        name: 'contentAction',
                        orderable: false
                    },

                    {
                        data: 'action',
                        name: 'action',
                        orderable: false
                    }
                ],
            });

            $('#datatableArticle tbody').on('click', '.articledelete', function() {
                var article_id = $(this).attr('data-id');
                var article_name = $(this).attr('data-name');

                $("#article_id").val(article_id);
                $("#article_name").html(article_name);
                $('#deleteArticle').modal('show');
            });
        });
    </script>
@endpush