<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Delivery Agent Profile</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.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
    <style>
        .dataTables_wrapper .dataTables_filter input {
            border: 1px solid #d1d5db;
            border-radius: 0.375rem;
            padding: 0.25rem 0.5rem;
        }
        .dataTables_wrapper .dataTables_length select {
            border: 1px solid #d1d5db;
            border-radius: 0.375rem;
            padding: 0.25rem 0.5rem;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding: 0.25rem 0.75rem;
            border: 1px solid transparent;
            border-radius: 0.375rem;
            margin-left: 0.25rem;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: #3b82f6;
            color: white !important;
            border: 1px solid #3b82f6;
        }
    </style>
</head>
<body class="bg-gray-100">
    <x-app-layout>
        <div class="container mx-auto px-4 py-8">
            <!-- Back Button -->
            <div class="mb-6">
                <a href="{{ url()->previous() }}" class="inline-flex items-center px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded transition">
                    <i class="fas fa-arrow-left mr-2"></i> Back
                </a>
            </div>

            <!-- Profile Header -->
            <div class="flex justify-between items-center mb-8">
                <h1 class="text-3xl font-bold text-gray-800">Delivery Agent Profile</h1>
                <span class="px-4 py-2 rounded-full text-sm font-medium 
                    @if($singleDeliveryAgentDetails->approval_status === 'approved') bg-green-100 text-green-800
                    @elseif($singleDeliveryAgentDetails->approval_status === 'pending') bg-yellow-100 text-yellow-800
                    @else bg-red-100 text-red-800 @endif">
                    {{ ucfirst($singleDeliveryAgentDetails->approval_status) }}
                </span>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- Left Column - Profile Info -->
                <div class="lg:col-span-1 space-y-6">
                    <!-- Profile Card -->
                    <div class="bg-white rounded-xl shadow-md overflow-hidden">
                        <div class="p-6">
                            <div class="flex flex-col items-center">
                                <img src="{{ $documents['profile_photo'] ?? 'https://ui-avatars.com/api/?name='.urlencode($singleDeliveryAgentDetails->name).'&background=random' }}" 
                                     alt="Profile Photo" 
                                     class="w-32 h-32 rounded-full object-cover border-4 border-gray-200 mb-4 shadow">
                                <h2 class="text-xl font-bold text-gray-800">{{ $singleDeliveryAgentDetails->name }}</h2>
                                <p class="text-gray-600">{{ $singleDeliveryAgentDetails->email }}</p>
                                <p class="text-gray-600">{{ $singleDeliveryAgentDetails->phone }}</p>
                                
                                <div class="mt-4 flex items-center">
                                    <span class="w-3 h-3 rounded-full mr-2 
                                        @if($singleDeliveryAgentDetails->online_status) bg-green-500
                                        @else bg-red-500 @endif"></span>
                                    <span>{{ $singleDeliveryAgentDetails->online_status ? 'Online' : 'Offline' }}</span>
                                </div>
                            </div>
                            
                            <div class="mt-6 grid grid-cols-2 gap-4 text-center">
                                <div class="bg-gray-50 p-3 rounded-lg">
                                    <p class="text-sm text-gray-500">Total Orders</p>
                                    <p class="text-xl font-bold">
                                        @if(in_array($singleDeliveryAgentDetails->approval_status, ['pending', 'rejected']))
                                            0
                                        @else
                                            {{ $orderCount }}
                                        @endif
                                    </p>
                                </div>
                                <div class="bg-gray-50 p-3 rounded-lg">
                                    <p class="text-sm text-gray-500">Total Sales</p>
                                    <p class="text-xl font-bold">
                                        @if(in_array($singleDeliveryAgentDetails->approval_status, ['pending', 'rejected']))
                                            ₹0.00
                                        @else
                                            ₹{{ number_format($totalUserCost, 2) }}
                                        @endif
                                    </p>
                                </div>
                                <div class="bg-gray-50 p-3 rounded-lg">
                                    <p class="text-sm text-gray-500">Cash Collected</p>
                                    <p class="text-xl font-bold">
                                        ₹{{ number_format($totalCashCollected, 2) }}
                                    </p>
                                </div>
                            </div>
                            
                            @if($singleDeliveryAgentDetails->approval_status === 'pending')
                                <div class="mt-6">
                                    <a href="{{ route('delivery_agent_approve_button', $singleDeliveryAgentDetails->user_id) }}" 
                                       class="block w-full text-center bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition">
                                        Review Approval
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                    
                    <!-- Quick Actions -->
                    <div class="bg-white rounded-xl shadow-md overflow-hidden">
                        <div class="p-6">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">Quick Actions</h3>
                            <div class="space-y-3">
                                <a href="https://drycleaneo.com/admin/cash_collections" 
                                   class="flex items-center p-3 bg-gray-100 hover:bg-gray-200 rounded-lg transition">
                                    <i class="fas fa-money-bill-wave mr-3 text-gray-700"></i>
                                    <span>Cash Collection</span>
                                </a>
                               
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Middle Column - Documents -->
                <div class="lg:col-span-1 space-y-6">
                    <!-- Documents Section -->
                    <div class="bg-white rounded-xl shadow-md overflow-hidden">
                        <div class="p-6">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">Documents</h3>
                            
                            <!-- Driving License -->
                            <div class="mb-6">
                                <h4 class="font-medium text-gray-700 mb-2 flex items-center">
                                    <i class="fas fa-id-card mr-2"></i> Driving License
                                </h4>
                                <div class="bg-gray-50 p-4 rounded-lg">
                                    <div class="grid grid-cols-2 gap-2 mb-2">
                                        <div>
                                            <p class="text-sm text-gray-500">License Number</p>
                                            <p class="font-medium">{{ $singleDeliveryAgentDetails->driving_license_number ?? 'N/A' }}</p>
                                        </div>
                                        <div>
                                            <p class="text-sm text-gray-500">Expiry Date</p>
                                            <p class="font-medium">{{ $singleDeliveryAgentDetails->driving_license_expiry ?? 'N/A' }}</p>
                                        </div>
                                    </div>
                                    <div class="flex space-x-2">
                                        @if($documents['driving_license_front'])
                                            <button onclick="showImageModal('{{ $documents['driving_license_front'] }}')" 
                                                    class="text-sm bg-blue-100 hover:bg-blue-200 text-blue-800 py-1 px-3 rounded">
                                                Front View
                                            </button>
                                        @endif
                                        @if($documents['driving_license_back'])
                                            <button onclick="showImageModal('{{ $documents['driving_license_back'] }}')" 
                                                    class="text-sm bg-blue-100 hover:bg-blue-200 text-blue-800 py-1 px-3 rounded">
                                                Back View
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            
                            <!-- PAN Card -->
                            <div class="mb-6">
                                <h4 class="font-medium text-gray-700 mb-2 flex items-center">
                                    <i class="fas fa-address-card mr-2"></i> PAN Card
                                </h4>
                                <div class="bg-gray-50 p-4 rounded-lg">
                                    <div class="mb-2">
                                        <p class="text-sm text-gray-500">PAN Number</p>
                                        <p class="font-medium">{{ $singleDeliveryAgentDetails->pan_card_number ?? 'N/A' }}</p>
                                    </div>
                                    @if($documents['pan_card_photo'])
                                        <button onclick="showImageModal('{{ $documents['pan_card_photo'] }}')" 
                                                class="text-sm bg-blue-100 hover:bg-blue-200 text-blue-800 py-1 px-3 rounded">
                                                    View PAN Card
                                        </button>
                                    @endif
                                </div>
                            </div>
                            
                            <!-- Aadhar Card -->
                            <div class="mb-6">
                                <h4 class="font-medium text-gray-700 mb-2 flex items-center">
                                    <i class="fas fa-id-card-alt mr-2"></i> Aadhar Card
                                </h4>
                                <div class="bg-gray-50 p-4 rounded-lg">
                                    <div class="mb-2">
                                        <p class="text-sm text-gray-500">Aadhar Number</p>
                                        <p class="font-medium">{{ $singleDeliveryAgentDetails->aadhar_card_number ?? 'N/A' }}</p>
                                    </div>
                                    <div class="flex space-x-2">
                                        @if($documents['aadhar_card_front'])
                                            <button onclick="showImageModal('{{ $documents['aadhar_card_front'] }}')" 
                                                    class="text-sm bg-blue-100 hover:bg-blue-200 text-blue-800 py-1 px-3 rounded">
                                                Front View
                                            </button>
                                        @endif
                                        @if($documents['aadhar_card_back'])
                                            <button onclick="showImageModal('{{ $documents['aadhar_card_back'] }}')" 
                                                    class="text-sm bg-blue-100 hover:bg-blue-200 text-blue-800 py-1 px-3 rounded">
                                                Back View
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Vehicle Information -->
                    <div class="bg-white rounded-xl shadow-md overflow-hidden">
                        <div class="p-6">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">Vehicle Information</h3>
                            
                            <div class="bg-gray-50 p-4 rounded-lg">
                                <div class="grid grid-cols-2 gap-4 mb-4">
                                    <div>
                                        <p class="text-sm text-gray-500">Brand</p>
                                        <p class="font-medium">{{ $singleDeliveryAgentDetails->bike_brand ?? 'N/A' }}</p>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-500">Model</p>
                                        <p class="font-medium">{{ $singleDeliveryAgentDetails->bike_model ?? 'N/A' }}</p>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-500">Year</p>
                                        <p class="font-medium">{{ $singleDeliveryAgentDetails->bike_year ?? 'N/A' }}</p>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-500">Plate Number</p>
                                        <p class="font-medium">{{ $singleDeliveryAgentDetails->bike_registration_plate ?? 'N/A' }}</p>
                                    </div>
                                </div>
                                
                                <h4 class="font-medium text-gray-700 mb-2">Vehicle Photos</h4>
                                <div class="grid grid-cols-2 gap-2">
                                    @foreach($vehiclePictures as $key => $picture)
                                        @if($picture)
                                            <button onclick="showImageModal('{{ $picture }}')" 
                                                    class="text-sm bg-blue-100 hover:bg-blue-200 text-blue-800 py-1 px-3 rounded">
                                                {{ ucfirst($key) }} View
                                            </button>
                                        @endif
                                    @endforeach
                                </div>
                                
                                <h4 class="font-medium text-gray-700 mt-4 mb-2">Vehicle Documents</h4>
                                <div class="grid grid-cols-2 gap-2">
                                    @foreach($vehicleDocuments as $key => $document)
                                        @if($document)
                                            <button onclick="showImageModal('{{ $document }}')" 
                                                    class="text-sm bg-blue-100 hover:bg-blue-200 text-blue-800 py-1 px-3 rounded">
                                                Document {{ ucfirst($key) }}
                                            </button>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Right Column - Orders and Cash Collections -->
                <div class="lg:col-span-1 space-y-6">
                    <!-- Orders Section -->
                    <div class="bg-white rounded-xl shadow-md overflow-hidden">
                        <div class="p-6">
                            <div class="flex justify-between items-center mb-4">
                                <h3 class="text-lg font-semibold text-gray-800">Order History</h3>
                                <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">
                                    Total: {{ $orderCount }} orders
                                </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 agent</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-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
                                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</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->order_id }}
                                                </td>
                                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                                    {{ \Carbon\Carbon::parse($order->created_at)->format('d M Y') }}
                                                </td>
                                                <td class="px-4 py-3 whitespace-nowrap">
                                                    <span class="px-2 py-1 text-xs rounded-full 
                                                        @if($order->status === 'completed') bg-green-100 text-green-800
                                                        @elseif($order->status === 'cancelled') bg-red-100 text-red-800
                                                        @else bg-yellow-100 text-yellow-800 @endif">
                                                        {{ ucfirst($order->status) }}
                                                    </span>
                                                </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">
                                                    @if($order->pickup_agent_id == $userID && $order->delivery_agent_id == $userID)
                                                        <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Both</span>
                                                    @elseif($order->pickup_agent_id == $userID)
                                                        <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Pickup</span>
                                                    @else
                                                        <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Delivery</span>
                                                    @endif
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Cash Collections Section -->
                    <div class="bg-white rounded-xl shadow-md overflow-hidden">
                        <div class="p-6">
                            <div class="flex justify-between items-center mb-4">
                                <h3 class="text-lg font-semibold text-gray-800">Cash Collections</h3>
                                <div class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">
                                    Total: ₹{{ number_format($totalCashCollected, 2) }}
                                </div>
                            </div>
                            
                            @if($cashCollections->isEmpty())
                                <div class="text-center py-8 text-gray-500">
                                    <i class="fas fa-money-bill-wave text-3xl mb-2"></i>
                                    <p>No cash collections found for this agent</p>
                                </div>
                            @else
                                <div class="overflow-x-auto">
                                    <table id="cashCollectionsTable" class="w-full stripe hover" style="width:100%">
                                        <thead class="bg-gray-50">
                                            <tr>
                                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Recipient</th>
                                            </tr>
                                        </thead>
                                        <tbody class="bg-white divide-y divide-gray-200">
                                            @foreach($cashCollections as $collection)
                                            <tr class="hover:bg-gray-50">
                                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                                    {{ \Carbon\Carbon::parse($collection->date_of_submission)->format('d M Y') }}
                                                </td>
                                                <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
                                                    ₹{{ number_format($collection->amount_collected, 2) }}
                                                </td>
                                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                                    {{ $collection->recipient ?? 'N/A' }}
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Image Modal -->
        <div id="imageModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75 hidden">
            <div class="bg-white rounded-lg max-w-4xl w-full max-h-screen overflow-auto">
                <div class="flex justify-between items-center border-b p-4">
                    <h3 class="text-lg font-semibold">Document Preview</h3>
                    <button onclick="hideImageModal()" class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="p-4">
                    <img id="modalImage" src="" alt="Document" class="w-full h-auto">
                </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.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 src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

        <script>
            // Initialize DataTables
            $(document).ready(function() {
                $('#ordersTable').DataTable({
                    dom: 'Bfrtip',
                    buttons: [
                        'copy', 'csv', 'excel', 'pdf', 'print'
                    ],
                    order: [[1, 'desc']], // Sort by date descending
                    responsive: true,
                    language: {
                        search: "_INPUT_",
                        searchPlaceholder: "Search orders...",
                    },
                    pageLength: 10,
                    lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]]
                });

                $('#cashCollectionsTable').DataTable({
                    dom: 'Bfrtip',
                    buttons: [
                        'copy', 'csv', 'excel', 'pdf', 'print'
                    ],
                    order: [[0, 'desc']], // Sort by date descending
                    responsive: true,
                    language: {
                        search: "_INPUT_",
                        searchPlaceholder: "Search collections...",
                    },
                    pageLength: 10,
                    lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]]
                });
            });

            // Show approval alert if status is pending
            document.addEventListener('DOMContentLoaded', function() {
                const approvalStatus = "{{ $singleDeliveryAgentDetails->approval_status }}";
                
                if (approvalStatus === 'pending') {
                    Swal.fire({
                        title: 'Approval Pending',
                        text: 'This delivery agent is awaiting approval. Would you like to review now?',
                        icon: 'info',
                        showCancelButton: true,
                        confirmButtonText: 'Review Approval',
                        cancelButtonText: 'Later',
                        confirmButtonColor: '#3085d6',
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.location.href = "/admin/delivery_agent_approve_button/{{ $singleDeliveryAgentDetails->user_id }}";
                        }
                    });
                }
            });
            
            // Image modal functions
            function showImageModal(imageUrl) {
                document.getElementById('modalImage').src = imageUrl;
                document.getElementById('imageModal').classList.remove('hidden');
                document.body.style.overflow = 'hidden';
            }
            
            function hideImageModal() {
                document.getElementById('imageModal').classList.add('hidden');
                document.body.style.overflow = 'auto';
            }
            
            // Close modal when clicking outside the image
            document.getElementById('imageModal').addEventListener('click', function(e) {
                if (e.target === this) {
                    hideImageModal();
                }
            });
        </script>
    </x-app-layout>
</body>
</html>