@extends('layouts.admin')

@section('content')

<div class="card">
    <div class="d-sm-flex align-items-center justify-content-between py-3">
    <h5 class=" mb-0 text-gray-800 pl-3">Add Field <a class="btn btn-primary btn-rounded btn-sm" href="{{route('admin.fields.index')}}"><i class="fas fa-arrow-left"></i> {{ __('Back') }}</a></h5>
    <ol class="breadcrumb m-0 py-0">
        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a></li>
        <li class="breadcrumb-item"><a href="{{route('admin.fields.create')}}">Add Field</a></li>
    </ol>
    </div>
</div>

<div class="row justify-content-center mt-3">
  <div class="col-lg-12">
    <!-- Form Basic -->
    <div class="card mb-4">
      <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
      </div>

      <div class="card-body">
        
        <form class="geniusform" action="{{route('admin.fields.store')}}" method="POST" enctype="multipart/form-data">
          {{csrf_field()}}
          @include('includes.admin.form-both')

          <div class="row">
            <div class="col-lg-4">
              <div class="left-area">
                  <h6 class="heading float-right">Field Name *</h6>
              </div>
            </div>
            <div class="col-lg-7">
              <input type="text" class="input-field" name="name" id="name" placeholder="Enter Field Name" required="" value="">
            </div>
          </div>

          <div class="row">
            <div class="col-lg-4">
              <div class="left-area">
                  <h6 class="heading float-right">Select Type *</h6>
              </div>
            </div>
            <div class="col-lg-7">
                <select name="type" class="form-control" id="type">
                    <option value="" selected>Please Select Type</option>
                    @foreach ($fieldtypes as $key=>$fieldtype)
                        <option value="{{$fieldtype->name}}" data-type="{{$fieldtype->name}}">{{$fieldtype->name}}</option>
                    @endforeach
                </select>
            </div>
          </div>

          <div class="row mt-3 d-none" id="dataTextareaRow">
            <div class="col-lg-4">
              <div class="left-area">
                  <h6 class="heading float-right">Add Data *</h6>
              </div>
            </div>
            <div class="col-lg-7">
              <textarea class="form-control" id="options" name="options" rows="5" placeholder="Enter data here..."></textarea>
            </div>
          </div>

        <hr>

          <div class="row justify-content-center mt-4">
            <button type="submit" id="submit-btn" class="btn btn-primary">{{ __('Submit') }}</button>
          </div>
        </form>
      </div>
    </div>

    <!-- Form Sizing -->

    <!-- Horizontal Form -->

  </div>
</div>
<!--Row-->
@endsection

@section('scripts')
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const typeDropdown = document.getElementById('type');
    const dataTextareaRow = document.getElementById('dataTextareaRow');

    typeDropdown.addEventListener('change', function () {
      const selectedOption = typeDropdown.options[typeDropdown.selectedIndex];
      const selectedType = selectedOption.getAttribute('data-type');

      // Show textarea for specific types
      if (['radio', 'checkbox', 'dropdown'].includes(selectedType.toLowerCase())) {
        dataTextareaRow.classList.remove('d-none');
      } else {
        dataTextareaRow.classList.add('d-none');
        // Clear textarea if hidden
        dataTextareaRow.querySelector('textarea').value = '';
      }
    });
  });
</script>
@endsection