@extends('pwa.template.app.main')
@section('script')
  <script>
    $(document).ready(function() {
      $('.dropify').dropify({
        tpl: {
          message: '<div class="dropify-message"><span class="file-icon" /></div>',
        }
      });
    });

    function handleLampiran(option) {
      console.log(option);
      console.log($(`#lampiran-${option.id}`).children().length);
      if ($(`#lampiran-${option.id}`).children().length > 0) {
        $(`#lampiran-${option.id}`).children().remove()
      } else {
        $(`#lampiran-${option.id}`).html(`<input type="file" class="dropify" name="lampiran[]" required />`);
        $('.dropify').dropify({
          tpl: {
            message: '<div class="dropify-message"><span class="file-icon" /></div>',
          }
        });
      }

      console.log($(`#lampiran-${option.id}`).children().length);
    }
    $('form').submit(function(e) {
      $('#btn-submit').attr('disabled', true);
    });
  </script>
@endsection
@section('app-content')
  <div class="container pt-3 pb-5">
    <div class="card">
      <div class="card-body">
        <form method="POST" enctype="multipart/form-data">
          {{-- 'text', 'longtext', 'number', 'date', 'datetime', 'radiobutton', 'checkbox', , 'file', 'image' --}}
          @csrf
          @foreach ($koloms as $k)
            @switch($k->tipe)
              @case('radiobutton')
                <div class="mb-3">
                  <label for="exampleInputEmail1" class="form-label">{{ $k->nama }}</label>
                  @foreach ($k->options as $id => $option)
                    <div class="form-check">
                      <input class="form-check-input" type="radio" id="radio-{{ $id }}" name="{{ $k->nama }}"
                        value="{{ $option->nama }}" required>
                      <label class="form-check-label" for="radio-{{ $id }}">
                        {{ $option->nama }}
                      </label>
                    </div>
                  @endforeach
                </div>
              @break

              @case('select')
                <div class="mb-3">
                  <label for="exampleInputEmail1" class="form-label">{{ $k->nama }}</label>
                  <select class="form-select" aria-label="Default select example" name="{{ $k->nama }}">
                    <option selected>Open this select menu</option>
                    @foreach ($k->options as $option)
                      <option value="{{ $option->nama }}">{{ $option->nama }}</option>
                    @endforeach
                  </select>
                </div>
              @break

              @case('checkbox')
                <div class="mb-3">
                  <label for="exampleInputEmail1" class="form-label">{{ $k->nama }}</label>
                  @foreach ($k->options as $id => $option)
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="checkbox-{{ $option->id }}"
                        name="{{ $k->nama }}[]" value="{{ $option->id }}"
                        @if ($option->lampiran) onclick="handleLampiran({{ $option }})" @endif>
                      <label class="form-check-label" for="checkbox-{{ $option->id }}">
                        {{ $option->nama }}
                      </label>
                    </div>
                    @if ($option->lampiran)
                      <div id="lampiran-{{ $option->id }}"></div>
                    @endif
                  @endforeach
                </div>
              @break

              @case('image')
              @case('file')
                <div class="mb-3">
                  <label for="" class="form-label">{{ $k->nama }}</label>
                  <input type="file" class="dropify" name="{{ $k->nama }}">
                </div>
              @break

              @default
                <div class="mb-3">
                  <label for="exampleInputEmail1" class="form-label">{{ $k->nama }}</label>
                  <input type="{{ $k->tipe }}" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                    name="{{ $k->nama }}" required>
                </div>
            @endswitch
          @endforeach
          <button type="submit" class="btn btn-primary w-100 mt-3" id="btn-submit">Urus Dokumen</button>
        </form>
      </div>
    </div>
  </div>
@endsection