@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">Users</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">

          <!-- filters -->
          <div class="col-md-6 ml-auto mb-4">
          <div class="filter-user">
            <div class="">
              <label for="start_date">Start Date:</label>
              <input type="date" id="start_date" value="{{ request()->get('start_date') }}" class="form-control" name="start_date">
            </div>
            <div class="">
              <label for="end_date">End Date:</label>
              <input type="date" id="end_date" value="{{ request()->get('end_date') }}" class="form-control" name="end_date">
            </div>
            <div class="d-flex align-items-center">
              <!-- <label>&nbsp;</label> -->
              <button id="filter" class="btn btn-primary mr-2">Filter</button>
              @if(request()->has('start_date'))
              <button id="refresh" class="btn btn-primary m-0">Clear</button>
              @endif
            </div>
          </div>
          </div>

          <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>Created On</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->country_code ? $user->country_code : 'N/A' }}{{ $user->phone ? $user->phone : '' }} </td>
                      <td>{{ \Carbon\Carbon::parse($user->created_at)->format('Y-m-d') }}</td>
                      <td>
              </div>
              <form action="{{ route('change-status', $user->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-primary btn-sm" href="{{route('user.view',$user->id)}}">
                <i class="fas fa-eye">
                </i>
                </a>
              <!-- <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