@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">Suggested 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">Suggested 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 ($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>
            <div class="card-body">
              <table id="example1" class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th>Sr. No</th>
                    <th>Title</th>
                    <th>Count</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                                    @if($suggested_interest)
                  @foreach($suggested_interest as $data)
                <tr>
                <th> {{$i}} </th>
                <td> {{ucfirst($data->suggestion)}} </td>
                <td>
              </div>
                  {{$data->count}}
              </div>
              </td>
              <td class="project-actions text-center">
              <a class="btn btn-info btn-sm edit_suggestion" data-suggestionid="{{ $data->id }}">
              <i class="fas fa-pencil-alt"></i>
              </a>
              <button type="button" data-suggestionid="{{$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 to put the interest in Interest section -->
<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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div id="responseMessage" class="mt-3"></div>

      <div class="modal-body">
        <form id="suggestionForm">
          <meta name="csrf-token" content="{{ csrf_token() }}">
          <input type="hidden" id="suggestion" name="id" value="">

          <!-- Radio buttons for interest type -->
          <div class="mb-3">
            <input type="radio" id="interest" name="interest_type" value="interest">
            <label for="interest">Interest</label><br>
            <input type="radio" id="subInterest" name="interest_type" value="sub_interest">
            <label for="subInterest">Sub Interest</label><br>
            <input type="radio" id="reject" name="interest_type" value="reject">
            <label for="reject">Reject</label>
          </div>

          <div id="subInterestContainer" class="mb-3" style="display: none;">
            <label for="interestSelect" class="form-label">Select Interest</label>
            <select id="interestSelect" name="interest_id" class="form-select select2">
              <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>
          <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>
  $(document).ready(function () {
    setTimeout(function () {
      $('.alert-success').fadeOut();
    }, 1500);
  });

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

    var suggestionid = $(this).data("suggestionid");
    var deleteUrlTemplate = "{{route('user-suggested-interests.delete', ':id')}}";
    var deleteUrl = deleteUrlTemplate.replace(':id', suggestionid);

    swal({
      title: "Are you sure! You want to delete this Suggestion?",
      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: suggestionid
          },
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          success: function (data) {
            if (data.status === 'success') {
              location.reload();
            }
          }
        });
      });
  });


  $('input[name="interest_type"]').change(function () {
    if ($(this).val() === 'sub_interest') {
      $('#subInterestContainer').show();
      $('#interestSelect').prop('required', true);
    } else {
      $('#subInterestContainer').hide();
      $('#interestSelect').prop('required', false);
    }
  });

  $('.edit_suggestion').click(function (e) {
    e.preventDefault();
    var suggestionId = $(this).data('suggestionid');
    $('#suggestion').val(suggestionId);
    $('#addTopicModalLabel').text('Edit Interest');
    $('#addTopicModal1').modal('show');
  });

  $('#suggestionForm').submit(function (e) {
    e.preventDefault();
    var Id = $('#suggestion').val();
    var formData = $(this).serialize();
    var csrfToken = $('meta[name="csrf-token"]').attr('content');

    var UrlTemplate = "{{route('user-suggested-interests.edit', ':id')}}";
    var Url = UrlTemplate.replace(':id', Id);
    $.ajax({
      type: "POST",
      url: Url,
      data: formData,
      headers: {
        'X-CSRF-TOKEN': csrfToken
      },
      success: function (response) {
          var messageDiv = $('#responseMessage');
          if (response.status === 'success') {
            messageDiv.html('<div class="alert alert-success">' + response.message + '</div>');
            location.reload();
          } else {
            messageDiv.html('<div class="alert alert-danger">' + response.message + '</div>');
          }
        },
      error: function (xhr) {
        var messageDiv = $('#responseMessage');
        var errorMessage = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'An error occurred while processing the request.';
        messageDiv.html('<div class="alert alert-danger">' + errorMessage + '</div>');
      }
    });
  });

</script>
@endsection