@extends('su-admin.layout.master')

@section('content')

@php
  $languages = LaravelLocalization::getLocalesOrder();

  $animations_in = array(
      'Attention seekers' => array(
        'bounce' => 'bounce',
        'flash' => 'flash',
        'pulse' => 'pulse',
        'rubberBand' => 'rubberBand',
        'shakeX' => 'shakeX',
        'shakeY' => 'shakeY',
        'headShake' => 'headShake',
        'swing' => 'swing',
        'tada' => 'tada',
        'wobble' => 'wobble',
        'jello' => 'jello',
        'heartBeat' => 'heartBeat'
      ),
      'Back entrances' => array(
        'backInDown' => 'backInDown',
        'backInLeft' => 'backInLeft',
        'backInRight' => 'backInRight',
        'backInUp' => 'backInUp'
      ),
      'Bouncing entrances' => array(
        'bounceIn' => 'bounceIn',
        'bounceInDown' => 'bounceInDown',
        'bounceInLeft' => 'bounceInLeft',
        'bounceInRight' => 'bounceInRight',
        'bounceInUp' => 'bounceInUp'
      ),
      'Fading entrances' => array(
        'fadeIn' => 'fadeIn',
        'fadeInDown' => 'fadeInDown',
        'fadeInDownBig' => 'fadeInDownBig',
        'fadeInLeft' => 'fadeInLeft',
        'fadeInLeftBig' => 'fadeInLeftBig',
        'fadeInRight' => 'fadeInRight',
        'fadeInRightBig' => 'fadeInRightBig',
        'fadeInUp' => 'fadeInUp',
        'fadeInUpBig' => 'fadeInUpBig',
        'fadeInTopLeft' => 'fadeInTopLeft',
        'fadeInTopRight' => 'fadeInTopRight',
        'fadeInBottomLeft' => 'fadeInBottomLeft',
        'fadeInBottomRight' => 'fadeInBottomRight'
      ),
      'Flippers' => array(
        'flip' => 'flip',
        'flipInX' => 'flipInX',
        'flipInY' => 'flipInY'
      ),
      'Lightspeed' => array(
        'lightSpeedInRight' => 'lightSpeedInRight',
        'lightSpeedInLeft' => 'lightSpeedInLeft',
      ),
      'Rotating entrances' => array(
        'rotateIn' => 'rotateIn',
        'rotateInDownLeft' => 'rotateInDownLeft',
        'rotateInDownRight' => 'rotateInDownRight',
        'rotateInUpLeft' => 'rotateInUpLeft',
        'rotateInUpRight' => 'rotateInUpRight'
      ),
      'Specials' => array(
        'hinge' => 'hinge',
        'jackInTheBox' => 'jackInTheBox',
        'rollIn' => 'rollIn',
      ),
      'Zooming entrances' => array(
        'zoomIn' => 'zoomIn',
        'zoomInDown' => 'zoomInDown',
        'zoomInLeft' => 'zoomInLeft',
        'zoomInRight' => 'zoomInRight',
        'zoomInUp' => 'zoomInUp'
      ),
      'Sliding entrances' => array(
        'slideInDown' => 'slideInDown',
        'slideInLeft' => 'slideInLeft',
        'slideInRight' => 'slideInRight',
        'slideInUp' => 'slideInUp'
      ),
  );

  $animations_out = array(
      'Attention seekers' => array(
        'bounce' => 'bounce',
        'flash' => 'flash',
        'pulse' => 'pulse',
        'rubberBand' => 'rubberBand',
        'shakeX' => 'shakeX',
        'shakeY' => 'shakeY',
        'headShake' => 'headShake',
        'swing' => 'swing',
        'tada' => 'tada',
        'wobble' => 'wobble',
        'jello' => 'jello',
        'heartBeat' => 'heartBeat'
      ),
      'Back exits' => array(
        'backOutDown' => 'backOutDown',
        'backOutLeft' => 'backOutLeft',
        'backOutRight' => 'backOutRight',
        'backOutUp' => 'backOutUp'
      ),
      'Bouncing exits' => array(
        'bounceOut' => 'bounceOut',
        'bounceOutDown' => 'bounceOutDown',
        'bounceOutLeft' => 'bounceOutLeft',
        'bounceOutRight' => 'bounceOutRight',
        'bounceOutUp' => 'bounceOutUp'
      ),
      'Fading exits' => array(
        'fadeOut' => 'fadeOut',
        'fadeOutDown' => 'fadeOutDown',
        'fadeOutDownBig' => 'fadeOutDownBig',
        'fadeOutLeft' => 'fadeOutLeft',
        'fadeOutLeftBig' => 'fadeOutLeftBig',
        'fadeOutRight' => 'fadeOutRight',
        'fadeOutRightBig' => 'fadeOutRightBig',
        'fadeOutUp' => 'fadeOutUp',
        'fadeOutUpBig' => 'fadeOutUpBig',
        'fadeOutTopLeft' => 'fadeOutTopLeft',
        'fadeOutTopRight' => 'fadeOutTopRight',
        'fadeOutBottomRight' => 'fadeOutBottomRight',
        'fadeOutBottomLeft' => 'fadeOutBottomLeft'
      ),
      'Flippers' => array(
        'flip' => 'flip',
        'flipOutX' => 'flipOutX',
        'flipOutY' => 'flipOutY'
      ),
      'Lightspeed' => array(
        'lightSpeedOutRight' => 'lightSpeedOutRight',
        'lightSpeedOutLeft' => 'lightSpeedOutLeft'
      ),
      'Rotating exits' => array(
        'rotateOut' => 'rotateOut',
        'rotateOutDownLeft' => 'rotateOutDownLeft',
        'rotateOutDownRight' => 'rotateOutDownRight',
        'rotateOutUpLeft' => 'rotateOutUpLeft',
        'rotateOutUpRight' => 'rotateOutUpRight'
      ),
      'Specials' => array(
        'hinge' => 'hinge',
        'jackInTheBox' => 'jackInTheBox',
        'rollOut' => 'rollOut'
      ),
      'Zooming exits' => array(
        'zoomOut' => 'zoomOut',
        'zoomOutDown' => 'zoomOutDown',
        'zoomOutLeft' => 'zoomOutLeft',
        'zoomOutRight' => 'zoomOutRight',
        'zoomOutUp' => 'zoomOutUp'
      ),
      'Sliding exits' => array(
        'slideOutDown' => 'slideOutDown',
        'slideOutLeft' => 'slideOutLeft',
        'slideOutRight' => 'slideOutRight',
        'slideOutUp' => 'slideOutUp'
      ),
  );
@endphp

<div class="row">
  <div class="col-lg-12 grid-margin">

    @if (session()->has('message'))

    <div class="alert alert-success alert-dismissible fade show" role="alert">
      {{ session('message') }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    @endif

    @if (session()->has('error'))

    <div class="alert alert-danger alert-dismissible fade show" role="alert">
      {{ session('error') }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    @endif

    <div class="card card-sliders-settings-title">
      <div class="p-4 border-bottom bg-light">
        <h4 class="card-title mb-0">Slider</h4>
        <div class="page-back"><a class="btn btn-primary" role="button" aria-disabled="true" href="{{route('admin.sliders.list')}}"><i class="mdi mdi-arrow-left"></i></a></div>
      </div>
      <div class="card-body card-sliders-settings">

        <div class="well">

          {!! Form::open(['url' => Request::url(), 'method' => 'post', 'class' => 'form-horizontal form-slider']) !!}


          <div class="container slider-settings">
    
            <div class="alert alert-danger alert-dismissible admin-alert-error fade show alert-hidden" role="alert">
              <h3 class="alert-message"></h3>
              <ul class="alert-list"></ul>
            </div>

            <div class="row">
              <div class="col-12 col-md-8">
                <div class="jumbotron mb-3 slider-settings-info slider-equal-height-col">
                  <div class="slider-settings-title">Informazioni</div>

                  <fieldset>

                    @php
                      $id_args = [
                        'class' => 'form-control',
                        'data-label' => 'Identificativo'
                      ];

                      if(!empty($slider)){
                        $id_args['readonly'] = 'true';
                      }
                    @endphp

                    <div class="form-group row mb-3">
                      {!! Form::label('id', 'Identificativo', ['class' => 'form-label']) !!}
                      <div class="col-lg-4">
                          {!! Form::input('text', 'id', (!empty($slider) ? $slider->get_id() : ''), $id_args) !!}
                      </div>
                    </div>

                    <div class="form-group row mb-3">
                      {!! Form::label('label', 'Label', ['class' => 'form-label']) !!}
                      <div class="col-lg-6">
                          {!! Form::input('text', 'label', (!empty($slider) ? $slider->get_label() : ''), [
                              'class' => 'form-control',
                              'data-label' => 'Label'
                          ]) !!}
                      </div>
                    </div>

                    <div class="form-group row mb-3">
                      {!! Form::label('slider_border', 'Bordi', ['class' => 'form-label']) !!}
                      <div class="col-lg-1 form-check form-switch" style="margin-top: 6px">
                        {!! Form::checkbox('slider_border', "1", (empty($slider) ? "0" : (($slider->get_slider_border()) ? "1" : "0")), ['class' => 'form-check-input', 'id' => 'slider_border' ]) !!}
                      </div>
                      <div class="col-lg-2" style="display: inherit; padding-top: 4px;">
                        {!! Form::input('color', 'slider_border_color', (!empty($slider) ? $slider->get_slider_border_color() : '#000000'), ['class' => 'form-control form-control-color form-control-sm']) !!}
                        <button type="button" class="btn btn-secondary btn-reset-color" style="height: 28px;">Clear</button>
                      </div>
                      <div class="col-lg-2">
                        {!! Form::select('slider_border_style', array('solid' => 'solid', 'dashed' => 'dashed', 'dotted' => 'dotted', 'double' => 'double'), (!empty($slider) ? $slider->get_slider_border_style() : 'solid'), ['class' => 'form-select form-select-sm']) !!}
                      </div>
                      <div class="col-lg-2">
                        {!! Form::input('text', 'slider_border_width', (!empty($slider) ? $slider->get_slider_border_width() : '1px'), [
                            'class' => 'form-control form-control-sm'
                        ]) !!}
                      </div>
                    </div>

                    <div class="form-group row mb-3">
                      {!! Form::label('slider_arrow', 'Frecce', ['class' => 'form-label']) !!}
                      <div class="col-lg-1 form-check form-switch" style="margin-top: 6px">
                        {!! Form::checkbox('slider_arrow', "1", (empty($slider) ? "0" : (($slider->get_slider_arrow()) ? "1" : "0")), ['class' => 'form-check-input', 'id' => 'slider_arrow' ]) !!}
                      </div>
                      <div class="col-lg-4">
                        {!! Form::select('slider_arrow_style', array('layout-1' => 'Layout 1', 'layout-2' => 'Layout 2'), (!empty($slider) ? $slider->get_slider_arrow_style() : 'layout-1'), ['class' => 'form-select form-select-sm']) !!}
                      </div>
                    </div>

                    <div class="form-group row mb-3">
                      {!! Form::label('slider_nav', 'Navigatore', ['class' => 'form-label']) !!}
                      <div class="col-lg-1 form-check form-switch" style="margin-top: 6px">
                        {!! Form::checkbox('slider_nav', "1", (empty($slider) ? "0" : (($slider->get_slider_nav()) ? "1" : "0")), ['class' => 'form-check-input', 'id' => 'slider_nav' ]) !!}
                      </div>
                      <div class="col-lg-4">
                        {!! Form::select('slider_nav_style', array('round' => 'Tondi', 'square' => 'Quadrati'), (!empty($slider) ? $slider->get_slider_nav_style() : 'round'), ['class' => 'form-select form-select-sm']) !!}
                      </div>
                      <div class="col-lg-4">
                        {!! Form::select('slider_nav_position', array(
                          'top-left' => 'Top-Left',
                          'top-center' => 'Top-Center',
                          'top-right' => 'Top-Right',
                          'center-left' => 'Center-Left',
                          'center-right' => 'Center-Right',
                          'bottom-left' => 'Bottom-Left',
                          'bottom-center' => 'Bottom-Center',
                          'bottom-right' => 'Bottom-Right',
                        ), (!empty($slider) ? $slider->get_slider_nav_position() : 'bottom-center'), ['class' => 'form-select form-select-sm']) !!}
                      </div>
                    </div>


                  </fieldset>

                </div>
              </div>

              <div class="col-12 col-md-4">
                <div class="jumbotron mb-3 slider-settings-action slider-equal-height-col">

                  <div class="slider-settings-title">Opzioni</div>

                  <fieldset>

                    <div class="form-group row mb-3">
                      {!! Form::label('slider_direction', 'Direzione', ['class' => 'form-label']) !!}
                      <div class="col-lg-8">
                        {!! Form::select('slider_direction', array('horizontal' => 'Orizzontale', 'vertical' => 'Verticale'), (!empty($slider) ? $slider->get_slider_direction() : 'horizontal'), ['class' => 'form-select']) !!}
                      </div>
                    </div>

                    <div class="form-group row mb-3">
                      {!! Form::label('slider_size', 'Dimensioni', ['class' => 'form-label']) !!}
                      <div class="col-lg-8">
                        {!! Form::select('slider_size', array('auto' => 'Altezza variabile', 'block-height' => 'Altezza fissa', 'full-screen' => 'Tutto schermo'), (!empty($slider) ? $slider->get_slider_size() : 'auto'), ['class' => 'form-select']) !!}
                      </div>
                    </div>

                    <div class="form-group row mb-3">
                      {!! Form::label('slider_height', 'Altezza / Altezza massima', ['class' => 'form-label']) !!}
                      <div class="col-lg-4">
                          {!! Form::label('slider_height', 'Desktop', ['class' => 'form-label', 'style' => 'border-bottom: none; margin-bottom: 0; font-size: 12px; line-height: 14px;']) !!}
                          {!! Form::input('text', 'slider_height', (!empty($slider) ? $slider->get_slider_height() : '400px'), [
                              'class' => 'form-control'
                          ]) !!}
                      </div>
                      <div class="col-lg-4">
                          {!! Form::label('slider_height_tablet', 'Tablet', ['class' => 'form-label', 'style' => 'border-bottom: none; margin-bottom: 0; font-size: 12px; line-height: 14px;']) !!}
                          {!! Form::input('text', 'slider_height_tablet', (!empty($slider) ? $slider->get_slider_height_tablet() : '400px'), [
                              'class' => 'form-control'
                          ]) !!}
                      </div>
                      <div class="col-lg-4">
                          {!! Form::label('slider_height_mobile', 'Mobile', ['class' => 'form-label', 'style' => 'border-bottom: none; margin-bottom: 0; font-size: 12px; line-height: 14px;']) !!}
                          {!! Form::input('text', 'slider_height_mobile', (!empty($slider) ? $slider->get_slider_height_mobile() : '400px'), [
                              'class' => 'form-control'
                          ]) !!}
                      </div>
                    </div>

                    <div class="form-group row mb-3">
                      {!! Form::label('slider_background_color', 'Background', ['class' => 'form-label'] )  !!}
                      <div class="col-lg-12" style="display: inherit;">
                        {!! Form::input('color', 'slider_background_color', (!empty($slider) ? $slider->get_slider_background_color() : '#ffffff'), ['class' => 'form-control form-control-color']) !!}
                        <button type="button" class="btn btn-secondary btn-reset-color">Clear</button>
                      </div>
                    </div>

                    <div class="form-group row mb-3">
                      {!! Form::label('slider_transition_in', 'Transizione in entrata', ['class' => 'form-label']) !!}
                      <div class="col-lg-8">
                        {!! Form::select('slider_transition_in', $animations_in, (!empty($slider) ? $slider->get_slider_transition_in() : 'fadeIn'), ['class' => 'form-select']) !!}
                      </div>
                    </div>

                    <div class="form-group row mb-3">
                      {!! Form::label('slider_transition_out', 'Transizione in uscita', ['class' => 'form-label']) !!}
                      <div class="col-lg-8">
                        {!! Form::select('slider_transition_out', $animations_out, (!empty($slider) ? $slider->get_slider_transition_out() : 'fadeOut'), ['class' => 'form-select']) !!}
                      </div>
                    </div>

                    <div class="form-group row mb-3">
                      {!! Form::label('slider_transition_delay', 'Transizione delay (in ms)', ['class' => 'form-label']) !!}
                      <div class="col-lg-4">
                          {!! Form::input('number', 'slider_transition_delay', (!empty($slider) ? $slider->get_slider_transition_delay() : '4000'), [
                              'class' => 'form-control',
                              'min' => 0,
                              'step' => 100
                          ]) !!}
                      </div>
                    </div>


                  </fieldset>

                  <div class="form-group row slider-settings-button">
                    <div class="col-lg-12 col-lg-offset-2">
                        {!! Form::hidden('delete', '0') !!}

                        @if(!empty($slider))
                          {!! Form::button('Elimina', ['class' => 'btn btn-danger btn-fw remove_slider'] ) !!}
                          {!! Form::button('Salva', ['class' => 'btn btn-primary btn-fw submit_slider'] ) !!}
                        @else
                          {!! Form::hidden('new', '1') !!}
                          {!! Form::button('Crea', ['class' => 'btn btn-primary btn-fw submit_slider'] ) !!}
                        @endif
                    </div>
                  </div>
      
                </div>
              </div>

            </div>

            <div class="row">

              <div class="col-12">
                <div class="jumbotron mb-3 slider-settings-items">
                  <div class="slider-settings-title">Elementi</div>
                  
                  <div class="slider-items-wrap" id="slider_items_wrap">

                    <div class="slider-items-content">

                      @if(!empty($slider))
                        @if(!empty($slider->get_items()))
                          @foreach ($slider->get_items() as $item)
                            @get_template_part('su-admin.pages.sliders.parts.item', null, ['code' => $item->get_code(), 'disabled' => ($item->is_disabled() ? 'true' : 'false'), 'json' => $item->get_settings(), "item" => $item])
                          @endforeach
                        @endif

                        <div class="slider-item slider-item-add">
                          <button class="btn btn-slider-add" type="button" aria-disabled="true"><i class="mdi mdi-plus-circle"></i></button>
                        </div>
                      @endif

                    </div>

                  </div>

                </div>
              </div>

            </div>

          </div>

          {!! Form::close() !!}

        </div>


      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="admin-modal-confirm" tabindex="-1" role="dialog" aria-labelledby="confirmModal" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Conferma cancellazione</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Sei sicuro di voler cancellare questo slider?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" id="admin-modal-confirm-btn-si" data-dismiss="modal">Si</button>
        <button type="button" class="btn btn-secondary" id="admin-modal-confirm-btn-no">No</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="admin-modal-delete" tabindex="-1" role="dialog" aria-labelledby="deleteModal" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" id="admin-modal-delete-btn-si" data-dismiss="modal">Si</button>
        <button type="button" class="btn btn-secondary" id="admin-modal-delete-btn-no">No</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="admin-modal-slider-settings" tabindex="-1" role="dialog" aria-labelledby="sliderSettingsModal" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Impostazioni</h5>
      </div>
      <div class="modal-body">

      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="admin-modal-slider-settings-btn-save" data-dismiss="modal">Salva</button>
        <button type="button" class="btn btn-secondary" id="admin-modal-slider-settings-btn-close">Chiudi</button>
      </div>

    </div>
  </div>
</div>

<div class="modal fade" id="admin-modal-duplicate" tabindex="-1" role="dialog" aria-labelledby="deleteModal" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Duplica elemento</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Vuoi duplicare questo elemento?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-dark" id="admin-modal-duplicate-btn-si" data-dismiss="modal">Si</button>
        <button type="button" class="btn btn-secondary" id="admin-modal-duplicate-btn-no">No</button>
      </div>
    </div>
  </div>
</div>

@endsection