@extends('layouts.app')
@section('content')

<div class="wrapper">
  <div class="content-wrapper">
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="player-title">Sub Interest</h1>

          </div>

          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Sub Interest</li>
            </ol>
          </div>
        </div>
      </div>
    </section>

    <!-- Main content -->
    <section class="content">
      @if (\Session::has('success'))
      <div class="alert alert-success">
        <ul>
          <li>{!! \Session::get('success') !!}</li>
        </ul>
      </div>
      @endif
      @if (\Session::has('error'))
      <div class="alert alert-danger">
        {!! \Session::get('error') !!}
      </div>
      @endif
      @if ($errors->any())
      <div class="notification is-danger is-light">
        <ul>
          <div class="alert alert-danger">
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
          </div>
        </ul>
      </div>
      @endif
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-header-t">
                <a class="btn btn-primary light-green-btn openModal" data-bs-toggle="modal"
                  data-bs-target="#addTopicModal1">Create</a>
              </div>
              </div>
              <div class="card-body">
                <table id="example1" class="table table-bordered table-striped">
                  <thead>
                    <tr>
                      <th>Sr. No</th>
                      <th>Interest</th>
                      <th>Sub Interest</th>
                      <th>User Counts</th>
                      <th>Status</th>
                      <th>Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                                        @if($sub_interest)
                    @foreach($sub_interest as $data)
                    <tr>
                      <th> {{$i}} </th>
                      <td>{{ ucfirst($data->interest->title ?? 'N/A') }}</td>
                      <td>{{ ucfirst($data->title ?? 'N/A') }}</td>
                      <td> {{ $data->user_interests_count }}</td>
                      <td>
              </div>
            <form action="{{route('sub-interest.changeStatus',$data->id)}}" method="POST">
                @csrf
                <div class="">
                                      <button type="submit" data-status="Deactivate" class="btn btn-sm btn-toggle" data-toggle="button" aria-pressed="false" autocomplete="off">
                      <div class="handle"></div>
                    </button>
                                  </div>
              </form>

            </div>
            </td>
            <td class="project-actions text-center">
              <a class="btn btn-info btn-sm edit_interest" data-id="{{ $data->id }}" data-title="{{ $data->title }}">
                <i class="fas fa-pencil-alt"></i>
              </a>
              <button type="button" data-faqid="{{$data->id}}" class="btn btn-danger btn-sm delete_interest">
                <i class="fas fa-trash">
                </i>
              </button>
            </td>
            </tr>
                        @endforeach
            @endif
            </tfoot>
            </table>
          </div>
        </div>
      </div>
  </div>
</div>
</section>
</div>
</div>


<!-- Modal Section for Adding/Editing Interest -->
<div class="modal fade" id="addTopicModal1" data-bs-backdrop="static" tabindex="-1" aria-labelledby="addTopicModalLabel" aria-hidden="true" data-bs-keyboard="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addTopicModalLabel">Add/Edit Interest</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="addInterestForm" action="{{ route('sub-interest.store') }}" method="POST">
          @csrf
          <input type="hidden" id="editTopicId" name="id" value="">
            <input type="hidden" id="editSubInterestId" name="id" value="">
          <div class="mb-3">
            <label for="interestSelect" class="form-label">Select Interest</label>
            <select id="interestSelect" name="interest_id" class="form-select select2" required>
              <option value="" disabled selected>Select an interest</option>
              @foreach ($interests as $interest)
            
              <option value="{{ $interest->id }}">{{ $interest->title }}</option>             
              @endforeach
            </select>
            <div id="validation-errors" class="mt-2"></div>
           </div>
          <div class="mb-3">
            <label for="topicTitle" class="form-label">Sub Interest</label>
            <input type="text" class="form-control" id="topicTitle" name="sub_interest">
            <div id="validation-errors" class="mt-2"></div>
          </div>
          <button type="submit" class="btn btn-primary">Save</button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Modal Section -->
<div class="modal fade confirmDeletePop" id="confirmDeletePop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="staticBackdropLabel">Confirm</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" data-deleteplayer-id="" class="btn btn-primary deleteConfirmBtn">Confirm</button>
      </div>
    </div>
  </div>
</div>
<script src="{{asset('plugins/jquery/jquery.min.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.2/dist/js/select2.min.js"></script>

<script>
  $(document).ready(function() {
  setTimeout(function() {
      $('.alert-success').hide();
    }, 1500);
  });
  setTimeout(function() {
      $('.alert-danger').hide();
    }, 1500);

  $('.delete_interest').click(function(e) {
    e.preventDefault();

    var faqid = $(this).data("faqid");
    var deleteUrlTemplate = "{{route('sub-interest.delete', ':id')}}";
    var deleteUrl = deleteUrlTemplate.replace(':id', faqid);

    swal({
        title: "Are you sure! You want to delete this Sub-Interest?",
        type: "error",
        confirmButtonClass: "btn-danger",
        confirmButtonText: "Confirm!",
        showCancelButton: true,
      },
      function() {
        $.ajaxSetup({
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
          }
        });
        $.ajax({
          type: "POST",
          dataType: 'json',
          url: deleteUrl,
          data: {
            id: faqid
          },
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          success: function(data) {
            if (data.status === 'success') {
              location.reload();
            }
          }
        });

      });
  });

  $('.openModal').click(function () {
    $('#addTopicModal1').modal('show');
    $('#addInterestForm')[0].reset();
    $('#editSubInterestId').val(''); 
    $('#addTopicModalLabel').text('Add Sub Interest'); 
  });

  $('.edit_interest').click(function () {
    var topicId = $(this).data("id");
    var topicTitle = $(this).data("title");
    console.log(topicTitle);
    $('#editSubInterestId').val(topicId); 
    $('#topicTitle').val(topicTitle); 
    $('#addTopicModalLabel').text('Edit Sub Interest'); 

    $('#addTopicModal1').modal('show'); 
  });
</script>

@endsection