@extends('agent.layouts.index')

@section('content')
    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>

    <div id="mainContent" class="max-w-6xl mx-auto mt-10 p-6 bg-white shadow rounded-lg">
        <h2 class="text-2xl font-semibold mb-6">Product / Order Page</h2>

        <!-- Tabs -->
        <div class="flex space-x-4 border-b border-gray-200 mb-6">
            <button onclick="showTab('requests')" id="requestsTab"
                class="pb-2 px-1 font-medium text-blue-600 border-b-2 border-blue-600 transition-all duration-200">
                Requests for the Agent
            </button>
            <button onclick="showTab('returns')" id="returnsTab"
                class="pb-2 px-1 font-medium text-gray-500 hover:text-blue-500 transition-all duration-200">
                Returned Products
            </button>
        </div>

        <!-- Requests Tab -->
        <div id="requests" style="display: block;">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium">Agent Requests</h3>
                <a href="/agent/request" {{-- onclick="toggleModal('requestModal', true)"  --}}
                    class="bg-[#0c3d55] text-white px-4 py-2 rounded hover:bg-[#0a2f42]">
                    + Add Request
                </a>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full bg-white border border-gray-200 text-sm">
                    <thead class="bg-gray-100 text-gray-700">
                        <tr>
                            <th class="py-2 px-4 border">Request ID</th>
                            <th class="py-2 px-4 border">Amount</th>
                            <th class="py-2 px-4 border">Quantity</th>
                            <th class="py-2 px-4 border">Date</th>
                            <th class="py-2 px-4 border">Status</th>
                            <th class="py-2 px-4 border">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($requests as $order)
                            <tr class="text-center">
                                <td class="py-2 px-4 border">{{ $order->request_number }}</td>
                                <td class="py-2 px-4 border">{{ $order->total_amount }}</td>
                                <td class="py-2 px-4 border">{{ $order->total_product }}</td>
                                <td class="py-2 px-4 border">
                                    @php
                                        $status = strtolower($order->status);
                                        $statusClasses = match ($status) {
                                            'approved' => 'bg-green-100 text-green-800',
                                            'pending' => 'bg-yellow-100 text-yellow-800',
                                            'complete' => 'bg-blue-100 text-blue-800',
                                            default => 'bg-gray-100 text-gray-800',
                                        };
                                    @endphp
                                    <span class="px-2 py-1 rounded-full text-sm font-semibold {{ $statusClasses }}">
                                        {{ ucfirst($status) }}
                                    </span>
                                </td>
                                <td class="py-2 px-4 border">{{ $order->request_date }}</td>
                                <td class="py-2 px-4 border" colspan="5">
                                    <a href="/agent/view/request/{{ $order->id }}"> <i class="fa-regular fa-eye"></i>  <span>View</span> </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Returns Tab -->
        <div id="returns" style="display: none;">

            <div class="overflow-x-auto">
                <table class="min-w-full bg-white border border-gray-200 text-sm">
                    <thead class="bg-gray-100 text-gray-700">
                        <tr>
                            <th class="py-2 px-4 border">Return ID</th>
                            <th class="py-2 px-4 border">Product</th>
                            <th class="py-2 px-4 border">Reason</th>
                            <th class="py-2 px-4 border">Date</th>
                            <th class="py-2 px-4 border">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($returns as $return)
                            <tr>
                                <td>{{ $return->agent_request_id }}</td>
                                <td>{{ $return->product->product_name }}</td>
                                <td>{{ $return->quantity }}</td>
                                <td>{{ $return->reason }}</td>
                                <td>{{ $return->returned_at }}</td>
                                <td class="hidden-print">
                                    <div class="btn-group action-btn-group">
                                        <button type="button" class="btn action-btn dropdown-toggle"
                                            data-toggle="dropdown">
                                            <i class="fa fa-cog"></i>
                                            <span class="sr-only">Toggle Dropdown</span>
                                        </button>
                                        <ul class="dropdown-menu" role="menu">


                                            <li>
                                                <a href="#" data-toggle="modal"
                                                    data-target="#deleteModal{{ $return->id }}"
                                                    class="btn btn-danger">Delete</a>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

    </div>

    <!-- Request Modal -->
    <div id="requestModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 px-4 hidden">
        <div class="bg-white rounded-lg shadow-lg w-full max-w-md p-6 max-h-[90vh] overflow-y-auto">
            <h2 class="text-lg font-semibold mb-4">New Request</h2>
            <form id="requestForm">
                <div id="requestItemsContainer">
                    <div class="mb-4 border-b pb-4">
                        <label class="block text-sm font-medium mb-1">Select Product</label>
                        <select name="product_id[]" class="w-full border border-gray-300 p-2 rounded mb-2" required>
                            <option value="">-- Select Product --</option>
                            @foreach ($products as $product)
                                <option value="{{ $product->id }}">{{ $product->product_name }}</option>
                            @endforeach
                        </select>

                        <label class="block text-sm font-medium mb-1">Quantity</label>
                        <input type="number" min="1" name="quantity[]"
                            class="w-full border border-gray-300 p-2 rounded" placeholder="Quantity" required>
                    </div>
                </div>

                <button type="button" onclick="addProduct()"
                    class="mb-4 bg-green-500 text-white px-3 py-1 rounded hover:bg-green-600">
                    + Add Another Product
                </button>

                <div class="flex justify-end space-x-2">
                    <button type="button" onclick="toggleModal('requestModal', false)"
                        class="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300">Cancel</button>
                    <button type="submit"
                        class="px-4 py-2 bg-[#0c3d55] text-white rounded hover:bg-[#0a2f42]">Submit</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Return Modal -->
    <div id="returnModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 px-4 hidden">
        <div class="bg-white rounded-lg shadow-lg w-full max-w-md p-6 max-h-[90vh] overflow-y-auto">
            <h2 class="text-lg font-semibold mb-4">Return Product</h2>
            <form id="returnForm">
                <div class="mb-4">
                    <label class="block text-sm font-medium">Product</label>
                    <input type="text" class="w-full border border-gray-300 p-2 rounded" placeholder="e.g. Water Bottle"
                        required>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium">Reason for Return</label>
                    <textarea class="w-full border border-gray-300 p-2 rounded" placeholder="Reason..." required></textarea>
                </div>
                <div class="flex justify-end space-x-2">
                    <button type="button" onclick="toggleModal('returnModal', false)"
                        class="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300">Cancel</button>
                    <button type="submit"
                        class="px-4 py-2 bg-[#0c3d55] text-white rounded hover:bg-[#0a2f42]">Submit</button>
                </div>
            </form>
        </div>
    </div>

    <!-- JS Part -->
    <script>
        function showTab(tabName) {
            document.getElementById('requests').style.display = (tabName === 'requests') ? 'block' : 'none';
            document.getElementById('returns').style.display = (tabName === 'returns') ? 'block' : 'none';

            document.getElementById('requestsTab').classList.toggle('text-blue-600', tabName === 'requests');
            document.getElementById('requestsTab').classList.toggle('border-blue-600', tabName === 'requests');
            document.getElementById('requestsTab').classList.toggle('text-gray-500', tabName !== 'requests');

            document.getElementById('returnsTab').classList.toggle('text-blue-600', tabName === 'returns');
            document.getElementById('returnsTab').classList.toggle('border-blue-600', tabName === 'returns');
            document.getElementById('returnsTab').classList.toggle('text-gray-500', tabName !== 'returns');
        }

        function toggleModal(modalId, show) {
            const modal = document.getElementById(modalId);
            if (show) {
                modal.classList.remove('hidden');
            } else {
                modal.classList.add('hidden');
            }
        }

        // Dynamically add product items
        function addProduct() {
            const container = document.getElementById('requestItemsContainer');
            const html = `
        <div class="mb-4 border-b pb-4">
            <label class="block text-sm font-medium mb-1">Select Product</label>
            <select name="product_id[]" class="w-full border border-gray-300 p-2 rounded mb-2" required>
                <option value="">-- Select Product --</option>
                @foreach ($products as $product)
                    <option value="{{ $product->id }}">{{ $product->product_name }}</option>
                @endforeach
            </select>

            <label class="block text-sm font-medium mb-1">Quantity</label>
            <input type="number" min="1" name="quantity[]" class="w-full border border-gray-300 p-2 rounded" placeholder="Quantity" required>
        </div>
    `;
            container.insertAdjacentHTML('beforeend', html);
        }
    </script>
@endsection