@extends('admin.layouts.admin_master')

@section('title', 'Dashboard')

@section('content')

@if (session('info'))
<div class="alert alert-warning">
    <strong>{{ session('info') }}</strong>
</div>
@endif

<style>
     tr.odd {
        background: #eee;
    }
    table#users-table thead {
        color: #fff;
        background: #ed6d5c;
    }
    table#users-table th {
        padding:10px 0px;
        text-align: center;
    }
    div#users-table_length label, div#users-table_filter label {
        font-weight: 500;
    }
    table#users-table td {
        text-align: center;
        padding: 20px;
    }

    /* Style for the toggle switch */
    .switch {
        position: relative;
        display: inline-block;
        width: 34px;
        height: 20px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
        border-radius: 50px;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 12px;
        width: 12px;
        border-radius: 50px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .4s;
    }

    input:checked + .slider {
        background-color: #4CAF50;
    }

    input:checked + .slider:before {
        transform: translateX(14px);
    }
</style>

<div class="row">
    <div class="col-12 col-lg-12  d-flex">
        <div class="card radius-10 w-100">
            <div class="card-body">
                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-xl-3 row-cols-xxl-3 g-3">
                    <div class="col">
                        <div class="card radius-10 bg-tiffany mb-0">
                            <div class="card-body text-center">
                                <div class="widget-icon mx-auto mb-3 bg-white-1 text-white">
                                    <i class="bi bi-file-earmark-break-fill"></i>
                                </div>
                                <h3 class="text-white">{{ $total_users }}</h3>
                                <p class="mb-0 text-white">Total Users</p>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card radius-10 bg-danger mb-0">
                            <div class="card-body text-center">
                                <div class="widget-icon mx-auto mb-3 bg-white-1 text-white">
                                    <i class="bi bi-hdd-fill"></i>
                                </div>
                                <h3 class="text-white">{{ $buildings }}</h3>
                                <p class="mb-0 text-white">Total Business</p>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card radius-10 bg-orange mb-0">
                            <div class="card-body text-center">
                                <div class="widget-icon mx-auto mb-3 bg-white-1 text-white">
                                    <i class="bi bi-file-earmark-check-fill"></i>
                                </div>
                                <h3 class="text-white">{{ $icons }}</h3>
                                <p class="mb-0 text-white">Total Standard Icons</p>
                            </div>
                        </div>
                    </div>
                </div> 
            </div>
        </div>
    </div>

    <div class="container mt-5">
        <h3 class="text-center">User List</h3>
        
        <!-- DataTable -->
        <table class="table table-bordered" id="users-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Username</th>
                    <th>Phone Number</th>
                    <th>Agency Name</th>
                    <th>Can Edit</th> <!-- New column -->
                </tr>
            </thead>
            <tbody>
             
            </tbody>
        </table>
    </div>
</div><!--end row-->

@endsection

@section('script')
<script type="text/javascript">
$(document).ready(function() {
    // Initialize DataTable
    var table = $('#users-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! route('getUsersData') !!}', // Make sure this route is correct
        columns: [
            { data: 'first_name', name: 'first_name' },
            { data: 'email', name: 'email' },
            { data: 'user_name', name: 'user_name' },
            { data: 'phone_number', name: 'phone_number' },
            {
        data: 'agency_name', 
        name: 'agency_name',
        render: function(data, type, row) {
            // Check if the agency_name is empty or null (or not present at all)
            var agencyColor = (data && data.trim() !== '') ? 'green' : 'red'; // Green if agency is present and not empty, red otherwise
            var agencyText = (data && data.trim() !== '') ? data : 'No Agency'; // Show 'No Agency' if no agency is present
            
            return `<span style="color: ${agencyColor};">${agencyText}</span>`;
        },
    },  
            {
                data: 'role',  // Use 'role' field to check the user role
                name: 'role',
                render: function(data, type, row) {
    // Check if the user's role is 'Editor' to determine if the toggle should be on
    var checked = data === 'Editor' ? 'checked' : '';  
    
    return `
        <label class="switch">
            <input type="checkbox" ${checked} data-user-id="${row.id}" class="edit-toggle">
            <span class="slider round"></span>
        </label>
    `;
}

            },
        ]
    });

    // Handle the toggle change event
    $('#users-table').on('change', '.edit-toggle', function() {
        var userId = $(this).data('user-id');
        var canEdit = $(this).prop('checked') ? 'Editor' : 'Viewer';  // Set as 'Editor' or 'Viewer'

        // Send the AJAX request to update the user's role
        $.ajax({
            url: '{{ route('update-can-edit') }}', // Ensure this route matches the controller action
            method: 'POST',
            data: {
                user_id: userId,
                can_edit: canEdit, // Send 'Editor' or 'Viewer'
                _token: '{{ csrf_token() }}' // Pass CSRF token
            },
            success: function(response) {
                // Show SweetAlert based on the toggle state
                var statusMessage = canEdit;
                Swal.fire({
                    icon: 'success',
                    title: 'Role Updated',
                    text: `User role has been updated to ${statusMessage}`,
                    showConfirmButton: false,
                    timer: 1500
                });
            },
            error: function(error) {
                // Handle error if needed
                console.error('Error updating Can Edit status', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Failed to update user role!',
                    showConfirmButton: true
                });
            }
        });
    });
});
</script>
@endsection