@extends('layouts.app')

@section('page-title')
    <div class="row bg-title">
        <!-- .page title -->
        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
            <h4 class="page-title"><i class="{{ $pageIcon }}"></i>Links</h4>
        </div>
        <!-- /.page title -->
        <!-- .breadcrumb -->
        <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
            <ol class="breadcrumb">
                <li><a href="{{ route('dashboard') }}">@lang('app.menu.home')</a></li>
                <li><a href="{{ route('links') }}">Links</a></li>
                <li class="active">Project Detail</li>
            </ol>
        </div>
        <!-- /.breadcrumb -->
    </div>
@endsection

@push('head-script')
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/custom-select/custom-select.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/tagify-master/dist/tagify.css') }}">
@endpush

@section('content')

    <div class="dash_panel">
        <div class="text-left">
          {!!   $smtpSetting->set_smtp_message !!}
        </div>
        <div class="customCard">
            <div class="panel-heading">Project Detail</div>
            <div class="panel-body">
                <form role="form" method="POST" action="{{ route('links.update',$links->id) }}" enctype="multipart/form-data">
                    @csrf
                    <div class="form-body">
                        <div class="row">
                        <div class="col-md-12">
                                <div class="form-group">
                                    <label class="required">Project Name</label>
                                    <input type="text" name="project_name" id="name" class="form-control" value="{{$links->project_name}}" 
                                        autocomplete="nope" required>
                                </div>
                            </div>
                            <div class="col-xs-12">
                                <div class="form-group">
                                    <label class="control-label">Description</label>
                                    <textarea name="description" id="description" rows="3" class="form-control">{{$links->description}}</textarea>
                                </div>
                            </div>
                            <div class="col-xs-12">
                                <div class="form-group">
                                    <label class="control-label">Credentiols</label>
                                    <textarea name="credentiols" id="credentiols" rows="3" class="form-control">{{$links->credentiols}}</textarea>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Platform</label>
                                    <select name="mode" id="mode" class="form-control">
                                        <option value="">Select</option>
                                        <option value="Mobile" >Mobile</option>
                                        <option value="Web" >Web</option>
                                        <option value="Mobile & Web" >Mobile & Web</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12 ">
                                <div class="form-group">
                                    <label class="required">@lang('app.skills')</label>
                                    <input name='tags' class="form-control" placeholder='Technology Skills' value='{{$links->skills}}' required>
                                </div>
                            </div>
                            <div class="col-md-12 ">
                                <div class="form-group">
                                    <label class="required">Domain</label>
                                    <input name='domain' class="form-control" placeholder='Bussniess Domain' value='{{$links->domain}}' required>
                                </div>
                            </div>
                            <div class="col-md-12 ">
                                <div class="form-group">
                                    <label class="required">Keywords</label>
                                    <input name='keywords' class="form-control" placeholder='Keywords' value='{{$links->keywords}}' required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label>Screenshots</label>
                                <div class="form-group">
                                    <div class="fileinput fileinput-new" data-provides="fileinput">
                                        <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                                            <img src="http://via.placeholder.com/200x150.png?text=@lang('modules.profile.uploadPicture')"
                                                alt=""/>
                                        </div>
                                        <div class="fileinput-preview fileinput-exists thumbnail"
                                            style="max-width: 200px; max-height: 150px;"></div>
                                        <div>
                                        <span class="btn btn-info btn-file">
                                                <span class="fileinput-new"> @lang('app.selectImage') </span>
                                                <span class="fileinput-exists"> @lang('app.change') </span>
                                                <input type="file" multiple="multiple" accept="image/*" id="image" name="image[]"> 
                                            </span>
                                            <a href="javascript:;" class="btn btn-danger fileinput-exists"
                                            data-dismiss="fileinput"> @lang('app.remove') </a>

                                            <div id="insertBefore"></div>
                                            <button type="button" id="plusButton" class="btn btn-sm btn-info" style="margin-bottom: 20px;margin-top: 20px;">
                                                Add More <i class="fa fa-plus"></i>
                                            </button>                              
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="col-xs-12">
                                <div class="form-group">
                                    <label class="control-label">Notes</label>
                                    <textarea name="notes" id="Notes" rows="3" class="form-control">{{$links->notes}}</textarea>
                                </div>
                            </div>
                            <div class="col-xs-12">
                                <button type="submit" id="save-form" class="themeBtn">@lang('app.save')</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
@endsection

@push('footer-script')
<script src="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/custom-select/custom-select.min.js') }}"></script>
    <script src="{{ asset('plugins/tagify-master/dist/tagify.js') }}"></script>
    <script data-name="basic">
        var $insertBefore = $('#insertBefore');
    var $i = 0;
        $('#plusButton').click(function(){
        $i = $i+1;
        var indexs = $i+1;
        $(' <div id="addMoreBox'+indexs+'" class="clearfix"> '  +
            '<div class="col-md-5 "style="margin-left:5px;"><div class="form-group"><input class="form-control " name="image[]" type="file" value="" placeholder="Docs"/></div></div>' +
            '<div class="col-md-1"><button type="button" onclick="removeBox('+indexs+')" class="btn btn-sm btn-danger"><i class="fa fa-times"></i></button></div>' +
            '</div>').insertBefore($insertBefore);
    });


        function removeBox(index){
        $('#addMoreBox'+index).remove();
    }
        (function () {
            

            var input = document.querySelector('input[name=tags]'),
                // init Tagify script on the above inputs
                tagify = new Tagify(input, {
                    whitelist: {!! json_encode($skills) !!},
                    //  blacklist : [".NET", "PHP"] // <-- passed as an attribute in this demo
                });
                   var input = document.querySelector('input[name=domain]'),
                // init Tagify script on the above inputs
                tagify = new Tagify(input, {
                    whitelist: {!! json_encode($skills) !!},
                    //  blacklist : [".NET", "PHP"] // <-- passed as an attribute in this demo
                });
                  var input = document.querySelector('input[name=keywords]'),
                // init Tagify script on the above inputs
                tagify = new Tagify(input, {
                    whitelist: {!! json_encode($skills) !!},
                    //  blacklist : [".NET", "PHP"] // <-- passed as an attribute in this demo
                });


// Chainable event listeners
            tagify.on('add', onAddTag)
                .on('remove', onRemoveTag)
                .on('input', onInput)
                .on('invalid', onInvalidTag)
                .on('click', onTagClick);

// tag added callback
            function onAddTag(e) {
                tagify.off('add', onAddTag) // exmaple of removing a custom Tagify event
            }

// tag remvoed callback
            function onRemoveTag(e) {
            }

// on character(s) added/removed (user is typing/deleting)
            function onInput(e) {
            }

// invalid tag added callback
            function onInvalidTag(e) {
            }

// invalid tag added callback
            function onTagClick(e) {
            }

        })()
    </script>

  
   
@endpush