<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Management</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
    <style>
        /* Improved DataTables styling */
        .dataTables_wrapper {
            padding: 0;
        }
        .dataTables_wrapper .dataTables_filter input {
            border: 1px solid #d1d5db;
            border-radius: 0.375rem;
            padding: 0.375rem 0.75rem;
            margin-left: 0.5rem;
            width: 200px;
        }
        .dataTables_wrapper .dataTables_length select {
            border: 1px solid #d1d5db;
            border-radius: 0.375rem;
            padding: 0.375rem 1.75rem 0.375rem 0.75rem;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding: 0.25rem 0.75rem;
            border: 1px solid #d1d5db;
            border-radius: 0.375rem;
            margin-left: 0.25rem;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: #3b82f6;
            color: white !important;
            border: 1px solid #3b82f6;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: #e5e7eb;
            border-color: #d1d5db;
        }
        .dataTables_wrapper .dataTables_info {
            padding: 0.75rem 0;
            color: #6b7280;
        }
        
        /* Status badges */
        .status-badge {
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: capitalize;
            display: inline-block;
            min-width: 80px;
            text-align: center;
        }
        .badge-delivered {
            background-color: #d1fae5;
            color: #065f46;
        }
        .badge-cancelled {
            background-color: #fee2e2;
            color: #991b1b;
        }
        .badge-pending {
            background-color: #fef3c7;
            color: #92400e;
        }
        .badge-processing {
            background-color: #e0e7ff;
            color: #4338ca;
        }
        .badge-used {
            background-color: #dbeafe;
            color: #1e40af;
        }
        .badge-not-used {
            background-color: #e5e7eb;
            color: #4b5563;
        }
        
        /* Table styling */
        .dataTable {
            border-collapse: separate;
            border-spacing: 0;
            width: 100%;
        }
        .dataTable th {
            position: sticky;
            top: 0;
            background-color: #f9fafb;
            z-index: 10;
        }
        .dataTable td, .dataTable th {
            padding: 0.75rem 1rem;
            vertical-align: middle;
        }
    </style>
</head>

<body class="bg-gray-100">
    <x-app-layout>
        <div class="container mx-auto px-4 py-8">
            <!-- Header -->
            <div class="flex justify-between items-center mb-8">
                <div class="flex items-center">
                    <button onclick="goBack()" class="mr-4 text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out">
                        <i class="fas fa-arrow-left text-xl"></i>
                    </button>
                    <h1 class="text-3xl font-bold text-gray-800">User Management</h1>
                </div>
            </div>

            <!-- User Profile Card -->
            <div class="bg-white rounded-lg shadow-md overflow-hidden mb-8">
                <div class="p-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-4">User Details</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <div class="mb-4">
                                <p class="text-sm text-gray-500">Name</p>
                                <p class="font-medium">{{ $user->name }}</p>
                            </div>
                            <div class="mb-4">
                                <p class="text-sm text-gray-500">Email</p>
                                <p class="font-medium">{{ $user->email }}</p>
                            </div>
                            <div class="mb-4">
                                <p class="text-sm text-gray-500">Phone</p>
                                <p class="font-medium">{{ $user->phone_number }}</p>
                            </div>
                             <div class="mb-4">
                                <p class="text-sm text-gray-500">OTP</p>
                                <p class="font-medium">{{ $user->otp }}</p>
                            </div>
                        </div>
                        <div>
                            <div class="mb-4">
                                <p class="text-sm text-gray-500">Role</p>
                                <p class="font-medium capitalize">{{ $user->role }}</p>
                            </div>
                            <div class="mb-4">
                                <p class="text-sm text-gray-500">Wallet Balance</p>
                                <p class="font-medium">₹{{ number_format($user->wallet, 2) }}</p>
                            </div>
                            <div class="mb-4">
                                <p class="text-sm text-gray-500">Member Since</p>
                                <p class="font-medium">{{ date('d M Y', strtotime($user->created_at)) }}</p>
                            </div>
                           
                        </div>
                    </div>
                </div>
            </div>

            <!-- Orders Section -->
            <div class="bg-white rounded-lg shadow-md overflow-hidden mb-8">
                <div class="p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-xl font-bold text-gray-800">Orders</h2>
                        <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">
                            <i class="fas fa-box-open mr-1"></i> {{ $orders->count() }}
                        </div>
                    </div>
                    
                    @if($orders->isEmpty())
                        <div class="text-center py-8 text-gray-500">
                            <i class="fas fa-box-open text-3xl mb-2"></i>
                            <p>No orders found for this user</p>
                        </div>
                    @else
                        <div class="overflow-x-auto">
                            <table id="ordersTable" class="w-full stripe hover" style="width:100%">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Cost</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created At</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    @foreach($orders as $order)
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
                                            #{{ $order->id }}
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                            ₹{{ number_format($order->user_total_cost, 2) }}
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm">
                                            @php
                                                $statusClass = 'badge-pending';
                                                $displayStatus = ucfirst($order->status);
                                                
                                                if ($order->status === 'completed' || $order->status === 'delivered') {
                                                    $statusClass = 'badge-delivered';
                                                    $displayStatus = 'Delivered';
                                                } elseif ($order->status === 'cancelled') {
                                                    $statusClass = 'badge-cancelled';
                                                } elseif ($order->status === 'processing') {
                                                    $statusClass = 'badge-processing';
                                                }
                                            @endphp
                                            <span class="status-badge {{ $statusClass }}">
                                                {{ $displayStatus }}
                                            </span>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                            {{ date('d M Y, h:i A', strtotime($order->created_at)) }}
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Transactions Section -->
            <div class="bg-white rounded-lg shadow-md overflow-hidden mb-8">
                <div class="p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-xl font-bold text-gray-800">Transactions</h2>
                        <div class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">
                            <i class="fas fa-exchange-alt mr-1"></i> {{ $transactions->count() }}
                        </div>
                    </div>
                    
                    @if($transactions->isEmpty())
                        <div class="text-center py-8 text-gray-500">
                            <i class="fas fa-exchange-alt text-3xl mb-2"></i>
                            <p>No transactions found for this user</p>
                        </div>
                    @else
                        <div class="overflow-x-auto">
                            <table id="transactionsTable" class="w-full stripe hover" style="width:100%">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transaction ID</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Used For</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    @foreach($transactions as $transaction)
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
                                            #{{ $transaction->id }}
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                            ₹{{ number_format($transaction->amount, 2) }}
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm">
    @php
        $statusClass = match(strtolower($order->status)) {
            'Delivered', 'completed' => 'badge-delivered',
            'cancelled', 'failed' => 'badge-cancelled',
            'pending' => 'badge-pending',
            default => 'badge-processing'
        };
    @endphp
    <span class="status-badge {{ $statusClass }}">
        {{ $order->display_status ?? ucfirst($order->status) }}
    </span>
</td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm">
                                            @if(isset($usedTransactionIds[$transaction->id]))
                                                <span class="status-badge badge-used">
                                                    {{ $usedTransactionIds[$transaction->id] }}
                                                </span>
                                            @else
                                                <span class="status-badge badge-not-used">
                                                    Not Used
                                                </span>
                                            @endif
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                            {{ date('d M Y, h:i A', strtotime($transaction->created_at)) }}
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Addresses Section -->
            <div class="bg-white rounded-lg shadow-md overflow-hidden mb-8">
                <div class="p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-xl font-bold text-gray-800">Addresses</h2>
                        <div class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium">
                            <i class="fas fa-map-marker-alt mr-1"></i> {{ $addresses->count() }}
                        </div>
                    </div>
                    
                    @if($addresses->isEmpty())
                        <div class="text-center py-8 text-gray-500">
                            <i class="fas fa-map-marker-alt text-3xl mb-2"></i>
                            <p>No addresses found for this user</p>
                        </div>
                    @else
                        <div class="overflow-x-auto">
                            <table id="addressesTable" class="w-full stripe hover" style="width:100%">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Floor</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Address</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Coordinates</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created At</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    @foreach($addresses as $address)
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                            {{ $address->Floor ?? 'N/A' }}
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                            {{ $address->Caddress }}
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                            <div class="flex items-center space-x-1">
                                                <span class="text-gray-400"><i class="fas fa-map-marker-alt"></i></span>
                                                <span>{{ $address->Latitude }}, {{ $address->Longitude }}</span>
                                            </div>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                            {{ date('d M Y, h:i A', strtotime($address->created_at)) }}
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- JavaScript Libraries -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
        <script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>

        <script>
            // Back button functionality
            function goBack() {
                if (window.history.length > 1) {
                    window.history.back();
                } else {
                    window.location.href = "{{ route('dashboard') }}";
                }
            }

            // Initialize DataTables with consistent settings
            function initializeDataTable(tableId, defaultOrderColumn) {
                return $(tableId).DataTable({
                    dom: '<"flex flex-col md:flex-row md:justify-between md:items-center mb-4 space-y-4 md:space-y-0"<"flex items-center"l><"flex items-center space-x-4"fB>>rt<"flex flex-col md:flex-row md:justify-between md:items-center mt-4 space-y-4 md:space-y-0"ip>',
                    buttons: [
                        {
                            extend: 'copy',
                            className: 'bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-3 rounded text-sm',
                            text: '<i class="fas fa-copy mr-1"></i> Copy'
                        },
                        {
                            extend: 'csv',
                            className: 'bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-3 rounded text-sm',
                            text: '<i class="fas fa-file-csv mr-1"></i> CSV'
                        },
                        {
                            extend: 'excel',
                            className: 'bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-3 rounded text-sm',
                            text: '<i class="fas fa-file-excel mr-1"></i> Excel'
                        },
                        {
                            extend: 'pdf',
                            className: 'bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-3 rounded text-sm',
                            text: '<i class="fas fa-file-pdf mr-1"></i> PDF'
                        },
                        {
                            extend: 'print',
                            className: 'bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-3 rounded text-sm',
                            text: '<i class="fas fa-print mr-1"></i> Print'
                        }
                    ],
                    order: [[defaultOrderColumn, 'desc']],
                    responsive: true,
                    language: {
                        search: "",
                        searchPlaceholder: "Search...",
                        lengthMenu: "Show _MENU_ entries",
                        info: "Showing _START_ to _END_ of _TOTAL_ entries",
                        infoEmpty: "Showing 0 to 0 of 0 entries",
                        infoFiltered: "(filtered from _MAX_ total entries)",
                        paginate: {
                            previous: '<i class="fas fa-chevron-left"></i>',
                            next: '<i class="fas fa-chevron-right"></i>'
                        }
                    },
                    pageLength: 10,
                    lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
                    initComplete: function() {
                        // Add custom class to buttons
                        $('.dt-buttons button').removeClass('dt-button');
                        
                        // Style the search box
                        $('.dataTables_filter input').addClass('form-input block w-full sm:w-64 shadow-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md');
                    }
                });
            }

            $(document).ready(function() {
                // Initialize all tables with proper column indexes for sorting
                const ordersTable = initializeDataTable('#ordersTable', 3); // Sorts by Created At (4th column, index 3)
                const transactionsTable = initializeDataTable('#transactionsTable', 4); // Sorts by Date (5th column, index 4)
                const addressesTable = initializeDataTable('#addressesTable', 3); // Sorts by Created At (4th column, index 3)
                
                // Add responsive class to tables
                $('.dataTable').addClass('w-full');
            });
        </script>
    </x-app-layout>
</body>
</html>