@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">Survey Listing</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">Survey</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="alert alert-danger">
      <ul>
        @foreach ($errors->all() as $error)
      <li>{{ $error }}</li>
    @endforeach
      </ul>
      </div>
    @endif

      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-header-t">
                <a href="{{route('survey.create')}}" class="btn btn-primary light-green-btn">Create</a>
              </div>
            </div>
            <div class="card-body">
              <table id="example1" class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th>Sr. No</th>
                    <th>Title</th>
                    <th>Type</th>
                    <th>Status</th>
                    <th>Questions Count</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                                    @if($survey)
                @foreach($survey as $data)
            <tr>
            <th> {{$i}} </th>
            <td> {{ucfirst($data->title)}} </td>
            <td> {{ucfirst($data->type)}} </td>
            @if($data->status == 1)
        <td>Active</td>
      @elseif($data->status == 2)
    <td> Expired</td>
  @else
  <td>Inactive</td>
@endif
            <td>{{ $data->questions_count }}</td>
          </div>
          </div>
          <td class="project-actions text-center">
          @if($data->status === 0)
        <!-- Survey is inactive, allow edit, delete, and add questions -->
        <a href="{{ route('survey.edit', $data->id) }}" class="btn btn-info btn-sm edit_survey">
        <i class="fas fa-pencil-alt"></i>
        </a>
        <button type="button" data-surveyid="{{ $data->id }}" class="btn btn-danger btn-sm delete_survey">
        <i class="fas fa-trash"></i>
        </button>
        <a href="{{ route('survey-questions.create', $data->id) }}" class="btn btn-primary light-green-btn">Add
        questions</a>
      @elseif($data->status === 1)
      <!-- Survey is active, disable all buttons -->
      <a class="btn btn-info btn-sm disabled" title="Editing disabled" data-id="{{ $data->id }}">
      <i class="fas fa-pencil-alt"></i>
      </a>
      <button type="button" class="btn btn-danger btn-sm disabled"
      title="Deleting disabled because survey is active" disabled>
      <i class="fas fa-trash"></i>
      </button>
      <a class="btn btn-primary light-green-btn disabled" title="Adding questions disabled">Add questions</a>
    @elseif($data->status === 2)
      <!-- Survey is expired, disable edit and add questions, allow delete -->
      <a class="btn btn-info btn-sm disabled" title="Editing disabled because survey is expired"
      data-id="{{ $data->id }}">
      <i class="fas fa-pencil-alt"></i>
      </a>
      <button type="button" data-surveyid="{{ $data->id }}" class="btn btn-danger btn-sm delete_survey">
      <i class="fas fa-trash"></i>
      </button>
      <a class="btn btn-primary light-green-btn disabled" title="Adding questions disabled">Add questions</a>
    @endif

    @if($data->type == "general")
    <a href="{{ route('survey.analytics', $data->id) }}" class="btn btn-info btn-sm">
    <i class="fas fa-chart-line"></i></a> 
    @endif
           </td>
          </tr>
                  @endforeach
          @endif
          </tfoot>
          </table>
        </div>
      </div>
  </div>
</div>
</div>
</section>
</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>
<style>
  .project-actions {
    justify-content: flex-start !important;
  }
  .project-actions .btn.btn-sm {
    display: flex;
    align-items: center;
  }
</style>
<script src="{{asset('plugins/jquery/jquery.min.js')}}"></script>
<script>
  $(document).ready(function () {
    setTimeout(function () {
      $('.alert-success').hide();
    }, 1500);
  });
  setTimeout(function () {
    $('.alert-danger').hide();
  }, 1500);
</script>

<script>
$(document).on('click', '.delete_survey', function (e) {
    e.preventDefault();
    var surveyid = $(this).data("surveyid");
    var deleteUrlTemplate = "{{route('survey.delete', ':id')}}";
    var deleteUrl = deleteUrlTemplate.replace(':id', surveyid);

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

@endsection