@extends('layouts.admin_layout')

@section('content')



<main class="h-full pb-16 overflow-y-auto">
  <div class="container grid px-6 mx-auto">
    <h2
      class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">
      <span class="text-blue-500">List</span> Unconfirmed Users
    </h2>
    <!-- CTA -->
    <a
      class="flex items-center justify-between p-4 mb-8 text-sm font-semibold bg-blue-600 shadow-md focus:outline-none focus:shadow-outline-green"
      href="{{ url('/') }}" style="color: #fff;">
      <div class="flex items-center">
        <svg
          class="w-5 h-5 mr-2"
          fill="currentColor"
          viewBox="0 0 20 20">
          <path
            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
        </svg>
        <span>Go to main website</span>
      </div>
      <span>View &RightArrow;</span>
    </a>



    <!-- Filter input -->
    <div class="flex items-center mb-4">
      <div class="block w-full mr-4">
        <form method="get" action="{{ route('admin.unconfirmed') }}">
          @csrf
          <small class="text-gray-700 dark:text-gray-200">Sort By Store Name</small>
          <div class="flex items-center">
            <input type="text" name="username" class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select focus:border-green-400 focus:outline-none focus:shadow-outline-green dark:focus:shadow-outline-gray">

            <button type="submit" class="d-none"></button>
        </form>
      </div>
    </div>


    <div class="block w-full mr-4">
      <form method="get" action="{{ route('admin.unconfirmed') }}">
        @csrf
        <small class="text-gray-700 dark:text-gray-200">Sort By Email</small>
        <div class="flex items-center">
          <input type="text" name="email" class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select focus:border-green-400 focus:outline-none focus:shadow-outline-green dark:focus:shadow-outline-gray">

          <button type="submit" class="d-none"></button>
      </form>
    </div>
  </div>
  </div>



  <!-- With actions -->
  <h4
    class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300">
    @if(!empty($title))
    {{ $title }}<br>
    <form method="get" action="{{ route('admin.unconfirmed') }}">
      <input type="hidden" name="all" />
      <button class="text-sm text-green-600 cursor-pointer font-semi-bold dark:text-green-400" href="#">
        &LeftArrow; Back to All
      </button>
    </form>
    @else
    List of Unconfirmed Users
    @endif
  </h4>

  <div style="position: sticky; top: 0; display: none;" id="ds-div" class="z-10 my-2 flex items-center justify-between w-full px-4 py-3 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800">
    <button class="ds-btn focus:outline-none px-4 py-1 text-sm text-red-600 bg-red-100 hover:opacity-95 rounded-md dark:bg-red-600 dark:text-red-100">
      <div class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
          <path fill="currentColor" d="M16 16h2c.55 0 1 .45 1 1s-.45 1-1 1h-2c-.55 0-1-.45-1-1s.45-1 1-1m0-8h5c.55 0 1 .45 1 1s-.45 1-1 1h-5c-.55 0-1-.45-1-1s.45-1 1-1m0 4h4c.55 0 1 .45 1 1s-.45 1-1 1h-4c-.55 0-1-.45-1-1s.45-1 1-1M3 18c0 1.1.9 2 2 2h6c1.1 0 2-.9 2-2V8H3zM13 5h-2l-.71-.71c-.18-.18-.44-.29-.7-.29H6.41c-.26 0-.52.11-.7.29L5 5H3c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1" />
        </svg>
        <span class="ml-2">Delete selected</span>
      </div>
    </button>

    &nbsp; &nbsp;

    <button class="da-btn focus:outline-none px-4 py-1 text-sm text-red-400 bg-red-100 hover:opacity-95 rounded-md dark:bg-red-600 dark:text-red-100">
      <div class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
          <path fill="currentColor" d="M16 16h2c.55 0 1 .45 1 1s-.45 1-1 1h-2c-.55 0-1-.45-1-1s.45-1 1-1m0-8h5c.55 0 1 .45 1 1s-.45 1-1 1h-5c-.55 0-1-.45-1-1s.45-1 1-1m0 4h4c.55 0 1 .45 1 1s-.45 1-1 1h-4c-.55 0-1-.45-1-1s.45-1 1-1M3 18c0 1.1.9 2 2 2h6c1.1 0 2-.9 2-2V8H3zM13 5h-2l-.71-.71c-.18-.18-.44-.29-.7-.29H6.41c-.26 0-.52.11-.7.29L5 5H3c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1" />
        </svg>
        <span class="ml-2">Delete all</span>
      </div>
    </button>
  </div>

  <!-- </div> -->
  <x-alert /><br>
  <div class="w-full overflow-hidden rounded-lg shadow-xs">
    <div class="w-full overflow-x-auto">
      <table class="w-full whitespace-no-wrap">
        <thead>
          <tr
            class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
            <th class="px-4 py-3">User</th>
            <th class="px-4 py-3">User Status</th>
            <th class="px-4 py-3">Registration Date</th>
            <th class="px-4 py-3">Actions</th>
          </tr>
        </thead>
        <tbody
          class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
          @forelse($users as $user)
          <tr class="text-gray-700 dark:text-gray-400">
            <td class="px-4 py-3 text-sm">
              <input type="checkbox" name="user_ids[]" value="{{ $user->id }}" class="user_ids">
            </td>
            <td class="px-4 py-3">
              <div class="flex items-center text-sm">
                <!-- Avatar with inset shadow -->
                <div
                  class="relative w-8 h-8 mr-3 rounded-full md:block">
                  <img
                    class="object-cover w-full h-full rounded-full"
                    @if($user->avatar == null)
                  src="{{ asset('images/toy-avatar.png') }}"
                  @else
                  src="{{ asset('storage/images/'.$user->avatar) }}"
                  @endif
                  alt=""
                  loading="lazy"
                  />
                  <div
                    class="absolute inset-0 rounded-full shadow-inner"
                    aria-hidden="true"></div>
                </div>
                <div><a href="{{ route('admin.user_info', $user->id) }}">
                    <p class="font-semibold">{{ $user->first_name . ' ' . $user->last_name }}</p>
                    <p class="text-xs text-gray-600 dark:text-gray-400">
                      {{ $user->email }} - [{{ $user->username }}]
                    </p>
                  </a>
                </div>
              </div>
            </td>
            <td class="px-4 py-3 text-xs">
              <span
                class="px-2 py-1 font-semibold leading-tight text-red-700 bg-red-100 rounded-full dark:bg-red-700 dark:text-red-100">
                In-Active
              </span>
            </td>
            <td class="px-4 py-3 text-sm">
              {{ date('M j Y', strtotime($user->created_at)) }}
            </td>
            <td class="px-4 py-3">
              <div class="flex items-center space-x-4 text-sm">
                <form method="post" action="{{route('admin.approve-unconfirmed', $user->id)}}">
                  @csrf
                  <button type="submit" class="font-semibold text-green-700 dark:text-green-200"
                    title="Approve"
                    onclick="return confirm('Dear Admin, Are you sure you want to approve {{ $user->first_name }}\'s email?');">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
                      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                    </svg>
                  </button>
                </form>

                <a
                  class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-green-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
                  aria-label="Edit" href="{{ route('admin.user.edit', $user->id) }}">
                  <svg
                    class="w-5 h-5"
                    aria-hidden="true"
                    fill="currentColor"
                    viewBox="0 0 20 20">
                    <path
                      d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
                  </svg>
                </a>


                @if($user->status == 1)
                <!--<form action="{{ route('admin.ban', $user->id) }}" method="post">
                           @csrf-->
                <a
                  href="{{ route('admin.ban_page', $user->id) }}" class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-green-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
                  aria-label="Ban">
                  Ban
                </a>
                <!--</form>-->
                @elseif($user->status == 0)
                <form action="{{ route('admin.unban', $user->id) }}" method="post">
                  @csrf
                  <button
                    class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-green-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
                    aria-label="Ban">
                    UnBan
                  </button>
                </form>
                @endif

                <form method="post" id="{{'form-delete-'.$user->id}}" action="{{route('admin.user.destroy', $user->id)}}">
                  @csrf
                  @method('delete')
                  <button class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-green-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
                    type="submit" onclick="return confirm('Dear Admin, Are you sure you want to delete {{ $user->first_name }}?');">
                    <svg
                      class="w-5 h-5"
                      aria-hidden="true"
                      fill="currentColor"
                      viewBox="0 0 20 20">
                      <path
                        fill-rule="evenodd"
                        d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
                        clip-rule="evenodd"></path>
                    </svg>
                  </button>
                </form>
              </div>
            </td>
          </tr>
          @empty
          <div class="mx-auto my-3">
            <p class="text-center text-white lead">No Registered Users!!</p>
          </div>
          <br><br><br>
          @endforelse

        </tbody>
      </table>
    </div>
    <div
      class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800" style="padding-top:50px !important;padding-bottom:20px !important;">

      @if($users->currentPage() != 1)
      <span><a class="p-3 mb-3" href="{{ $users->url(1) }}">«&nbsp;</a></span>
      <span><a class="p-3 mt-4" href="{{ $users->previousPageUrl() }}">
          <&nbsp;< /a></span>
      @for($i=1; $i<=$users->lastPage(); $i++)
        @if($i== $users->currentPage())
        <span><a class="p-1 mt-4 text-center pranala" style="background-color: #e4ab0d; color: #fff;border-radius:50%;"><b>{{ $i }}</b>&nbsp;</a></span>
        @else
        <span class="mt-12"><a class="p-3" href="{{ $users->url($i) }}">{{ $i }}&nbsp;</a></span>
        @endif
        @endfor
        @if($users->currentPage() != $users->lastPage())
        <span><a class="p-3 mt-4" href="{{ $users->nextPageUrl() }}">>&nbsp;</a></span>
        <span><a class="p-3 mt-4" href="{{ $users->url($users->lastPage()) }}">»</a></span>
        @endif
        @else
        <span><a class="p-3 mb-3" href="{{ $users->url(1) }}">1</a></span>
        <span><a class="p-3 mt-4" href="{{ $users->nextPageUrl() }}">>&nbsp;</a></span>
        <span><a class="p-3 mt-4" href="{{ $users->url($users->lastPage()) }}">»</a></span>
        @endif

    </div>
    <div>
      <small class="text-gray-500 dark:text-gray-400">Showing {{ $users->firstItem() }}–{{ $users->lastItem() }} of {{ $users->total() }} results</small>
    </div>
  </div>
  </div>
</main>







<script>
  // If admin clicks on the ban btn, call the ban function 
  $(document).on('click', '#banned', function() {

    // Get the user id
    var user_id = $('#banned').data('user_id');
    //let user_name = $('.ban').data('user_name');
    console.log(user_id);
    // Call the ban function
    //ban(user_id, user_name);
  });

  $(document).on('click', '.ds-btn', function() {

    let userConfirmed = window.confirm("Are you sure you want to delete all selected item(s)?");

    if (!userConfirmed) {
      return
    }

    // Get all checked checkboxes' values
    var checkedValues = $('input[name="user_ids[]"]:checked').map(function() {
      return this.value;
    }).get(); // .get() converts the jQuery object into a plain array

    // Check if at least one checkbox is selected
    if (checkedValues.length > 0) {
      // AJAX request to submit the data
      $.ajax({
        url: "{{ route('admin.multi.user.destroy') }}",
        type: 'DELETE',
        data: {
          _token: '{{ csrf_token() }}',
          user_ids: checkedValues // 
        },
        success: function(response) {
          console.log(response);
        },
        error: function(xhr, status, error) {
          console.log(error);
        },
        complete: function() {
          location.reload();
        }
      });
    } else {
      console.log('Please select at least one option.');
    }
  });

  $(document).on('click', '.da-btn', function() {

    let userConfirmed = window.confirm("Are you sure you want to delete all unconfirmed email accounts?");

    if (!userConfirmed) {
      return
    }

    // AJAX request to submit the data
    $.ajax({
      url: "{{ route('admin.multi.all.user.destroy') }}",
      type: 'DELETE',
      data: {
        _token: '{{ csrf_token() }}',
      },
      success: function(response) {
        console.log(response);
      },
      error: function(xhr, status, error) {
        console.log(error);
      },
      complete: function() {
        location.reload();
      }
    });

  });

  $(document).on('change', '.user_ids', function() {
    // Get all checked checkboxes' values
    var checkedValues = $('input[name="user_ids[]"]:checked').map(function() {
      return this.value;
    }).get(); // .get() converts the jQuery object into a plain array

    // Check if at least one checkbox is selected
    if (checkedValues.length > 0) {
      if ($('#ds-div').css('display') === 'none') {
        $('#ds-div').css('display', 'block');
      }
    } else {
      if ($('#ds-div').css('display') !== 'none') {
        $('#ds-div').css('display', 'none');
      }
    }
  });
</script>


@endsection