@extends('layout.app')
@section('title', 'User Create')
@section('style')
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>

@endsection
@section('main')
    <div class="py-4">
        <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
            <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
                <li class="breadcrumb-item"><a href="#">
                        <svg class="icon icon-xxs" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                             xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                        </svg>
                    </a></li>
                <li class="breadcrumb-item"><a href="#">User Setup</a></li>
                <li class="breadcrumb-item active" aria-current="page">User Info</li>
            </ol>
        </nav>
        <div class="d-flex justify-content-between w-100 flex-wrap">
            <div class="mb-3 mb-lg-0"><h1 class="h4">User Information's</h1>
                <p class="mb-0">Find All types of user and user details information</p>
            </div>
            <div>
                <a href="{{url('userinfo/create')}}" class="btn btn-outline-gray-600 d-inline-flex align-items-center">
                    <svg class="icon icon-xs me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                    </svg>
                    Add New User
                </a>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="table-responsive py-4">
            <table class="table table-flush" id="user-datatable">
                <thead class="thead-light">
                <tr>
                    <th>SL</th>
                    <th>Full Name</th>
                    <th>Phone</th>
                    <th>Email</th>
                    <th>IP|Location</th>
                    <th>Roles</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody id="table-body">
                <!-- Data will be populated here -->
                </tbody>
            </table>
        </div>
    </div>
    <!-- Location Modal -->
    <div class="modal fade" id="locationModal" tabindex="-1" aria-labelledby="locationModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="locationModalLabel">User Location</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="map" style="height: 400px; width: 100%;"></div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="{{ asset('assets/js/simple-datatables.js') }}"></script>
    <script>
        function initializeDataTable() {
            var dataTableEl = document.getElementById('user-datatable');
            if (dataTableEl) {
                const dataTable = new simpleDatatables.DataTable(dataTableEl);
            }
        }
        const ROLE_COLORS = {
            'super admin': 'bg-danger',
            'admin': 'bg-primary',
            'manager': 'bg-success',
            'team bkash': 'bg-info text-dark',
            'biller': 'bg-tertiary text-dark'
        };

        // Parse roles from string or array into a clean array
        function parseRoles(input) {
            if (Array.isArray(input)) {
                return [...new Set(input.map(r => String(r).trim()).filter(Boolean))];
            }
            if (typeof input === 'string') {
                return [...new Set(
                    input
                        .split(/[,;|]/) // split by commas, semicolons, or pipes
                        .map(r => r.trim())
                        .filter(Boolean)
                )];
            }
            return [];
        }

        // Generate HTML for role badges
        function roleBadgesHtml(role_name) {
            const roles = parseRoles(role_name);
            if (!roles.length) return '<span style="font-size: 12px" class="badge bg-secondary">No Role</span>';

            return roles.map(r => {
                const cls = ROLE_COLORS[r.toLowerCase()] || 'bg-secondary';
                return `<span style="font-size: 12px" class="badge ${cls} me-1">${r}</span>`;
            }).join('');
        }

        function loadTableData() {
            $.ajax({
                url: '{{ route('userinfo.data') }}',
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    $('#table-body').empty();

                    $.each(data, function (index, user) {
                        var row = $('<tr>');

                        row.append('<td>' + (index + 1) + '</td>');
                        row.append('<td>' + user.name + '</td>');
                        row.append('<td>' + user.phone + '</td>');
                        row.append('<td>' + user.email + '</td>');
                        row.append('<td><a href="javascript:void(0);" onclick="showLocation(' + user.latitude + ',' + user.longitude + ')">'
                            + user.ip + ' | ' + user.longitude + ',' + user.latitude + '</a></td>');
                        row.append('<td>' + roleBadgesHtml(user.role_name) + '</td>');
                        var statusClass = user.status === 'active' ? 'btn-success' : 'btn-info';
                        row.append('<td><button type="button" class="btn ' + statusClass + ' btn-sm">' + user.status + '</button></td>');
                        row.append(`
                    <td>
                        <div class="btn-group">
                            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                                <svg class="icon icon-xs" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" d="M6 10a2 2 0 100 4 2 2 0 000-4zM10 10a2 2 0 100 4 2 2 0 000-4zM14 10a2 2 0 100 4 2 2 0 000-4z" clip-rule="evenodd"></path>
                                </svg>
                                <span class="visually-hidden">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><button type="button" class="dropdown-item" onclick="viewUser('${user.uid}')">View</button></li>
                                <li><a class="dropdown-item" href="#" onclick="editUser('${user.uid}')">Edit</a></li>
                                <li><a class="dropdown-item" href="#" onclick="deleteUser('${user.uid}')">Delete</a></li>
                            </ul>
                        </div>
                    </td>
                `);

                        $('#table-body').append(row);
                    });

                    initializeDataTable();
                },
                error: function (xhr, status, error) {
                    console.error('Error fetching data:', error);
                }
            });
        }

        // Load table data when the page is ready
        loadTableData();

        function viewUser(userId) {
            console.log("View user with ID:", userId);
        }

        function editUser(userId) {
            console.log("Edit user with ID:", userId);
            var url = "{{ route('userinfo.edit', ':id') }}";
            var fullUrl = url.replace(':id', userId);
            window.location.href = fullUrl;
        }

        function deleteUser(userId) {
            console.log("Edit user with ID:", userId);

            var id = userId;
            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) {
                    var csrf_token = $('meta[name="csrf-token"]').attr('content');

                    $.ajax({
                        url: "{{ url('userinfo') }}" + '/' + id,
                        type: "POST",
                        data: {'_method': 'DELETE',
                            '_token': "{{ csrf_token() }}"},
                        success: function (response) {
                            if (response.statusCode == 200) {
                                loadTableData();
                                Swal.fire({
                                    title: "Deleted!",
                                    text: "Your file has been deleted.",
                                    icon: "success"
                                });
                            } else {
                                Swal.fire("Error occured !!");
                            }
                        },
                        error: function (xhr) {
                            alert('Delete failed: ' + xhr.responseText);
                        }
                    });

                }
            });
        }

    </script>
    <script>
        let map;
        let marker;

        function showLocation(lat, lon) {
            if (!lat || !lon || lat === 0 || lon === 0) {
                alert("Location not available.");
                return;
            }

            // Show modal
            var myModal = new bootstrap.Modal(document.getElementById('locationModal'));
            myModal.show();

            // Initialize map only once
            setTimeout(function () {
                if (!map) {
                    map = L.map('map').setView([lat, lon], 13);

                    // OpenStreetMap tiles
                    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        attribution: '&copy; OpenStreetMap contributors'
                    }).addTo(map);

                    marker = L.marker([lat, lon]).addTo(map)
                        .bindPopup("User Location")
                        .openPopup();
                } else {
                    map.setView([lat, lon], 13);
                    marker.setLatLng([lat, lon]);
                }
            }, 300); // delay to allow modal render
        }
    </script>
@endsection