@extends('layouts.app')

@section('content')
<div class="container-fluid mt-4">
    <div class="card my-custom-margin">
    <div class="card-header">
    <div class="row g-2 justify-content-between align-items-center">
        <div class="col-12 col-md-auto">
            <h5 class="mb-0">Users</h5>
        </div>
        <div class="col-12 col-md-auto d-flex flex-wrap gap-2">
            <button class="btn btn-primary btn-sm" id="add-new-user" data-bs-toggle="modal" data-bs-target="#addUserModal">
                <i class="bi bi-plus-lg me-1"></i> Add New User
            </button>
            <div class="dropdown">
                <button class="btn btn-sm btn-secondary dropdown-toggle" type="button" id="exportDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-upload me-1"></i> Export
                </button>
                <ul class="dropdown-menu" aria-labelledby="exportDropdown">
                    <li><button class="dropdown-item" id="exportExcel">Excel</button></li>
                    <li><button class="dropdown-item" id="exportCSV">CSV</button></li>
                    <li><button class="dropdown-item" id="exportPDF">PDF</button></li>
                    <li><button class="dropdown-item" id="exportPrint">Print</button></li>
                </ul>
            </div>
        </div>
    </div>
</div>

        <div class="card-body">
            <div class="row mb-3 g-2 align-items-center">
                <div class="col-12 col-md-6 d-flex flex-wrap align-items-center gap-2">
                   <label for="entries" class="show" style="margin-left: 24px;">Show</label>
                    <select id="entries" class="form-select form-select-sm" style="max-width: 100px;">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="-1">All</option>
                    </select>
                    <span class="mb-0">entries</span>
                </div>
                <div class="col-12 col-md-6 d-flex flex-wrap justify-content-md-end align-items-center gap-2">
                    <label for="search" class="form-label mb-0">Search:</label>
                    <input type="text" id="search" class="form-control form-control-sm" style="max-width: 189px; margin-right: 22px;">
                </div>
            </div>

            <div class="table-responsive"><div class="custom-scroll-container">
                <table class="table table-bordered w-100" id="usersTable">
                    <thead>
                        <tr>
                            <th class="no-sort"><input type="checkbox" id="selectAll"></th> <!-- This is your Select All checkbox -->
                            <th>Full Name</th>
                            <th>Email</th>
                            <th>Phone</th> 
                            <th>Role</th>
                            <th>Last Login</th>
                            <th>Active</th>
                        </tr>
                    </thead>
                    <tbody>
                          @foreach ($users as $user)
                        <tr>
                            <td><input type="checkbox" class="rowCheckbox" value="{{ $user->id }}"></td>
                            <td>
                                <div class="full-name-wrapper">
                                    <div>{{ $user->full_name }}</div>
                                    <div class="user-row-actions">
                                        <a href="#" class="text-primary edit-user-btn" 
                                           data-id="{{ $user->id }}"
                                           data-fullname="{{ $user->full_name }}"
                                           data-email="{{ $user->email }}"
                                           data-phone="{{ $user->phone }}"  
                                           data-role="{{ $user->role }}"
                                           data-bs-toggle="modal"
                                           data-bs-target="#editUserModal">
                                            Edit
                                        </a>
                                        |
                                        <a href="#" class="text-danger delete-user-btn" data-id="{{ $user->id }}">
                                            Delete
                                        </a>
                                    </div>
                                </div>
                            </td>
                            <td>{{ $user->email }}</td>
                            <td>{{ $user->phone }}</td>
                            <td>{{ $user->role }}</td>
                             <td>
                               {{ $user->last_login ? \Carbon\Carbon::parse($user->last_login)->diffForHumans() : '-' }}

                            </td>
                            <td>
                                <label class="switch">
                                    <input type="checkbox" class="toggle-status" data-id="{{ $user->id }}" {{ $user->active ? 'checked' : '' }}>
                                    <span class="slider round"></span>
                                </label>
                            </td>
                            </tr>
                            @endforeach
                    </tbody>
                 </table>
                </div>
            </div>
            <div class="row mt-3">
                    <div class="col-md-6">
                     <div class="dt-info" aria-live="polite" id="usersTable_info" role="status" style="margin-left: 26px;"></div>
                    </div>
                    <div class="col-md-6">
                        <div id="projectsTable_paginate" class="dataTables_paginate paging_simple_numbers"></div>
                    </div>
                </div>
            </div>
        </div>
    
        <!-- Add User Modal -->
        <div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <form id="addUserForm">
              @csrf
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">Add New User</h5>
                 <button type="button" class="custom-close" data-bs-dismiss="modal" aria-label="Close">×</button>
                </div>
                <div class="modal-body">
                  <div class="mb-2">
                    <label>Full Name</label>
                    <input type="text" name="full_name" class="form-control" required>
                  </div>
                  <div class="mb-2">
                    <label>Email</label>
                    <input type="email" name="email" class="form-control" required>
                  </div>
                   <div class="mb-2">
                     <label>Phone</label> 
                     <input type="text" name="phone" class="form-control" required>
                    </div>
                  <div class="mb-2">
                    <label>Role</label>
                    <input type="text" name="role" class="form-control" required>
                  </div>
                  <div class="mb-2">
                    <label>Password</label>
                    <input type="password" name="password" class="form-control" required>
                  </div>
                  <div class="mb-2">
                    <label>Confirm Password</label>
                    <input type="password" name="password_confirmation" class="form-control" required>
                  </div>
                </div>
                <div class="modal-footer">
                     <button type="button" class="btn custom-btn" data-bs-dismiss="modal">Close</button>
                  <button type="submit" class="btn custom-btn">Save User</button>
                </div>
              </div>
            </form>
          </div>
        </div>

    <!-- Edit User Modal -->
    <div class="modal fade" id="editUserModal" tabindex="-1">
        <div class="modal-dialog">
            <form id="editUserForm">
                @csrf
                @method('PUT')
                <input type="hidden" id="edit_user_id">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Edit User</h5>
                        <button type="button" class="custom-close" data-bs-dismiss="modal" aria-label="Close">×</button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label>Full Name</label>
                            <input type="text" id="edit_full_name" class="form-control">
                        </div>
                        <div class="mb-3">
                            <label>Email</label>
                            <input type="email" id="edit_email" class="form-control">
                        </div>
                        <div class="mb-3">
                            <label>Phone</label> 
                            <input type="text" id="edit_phone" class="form-control">
                        </div>
                        <div class="mb-3">
                            <label>Role</label>
                            <input type="text" id="edit_role" class="form-control">
                        </div>
                    </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>
                </div>
            </form>
        </div>
    </div>
    @endsection
    @section('scripts')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css">

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- DataTables Buttons Extension -->
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>

<!-- pdfmake (REQUIRED for PDF Export) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>

<!-- Buttons HTML5 export -->
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script>
$(document).ready(function () {
    // Initialize DataTable
    const table = $('#usersTable').DataTable({
    scrollX: true,
      order: [], // disable initial sorting on any column
    dom: 'Brtip',
        buttons: [
            {
                extend: 'excelHtml5',
                title: 'Users',
                className: 'd-none',
                exportOptions: {
                    columns: ':not(.no-export)'
                }
            },
            {
                extend: 'csvHtml5',
                title: 'Users',
                className: 'd-none',
                exportOptions: {
                    columns: ':not(.no-export)'
                }
            },
            {
                extend: 'pdfHtml5',
                title: 'Users',
                className: 'd-none',
                exportOptions: {
                    columns: ':not(.no-export)'
                }
            },
            {
                extend: 'print',
                title: 'Users',
                className: 'd-none',
                exportOptions: {
                    columns: ':not(.no-export)'
                }
            },
        ],
        pagingType: 'simple_numbers',  // For simple pagination
        pageLength: 10,
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
        language: {
            search: "_INPUT_",
            searchPlaceholder: "Search Leads...",
            lengthMenu: "_MENU_",
            paginate: {
                first: "First",
                last: "Last",
                next: "Next",
                previous: "Previous"
            },
            info: "Showing _START_ to _END_ of _TOTAL_ entries",
        },
        columnDefs: [
            {
            targets: 0,
            orderable: false,
            searchable: false, // also make it non-searchable
            className: 'no-sort'
            }
        ]
    });
    
    
    // Custom "Show entries" dropdown (working)
    $('#entries').on('change', function () {
        const length = parseInt($(this).val(), 10);
        table.page.len(length).draw();
    });
    
    // Custom search box (working)
    $('#search').on('keyup', function () {
        table.search(this.value).draw();
    });
    
    
   function getSelectedUserIds() {
    let selectedIds = [];
    $('.rowCheckbox:checked').each(function () {
        selectedIds.push($(this).val());
    });
    return selectedIds;
    }
    
    function exportWithSelection(route, fileName) {
        const selectedIds = getSelectedUserIds();
    
        $.ajax({
            url: route,
            method: 'POST',
            data: {
                ids: selectedIds,
                _token: '{{ csrf_token() }}'
            },
            xhrFields: {
                responseType: 'blob'
            },
            success: function (data) {
                const blob = new Blob([data], { type: 'application/pdf' });
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = fileName;
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(url);
                a.remove();
            },
            error: function () {
                alert('Failed to export file.');
            }
        });
    }
    
    // PDF Button
    $('#exportPDF').on('click', function () {
        exportWithSelection('{{ route("users.export.pdf") }}', 'users.pdf');
    });
    
    // Other formats use DataTables button triggers (no backend)
    function triggerTableExport(buttonClass) {
        const selectedIds = getSelectedUserIds();
    
        if (selectedIds.length > 0) {
            table.rows().deselect();
            table.rows().every(function () {
                const checkbox = $(this.node()).find('.rowCheckbox');
                if (selectedIds.includes(checkbox.val())) {
                    this.select();
                }
            });
        }
    
        table.button(buttonClass).trigger();
    }
    
    // Excel/CSV/Print
    $('#exportExcel').on('click', function () {
        triggerTableExport('.buttons-excel');
    });
    $('#exportCSV').on('click', function () {
        triggerTableExport('.buttons-csv');
    });
    $('#exportPrint').on('click', function () {
        triggerTableExport('.buttons-print');
    });



    // Add New User to datatabloe
    $('#addUserForm').on('submit', function (e) {
        e.preventDefault();
    
        let formData = {
            full_name: $('input[name="full_name"]').val(),
            email: $('input[name="email"]').val(),
            phone: $('input[name="phone"]').val(), // ✅ ADD THIS
            role: $('input[name="role"]').val(), // assuming you're using <input type="text">
            password: $('input[name="password"]').val(),
            password_confirmation: $('input[name="password_confirmation"]').val(),
            _token: '{{ csrf_token() }}'
        };
    
        $.ajax({
            url: '{{ route("users.store") }}',
            type: 'POST',
            data: formData,
            success: function (response) {
                $('#addUserModal').modal('hide');
                $('#addUserForm')[0].reset();
    
                $('#usersTable').DataTable().ajax.reload();
                alert(response.message);
            },
            error: function (xhr) {
                let errors = xhr.responseJSON.errors;
                let messages = '';
    
                for (let field in errors) {
                    messages += errors[field][0] + '\n';
                }
    
                alert("Error:\n" + messages);
            }
        });
    });


    // Handle Edit - Fill form
   // Handle Edit - Fill form and open modal
$(document).on('click', '.edit-user-btn', function (e) {
    e.preventDefault();
    $('#edit_user_id').val($(this).data('id'));
    $('#edit_full_name').val($(this).data('fullname'));
    $('#edit_email').val($(this).data('email'));
    $('#edit_phone').val($(this).data('phone'));  // ✅ Ensure phone is set
    $('#edit_role').val($(this).data('role'));
    $('#editUserModal').modal('show');
});

// Submit Edit Form via AJAX
$('#editUserForm').on('submit', function (e) {
    e.preventDefault();

    const id = $('#edit_user_id').val();

    $.ajax({
        url: `/users/${id}`,
        method: 'PUT',
        data: {
            full_name: $('#edit_full_name').val(),
            email: $('#edit_email').val(),
            phone: $('#edit_phone').val(),  // ✅ Send phone in request
            role: $('#edit_role').val(),
            _token: '{{ csrf_token() }}'
        },
        success: function (res) {
            $('#editUserModal').modal('hide');
            alert('User updated successfully!');
            location.reload(); // Or reload DataTable if used
        },
        error: function (xhr) {
            alert('Update failed!');
            console.log(xhr.responseText);
        }
    });
});

    // Handle Delete via AJAX
    $(document).on('submit', '.user-delete-form', function (e) {
        e.preventDefault();

        if (!confirm('Are you sure you want to delete this user?')) {
            return;
        }

        const id = $(this).data('id');

        $.ajax({
            url: `/users/${id}`,
            method: 'DELETE',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function (res) {
                alert('User deleted successfully!');
                location.reload(); // Or you can remove the row with JS
            },
            error: function (xhr) {
                alert('Failed to delete user!');
                console.log(xhr.responseText);
            }
        });
    });
    
    
     // Handle "Select All" checkbox
    $('#selectAll').on('change', function () {
        const isChecked = $(this).prop('checked');
        // Update to use the correct class 'checkbox-item'
        $('#usersTable .rowCheckbox').prop('checked', isChecked);
    });
    
    // Handle individual row checkbox change
    $('#usersTable').on('change', '.rowCheckbox', function () {
        // Check if all checkboxes are selected
        const allChecked = $('#usersTable .rowCheckbox:checked').length === $('#usersTable .rowCheckbox').length;
        $('#selectAll').prop('checked', allChecked);
    });
    
   // aCtive Buttons
   $(document).on('change', '.toggle-status', function () {
    let userId = $(this).data('id');
    let isActive = $(this).is(':checked');

    $.ajax({
        url: `/users/${userId}/toggle-active`,
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}'
        },
        success: function (res) {
            console.log('Status updated');
        }
    });
    });
    
    
       // Edit
    $('#usersTable').on('click', '.edit-user-btn', function (e) {
        e.preventDefault();
        const id = $(this).data('id');
        $('#edit_user_id').val(id);
        $('#edit_full_name').val($(this).data('fullname'));
        $('#edit_email').val($(this).data('email'));
        $('#edit_role').val($(this).data('role'));
        $('#editUserModal').modal('show');
    });
    
    // Delete
    $('#usersTable').on('click', '.delete-user-btn', function (e) {
        e.preventDefault();
        const id = $(this).data('id');
        if (!confirm('Are you sure you want to delete this user?')) return;
    
        $.ajax({
            url: `/users/${id}`,
            type: 'POST',
            data: {_method: 'DELETE', _token: '{{ csrf_token() }}'},
            success: function () {
                location.reload();
            },
            error: function () {
                alert('Delete failed.');
            }
        });
    });
    });
    </script>
    @endsection