@extends('layouts.admin')

@section('content')
    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h4>@lang('admin_dynamic_form.show')</h4>
            </div>
            <div class="pull-right">
                <a class="btn btn-primary" href="{{ route('admin.dynamic_forms.index') }}">@lang('general.back')</a>
            </div>
            <br>
        </div>
        <div class="col-md-6">
          <div class="card">
            <div class="card-header">
              <h6 class="card-title">@lang('admin_dynamic_form.fields')</h6>
            </div>
            <div class="card-body" id="dynamic_form_field_list">
              @foreach ($dynamic_form->dynamic_form_fields as $field )
                <div class="col-xs-12 col-sm-12 col-md-12" id="dynamic_form_field_{{$field->id}}">
                  @include('admin.dynamic_form_fields.item', [
                    'field' => $field,
                    'dynamic_form' => $dynamic_form
                  ])
                </div>
                
              @endforeach
            </div>
          </div>
          
        </div>
        <div class="col-md-6">
          <div class="card">
            <div class="card-body">
                <h6 class="card-title">@lang('admin_dynamic_form.create_fields')</h6>
                @foreach ( (App\Models\DynamicFormField::TYPES) as $key => $value)
                  <div class="dynamic_form_field_buttons">
                    <a data-params="type={{$key}}" class="btn btn-info btn-block btn-special" data-ctype="{{$key}}">
                      <span class="{{$key}}_customization"></span>
                      {{ $value }}
                    </a>
                    <div class="fake_form" style="display: none;">
                      @include('admin.dynamic_form_fields.form', 
                                [
                                  'dynamic_form_field' => new App\Models\DynamicFormField(['type' => $key]), 
                                  'path' => route('admin.dynamic_forms.store_field', $dynamic_form->id), 
                                  'method' => 'POST'
                                ]
                              )
                    <hr>
                    </div>
                  </div>

                  <br>
                @endforeach
                {{-- @include('admin.dynamic_form_fields.form', ['path' => route('admin.dynamic_forms.store_field', $dynamic_form->id), 'method' => 'POST' ]) --}}
            </div>
          </div>
          <div class="card">
            <div class="card-body">
              <h6 class="card-title">Form Önizlemesi</h6>
              @foreach ($dynamic_form->dynamic_form_fields as $field )
                {!! $field->html('', ['label' => true, 'wrap_tag' => 'div', 'wrap_class' => 'form-group', 'options' => ['class' => 'form-control']]) !!}
                <br/>
              @endforeach
            </div>
          </div>
                
        </div>
    </div>

    <!-- Button trigger modal -->

<div class="modal fade" id="form_modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
      <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
              ...
          </div>
      </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
@endsection

@push('custom-scripts')
  <script type="text/javascript">
    async function reload_option_keys(item){
      $.each(item.find('input'), function(key, value){
        $(this).attr('name', $(this).attr('name').replace(/\[\d+\]$/, '['+key+']'));
      })
    }

    $(document).ready(function(){    
      $('body').on('click', '.remove_option', function(){
        var op_field = $(this).closest('.options_fields');
        $(this).parent().remove();
        reload_option_keys(op_field);
      })

      $("body").on('click', '.add_option', function(){
        var op_field = $(this).parent().find('.options_fields');
        var copy_item = op_field.find('.op_item:last-child').clone();
        copy_item.find('input').attr('value', '').attr('placeholder', 'Yeni Seçenek')
        copy_item.appendTo(op_field);
        reload_option_keys(op_field);
      });

      $("body").on('click', '.btn-special', function(){
        var copy_item = $(this).parent().find('.fake_form').clone();
        copy_item.css('display', 'block');
        var modal = new bootstrap.Modal(document.getElementById('form_modal'))
        $('.modal-body').empty()
        copy_item.appendTo($('.modal-body'));
        modal.show();
      })

      $("body").on('click', ".dynamic_form_field_self", function(){
        var copy_item = $(this).parent().find('.dynamic_form_field_form').clone();
        copy_item.css('display', 'block');
        var modal = new bootstrap.Modal(document.getElementById('form_modal'))
        $('.modal-body').empty()
        copy_item.appendTo($('.modal-body'));
        modal.show();
      })
    });
  </script>
@endpush