@if($customFields)
<h5 class="col-12 pb-4">{!! trans('lang.main_fields') !!}</h5>
@endif
<div style="flex: 50%;max-width: 50%;padding: 0 4px;" class="column">
<!-- Title Field -->
<div class="form-group row ">
  {!! Form::label('title', trans("lang.detail_title"), ['class' => 'col-3 control-label text-right']) !!}
  <div class="col-9">
    {!! Form::text('title', null,  ['class' => 'form-control','placeholder'=>  trans("lang.detail_title_placeholder")]) !!}
    <div class="form-text text-muted">
      {{ trans("lang.detail_title_help") }}
    </div>
  </div>
</div>

<!-- Animation Field -->
<div class="form-group row">
  {!! Form::label('animation', trans("lang.detail_animation"), ['class' => 'col-3 control-label text-right']) !!}
  <div class="col-9">
    <div style="width: 100%" class="dropzone animation" id="animation" data-field="animation">
      <input type="hidden" name="animation">
    </div>
    <a href="#loadMediaModal" data-dropzone="animation" data-toggle="modal" data-target="#mediaModal" class="btn btn-outline-{{setting('theme_color','primary')}} btn-sm float-right mt-1">{{ trans('lang.media_select')}}</a>
    <div class="form-text text-muted w-50">
      {{ trans("lang.detail_animation_help") }}
    </div>
  </div>
</div>
@prepend('scripts')
<script type="text/javascript">
    var var15406756752084128759ble = '';
    @if(isset($detail) && $detail->hasMedia('animation'))
    var15406756752084128759ble = {
        name: "{!! $detail->getFirstMedia('animation')->name !!}",
        size: "{!! $detail->getFirstMedia('animation')->size !!}",
        type: "{!! $detail->getFirstMedia('animation')->mime_type !!}",
        collection_name: "{!! $detail->getFirstMedia('animation')->collection_name !!}"};
    @endif
    var dz_var15406756752084128759ble = $(".dropzone.animation").dropzone({
        url: "{!!url('uploads/store')!!}",
        addRemoveLinks: true,
        maxFiles: 1,
        init: function () {
        @if(isset($detail) && $detail->hasMedia('animation'))
            dzInit(this,var15406756752084128759ble,'{!! url($detail->getFirstMediaUrl('animation','thumb')) !!}')
        @endif
        },
        accept: function(file, done) {
            dzAccept(file,done,this.element,"{!!config('medialibrary.icons_folder')!!}");
        },
        sending: function (file, xhr, formData) {
            dzSending(this,file,formData,'{!! csrf_token() !!}');
        },
        maxfilesexceeded: function (file) {
            dz_var15406756752084128759ble[0].mockFile = '';
            dzMaxfile(this,file);
        },
        complete: function (file) {
            dzComplete(this, file, var15406756752084128759ble, dz_var15406756752084128759ble[0].mockFile);
            dz_var15406756752084128759ble[0].mockFile = file;
        },
        removedfile: function (file) {
            dzRemoveFile(
                file, var15406756752084128759ble, '{!! url("details/remove-media") !!}',
                'animation', '{!! isset($detail) ? $detail->id : 0 !!}', '{!! url("uplaods/clear") !!}', '{!! csrf_token() !!}'
            );
        }
    });
    dz_var15406756752084128759ble[0].mockFile = var15406756752084128759ble;
    dropzoneFields['animation'] = dz_var15406756752084128759ble;
</script>
@endprepend

<!-- Animation Alt Field -->
<div class="form-group row">
  {!! Form::label('animation_alt', trans("lang.detail_animation_alt"), ['class' => 'col-3 control-label text-right']) !!}
  <div class="col-9">
    <div style="width: 100%" class="dropzone animation_alt" id="animation_alt" data-field="animation_alt">
      <input type="hidden" name="animation_alt">
    </div>
    <a href="#loadMediaModal" data-dropzone="animation_alt" data-toggle="modal" data-target="#mediaModal" class="btn btn-outline-{{setting('theme_color','primary')}} btn-sm float-right mt-1">{{ trans('lang.media_select')}}</a>
    <div class="form-text text-muted w-50">
      {{ trans("lang.detail_animation_alt_help") }}
    </div>
  </div>
</div>
@prepend('scripts')
<script type="text/javascript">
    var var1540675675752781658ble = '';
    @if(isset($detail) && $detail->hasMedia('animation_alt'))
    var1540675675752781658ble = {
        name: "{!! $detail->getFirstMedia('animation_alt')->name !!}",
        size: "{!! $detail->getFirstMedia('animation_alt')->size !!}",
        type: "{!! $detail->getFirstMedia('animation_alt')->mime_type !!}",
        collection_name: "{!! $detail->getFirstMedia('animation_alt')->collection_name !!}"};
    @endif
    var dz_var1540675675752781658ble = $(".dropzone.animation_alt").dropzone({
        url: "{!!url('uploads/store')!!}",
        addRemoveLinks: true,
        maxFiles: 1,
        init: function () {
        @if(isset($detail) && $detail->hasMedia('animation_alt'))
            dzInit(this,var1540675675752781658ble,'{!! url($detail->getFirstMediaUrl('animation_alt','thumb')) !!}')
        @endif
        },
        accept: function(file, done) {
            dzAccept(file,done,this.element,"{!!config('medialibrary.icons_folder')!!}");
        },
        sending: function (file, xhr, formData) {
            dzSending(this,file,formData,'{!! csrf_token() !!}');
        },
        maxfilesexceeded: function (file) {
            dz_var1540675675752781658ble[0].mockFile = '';
            dzMaxfile(this,file);
        },
        complete: function (file) {
            dzComplete(this, file, var1540675675752781658ble, dz_var1540675675752781658ble[0].mockFile);
            dz_var1540675675752781658ble[0].mockFile = file;
        },
        removedfile: function (file) {
            dzRemoveFile(
                file, var1540675675752781658ble, '{!! url("details/remove-media") !!}',
                'animation_alt', '{!! isset($detail) ? $detail->id : 0 !!}', '{!! url("uplaods/clear") !!}', '{!! csrf_token() !!}'
            );
        }
    });
    dz_var1540675675752781658ble[0].mockFile = var1540675675752781658ble;
    dropzoneFields['animation_alt'] = dz_var1540675675752781658ble;
</script>
@endprepend

<!-- First Icon Field -->
<div class="form-group row">
  {!! Form::label('first_icon', trans("lang.detail_first_icon"), ['class' => 'col-3 control-label text-right']) !!}
  <div class="col-9">
    <div style="width: 100%" class="dropzone first_icon" id="first_icon" data-field="first_icon">
      <input type="hidden" name="first_icon">
    </div>
    <a href="#loadMediaModal" data-dropzone="first_icon" data-toggle="modal" data-target="#mediaModal" class="btn btn-outline-{{setting('theme_color','primary')}} btn-sm float-right mt-1">{{ trans('lang.media_select')}}</a>
    <div class="form-text text-muted w-50">
      {{ trans("lang.detail_first_icon_help") }}
    </div>
  </div>
</div>
@prepend('scripts')
<script type="text/javascript">
    var var15406756751458675455ble = '';
    @if(isset($detail) && $detail->hasMedia('first_icon'))
    var15406756751458675455ble = {
        name: "{!! $detail->getFirstMedia('first_icon')->name !!}",
        size: "{!! $detail->getFirstMedia('first_icon')->size !!}",
        type: "{!! $detail->getFirstMedia('first_icon')->mime_type !!}",
        collection_name: "{!! $detail->getFirstMedia('first_icon')->collection_name !!}"};
    @endif
    var dz_var15406756751458675455ble = $(".dropzone.first_icon").dropzone({
        url: "{!!url('uploads/store')!!}",
        addRemoveLinks: true,
        maxFiles: 1,
        init: function () {
        @if(isset($detail) && $detail->hasMedia('first_icon'))
            dzInit(this,var15406756751458675455ble,'{!! url($detail->getFirstMediaUrl('first_icon','thumb')) !!}')
        @endif
        },
        accept: function(file, done) {
            dzAccept(file,done,this.element,"{!!config('medialibrary.icons_folder')!!}");
        },
        sending: function (file, xhr, formData) {
            dzSending(this,file,formData,'{!! csrf_token() !!}');
        },
        maxfilesexceeded: function (file) {
            dz_var15406756751458675455ble[0].mockFile = '';
            dzMaxfile(this,file);
        },
        complete: function (file) {
            dzComplete(this, file, var15406756751458675455ble, dz_var15406756751458675455ble[0].mockFile);
            dz_var15406756751458675455ble[0].mockFile = file;
        },
        removedfile: function (file) {
            dzRemoveFile(
                file, var15406756751458675455ble, '{!! url("details/remove-media") !!}',
                'first_icon', '{!! isset($detail) ? $detail->id : 0 !!}', '{!! url("uplaods/clear") !!}', '{!! csrf_token() !!}'
            );
        }
    });
    dz_var15406756751458675455ble[0].mockFile = var15406756751458675455ble;
    dropzoneFields['first_icon'] = dz_var15406756751458675455ble;
</script>
@endprepend
</div>
<div style="flex: 50%;max-width: 50%;padding: 0 4px;" class="column">

<!-- Last Icon Field -->
<div class="form-group row">
  {!! Form::label('last_icon', trans("lang.detail_last_icon"), ['class' => 'col-3 control-label text-right']) !!}
  <div class="col-9">
    <div style="width: 100%" class="dropzone last_icon" id="last_icon" data-field="last_icon">
      <input type="hidden" name="last_icon">
    </div>
    <a href="#loadMediaModal" data-dropzone="last_icon" data-toggle="modal" data-target="#mediaModal" class="btn btn-outline-{{setting('theme_color','primary')}} btn-sm float-right mt-1">{{ trans('lang.media_select')}}</a>
    <div class="form-text text-muted w-50">
      {{ trans("lang.detail_last_icon_help") }}
    </div>
  </div>
</div>
@prepend('scripts')
<script type="text/javascript">
    var var1540675675552695555ble = '';
    @if(isset($detail) && $detail->hasMedia('last_icon'))
    var1540675675552695555ble = {
        name: "{!! $detail->getFirstMedia('last_icon')->name !!}",
        size: "{!! $detail->getFirstMedia('last_icon')->size !!}",
        type: "{!! $detail->getFirstMedia('last_icon')->mime_type !!}",
        collection_name: "{!! $detail->getFirstMedia('last_icon')->collection_name !!}"};
    @endif
    var dz_var1540675675552695555ble = $(".dropzone.last_icon").dropzone({
        url: "{!!url('uploads/store')!!}",
        addRemoveLinks: true,
        maxFiles: 1,
        init: function () {
        @if(isset($detail) && $detail->hasMedia('last_icon'))
            dzInit(this,var1540675675552695555ble,'{!! url($detail->getFirstMediaUrl('last_icon','thumb')) !!}')
        @endif
        },
        accept: function(file, done) {
            dzAccept(file,done,this.element,"{!!config('medialibrary.icons_folder')!!}");
        },
        sending: function (file, xhr, formData) {
            dzSending(this,file,formData,'{!! csrf_token() !!}');
        },
        maxfilesexceeded: function (file) {
            dz_var1540675675552695555ble[0].mockFile = '';
            dzMaxfile(this,file);
        },
        complete: function (file) {
            dzComplete(this, file, var1540675675552695555ble, dz_var1540675675552695555ble[0].mockFile);
            dz_var1540675675552695555ble[0].mockFile = file;
        },
        removedfile: function (file) {
            dzRemoveFile(
                file, var1540675675552695555ble, '{!! url("details/remove-media") !!}',
                'last_icon', '{!! isset($detail) ? $detail->id : 0 !!}', '{!! url("uplaods/clear") !!}', '{!! csrf_token() !!}'
            );
        }
    });
    dz_var1540675675552695555ble[0].mockFile = var1540675675552695555ble;
    dropzoneFields['last_icon'] = dz_var1540675675552695555ble;
</script>
@endprepend

<!-- Steps Field -->
<div class="form-group row ">
  {!! Form::label('steps[]', trans("lang.detail_steps"),['class' => 'col-3 control-label text-right']) !!}
  <div class="col-9">
    {!! Form::select('steps[]', $step, $stepsSelected, ['class' => 'select2 form-control' , 'multiple'=>'multiple']) !!}
    <div class="form-text text-muted">{{ trans("lang.detail_steps_help") }}</div>
  </div>
</div>

<!-- Control Field -->
<div class="form-group row ">
    {!! Form::label('control', trans("lang.detail_control"),['class' => 'col-3 control-label text-right']) !!}
    <div class="col-9">
        {!! Form::select('control', ['slide'=>'slide','buttons'=>'buttons'], null, ['class' => 'select2 form-control']) !!}
        <div class="form-text text-muted">{{ trans("lang.detail_control_help") }}</div>
    </div>
</div>


<!-- Order Field -->
<div class="form-group row ">
  {!! Form::label('order', trans("lang.detail_order"), ['class' => 'col-3 control-label text-right']) !!}
  <div class="col-9">
    {!! Form::number('order', null,  ['class' => 'form-control','placeholder'=>  trans("lang.detail_order_placeholder")]) !!}
    <div class="form-text text-muted">
      {{ trans("lang.detail_order_help") }}
    </div>
  </div>
</div>
</div>
@if($customFields)
<div class="clearfix"></div>
<div class="col-12 custom-field-container">
  <h5 class="col-12 pb-4">{!! trans('lang.custom_field_plural') !!}</h5>
  {!! $customFields !!}
</div>
@endif
<!-- Submit Field -->
<div class="form-group col-12 text-right">
  <button type="submit" class="btn btn-{{setting('theme_color')}}" ><i class="fa fa-save"></i> {{trans('lang.save')}} {{trans('lang.detail')}}</button>
  <a href="{!! route('details.index') !!}" class="btn btn-default"><i class="fa fa-undo"></i> {{trans('lang.cancel')}}</a>
</div>