@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">User Deletion Requests</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">Users</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 inner-table-responsive">
              <div class="card-header-t">
              </div>
              <div class="card-body">
                <table id="example1" class="table table-bordered table-striped">
                  <thead>
                    <tr>
                      <th>Sr. No</th>
                      <th>Name</th>
                      <th>Email</th>
                      <th>Phone Number</th>
                      <th>Deletion Reason</th>
                      <th>Status</th>
                      <th>Actions</th>
                    </tr>

                  </thead>
                  <tbody>
                                        @if($users)
                @foreach($users as $user)
            <tr>
              <th> {{$i}} </th>
              <td> {{ucfirst($user->name ?? 'N/A')}} </td>
              <td> {{$user->email ?? 'N/A'}} </td>
              <td> {{$user->phone ?? 'N/A'}} </td>
              <td>{{$user->cancellation_reason ?? 'N/A'}}</td>
              @if($user->deleted_at != null)
              <td>Deleted</td>
              @else
              <td>Pending</td>
              @endif
            </div>
          </div>
          <td class="project-actions text-center">
            @if($user->deleted_at)
        <button type="button" class="btn btn-danger btn-sm delete_user" disabled>
        <i class="fas fa-trash"></i>
        </button>
      @else
    <button type="button" data-userid="{{ $user->id }}" class="btn btn-danger btn-sm delete_user">
    <i class="fas fa-trash"></i>
    </button>
  @endif
          </td>
          <!-- <td class="project-actions text-center">
          <button type="button" data-userid="{{$user->id}}" class="btn btn-danger btn-sm delete_user">
          <i class="fas fa-trash">
          </i>
          </button>
          </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>
  .filter-user {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr auto;
    gap: 20px;
    align-items: flex-end;
  }
</style>
<script src="{{asset('plugins/jquery/jquery.min.js')}}"></script>

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

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

    var userId = $(this).data("userid");
    var deleteUserUrlTemplate = "{{ route('delete-user', ':id') }}";
    var deleteUserUrl = deleteUserUrlTemplate.replace(':id', userId);
    swal({
      title: "Are you sure! You want to delete this User?",
      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: deleteUserUrl,
          data: {
            id: userId
          },
          success: function (data) {
            if (data.status === 'success') {
              location.reload();
            }
          }
        });
      });
  });

  $(document).ready(function () {
    $('#filter').click(function () {
      var startDate = $('#start_date').val();
      var endDate = $('#end_date').val();
      var url = "{{ route('users') }}";

      var params = [];
      if (startDate) {
        params.push("start_date=" + encodeURIComponent(startDate));
      }
      if (endDate) {
        params.push("end_date=" + encodeURIComponent(endDate));
      }
      if (params.length > 0) {
        url += "?" + params.join("&");
      }

      window.location.href = url;
    });

    $('#refresh').click(function () {
      $('#start_date').val('');
      $('#end_date').val('');

      var url = "{{ route('users') }}";
      window.location.href = url;

    });


  });
</script>
@endsection