@extends('layouts.app')
@section('content')
  <div class="page-content">
    <div class="container-fluid">

      <!-- start page title -->
      @include('layouts.partials.breadcrumb', ['title' => $title])
      <div class="row">
        <div class="col-lg-9">
          <div class="card">
            <div class="card-header align-items-center d-flex justify-content-between">
              <button data-bs-toggle="modal" data-bs-target="#exampleModalgrid"
                class="btn btn-info btn-sm waves-effect waves-light click-dropdown"><i
                  class="ri-add-fill me-1 align-bottom"></i> Add
                Dropdown</button>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-md-3">
                  <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                    @foreach ($fieldLists as $key => $item)
                      <a class="nav-link {{ $key == 1 ? 'active' : '' }} mb-2" id="v-pills-{{ $key }}-tab"
                        data-bs-toggle="pill" href="#v-pills-{{ $key }}" role="tab"
                        aria-controls="v-pills-{{ $key }}" aria-selected="true">{{ $item }}</a>
                    @endforeach
                  </div>
                </div><!-- end col -->
                <div class="col-md-9">
                  <div class="tab-content text-muted mt-md-0 mt-4" id="v-pills-tabContent">
                    @foreach ($fields as $key => $item)
                      <div class="tab-pane fade {{ $key == 0 ? 'show active' : '' }}" id="v-pills-{{ $item->id }}"
                        role="tabpanel" aria-labelledby="v-pills-{{ $item->id }}-tab">
                        <div class="table-responsive">
                          <div class="table-responsive">
                            <table class="table-nowrap table-sm mb-0 table align-middle">
                              <thead class="table-dark">
                                <tr>
                                  <th scope="col">SN</th>
                                  <th scope="col">Drop Value</th>
                                  <th scope="col">Alias</th>
                                  <th scope="col">Status</th>
                                  <th scope="col">Action</th>
                                </tr>
                              </thead>
                              <tbody>
                                @forelse ($item->dropdown as $dropKey => $dropItem)
                                  <tr>
                                    <td>{{ $dropKey + 1 }}</td>
                                    <td>{{ $dropItem->title }}</td>
                                    <td>{{ $dropItem->alias }}</td>
                                    <td>{!! $dropItem->status_name !!}</td>
                                    <td>
                                      <div class="hstack fs-15 gap-3">
                                        <a href="javascript:void(0);" class="link-primary edit-dropdown"
                                          data-link ="{{ route('dropdown.edit', $dropItem->id) }}"><i
                                            class="ri-edit-2-line"></i></a>
                                        <a href="javascript:void(0);" class="link-danger remove-item-btn"
                                          data-link="{{ route('dropdown.destroy', $dropItem->id) }}"
                                          data-id="{{ $dropItem->id }}"><i class="ri-delete-bin-5-line"></i></a>
                                      </div>
                                    </td>
                                  </tr>
                                @empty
                                  <tr>
                                    <td colspan="5" class="text-center">No Record Found</td>
                                  </tr>
                                @endforelse
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </div>
                    @endforeach
                  </div>
                </div><!--  end col -->
              </div>
              <!--end row-->
            </div>
          </div>
        </div>
        <div class="col-lg-3">
          <div class="card">
            <div class="card-header align-items-center d-flex">
              <h5 class="card-title flex-grow-1 mb-0">Create Field</h5>
            </div>
            <div class="card-body">
              {{ html()->form('POST')->route('field.store')->class(['needs-validation'])->attributes(['novalidate'])->open() }}
              <div class="mb-3">
                {{ html()->label('Title')->class('form-label') }}
                {{ html()->text('title')->class('form-control')->placeholder('Enter Title')->required() }}
                {{ html()->div('Please enter title')->class('invalid-feedback') }}
              </div>

              <div class="mb-3">
                <div class="form-check form-check-right form-switch mb-3" dir="ltr">
                  <input type="checkbox" class="form-check-input" id="customSwitchsizesm" checked="">
                  <label class="form-check-label" for="customSwitchsizesm">Status</label>
                </div>
              </div>
              <div class="text-end">
                <button type="submit" class="btn btn-primary">Add</button>
              </div>
              {{ html()->form()->close() }}
            </div>
          </div>

        </div>
      </div>
    </div>
    <!-- end page title -->
  </div>

  <!-- Grids in modals -->
  <div class="modal fade" id="exampleModalgrid" tabindex="-1" aria-labelledby="exampleModalgridLabel" aria-modal="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalgridLabel">Dropdown Form</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          @include('admin::dropdown.create')
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="editDropdownModal" tabindex="-1" aria-labelledby="editModalgridLabel" aria-modal="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="editModalgridLabel">Dropdown Edit Form</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
        </div>
      </div>
    </div>
  </div>
@endsection

@push('js')
  <script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>
  <script>
    // $(".click-dropdown").click(function(e) {
    //   e.preventDefault();
    //   console.log('asdw');
    //   $('.dropdownForm')[0].reset();
    // })

    $(".edit-dropdown").click(function(e) {
      e.preventDefault();
      url = $(this).data('link')
      editDropdownForm(url)
    })

    const editDropdownForm = (url) => {
      // url = "{{ route('dropdown.edit', ':id') }}"
      // url.replace(':id', id)
      $.ajax({
        url: url,
        type: "get",
        // dataType: "JSON",
        processData: false,
        contentType: false,
        success: function(res) {
          console.log(res);
          $('#editDropdownModal').find('.modal-body').html(res.view)
          $('#editDropdownModal').modal('show')
        }
      })
    }
  </script>
@endpush