<x-app-layout>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Laundry Items</title>

        <!-- Tailwind CSS CDN -->
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">

        <!-- DataTables CSS CDN -->
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">

        <!-- jQuery and DataTables JS -->
        <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>

        <!-- Bootstrap JS CDN (for modals) -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    </head>

    <body class="bg-gray-50 font-sans">

        <div class="max-w-7xl mx-auto px-6 py-8">

            <!-- Heading -->
            <h1 class="text-4xl font-semibold text-indigo-600 mb-6">Laundry Items</h1>

            <!-- Success Message -->
            @if(session('success'))
                <div class="bg-green-100 text-green-700 border border-green-300 px-6 py-4 rounded-lg mb-6 shadow-md">
                    {{ session('success') }}
                </div>
            @endif

            <!-- Add New Item Button -->
            <button class="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition-colors mb-6 shadow-lg" data-bs-toggle="modal" data-bs-target="#addModal">
                Add New Laundry Item
            </button>

            <!-- Laundry Items Table -->
            <div class="overflow-x-auto bg-white shadow-xl rounded-lg p-4 mb-8">
                <table class="min-w-full text-sm text-left text-gray-600" id="laundryItemsTable">
                    <thead class="bg-indigo-100 text-xs text-gray-700 uppercase">
                        <tr>
                            <th class="px-6 py-3">Liquid Name</th>
                            <th class="px-6 py-3">Price</th>
                            <th class="px-6 py-3">Number of Clothes</th>
                            <th class="px-6 py-3">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($laundryItems as $item)
                            <tr class="border-b hover:bg-indigo-50">
                                <td class="px-6 py-3">{{ $item->liquid_name }}</td>
                                <td class="px-6 py-3">{{ $item->price }}</td>
                                <td class="px-6 py-3">{{ $item->number_of_clothes }}</td>
                                <td class="px-6 py-3 flex space-x-4">
                                    <!-- Edit Button -->
                                    <button class="text-yellow-600 hover:text-yellow-800 font-semibold transition-colors" data-bs-toggle="modal" data-bs-target="#editModal-{{ $item->id }}">
                                        Edit
                                    </button>

                                    <!-- Delete Button -->
                                    <form action="{{ route('laundry-items.destroy', $item->id) }}" method="POST" style="display:inline;">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text-red-600 hover:text-red-800 font-semibold transition-colors" onclick="return confirm('Are you sure?')">
                                            Delete
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Modal for Adding New Item -->
            <div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header bg-indigo-600 text-white">
                            <h5 class="modal-title" id="addModalLabel">Add New Laundry Item</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form action="{{ route('laundry-items.store') }}" method="POST">
                                @csrf
                                <div class="mb-4">
                                    <label for="liquid_name" class="block text-sm font-medium text-gray-700">Liquid Name</label>
                                    <input type="text" class="form-control mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500" name="liquid_name" required>
                                </div>
                                <div class="mb-4">
                                    <label for="price" class="block text-sm font-medium text-gray-700">Price</label>
                                    <input type="number" class="form-control mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500" name="price" step="0.01" required>
                                </div>
                                <div class="mb-4">
                                    <label for="number_of_clothes" class="block text-sm font-medium text-gray-700">Number of Clothes</label>
                                    <input type="number" class="form-control mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500" name="number_of_clothes" required>
                                </div>
                                <div class="flex justify-between">
                                    <button type="button" class="bg-gray-300 text-gray-700 px-6 py-2 rounded-md hover:bg-gray-400 transition-colors" data-bs-dismiss="modal">Close</button>
                                    <button type="submit" class="bg-indigo-600 text-white px-6 py-3 rounded-md hover:bg-indigo-700 transition-colors">Save</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal for Editing Items -->
            @foreach($laundryItems as $item)
                <div class="modal fade" id="editModal-{{ $item->id }}" tabindex="-1" aria-labelledby="editModalLabel-{{ $item->id }}" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header bg-indigo-600 text-white">
                                <h5 class="modal-title" id="editModalLabel-{{ $item->id }}">Edit Laundry Item</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <form action="{{ route('laundry-items.update', $item->id) }}" method="POST">
                                    @csrf
                                    @method('PUT')
                                    <div class="mb-4">
                                        <label for="liquid_name" class="block text-sm font-medium text-gray-700">Liquid Name</label>
                                        <input type="text" class="form-control mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500" name="liquid_name" value="{{ $item->liquid_name }}" required>
                                    </div>
                                    <div class="mb-4">
                                        <label for="price" class="block text-sm font-medium text-gray-700">Price</label>
                                        <input type="number" class="form-control mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500" name="price" value="{{ $item->price }}" step="0.01" required>
                                    </div>
                                    <div class="mb-4">
                                        <label for="number_of_clothes" class="block text-sm font-medium text-gray-700">Number of Clothes</label>
                                        <input type="number" class="form-control mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500" name="number_of_clothes" value="{{ $item->number_of_clothes }}" required>
                                    </div>
                                    <div class="flex justify-between">
                                        <button type="button" class="bg-gray-300 text-gray-700 px-6 py-2 rounded-md hover:bg-gray-400 transition-colors" data-bs-dismiss="modal">Close</button>
                                        <button type="submit" class="bg-indigo-600 text-white px-6 py-3 rounded-md hover:bg-indigo-700 transition-colors">Save</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach

            <!-- Orders Table -->
            <div class="overflow-x-auto bg-white shadow-xl rounded-lg mt-8">
                <table class="min-w-full text-sm text-left text-gray-600" id="ordersTable">
                    <thead class="bg-indigo-100 text-xs text-gray-700 uppercase">
                        <tr>
                            <th class="px-6 py-3 text-sm ">Order ID </th>
            
            <th class="px-6 py-3 text-sm ">User ID</th>
            <th class="px-6 py-3 text-sm ">Vendor ID</th>
            <th class="px-6 py-3 text-sm ">Anti Germs Liquid</th>
            <th class="px-6 py-3 text-sm ">Cloth Softener</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($ordersWithUsedItems  as $order)
                            <tr class="border-b hover:bg-indigo-50">
                                <td class="px-6 py-3">{{ $order['order_id']  }}</td>
                                <td class="px-6 py-3">{{ $order['user_id'] }}</td>
                                <td class="px-6 py-3">{{ $order['vendor_id'] }}</td>
                                <td class="px-6 py-3 text-sm">
                    @if ($order['anti_germs_liquid'])
                        <span class="text-green-500">Used</span>
                    @else
                        <span class="text-red-500">Not Used</span>
                    @endif
                </td>
                                <td class="px-6 py-3 text-sm">
                    @if ($order['cloth_softener'])
                        <span class="text-green-500">Used</span>
                    @else
                        <span class="text-red-500">Not Used</span>
                    @endif
                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

        </div>

        <script>
            $(document).ready(function() {
                $('#laundryItemsTable').DataTable();
                $('#ordersTable').DataTable();
            });
        </script>

    </body>
    </html>
</x-app-layout>
