@extends('layouts.tenant.master')
@section('title', 'User Menu')

@section('css')
    <link rel="stylesheet" href="https://cdn.datatables.net/2.2.2/css/dataTables.dataTables.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdn.datatables.net/2.2.2/js/dataTables.js"></script>

@endsection

@section('style')
    <style>
        .column-toggle-dropdown {
            position: relative;
            display: inline-block;
        }

        .column-toggle-list {
            display: none;
            position: absolute;
            background: white;
            border: 1px solid #ddd;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
            padding: 10px;
            z-index: 100;
            width: 200px;
        }

        .column-toggle-list label {
            display: block;
            padding: 5px;
            cursor: pointer;
        }

        .column-toggle-dropdown button {
            padding: 6px 12px;
            cursor: pointer;
            border: 1px solid #ddd;
            background: #f8f9fa;
        }

        #userTable {
            table-layout: fixed;
            width: 100%;
        }

        #userTable th,
        #userTable td {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .table-responsive {
            overflow-x: auto;
        }
    </style>
@endsection

@section('breadcrumb-title')
    <h2>User <span>List </span></h2>
@endsection

@section('breadcrumb-items')
    <li class="breadcrumb-item">Users</li>
    <li class="breadcrumb-item active">List</li>
@endsection

@section('content')
    <div class="p-2 mt-0 card-header no-border">
        @include('partial.message')
        {{-- <a href="{{ route('tenant_user_create') }}" class="text-white btn btn-info btn-sm" data-toggle="tooltip"
            title="Create a new user in the system">
            <i class="icofont icofont-plus"></i> Create User
        </a>
        <a href="{{ route('tenant_deleted_users_list', $user->id) }}" class="btn btn-success btn-sm" data-toggle="tooltip"
            title="Restore a previously deleted user">
            <i class="icofont icofont-spinner-alt-3"></i> Restore User
        </a>
        <a href="{{ url()->current() }}" class="btn btn-light btn-sm" data-toggle="tooltip" title="Refresh this Page.">
            <i class="icofont icofont-refresh fa fa-spin"></i>&nbsp; Refresh
        </a> --}}
        <div class="pull-right">
            <!-- Import & Export Buttons -->
            {{-- <a href="{{ route('users.export') }}" class="btn btn-primary btn-sm" data-toggle="tooltip"
                title="Export user data to a file">
                <i class="text-white icofont icofont-upload-alt"></i> Export
            </a>


            <a href="#" class="btn btn-dark btn-sm btn-import" data-toggle="tooltip"
                title="Import user data from a file">
                <i class="text-white icofont icofont-download-alt"></i> Import
            </a> --}}
            {{-- <div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel"
                aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="importModalLabel">Import User Data</h5>
                        </div>
                        <div class="modal-body">
                            <!-- Form to upload the file -->
                            <form action="{{ route('users.import') }}" method="POST" enctype="multipart/form-data">
                                @csrf <!-- Add CSRF token for security -->
                                <div class="form-group">
                                    <label for="userFile">Select a file to import</label>
                                    <input type="file" class="form-control-file" id="userFile" name="userFile" required>
                                </div>
                                <button type="submit" class="btn btn-primary">Import</button>
                                <a href="{{ route('download.csv') }}" class="btn btn-dark btn-sm btn-import">Download Sample
                                    CSV</a>
                            </form>
                        </div>
                    </div>
                </div>
            </div> --}}
        </div>
        </iv>
        <div class="table-responsive table-xs">
            <table id="userTable" class="table p-0 m-0 table-striped table-bordered table-sm" style="width:100%">
                <thead>
                    <tr>
                        {{-- <th scope="col">#</th> --}}
                        <th scope="col">Type</th>
                        <th scope="col">Username</th>
                        <th scope="col">First Name</th>
                        <th scope="col">Last Name</th>
                        <th scope="col">Email</th>
                        <th scope="col">Company Name</th>
                        <th scope="col" style="width: 170px;">Status</th>
                        <th scope="col">Created On</th>
                        <th scope="col">Actions</th>
                    </tr>
                </thead>
                <tbody id="myTable">
                    @foreach ($users as $key => $user)
                        @if ($user->id !== auth()->user()->id)
                            <tr>
                                {{-- <td>{{ ++$key }}</td> --}}
                                <td>
                                    @if (!empty($user->getRoleNames()))
                                        @forelse ($user->getRoleNames() as $v)
                                            <label class="badge bg-success f-14">{{ $v ?? N / A }}</label>
                                        @empty
                                            <label class="badge bg-warning">N/A</label>
                                        @endforelse
                                    @else
                                        <label class="badge bg-warning">N/A</label>
                                    @endif
                                </td>
                                <td>{{ $user->username ?? 'N/A' }}</td>
                                <td>{{ $user->first_name ?? 'N/A' }}</td>
                                <td>{{ $user->last_name ?? 'N/A' }}</td>
                                <td>
                                    <span class="email-text"
                                        id="email-{{ $user->id }}">{{ $user->email ?? 'N/A' }}</span>
                                    <i class="fa fa-copy txt-large" id="copy-email-{{ $user->id }}"
                                        style="cursor: pointer;"></i>
                                </td>
                                <td>{{ $user->company_name ?? 'N/A' }}</td>
                                <td>
                                    <select style="background: #b8daff" class="form-select status-dropdown"
                                        data-user-id="{{ $user->id }}">
                                        <option value="approved" {{ $user->status === 'approved' ? 'selected' : '' }}>
                                            Approved
                                        </option>
                                        <option value="un-approved"
                                            {{ $user->status === 'un-approved' ? 'selected' : '' }}>
                                            Unapproved
                                        </option>
                                        {{-- <option value="block" {{ $user->status === 'block' ? 'selected' : '' }}>Block
                                        </option> --}}
                                    </select>
                                </td>
                                <td>{{ $user->created_at->format('d-m-Y') ?? 'N/A' }}</td>
                                <td>
                                    <a href="{{ route('tenant_user_show', $user->id) }}" data-toggle="tooltip"
                                        title="View details of this user">
                                        Show ||
                                    </a>
                                    <a class="" href="{{ route('tenant_user_edit', $user->id) }}"
                                        data-toggle="tooltip" title="Edit this user's information">
                                        Edit ||
                                    </a>
                                    <!-- Delete button with SweetAlert -->
                                    <a href="#" type="button" data-toggle="tooltip" title="Delete this user"
                                        onclick="deleteUser({{ $user->id }})">
                                        Delete
                                    </a>
                                    <!-- Delete form (hidden, used for sending DELETE request) -->
                                    <form id="deleteForm{{ $user->id }}" method="POST"
                                        action="{{ route('tenant_user_destroy', $user->id) }}" style="display: none;">
                                        @csrf
                                        @method('DELETE')
                                    </form>
                                </td>
                            </tr>
                        @endif
                    @endforeach
                </tbody>
                <tfoot>
                    <tr>
                        {{-- <th scope="col">#</th> --}}
                        <th scope="col">Type</th>
                        <th scope="col">Username</th>
                        <th scope="col">First Name</th>
                        <th scope="col">Last Name</th>
                        <th scope="col">Email</th>
                        <th scope="col">Company Name</th>
                        <th scope="col" style="width: 170px;">Status</th>
                        <th scope="col">Created On</th>
                        <th scope="col">Actions</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
@endsection
@section('script')
    {{-- sweet alert  start --}}
    <script>
        function deleteUser(userId) {
            // SweetAlert confirmation dialog
            Swal.fire({
                title: 'Are you sure?',
                text: 'You won\'t be able to revert this!',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!',
            }).then((result) => {
                if (result.isConfirmed) {
                    // If confirmed, submit the delete form
                    document.getElementById('deleteForm' + userId).submit();
                }
            });
        }
    </script>


    @if (session('success'))
        <script>
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: '{{ session('success') }}',
                confirmButtonText: 'OK'
            });
        </script>
    @elseif(session('error'))
        <script>
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: '{{ session('error') }}',
                confirmButtonText: 'OK'
            });
        </script>
    @endif
    {{-- sweet alert  end --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const deleteButtons = document.querySelectorAll('.delete-button');
            deleteButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const form = this.closest('.delete-form');

                    Swal.fire({
                        title: 'Are you sure?',
                        text: "You can revert this within 60 days!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#d33',
                        cancelButtonColor: '#3085d6',
                        confirmButtonText: 'Yes, delete it!'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            form.submit(); // Submit the form if confirmed
                        }
                    });
                });
            });
        });
    </script>
    <script>
        // Status change script
        document.addEventListener('DOMContentLoaded', function() {
            $(document).on('change', '.status-dropdown', function() {
                const userId = this.getAttribute('data-user-id');
                const newStatus = this.value;
                const previousValue = this.dataset.previousValue || this.value;
                Swal.fire({
                    text: `You are about to change the user's status to ${newStatus}.`,
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, change it!',
                }).then((result) => {
                    if (result.isConfirmed) {
                        const csrfToken = document.querySelector(
                            'meta[name="csrf-token"]') ? document.querySelector(
                            'meta[name="csrf-token"]').getAttribute('content') : '';

                        if (!csrfToken) {
                            console.error('CSRF token not found!');
                            return; // Exit if the CSRF token is missing
                        }
                        // Get the route URL dynamically
                        const updateStatusUrl =
                            '{{ route('tenant_users_update_status', ':id') }}'.replace(
                                ':id', userId);

                        fetch(updateStatusUrl, {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': csrfToken
                                },
                                body: JSON.stringify({
                                    status: newStatus
                                })
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    Swal.fire('Updated!',
                                        `The user's status has been updated to ${newStatus}.`,
                                        'success');
                                } else {
                                    Swal.fire('Error!',
                                        'There was a problem updating the status.',
                                        'error');
                                    dropdown.value =
                                        previousValue; // Revert if error occurs
                                }
                            })
                            .catch(error => {
                                console.error('Error:', error);
                                Swal.fire('Error!',
                                    'There was a problem updating the status.',
                                    'error');
                                dropdown.value = previousValue; // Revert on error
                            });
                    } else {
                        dropdown.value = previousValue; // Revert if canceled
                    }
                });

                this.dataset.previousValue = newStatus; // Store previous value
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Loop through all copy icons for users
            document.querySelectorAll('.fa-copy').forEach(copyIcon => {
                copyIcon.addEventListener('click', function() {
                    const userId = this.id.split('-')[
                        2]; // Extract the user ID from the copy icon ID
                    const emailText = document.getElementById('email-' + userId)
                        .textContent; // Get the email using the user ID
                    // Use the Clipboard API to copy the email text
                    navigator.clipboard.writeText(emailText).then(function() {
                        // If the text is copied, show SweetAlert with the copied email
                        Swal.fire({
                            icon: 'success',
                            title: 'Copied!',
                            text: 'Email: ' +
                                emailText, // Show the copied email in the SweetAlert message
                            showConfirmButton: false,
                            timer: 3000,
                        });
                    }).catch(function(err) {
                        // If an error occurs while copying, show an error message
                        console.error('Error copying text: ', err);
                        Swal.fire({
                            icon: 'error',
                            title: 'Oops!',
                            text: 'Failed to copy the email.',
                            confirmButtonText: 'Try Again'
                        });
                    });
                });
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $(".btn-import").click(function() {
                $('#importModal').modal('show');
            });
        });
    </script>
    <script>
        $(document).ready(function() {

            $("#myInput").on("keyup", function() {
                var value = $(this).val().toLowerCase();
                $("#myTable tr").filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
                });
            });
            $("#search_username").on("keyup", function() {
                var value = $(this).val().toLowerCase();
                $("#myTable tr").filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
                });
            });
            $("#search_name").on("keyup", function() {
                var value = $(this).val().toLowerCase();
                $("#myTable tr").filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
                });
            });
            $("#search_email").on("keyup", function() {
                var value = $(this).val().toLowerCase();
                $("#myTable tr").filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
                });
            });
        });
    </script>
    <script>
        // new DataTable('#userTable', {
        //     initComplete: function() {
        //         this.api()
        //             .columns()
        //             .every(function() {
        //                 let column = this;
        //                 let title = column.header().textContent;

        //                 // Create input element
        //                 let input = document.createElement('input');
        //                 input.placeholder = title;
        //                 column.header().replaceChildren(input);

        //                 // Event listener for user input
        //                 input.addEventListener('keyup', () => {
        //                     if (column.search() !== this.value) {
        //                         column.search(input.value).draw();
        //                     }
        //                 });
        //             });
        //     }
        // });
        new DataTable('#userTable', {
            order: [
                [6, 'asc']
            ], // [columnIndex, 'asc' or 'desc']
            autoWidth: false,
            scrollX: true,
            columnDefs: [{
                    width: '120px',
                    targets: 0
                }, // Type
                {
                    width: '120px',
                    targets: 1
                }, // Username
                {
                    width: '120px',
                    targets: 2
                }, // First Name
                {
                    width: '120px',
                    targets: 3
                }, // Last Name
                {
                    width: '200px',
                    targets: 4
                }, // Email
                {
                    width: '200px',
                    targets: 5
                }, // Company Name
                {
                    width: '170px',
                    targets: 6
                }, // Status
                {
                    width: '120px',
                    targets: 7
                }, // Created On
                {
                    width: '200px',
                    targets: 8
                }, // Actions
            ],
            initComplete: function() {
                this.api()
                    .columns()
                    .every(function(index) {
                        let column = this;
                        let input = $('thead tr:eq(1) th').eq(index).find('input');
                        if (input.length) {
                            input.on('keyup change', function() {
                                if (column.search() !== this.value) {
                                    column.search(this.value).draw();
                                }
                            });
                        }
                    });
            }
        });
    </script>

@endsection