@extends ('backend.layouts.app')

@section('title', trans('labels.backend.articles.management') . ' | ' . trans('labels.backend.articles.create'))

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

@section('content')
    {{-- {{ Form::open(['route' => 'admin.articles.initive', 'class' => 'form-horizontal', 'files' => true, 'role' => 'form', 'method' => 'post', 'id' => 'create-article']) }} --}}
    {{ Html::form('post', route('admin.articles.initive'))->class('form-horizontal')->attribute('enctype', 'multipart/form-data')->attribute('role', 'form')->id('create-article')->open() }}
    <div class="box box-info">
        <div class="box-header card-header with-border">
            <h3 class="box-title">Article Detail</h3>
            <div class="box-tools pull-right">

                <div class="clearfix"></div>
            </div>
        </div>
        <div class="box-body">
            <div class="form-group">
                <div class="box-body">
                    <div class="col-lg-3 col-xs-12">
                        <label for="title" class="col-lg-12 nopadding control-label required">Initiative Type :</label>
                        <div class="col-lg-12 nopadding">
                            <select name="initype" id="initype" class="form-control tags box-size initype"
                                required="required">
                                <option value="">Select one</option>
                                <option value="1">Marketing Initiative</option>
                                <option value="4">Other</option>
                                <option value="2">Home Page Block 1</option>
                                <option value="3">Home Page Block 2</option>
                            </select>

                        </div>
                    </div>
                    <div id="hidemar">
                        <div class="col-lg-3 nopadding " id="optionfortag" style="display: none;">
                            <label for="title" class="col-lg-12 nopadding control-label required">Select type :</label>
                            <select name="tagtype" id="tagtype" class="form-control tags box-size">
                                <option value="">Select one</option>
                                {{-- <option value="tag">Tag wise</option> --}}
                                <option value="cat">Caregory wise</option>
                                <option value="st">Story wise</option>
                            </select>

                        </div>

                        <div class="col-lg-3 nopadding " id="tag" style="display: none;">
                            <label for="title" class="col-lg-12 nopadding control-label required">Select Tgas :</label>
                            <textarea id="Taglist" name="Taglist" class="form-control"></textarea>

                        </div>

                        <div class="col-lg-3 nopadding " id="cat" style="display: none;">
                            <label for="title" class="col-lg-12 nopadding control-label required">Select Category
                                :</label>
                            <select name="catid" class="form-control catid box-size" id="catid ">
                                <option value="">Select one</option>
                                @foreach ($catid as $auth)
                                    <option value="{{ $auth->category_id }}">{{ $auth->name }}</option>
                                @endforeach
                            </select>
                        </div>

                    </div>

                    <div class="col-lg-3 col-xs-12 idm" id="idm" style="display: none;">
                        <label for="title" class="col-lg-12 nopadding control-label required">Initiative Label :</label>
                        <div class="col-lg-12 nopadding">
                            <input type="text" name="Initiativename" value="" placeholder="" class="form-control">
                        </div>
                    </div>
                    <div class="col-lg-3 col-xs-12" id="idm">
                        <label for="title" class="col-lg-12 nopadding control-label required">Start date :</label>
                        <div class="col-lg-12 nopadding">
                            <input type="date" name="sdate" required class="form-control">
                        </div>
                    </div>
                    <div class="col-lg-3 col-xs-12" id="idm">
                        <label for="title" class="col-lg-12 nopadding control-label required">End date :</label>
                        <div class="col-lg-12 nopadding">
                            <input type="date" name="edate" required class="form-control">
                        </div>
                    </div>

                    <div class="col-lg-3 col-xs-12" id="ids">
                        <label for="title" class="col-lg-12 nopadding control-label required">id :</label>
                        <div class="col-lg-12 nopadding">
                            <select name="articleid[]" id="articleid" multiple="multiple"
                                class="articleid form-control tags box-size">
                                <option value="">Select one</option>
                                @foreach ($articleid as $auth)
                                    <option value="{{ $auth->article_id }}">{{ $auth->article_id }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>




                </div>
                <div class="col-lg-4 col-xs-12">
                    <div class="edit-form-btn">
                        <div class="span12 span-inset">
                            <button type="submit" name="status" value="S" id="draftSubmit"
                                class="btn btn-success">Create</button>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <!--edit-form-btn-->
                </div>
            </div>
        </div>
    </div>

    <div class="box-body">
        <div id="message"></div>
        <div class="table-responsive data-table-wrapper">
            <table id="albums-table" class="table table-condensed table-hover table-bordered">
                <thead>
                    <tr>
                        <th>Lable</th>
                        <th>Url</th>
                        <th>Photo</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <!--table-responsive-->
    </div><!-- /.box-body -->

    </form>
@endsection
@section('after-scripts')
    <script type="text/javascript">
        Backend.Pages.init('{{ config('locale.languages.' . app()->getLocale())[1] }}');

        $("select").select2({
            tags: true
        });

        $("select").on("select2:select", function(evt) {
            var element = evt.params.data.element;
            var $element = $(element);

            $element.detach();
            $(this).append($element);
            $(this).trigger("change");
        });
    </script>
    <script type="text/javascript">
        $('#articleid').select2({
            selectOnClose: true
        });
    </script>
    <script type="text/javascript">
        $('#catid').select2({
            selectOnClose: true
        });
    </script>
    <script type="text/javascript">
        $("#initype").change(function() {
            var end = this.value;
            if (end == 1) {
                $('#aid').show();
                $('#catidshow').hide();
                $('#optionfortag').hide();
                $('#ids').show();
                $('.idm').show();
                $('#hidemar').hide();
            }
            if (end == 4) {
                $('#aid').show();
                $('#catidshow').hide();
                $('#optionfortag').hide();
                $('#ids').show();
                $('.idm').show();
                $('#hidemar').hide();
            }
            if (end == 2) {
                $('#hidemar').show();
                $('#catidshow').show();
                $('#optionfortag').show();
                $('#aid').hide();
                $('#ids').hide();
                $('.idm').hide();
            }
            if (end == 3) {
                $('#hidemar').show();
                $('#aid').hide();
                $('#optionfortag').show();
                $('#catidshow').show();
                $('#ids').hide();
                $('.idm').hide();
            }
        });
    </script>
    <script type="text/javascript">
        $("#tagtype").change(function() {
            var end = this.value;
            if (end == 'tag') {
                $('#tag').show();
                $('#cat').hide();
                $('#ids').hide();
            }
            if (end == 'cat') {
                $('#cat').show();
                $('#tag').hide();
                $('#ids').hide();
            }
            if (end == 'st') {
                $('#ids').show();
                $('#cat').hide();
                $('#tag').hide();
            }
        });
    </script>
    <script type="text/javascript">
        jQuery().ready(function() {
            var token = $('input[name=_token]');
            jQuery("#Taglist").tokenInput(document.location.origin + "/admin/articles/getJson", {
                theme: "facebook",
                searchDelay: 300,
                minChars: 3,
                tokenLimit: 1,
                preventDuplicates: true,
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            fetch_data();

            function fetch_data() {
                var _token = $('input[name="_token"]').val();
                $.ajax({
                    url: "{{ url('admin/articles/fetch_data') }}",
                    data: {
                        _token: _token
                    },
                    dataType: "json",
                    success: function(data) {
                        var html = '';
                        for (var count = 0; count < data.length; count++) {
                            html += '<tr>';
                            html +=
                                '<td width="30%;" contenteditable class="column_name" data-column_name="lable" data-id="' +
                                data[count].id + '">' + data[count].lable + '</td>';
                            html +=
                                '<td width="30%;" contenteditable class="column_name" data-column_name="url" data-id="' +
                                data[count].id + '">' + data[count].url + '</td>';
                            html +=
                                '<td width="30%;"><img style="width:50%;" src="{{ config('constant.SiteCmsurl') }}/albums/' +
                                data[count].attachment + '" alt=""></td>';
                            html += '<td><form action="{{ url('admin/articles/photos') }}/' + data[
                                    count].id +
                                '" method="post" class="form-horizontal" accept-charset="utf-8" enctype="multipart/form-data">@csrf<input name="photo" type="file" class="inputFile" /><input type="submit" value="Upload" class="btn btn-primary btn-md" style="float: right;" /></form></td></tr>';
                        }
                        $('tbody').html(html);
                    }
                });
            }
            var _token = $('input[name="_token"]').val();
            $(document).on('blur', '.column_name', function() {
                var column_name = $(this).data("column_name");
                var column_value = $(this).text();
                var id = $(this).data("id");

                if (column_value != '') {
                    $.ajax({
                        url: "{{ url('admin/articles/update_data') }}",
                        method: "POST",
                        data: {
                            column_name: column_name,
                            column_value: column_value,
                            id: id,
                            _token: _token
                        },
                        success: function(data) {
                            $('#message').html(data);
                        }
                    })
                } else {
                    $('#message').html("<div class='alert alert-danger'>Enter some value</div>");
                }
            });
        });
    </script>
    <style type="text/css" media="screen">
        .inputFile {
            padding: 5px;
            background-color: #FFFFFF;
            border: #F0E8E0 1px solid;
            border-radius: 4px;
        }
    </style>
@endsection