@extends('admin.layouts.app')

@section('title', 'Users')

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            const selectAll = document.getElementById('selectAllUsers');

            const sendMailBtn = document.getElementById('sendMailBtn');

            const selectedCount = document.getElementById('selectedCount');

            const modalSelectedCount = document.getElementById('modalSelectedCount');

            const userCheckboxes = document.querySelectorAll('.user-checkbox');

            const sendMailForm = document.getElementById('sendMailForm');

            function updateSelectedCount() {

                const checkedUsers = document.querySelectorAll(
                    '.user-checkbox:checked'
                );

                const count = checkedUsers.length;

                selectedCount.textContent = count;

                modalSelectedCount.textContent = count;

                sendMailBtn.disabled = count === 0;

                if (count === userCheckboxes.length && count > 0) {
                    selectAll.checked = true;
                    selectAll.indeterminate = false;
                } else if (count > 0) {
                    selectAll.checked = false;
                    selectAll.indeterminate = true;
                } else {
                    selectAll.checked = false;
                    selectAll.indeterminate = false;
                }
            }


            // Select All
            selectAll.addEventListener('change', function() {

                userCheckboxes.forEach(function(checkbox) {

                    checkbox.checked = selectAll.checked;

                });

                updateSelectedCount();

            });


            // Individual checkbox
            userCheckboxes.forEach(function(checkbox) {

                checkbox.addEventListener('change', function() {

                    updateSelectedCount();

                });

            });


            // Open modal
            sendMailBtn.addEventListener('click', function() {

                const checkedUsers = document.querySelectorAll(
                    '.user-checkbox:checked'
                );

                if (checkedUsers.length === 0) {

                    alert('Please select at least one user.');

                    return;

                }

                modalSelectedCount.textContent = checkedUsers.length;

                const modalElement = document.getElementById('sendMailModal');

                const modal = new bootstrap.Modal(modalElement);

                modal.show();

            });


            // Submit
            sendMailForm.addEventListener('submit', function(event) {

                const checkedUsers = document.querySelectorAll(
                    '.user-checkbox:checked'
                );

                if (checkedUsers.length === 0) {

                    event.preventDefault();

                    alert('Please select at least one user.');

                    return;

                }


                // Remove old hidden inputs
                sendMailForm
                    .querySelectorAll('.selected-user-input')
                    .forEach(function(input) {
                        input.remove();
                    });


                // Add selected IDs
                checkedUsers.forEach(function(checkbox) {

                    const input = document.createElement('input');

                    input.type = 'hidden';

                    input.name = 'user_ids[]';

                    input.value = checkbox.value;

                    input.classList.add('selected-user-input');

                    sendMailForm.appendChild(input);

                });


                const button = document.getElementById('confirmSendMailBtn');

                button.disabled = true;

                button.innerHTML =
                    '<i class="mdi mdi-loading mdi-spin"></i> Sending...';

            });


            updateSelectedCount();

        });
    </script>
@endpush


@section('content')

    <div class="container-fluid">

        <div class="py-3 d-flex justify-content-between align-items-center">

            <div>
                <h4 class="fs-18 fw-semibold mb-0">
                    Users
                </h4>
            </div>

            <div class="d-flex gap-2">

                <button type="button" class="btn btn-success" id="sendMailBtn" disabled>

                    <i class="mdi mdi-email-outline"></i>

                    Send Mail

                    <span class="badge bg-light text-dark ms-1" id="selectedCount">
                        0
                    </span>

                </button>

                <a href="{{ route('admin.users.create') }}" class="btn btn-primary">

                    <i class="mdi mdi-plus"></i>
                    Add User

                </a>

            </div>

        </div>

        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show">

                <i class="mdi mdi-check-circle"></i>

                {{ session('success') }}

                <button type="button" class="btn-close" data-bs-dismiss="alert">
                </button>

            </div>
        @endif



        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="card">

            <div class="card-body">

                <div class="table-responsive">

                    <table class="table table-bordered align-middle datatable">

                        <thead>

                            <tr>
                                <th width="50">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="selectAllUsers">
                                    </div>
                                </th>
                                <th width="50">#</th>

                                <th width="80">Avatar</th>
                                <th>Name</th>
                                <th>Contact</th>
                                <th>Gender</th>
                                <th>Location</th>
                                <th>Verified</th>
                                <th>Status</th>
                                <th width="170" class="text-center">Action</th>
                            </tr>

                        </thead>

                        <tbody>

                            @forelse($users as $user)
                                <tr>

                                    {{-- <td>{{ $loop->iteration }}</td> --}}
                                    <td>
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input user-checkbox"
                                                value="{{ $user->id }}">
                                        </div>
                                    </td>

                                    <td>{{ $users->firstItem() + $loop->index }}</td>

                                    <td>

                                        {{-- @if ($user->avatar)
                                            <img src="{{ asset('storage/' . $user->avatar) }}" width="60" height="60"
                                                class="rounded-circle border" style="object-fit: cover;">
                                        @else
                                            <img src="{{ asset('public/admin/assets/images/users/user-22.jpg') }}" width="60"
                                                height="60" class="rounded-circle border" style="object-fit: cover;">
                                        @endif --}}
                                        @if ($user->avatar && Storage::disk('public')->exists($user->avatar))
                                            <img src="{{ Storage::url($user->avatar) }}" width="60" height="60"
                                                class="rounded-circle border" style="object-fit: cover;">
                                        @else
                                            <img src="{{ asset('public/admin/assets/images/users/user-22.jpg') }}" width="60"
                                                height="60" class="rounded-circle border" style="object-fit: cover;">
                                        @endif

                                    </td>

                                    <td>

                                        <strong>{{ $user->name }}</strong>

                                        <br>

                                        <small class="text-muted">
                                            {{ $user->email }}
                                        </small>

                                    </td>

                                    <td>

                                        {{ $user->phone ?? '-' }}

                                    </td>

                                    <td>

                                        {{ ucfirst($user->gender ?? '-') }}

                                    </td>

                                    <td>

                                        <small>

                                            {{ $user->city ?? '-' }}

                                            @if ($user->state)
                                                , {{ $user->state }}
                                            @endif

                                        </small>

                                    </td>

                                    <td>

                                        @if ($user->is_verified)
                                            <span class="badge bg-success">
                                                Verified
                                            </span>
                                        @else
                                            <span class="badge bg-warning">
                                                Pending
                                            </span>
                                        @endif

                                    </td>

                                    <td>

                                        @if ($user->status)
                                            <span class="badge bg-success">
                                                Active
                                            </span>
                                        @else
                                            <span class="badge bg-danger">
                                                Blocked
                                            </span>
                                        @endif

                                    </td>

                                    <td class="text-center">

                                        <a href="{{ route('admin.users.show', $user->id) }}" class="btn btn-sm btn-info">

                                            <i class="mdi mdi-eye"></i>

                                        </a>

                                        <a href="{{ route('admin.users.edit', $user->id) }}"
                                            class="btn btn-sm btn-primary">

                                            <i class="mdi mdi-pencil"></i>

                                        </a>

                                        <button type="button" class="btn btn-sm btn-danger deleteBtn"
                                            data-url="{{ route('admin.users.destroy', $user->id) }}"
                                            data-name="{{ $user->name }}">

                                            <i class="mdi mdi-delete"></i>

                                        </button>

                                    </td>

                                </tr>

                            @empty

                                <tr>

                                    <td colspan="9" class="text-center">
                                        No Users Found
                                    </td>

                                </tr>
                            @endforelse

                        </tbody>

                    </table>

                    <div class="mt-3">
                        {{ $users->links() }}
                    </div>

                </div>

            </div>

        </div>

    </div>

    {{-- Send Mail Modal --}}
    <div class="modal fade" id="sendMailModal" tabindex="-1" aria-labelledby="sendMailModalLabel" aria-hidden="true">

        <div class="modal-dialog modal-lg">

            <div class="modal-content">

                <form action="{{ route('users.send-mail') }}" method="POST" enctype="multipart/form-data"
                    id="sendMailForm">

                    @csrf

                    <div class="modal-header">

                        <h5 class="modal-title" id="sendMailModalLabel">
                            Send Mail to Selected Users
                        </h5>

                        <button type="button" class="btn-close" data-bs-dismiss="modal">
                        </button>

                    </div>

                    <div class="modal-body">

                        <div class="alert alert-info">

                            <i class="mdi mdi-information-outline"></i>

                            Mail will be sent to
                            <strong id="modalSelectedCount">0</strong>
                            selected users.

                        </div>

                        <div class="mb-3">

                            <label class="form-label">
                                Subject <span class="text-danger">*</span>
                            </label>

                            <input type="text" name="subject" class="form-control" placeholder="Enter mail subject"
                                required>

                        </div>

                        <div class="mb-3">

                            <label class="form-label">
                                Content <span class="text-danger">*</span>
                            </label>

                            <textarea name="content" class="form-control" rows="8" placeholder="Write your message..." required></textarea>

                        </div>

                        <div class="mb-3">

                            <label class="form-label">
                                Attachment
                            </label>

                            <input type="file" name="attachment" class="form-control"
                                accept=".jpg,.jpeg,.png,.webp,.pdf">

                            <small class="text-muted">
                                Allowed: JPG, JPEG, PNG, WEBP, PDF.
                                Maximum size: 10 MB.
                            </small>

                        </div>

                    </div>

                    <div class="modal-footer">

                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">

                            Cancel

                        </button>

                        <button type="submit" class="btn btn-success" id="confirmSendMailBtn">

                            <i class="mdi mdi-send"></i>

                            Send Mail

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>


@endsection