@extends('admin.default')
@section('title', 'Admin | Dealer Active Stock')
@section('content')
<nav class="page-breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{{url('administrator/dealers/status/active')}}">Dealers</a></li>
        <li class="breadcrumb-item active" aria-current="page">Dealer Faqs</li>
    </ol>
</nav>

<div class="row mb-2">
    <div class="col-md-6">
        <div class="btn-group mr-2" role="group" aria-label="Scroll to Sections">
            <a class="btn btn-dark border-right" href="{{route('dealerShowForm', [$dealer_id])}}">Profile</a>
            <a class="btn btn-dark border-right"
                href="{{route('dealerActiveStock', ['user_id' => $dealer_id])}}">Active Stock</a>
            <a class="btn btn-dark border-right" href="{{route('dealerLegalDocuments', $dealer_id)}}">Legal
                Documents</a>
            <a class="btn btn-dark border active" href="{{route('dealerFaqs', $dealer_id ?? '')}}">Faqs/Blogs</a>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
              <div class="row mt-2">
                  <div class="col-md-12">
                      <a data-toggle="collapse" href="#dealerFaqs" role="button" aria-expanded="false"
                          aria-controls="dealerFaqs" class="card-title font-weight-bold" data-id="0">
                          <i class="mdi mdi-plus-circle"></i> Faqs</a>
                      <hr>
                  </div>
              </div>
              <div class="collapse" id="dealerFaqs">
                  <form action="{{route('dealerFaqsStore')}}" method="post">
                      @method('POST')
                      <div id="faqForm">
                          <div class="row mb-3">
                              <div class="col-md-1">
                                  <label>Question<sup class="text-danger">*</sup></label>
                              </div>
                              <div class="col-md-4">
                                  <textarea maxlength="255" class="form-control maxLength" name="question[]"
                                      id="question" placeholder="Question" rows="3" required></textarea>
                              </div>
                              <input type="hidden" name="dealer_id" value="{{$dealer_id ?? ''}}">
                              <input type="hidden" name="category" value="dealer">
                              <input type="hidden" name="type" value="dealership">
                              <div class="col-md-1">
                                  <label>Answer<sup class="text-danger">*</sup></label>
                              </div>
                              <div class="col-md-4">
                                  <textarea class="form-control" name="answer[]" id="answer" placeholder="Answer"
                                      rows="5" required></textarea>
                              </div>
                              <div class="col-md-1">
                                  <button type="button" class="btn btn-icon btn-primary" onclick="duplicateForm()"
                                      id="duplicateButton">+</button>
                              </div>
                          </div>
                      </div>
                      <div id="duplicatedArea"></div>
                      <div class="form-group row">
                          <div class="col-md-2 mt-2">
                              <label>Status<sup class="text-danger">*</sup></label>
                          </div>
                          <div class="col-md-10">
                              <div class="form-check form-check-inline">
                                  <input class="form-check-input" type="radio" name="status" id="Active"
                                      value="active">Active
                              </div>
                              <div class="form-check form-check-inline">
                                  <input class="form-check-input" type="radio" name="status" id="Disable"
                                      value="disable">Disable
                              </div>
                          </div>
                      </div>
                      <div class="form-group row">
                          <div class="col-md-12">
                              <button type="submit" class="btn btn-info text-white float-right" id="save"
                                  value="Save">
                                  <span class="mr-2" id="save_text">
                                      <i width="15" height="15" class="link-icon" data-feather="check-square"></i>
                                      Save Details</span>
                                  <div class="spinner-border spinner-border-sm text-primary float-right"
                                      id="loader" style="display:none" role="status">
                                      <span class="sr-only">Loading...</span>
                                  </div>
                              </button>
                          </div>
                      </div>
                  </form>
              </div>
              <!-- blog tag starts -->
              <div class="row mt-2">
                  <div class="col-md-12">
                      <a data-toggle="collapse" href="#dealerBlogs" role="button" aria-expanded="false"
                          aria-controls="dealerBlogs" class="card-title font-weight-bold" data-id="0">
                          <i class="mdi mdi-plus-circle"></i> Assign Blogs</a>
                      <hr>
                  </div>
              </div>
              <div class="collapse" id="dealerBlogs">
                  <form action="{{route('dealerBlogsStore')}}" method="post">
                      @method('POST')
                      <input type="hidden" name="dealer_id" value="{{ $dealer_id ?? '' }}">
                      <div class="form-group row">
                          <div class="col-md-2">
                              <label>Select Blogs to Assign<sup class="text-danger">*</sup>:</label>
                          </div>
                          <div class="col-md-10">
                              <div class="input-group">
                                  <div class="input-group-prepend w-50">
                                      <select name="blogs[]" class="js-example-basic-multiple" style="width:300px;" multiple="multiple">
                                          @foreach($postData as $post)
                                          <option value="{{$post->id }}" {{is_array($postsIds) && in_array($post->id, $postsIds) ? 'selected' : '' }}> {{$post->title}}</option>
                                          @endforeach
                                      </select>
                                  </div>
                              </div>
                          </div>
                      </div>

                      <div class="form-group row">
                          <div class="col-md-12">
                              <button type="submit" class="btn btn-info text-white float-right" id="save"
                                  value="Save">
                                  <span class="mr-2" id="save_text">
                                      <i width="15" height="15" class="link-icon" data-feather="check-square"></i>
                                      Assign</span>
                                  <div class="spinner-border spinner-border-sm text-primary float-right"
                                      id="loader" style="display:none" role="status">
                                      <span class="sr-only">Loading...</span>
                                  </div>
                              </button>
                          </div>
                      </div>

                  </form>
              </div>
              <!-- blog tag ends -->
            </div>
        </div>
    </div>
</div>

<script>
var cloneCount = 1;

function duplicateForm() {
    var count = cloneCount++;
    var area = $('#faqForm').clone().attr('id', 'duplicated' + count)
    $('#duplicatedArea').append(area);
    var duplicateButton = $('button[id^="duplicateButton"]:last');
    duplicateButton.removeClass('btn-primary');
    duplicateButton.addClass('btn-danger');
    duplicateButton.attr('onclick', 'removeDuplicateForm("duplicated' + count + '")')
    duplicateButton.text("-");
}

function removeDuplicateForm(formId) {
    $('#' + formId).remove();
}
</script>
@endsection