@extends(layoutTenant())


@section('content')

  <div class="row">
    <div class="col-12">
      <div class="page-title-box">
        <h4 class="page-title float-left">Banner</h4>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
  <!-- end row -->
  {!! Form::model($banner, [
      'url' => routeTenant('banner.store'),
      'enctype' => 'multipart/form-data',
      'class' => 'form',
      'id' => 'enviarimagem',
  ]) !!}
  {{-- BANNER --}}
  <div style="
  overflow-x: auto;" class="col-lg-12">
  <div class="banner">
    <div class="banner-fundo">
      <img id="photo"
        src="
        @if (isset($banner->img)) {{ asset($banner->img) }}
          @else {{ asset('assets/images//Placeholder.jpg') }} @endif
        " style="object-fit: @if(isset($banner->imgTamanho)){{$banner->imgTamanho}} @else fill @endif">
      <div class="banner-border linha" id="imgtext">
        <h2 id="banner-titulo" style="display: flex; font-size: @if (isset($banner->tituloTamanho)) {{$banner->tituloTamanho}} @else 180px @endif ; justify-content: @if (isset($banner->tituloPosicao)) {{$banner->tituloPosicao}} @else flex-start @endif;">
          @if (isset($banner->titulo))
            {{ $banner->titulo }}
          @else
            titulo
          @endif
        </h2>
        <h4 id="banner-subtitulo" style="display: flex; font-size: @if (isset($banner->subtituloTamanho)) {{$banner->subtituloTamanho}} @else 96px @endif; justify-content: @if (isset($banner->subtituloPosicao)) {{$banner->subtituloPosicao}} @else flex-start @endif;">
          @if (isset($banner->subtitulo))
            {{ $banner->subtitulo }}
          @else
            subtitulo
          @endif
        </h4>
      </div>
    </div>
  </div>
  </div>
  <!-- recent orders  -->
  <!-- ============================================================== -->
  <div class="col-xl-12 col-lg-12 col-md-6 col-sm-12 col-12">
    <div class="col-lg-12 row">
      <div class="form-group col-lg-6">
        {!! Form::label('titulo', 'Titulo:') !!}
        {!! Form::text('titulo', old('titulo'), [
            'class' => 'form-control',
            'maxlength' => '240',
            'id' => 'title',
        ]) !!}
        {!! Form::hidden('user_account_id', Auth::user()->id, ['class' => 'form-control']) !!}
      </div>
      <div class="col-lg-6">
        <div class="form-group ">
          {!! Form::label('subtitulo', 'Subtítulo:') !!}
          {!! Form::text('subtitulo', old('subtitulo'), ['class' => 'form-control', 'id' => 'subtitle']) !!}
        </div>
      </div>
      <div class="form-group col-lg-3">
        {!! Form::label('', 'Preenchimento da Imagem:') !!}
        <div style="display:flex; flex-direction: column; align-items:center;">
          <div>
            <div class="row">
              {!! Form::radio('imgTamanho', 'fill', false, ['onchange' => 'imgsize(1)']) !!}
              {!! Form::label('imgTamanho', 'preencher') !!}
            </div>
            <div class="row">
              {!! Form::radio('imgTamanho', 'cover', false, ['onchange' => 'imgsize(2)']) !!}
              {!! Form::label('imgTamanho', 'recortar') !!}
            </div>
            <div class="row">
              {!! Form::radio('imgTamanho', 'none', false, ['onchange' => 'imgsize(3)']) !!}
              {!! Form::label('imgTamanho', 'original') !!}
            </div>
            <div class="row">
              {!! Form::radio('imgTamanho', 'contain', false, ['onchange' => 'imgsize(4)']) !!}
              {!! Form::label('imgTamanho', 'ajustar a altura') !!}
            </div>
          </div>
        </div>
      </div>

      <div class="form-group col-lg-3">
        {!! Form::label('', 'Posição do título:') !!}
        <div style="display:flex; flex-direction: column; align-items:center;">
          <div>
            <div class="row">
              {!! Form::radio('tituloPosicao', 'flex-start', false, ['onchange' => 'tpos(1)']) !!}
              {!! Form::label('tituloPosicao', 'esquerda') !!}
            </div>
            <div class="row">
              {!! Form::radio('tituloPosicao', 'center', false, ['onchange' => 'tpos(2)']) !!}
              {!! Form::label('tituloPosicao', 'centro') !!}
            </div>
            <div class="row">
              {!! Form::radio('tituloPosicao', 'flex-end', false, ['onchange' => 'tpos(3)']) !!}
              {!! Form::label('tituloPosicao', 'direita') !!}
            </div>
          </div>
        </div>
      </div>

      <div class="form-group col-lg-3">
        {!! Form::label('', 'Posição do subtítulo:') !!}
        <div style="display:flex; flex-direction: column; align-items:center;">
          <div>
            <div class="row">
              {!! Form::radio('subtituloPosicao', 'flex-start', false, ['onchange' => 'stpos(1)']) !!}
              {!! Form::label('subtituloPosicao', 'esquerda') !!}
            </div>
            <div class="row">
              {!! Form::radio('subtituloPosicao', 'center', false, ['onchange' => 'stpos(2)']) !!}
              {!! Form::label('subtituloPosicao', 'centro') !!}
            </div>
            <div class="row">
              {!! Form::radio('subtituloPosicao', 'flex-end', false, ['onchange' => 'stpos(3)']) !!}
              {!! Form::label('subtituloPosicao', 'direita') !!}
            </div>
          </div>
        </div>
      </div>

      <div class="form-group col-lg-3">
        {!! Form::label('', 'Tamanho do título:') !!}
        <div style="display:flex; flex-direction: column; align-items:center;">
          <div>
            <div class="row">
              {!! Form::radio('tituloTamanho', '62px', false, ['onchange' => 'ttam(1)']) !!}
              {!! Form::label('tituloTamanho', 'pequeno') !!}
            </div>
            <div class="row">
              {!! Form::radio('tituloTamanho', '96px', false, ['onchange' => 'ttam(2)']) !!}
              {!! Form::label('tituloTamanho', 'medio') !!}
            </div>
            <div class="row">
              {!! Form::radio('tituloTamanho', '138px', false, ['onchange' => 'ttam(3)']) !!}
              {!! Form::label('tituloTamanho', 'grande') !!}
            </div>
            <div class="row">
              {!! Form::radio('tituloTamanho', '180px', false, ['onchange' => 'ttam(4)']) !!}
              {!! Form::label('tituloTamanho', 'muito grande') !!}
            </div>
          </div>
        </div>
      </div>
      <div class="form-group col-lg-3">
        {!! Form::label('', 'Tamanho do subtítulo:') !!}
        <div style="display:flex; flex-direction: column; align-items:center;">
          <div>
            <div class="row">
              {!! Form::radio('subtituloTamanho', '62px', false, ['onchange' => 'sttam(1)']) !!}
              {!! Form::label('subtituloTamanho', 'pequeno') !!}
            </div>
            <div class="row">
              {!! Form::radio('subtituloTamanho', '96px', false, ['onchange' => 'sttam(2)']) !!}
              {!! Form::label('subtituloTamanho', 'medio') !!}
            </div>
            <div class="row">
              {!! Form::radio('subtituloTamanho', '138px', false, ['onchange' => 'sttam(3)']) !!}
              {!! Form::label('subtituloTamanho', 'grande') !!}
            </div>
            <div class="row">
              {!! Form::radio('subtituloTamanho', '180px', false, ['onchange' => 'sttam(4)']) !!}
              {!! Form::label('subtituloTamanho', 'muito grande') !!}
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-9">
        <div class="card imgdestacadas col-lg-12">
          <div class="card-body">
            <div class="form-group text-center">
              <label for="image">Imagem do Banner:</label>
              <input type="file" id="image"name="image">
            </div>
          </div>
        </div>
      </div>
      <div class="form-group">
        {!! Form::submit('Salvar Banner', [
            'class' => 'btn btn-primary',
            'style' => 'margin-top: 10px;',
            'name' => 'save',
        ]) !!}
      </div>
    </div>
  </div>
  {!! Form::close() !!}
  <!-- ============================================================== -->
  <!-- end recent orders  -->
@endsection

@section('post-script')
  <script>
    let photo = document.getElementById("photo");
    let file = document.getElementById("image");

    $(function() {
      $("#image").change(function() {
        const file = ($(this)[0].files[0]);
        const fileReader = new FileReader();
        fileReader.onloadend = function() {
          photo.src = fileReader.result;
        }
        fileReader.readAsDataURL(file);
      })
    })
  </script>
  <script>
    $("#title").keyup(function() {
      {
        document.getElementById("banner-titulo").innerHTML = document.getElementById('title').value;
      }
    });
    $("#subtitle").keyup(function() {
      document.getElementById("banner-subtitulo").innerHTML = document.getElementById("subtitle").value;
    });
  </script>
  <script>
    function imgsize(status) {
      switch (status) {
        case 1:
          document.getElementById('photo').style.objectFit = "fill";
          break;
        case 2:
          document.getElementById('photo').style.objectFit = "cover";
          break;
        case 3:
          document.getElementById('photo').style.objectFit = "none";
          break;
        default:
          document.getElementById('photo').style.objectFit = "contain";
      }
    }

    function tpos(status) {
      switch (status) {
        case 1:
          document.getElementById('banner-titulo').style.justifyContent = "flex-start";
          break;
        case 2:
          document.getElementById('banner-titulo').style.justifyContent = "center";
          break;
        case 3:
          document.getElementById('banner-titulo').style.justifyContent = "flex-end";
          break;
      }
    }

    function stpos(status) {
      switch (status) {
        case 1:
          document.getElementById('banner-subtitulo').style.justifyContent = "flex-start";
          break;
        case 2:
          document.getElementById('banner-subtitulo').style.justifyContent = "center";
          break;
        case 3:
          document.getElementById('banner-subtitulo').style.justifyContent = "flex-end";
          break;
      }
    }

    function ttam(status) {
      switch (status) {
        case 1:
          document.getElementById('banner-titulo').style.fontSize = "62px";
          break;
        case 2:
          document.getElementById('banner-titulo').style.fontSize = "96px";
          break;
        case 3:
          document.getElementById('banner-titulo').style.fontSize = "138px";
          break;
        case 4:
          document.getElementById('banner-titulo').style.fontSize = "180px";
          break;
      }
    }

    function sttam(status) {
      switch (status) {
        case 1:
          document.getElementById('banner-subtitulo').style.fontSize = "62px";
          break;
        case 2:
          document.getElementById('banner-subtitulo').style.fontSize = "96px";
          break;
        case 3:
          document.getElementById('banner-subtitulo').style.fontSize = "138px";
          break;
        case 4:
          document.getElementById('banner-subtitulo').style.fontSize = "180px";
          break;
      }
    }
  </script>
@endsection