@extends('dashboard.dashboard')
@section('title',ucfirst('Vídeos'))
@section('main')
@section('page','article')
<div class="panel-header ">
    <div class="page-inner">
        <div class="page-header">
            @if(Breadcrumbs::exists())
                {!! Breadcrumbs::render() !!}
            @endif
        </div>
    </div>
</div>
@php
        @endphp
<div class="row">
    <div class="wizard-container wizard-round col-md-9">
        <div class="wizard-header text-center">
            <h3 class="wizard-title"><b>Vídeos</b></h3>
            <small>Os campos com (*) são de caráter obrigatório</small>
        </div>


        <form id="video" class="" action="{{route('admin.gallery.video.store',$article)}}" method="POST" novalidate
              enctype="multipart/form-data">
            @csrf
            @method('put')
            <div class="wizard-body">
                <div class="tab-content">
                    <div class="tab-pane active" id="details">
                        <div class="row">
                            <div class=" col-md-9">&nbsp;</div>
                            <div class=" col-md-3 pull-right">
                                <button class="btn btn-primary fa fa-plus-square add-scheme pull-right " type="button"
                                        style="margin-right: 40%" onclick="addVideo();"></button>
                            </div>
                            <div class="col-md-12">
                                <div class="tab-pane" id="videos">
                                    @if (count($article->videos()->get()) < 1 )
                                        <div class="row videos">

                                            <div class="col-md-5">
                                                <div class="form-group @if($errors->has('videos.0.name')) has-error @endif">
                                                    <label><span class="required">*</span>Nome:</label>
                                                    <input name="videos[0][name]" type="text" class="form-control" required value=""
                                                           tabindex="1">
                                                    <div class="msg-validate">
                                                        @foreach($errors->get('videos.0.name') as $error)
                                                            <label id="name-error" class="error" for="name">{{$error}}</label>
                                                        @endforeach
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group @if($errors->has('videos.0.link')) has-error @endif">
                                                    <label><span class="required">*</span>Link:</label>
                                                    <input name="videos[0][link]" type="text" class="form-control" required value=""
                                                           tabindex="1">
                                                    <div class="msg-validate">
                                                        @foreach($errors->get('videos.0.link') as $error)
                                                            <label id="link-error" class="error" for="link">{{$error}}</label>
                                                        @endforeach
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    @else
                                        @foreach($article->videos()->get() as $key => $video)
                                            <div class="row videos @if($key%2 == 0) odd @else even @endif">

                                                <div class="col-md-5">
                                                    <div class="form-group @if($errors->has('name')) has-error @endif">
                                                        <label><span class="required">*</span>Nome:</label>
                                                        <input name="videos[{{$key}}][name]" type="text"
                                                               class="form-control" required value="{{$video->title}}"
                                                               tabindex="1">
                                                        <div class="msg-validate">
                                                            @foreach($errors->get('name') as $error)
                                                                <label id="name-error" class="error"
                                                                       for="name">{{$error}}</label>
                                                            @endforeach
                                                        </div>
                                                    </div>

                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group @if($errors->has('link')) has-error @endif">
                                                        <label><span class="required">*</span>Link:</label>
                                                        <input name="videos[{{$key}}][link]" type="text"
                                                               class="form-control" required value="{{$video->link}}"
                                                               tabindex="1">
                                                        <div class="msg-validate">
                                                            @foreach($errors->get('link') as $error)
                                                                <label id="link-error" class="error"
                                                                       for="link">{{$error}}</label>
                                                            @endforeach
                                                        </div>
                                                    </div>

                                                </div>
                                                <button class="btn btn-xs btn-danger fa fa-minus-square  " type="button"
                                                        onclick="delVideo($(this));"></button>
                                            </div>
                                        @endforeach
                                    @endif

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12 ml-auto mr-auto text-center">
                <input type="submit" class="btn btn-finish btn-success" name="finish" value="{{__('save')}}">
                <div class="clearfix"></div>
            </div>
        </form>
    </div>
</div>
@endsection
@prepend('scripts')
    <script>
        var videoCount = $('.videos').length;

        function getVideo() {
            let classVideo = videoCount % 2 == 0 ? 'even' : 'odd';
            return '<div class="row videos ' + classVideo + '"> <div class="col-md-5"> <div class="form-group "> <label><span class="required">*</span>Nome:</label> <input name="videos[' + videoCount + '][name]" type="text" class="form-control" required value="" tabindex="1"> </div></div><div class="col-md-6"> <div class="form-group "> <label><span class="required">*</span>Link:</label> <input name="videos[' + videoCount + '][link]" type="text" class="form-control" required value="" tabindex="2"> </div></div><button class="btn btn-xs btn-danger fa fa-minus-square  " type="button"  onclick="delVideo($(this));"></button></div>';
        }

        function addVideo() {
            console.log("ADD VIDEO");
            videoCount++;
            $(".videos").last().after(getVideo());
        }

        function delVideo(item) {
            videoCount--;
            if (videoCount < 1) {
                item.parent('.videos').find('input').val('');
                item.parent('.videos').find('button').hide();
                videoCount = 1;
            } else {
                item.parent('.videos').remove();
            }
            var i = 0;

            $('.videos').each(function () {
                if (i % 2 == 0) {
                    $(this).removeClass('even');
                    $(this).addClass('odd');
                } else {
                    $(this).removeClass('odd');
                    $(this).addClass('even');
                }

                i++;
            });
        }

    </script>
@endprepend