@extends('admin.admin-layout')

@section('content')

<!-- Start Container Fluid -->
<div class="container-xxl">


    <div class="row mt-4">
        <div class="col-xl-12">
            <div class="card">
                <div class="d-flex card-header justify-content-between align-items-center">
                    <div>
                        <h4 class="card-title mb-0">All User's List</h4>
                    </div>

                    <div class="d-flex gap-2">
                        <form class="d-flex align-items-center gap-2 mb-0" method="GET" action="{{ route('all.users') }}">
                            <div class="position-relative">
                                <input type="search" class="form-control pe-5" name="search" placeholder="Search by name, email" value="{{ request('search') }}">
                                <iconify-icon id="searchIcon" icon="solar:magnifer-broken" class="search-widget-icon position-absolute top-50 end-0 translate-middle-y me-2"></iconify-icon>
                            </div>

                            @if(request('search'))
                                <a href="{{ route('all.users') }}" class="btn btn-sm btn-light">×</a>
                            @endif
                        </form>
<button type="button" class="btn btn-outline-secondary me-1" data-bs-toggle="modal" data-bs-target="#filterModal">
    <i class="bx bx-filter-alt me-1"></i> Filters
</button>
                        <a href="{{route('admin.dashboard') }}" class="btn btn-sm btn-secondary">← Back</a>
                    </div>
                </div>

                <div>
                    <div class="table-responsive">
                        <table class="table align-middle mb-0 table-hover table-centered">
                            <thead class="bg-light-subtle">
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Phone</th>
                                    <th>User Type</th>
                                    <th>Status</th>
                                    <th>Registered At</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($users as $index => $user)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>
                                            <a class="link-primary fw-medium cursor-pointer"
                                                data-bs-toggle="modal"
                                                data-bs-target="#userDetailModal"
                                                data-id="{{ $user->id }}"
                                                data-name="{{ $user->name }}"
                                                data-alt_name="{{ $user->alt_name }}"
                                                data-email="{{ $user->email }}"
                                                data-mobile="{{ $user->mobile }}"
                                                data-alt_mobile="{{ $user->alt_mobile }}"
                                                data-dob="{{ $user->dob }}"
                                                data-type="{{ $user->user_type == 1 ? 'Admin' : 'User' }}"
                                                data-status="{{ ucfirst($user->status) }}"
                                                data-created="{{ $user->created_at->format('d M Y h:i A') }}">
                                                {{ $user->name ?? 'N/A' }}
                                            </a>
                                        </td>
                                        <td>{{ $user->email ?? 'N/A' }}</td>
                                        <td>{{ $user->mobile ?? 'N/A' }}</td>
                                        <!-- User Type Column -->
                                        <td>
                                            <span class="text-primary cursor-pointer"
                                                data-bs-toggle="modal"
                                                data-bs-target="#updateUserTypeModal"
                                                data-user-id="{{ $user->id }}"
                                                data-user-type="{{ $user->user_type }}">
                                                {{ $user->user_type == 1 ? 'Admin' : 'User' }}
                                            </span>
                                        </td>


                                        <!-- Status Column -->
                                        <td>
                                            @php
                                                $status = ucfirst($user->status);
                                                $badgeClass = $status === 'Active' ? 'bg-success' : 'bg-danger';
                                            @endphp

                                            <span class="badge {{ $badgeClass }} cursor-pointer"
                                                data-bs-toggle="modal"
                                                data-bs-target="#updateUserStatusModal"
                                                data-user-id="{{ $user->id }}"
                                                data-user-status="{{ $user->status }}">
                                                {{ $status }}
                                            </span>
                                        </td>


                                        <td>{{ $user->created_at->format('d M Y') }}</td>
                                        <td>
                                            <div class="d-flex gap-2">
                                                <!-- <a href="#" class="btn btn-soft-primary btn-sm">
                                                    <iconify-icon icon="solar:pen-2-broken" class="align-middle fs-18"></iconify-icon>
                                                </a> -->
                                                <form action="{{ route('destroy.user', $user->id) }}" method="POST" class="delete-order-form">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-soft-danger btn-sm sweetalert-delete-btn">
                                                        <iconify-icon icon="solar:trash-bin-minimalistic-2-broken" class="align-middle fs-18"></iconify-icon>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center">No customers found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer border-top">
                    {{ $users->links() }}
                </div>
            </div>
        </div>
    </div>
<!-- Modal  -->
<div class="modal fade" id="updateUserTypeModal" tabindex="-1" aria-labelledby="userTypeLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <form method="POST" action="{{ route('admin.users.updateStatusOrType') }}" class="modal-content">
            @csrf
            <input type="hidden" name="user_id" id="modal_user_type_id">
            <div class="modal-header">
                <h5 class="modal-title">Update User Type</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <label for="user_type" class="form-label">Select User Type</label>
                <select name="user_type" id="modal_user_type" class="form-select" required>
                    <option value="1">Admin</option>
                    <option value="2">User</option>
                </select>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Update</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            </div>
        </form>
    </div>
</div>
<div class="modal fade" id="updateUserStatusModal" tabindex="-1" aria-labelledby="userStatusLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <form method="POST" action="{{ route('admin.users.updateStatusOrType') }}" class="modal-content">
            @csrf
            <input type="hidden" name="user_id" id="modal_user_status_id">
            <div class="modal-header">
                <h5 class="modal-title">Update User Status</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <label for="user_status" class="form-label">Select Status</label>
                <select name="user_status" id="modal_user_status" class="form-select" required>
                    <option value="Active">Active</option>
                    <option value="Inactive">Inactive</option>
                </select>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Update</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            </div>
        </form>
    </div>
</div>
<!-- Filter Modal -->
<div class="modal fade" id="filterModal" tabindex="-1" aria-labelledby="filterModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <form method="GET" action="{{ route('all.users') }}" class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="filterModalLabel">Filter Users</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>

        <div class="modal-body">
            <!-- User Type Filter -->
            <div class="mb-3">
                <label class="form-label"><strong>User Type</strong></label><br>
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" name="user_types[]" value="1"
                        {{ in_array('1', (array)request('user_types')) ? 'checked' : '' }}>
                    <label class="form-check-label">Admin</label>
                </div>
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" name="user_types[]" value="2"
                        {{ in_array('2', (array)request('user_types')) ? 'checked' : '' }}>
                    <label class="form-check-label">User</label>
                </div>
            </div>

            <!-- Status Filter -->
            <div class="mb-3">
                <label class="form-label"><strong>Status</strong></label><br>
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" name="statuses[]" value="Active"
                        {{ in_array('Active', (array)request('statuses')) ? 'checked' : '' }}>
                    <label class="form-check-label">Active</label>
                </div>
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" name="statuses[]" value="Inactive"
                        {{ in_array('Inactive', (array)request('statuses')) ? 'checked' : '' }}>
                    <label class="form-check-label">Inactive</label>
                </div>
            </div>
        </div>

        <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Apply Filters</button>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        </div>
    </form>
  </div>
</div>
<!-- User Detail Modal -->
<!-- Include Bootstrap Icons CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet" />


<!-- Modal -->
<div class="modal fade" id="userDetailModal" tabindex="-1" aria-labelledby="userDetailModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-md">
    <div class="modal-content profile-modal">

      <!-- Header with Gradient -->
      <div class="modal-header modal-header-gradient">
        <h5 class="modal-title" id="userDetailModalLabel">
          <strong><i class="bi bi-person-fill me-2"></i> User Detail</strong>
        </h5>
        <button type="button" class="btn-close " data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <!-- Modal Body -->
      <div class="modal-body px-4">
        <div class="row gy-4">
          <!-- Name -->
          <div class="col-md-6">
            <label class="section-label">Name</label>
            <div class="section-data" id="modalUserName"></div>
          </div>
          <div class="col-md-6">
            <label class="section-label">Alt Name</label>
            <div class="section-data" id="modalUserAltName"></div>
          </div>

          <!-- Email -->
          <div class="col-md-6">
            <label class="section-label">Email Address</label>
            <div class="section-data" id="modalUserEmail">johndoe@gmail.com</div>
          </div>
           <!-- DOB -->
          <div class="col-md-6">
            <label class="section-label">Date of Birth</label>
            <div class="section-data" id="modalUserDOB">01/01/1990</div>
          </div>

          <!-- Mobile -->
          <div class="col-md-6">
            <label class="section-label">Mobile</label>
            <div class="section-data" id="modalUserMobile">1234567890</div>
          </div>
          <div class="col-md-6">
            <label class="section-label">Alt Mobile</label>
            <div class="section-data" id="modalUserAltMobile">9876543210</div>
          </div>

          <!-- User Type and Status -->
          <div class="col-md-6">
            <label class="section-label">User Type</label>
            <div class="section-data" id="modalUserType" >Admin</div>
          </div>
          <div class="col-md-6">
            <label class="section-label">Status</label>
            <div class="section-data" id="modalUserStatus">Active</div>
          </div>

          <!-- Registered At -->
          <div class="col-12">
            <label class="section-label">Registered At</label>
            <div class="section-data" id="modalUserCreated">2024-01-01</div>
          </div>
        </div>
      </div>

       <!-- Footer Buttons -->
      <div class="modal-footer px-4 pb-2 pt-2">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
      </div>


    </div>
  </div>
</div>




</div>
<!-- End Container Fluid -->

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const deleteButtons = document.querySelectorAll('.sweetalert-delete-btn');

    deleteButtons.forEach(button => {
        button.addEventListener('click', function (e) {
            e.preventDefault(); // Prevent immediate form submission
            const form = this.closest('form');

            Swal.fire({
                title: 'Are you sure?',
                text: "This user will be permanently deleted!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete user!',
                cancelButtonText: 'No, cancel!',
                customClass: {
                    confirmButton: 'btn btn-primary w-xs me-2 mt-2',
                    cancelButton: 'btn btn-danger w-xs mt-2'
                },
                buttonsStyling: false
            }).then((result) => {
                if (result.isConfirmed) {
                    form.submit(); // Submit the form if confirmed
                } else if (result.dismiss === Swal.DismissReason.cancel) {
                    Swal.fire({
                        title: 'Cancelled',
                        text: 'The user was not deleted.',
                        icon: 'info',
                        confirmButtonText: 'OK',
                        customClass: {
                            confirmButton: 'btn btn-primary mt-2'
                        },
                        buttonsStyling: false
                    });
                }
            });
        });
    });
});
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const input = document.getElementById('userSearchInput');
        const icon = document.getElementById('searchIcon');

        function toggleIcon() {
            if (input.value.trim().length > 0) {
                icon.style.display = 'none';
            } else {
                icon.style.display = '';
            }
        }

        input.addEventListener('input', toggleIcon);
        toggleIcon(); // Run on page load in case there's already a value
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const typeModal = document.getElementById('updateUserTypeModal');
        const statusModal = document.getElementById('updateUserStatusModal');

        typeModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            const userId = button.getAttribute('data-user-id');
            const userType = button.getAttribute('data-user-type');

            document.getElementById('modal_user_type_id').value = userId;
            document.getElementById('modal_user_type').value = userType;
        });

        statusModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            const userId = button.getAttribute('data-user-id');
            const userStatus = button.getAttribute('data-user-status');

            document.getElementById('modal_user_status_id').value = userId;
            document.getElementById('modal_user_status').value = userStatus;
        });
    });
</script>
<script>
    const userModal = document.getElementById('userDetailModal');

    userModal.addEventListener('show.bs.modal', function (event) {
        const trigger = event.relatedTarget;

        // Extract data attributes
        document.getElementById('modalUserName').textContent = trigger.getAttribute('data-name') || 'N/A';
        document.getElementById('modalUserEmail').textContent = trigger.getAttribute('data-email') || 'N/A';
        document.getElementById('modalUserMobile').textContent = trigger.getAttribute('data-mobile') || 'N/A';
        document.getElementById('modalUserType').textContent = trigger.getAttribute('data-type') || 'N/A';
        document.getElementById('modalUserStatus').textContent = trigger.getAttribute('data-status') || 'N/A';
        document.getElementById('modalUserCreated').textContent = trigger.getAttribute('data-created') || 'N/A';
        document.getElementById('modalUserAltName').textContent = trigger.getAttribute('data-alt_name') || 'N/A';
        document.getElementById('modalUserAltMobile').textContent = trigger.getAttribute('data-alt_mobile') || 'N/A';
        document.getElementById('modalUserDOB').textContent = trigger.getAttribute('data-dob') || 'N/A';

    });
</script>


@endsection
<style>
    input[type="search"]::-webkit-search-cancel-button {
    display: none;
}
  .modal-header-gradient {
    background: light;
    color: white;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    padding: 1.2rem;
  }

  .profile-modal .modal-content {
    border-radius: 1rem;
    border: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  }

  .section-label {
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 0.875rem;
    color: #4b5563;
  }

  .section-data {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    color: #111827;
  }

 

  .tab-icons {
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1rem;
  }

  .tab-icons .tab-item {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background: #f3f4f6;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
  }

  .tab-icons .tab-item.active {
    background: #e0e7ff;
    color: #4338ca;
  }
</style>