@extends('dashboard.dashboard')
@section('title',ucfirst('Mídia | Vídeos'))
@section('main')
@section('page','gallery')
<div class="panel-header ">
    <div class="page-inner">
        <div class="page-header">
            @if(Breadcrumbs::exists())
                {!! Breadcrumbs::render() !!}
            @endif
        </div>
    </div>
</div>
@php
        @endphp
<form id="gallery" action="{{route('admin.gallery.video.update',$gallery)}}" method="POST" novalidate
      enctype="multipart/form-data">
    @csrf
    @method('post')
    <div class="row">
        <div class="wizard-container wizard-round col-md-9">
            <div class="wizard-header text-center">
                <h3 class="wizard-title"><b>Mídia</b></h3>
                <small>Os campos com (*) são de caráter obrigatório</small>
            </div>

            <div class="wizard-body">

                <div class="tab-content">
                    <div class="tab-pane active" id="tab-details">

                        <div class="col-md-12 text-center mb-2 p-2" style="background: #eee;">
                            <h3 class="wizard-title"><b class="text-capitalize">Vídeos</b></h3>
                            <button class="btn btn-xs btn-primary fa fa-plus-square" type="button"
                                    style="float:right; margin-top:-27px;" onclick="addItem();"></button>
                        </div>
                        @if (sizeof($gallery->videos()->get()) > 0)

                            @foreach ($gallery->videos()->get() as $key => $video)
                                <div class="row videos">
                                    <div class="col-md-11">
                                        <div class="form-group ">
                                            <label><span class="required">*</span>Link (Youtube):</label>
                                            <input name="video[{{$key}}][link]" type="text" class="form-control" required
                                                   value="{{$video->video}}"
                                                   tabindex="{{$key*2}}">
                                        </div>

                                    </div>

                                    <button class="btn btn-xs btn-danger fa fa-minus-square  " type="button"  onclick="delItem($(this));"></button>

                                </div>
                            @endforeach

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

                                </div>

                            </div>
                        @endif
                    </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>

@endsection
@push('scripts')
    <script src="{{asset('admin/js/plugin/jquery.mask/jquery.mask.min.js')}}"></script>
    <script>
        $('.money').mask('#.##0', {reverse: true});

        /**/
        function addItem() {
            videoCount++;
            $(".videos").last().after(getItem());
        }

        function delItem(video) {
            if (videoCount < 2) {
                video.parent('.videos').find('input').val('');
                video.parent('.videos').find('button').remove();
                videoCount = 1;

            } else {
                video.parent('.videos').remove();
                videoCount--;

            }

            zebrate();
        }

        function zebrate() {
            $(".videos").removeClass('odd').removeClass('even');
            var i = 1;
            $(".videos").each(function () {
                let classItem = i % 2 == 0 ? 'even' : 'odd';
                $(this).addClass(classItem);
                i++;
            });
        }

        var videoCount = {{sizeof($gallery->videos()->get())+1}};

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


    </script>
@endpush