@extends('home')
@section('title')
  @lang('site.site_name')
@endsection
@section('styles')
@endsection
@section('content')
  <div class="page-bar">
    <ul class="page-breadcrumb">
      <li>
        <a href="{{ route('dashboard.home.page') }}">{{ __('Home') }}</a>
        <i class="fa fa-circle"></i>
      </li>
      <li>
        <a href="{{ route('SettingHome') }}">{{ __('Site setting') }}</a>
        <i class="fa fa-circle"></i>
      </li>
      <li>
        <strong>{{ __('About Block') }}</strong> 
      </li>
    </ul>
    <div class="page-toolbar">
      <div class="btn-group pull-left">
        <div class="actions">
          <a href="{{ Route('dashboard.home.page') }}" class="btn btn-sm grey-cascade">
            <i class="fa fa-home"></i> {{ __('Home') }}
          </a>
          <a href="{{ URL('dashboard/setting') }}" class="btn btn-sm green">
            <i class="fa fa-home"></i> {{ __('Site setting') }}
          </a>
        </div>
      </div>
    </div>
  </div>
  {!! Form::open(array('route' => ['saveSetting',$section],'class' => 'form-horizontal','id' => 'form-social')) !!}
  <div class="row">
    <div class="col-md-12">
      <div class="portlet light bordered">
        <div class="portlet-title">
          <div class="caption">
            <i class="fa fa-edit font-purple-soft"></i>
            <span class="caption-subject font-purple-soft bold">{{ __('Block '.ucfirst(str_singular($section))) }}</span>
            <h1 class="page-title">
              <small>  </small>
            </h1>
          </div>
          <div class="actions">
          </div>
        </div>
        <div class="portlet-body">
          <div class="row">
            <div class="col-md-6">
              <div class="portlet light portlet-fit bordered">
                <div class="portlet-body">
                  <div class="form-group">
                    <div class="input-group">
                      <span class="input-group-btn">
                        <a class="btn btn-primary">
                          <i class="fa fa-youtube-square"></i> {{ __('Youtube URL') }}
                        </a>
                      </span>
                      <input id="video-url" value="{{ @$data['video'] }}" class="form-control" type="text" name="data[video]">
                    </div>
                    <div class="clearfix margin-bottom-10"> </div>
                  </div>
                  <div class="form-group">
                    <iframe src="https://www.youtube.com/embed/{{ @$data['video'] }}" style="background:url('{{ asset('images/no-image.png') }}');background-size:cover"  id="youtube_iframe" width="100%" height="300"  frameborder="0" allowfullscreen></iframe>

                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <ul class="m-nav-sticky">
    <li class="m-nav-sticky__item " >
      <button name="submit" value="save" type="submit" class="btn btn-primary tooltips" data-container="body" data-placement="right" data-original-title="Save">
        <i class="fa fa fa-floppy-o"></i>
      </button>
    </li>
    <li class="m-nav-sticky__item">
      <a href="{{ route('SettingHome') }}" class="btn btn-primary tooltips" data-container="body" data-placement="right" data-original-title="Cancel"><i class="fa fa-times"></i></a>
    </li>
  </ul>
  {!! Form::close() !!}
@endsection
@section('scripts')
  <script type="text/javascript">
    $(document).ready(function(){
      $('#video-url').keyup(function () {
      }).keyup();
      $('#video-url').on('blur', function () {
        var video_url = $(this).val();
        var videoid = video_url.match(/(?:https?:\/{2})?(?:w{3}\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\?v=|\/)([^\s&]+)/);
        if(videoid != null) {
          $(this).val(videoid[1])
        }
        var frm_url = $(this).val();
        $('#youtube_iframe').attr('src', 'https://www.youtube.com/embed/' + frm_url);
      });
    });
  </script>
@endsection