@extends('layouts.app_rest')

@section('content')
    <div class="animate__animated p-6 no-print no-print" :class="[$store.app.animation]" x-data="productList">
        <div>
            <ul class="flex space-x-2 rtl:space-x-reverse">
                <li>
                    <a href="{{ action('Auth\LoginController@dashboard') }}"
                        class="text-primary hover:underline">Dashboard</a>
                </li>
                <li class="before:content-['/'] ltr:before:mr-1 rtl:before:ml-1">
                    <a href="{{ action('Rest\ProductController@index') }}" class="text-primary hover:underline">Product</a>
                </li>
                <li class="before:content-['/'] ltr:before:mr-1 rtl:before:ml-1">
                    <span>Product View</span>
                </li>
            </ul>
            <div class="grid grid-cols-1 gap-4 pt-5">
                <div class="overflow-x-auto">
                    <table class="min-w-full bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
                        <thead>
                            <tr
                                class="bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 uppercase text-sm leading-normal">
                                <th class="py-3 px-6 text-left">Product</th>
                                <th class="py-3 px-6 text-left">City</th>
                                <th class="py-3 px-6 text-left">Unit Price</th>
                                <th class="py-3 px-6 text-left">Serial</th>
                            </tr>
                        </thead>
                        <tbody class="text-gray-600 dark:text-gray-300 text-sm font-light">
                            <tr
                                class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700">
                                <td class="py-3 px-6 text-left">
                                    <div>
                                        <span class="font-semibold">Product 1</span>
                                        <ul class="pl-5 mt-2 flex flex-wrap gap-2">
                                            <template x-for="serial in products[0].serials" :key="serial">
                                                <li class="bg-gray-100 text-gray-800 rounded px-3 py-1 inline-block">
                                                    <span x-text="serial"></span>
                                                </li>
                                            </template>
                                        </ul>
                                    </div>
                                </td>
                                <td class="py-3 px-6 text-left">City 1</td>
                                <td class="py-3 px-6 text-left">$10.00</td>
                                <td class="py-3 px-6 text-left">
                                    @can('product.view')
                                        <button @click="openModalWithProduct('Product 1')"
                                            class="bg-blue-500 text-primary py-1 px-3 rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                            Add Serial
                                        </button>
                                    @endcan
                                </td>
                            </tr>
                            <tr
                                class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700">
                                <td class="py-3 px-6 text-left">
                                    <div>
                                        <span class="font-semibold">Product 2</span>
                                        <ul class="pl-5 mt-2 flex flex-wrap gap-2">
                                            <template x-for="serial in products[1].serials" :key="serial">
                                                <li class="bg-gray-100 text-gray-800 rounded px-3 py-1 inline-block">
                                                    <span x-text="serial"></span>
                                                </li>
                                            </template>
                                        </ul>
                                    </div>
                                </td>
                                <td class="py-3 px-6 text-left">City 2</td>
                                <td class="py-3 px-6 text-left">$20.00</td>
                                <td class="py-3 px-6 text-left">
                                    @can('product.view')
                                        <button @click="openModalWithProduct('Product 2')"
                                            class="bg-blue-500 text-primary py-1 px-3 rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                            Add Serial
                                        </button>
                                    @endcan
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div x-show="openModal" class="fixed inset-0 bg-[black]/60 z-[999] overflow-y-auto" @click.self="openModal = false">
            <div class="flex items-start justify-center min-h-screen px-4">
                <div x-transition:enter="transition ease-out duration-300"
                    x-transition:enter-start="opacity-0 transform scale-95"
                    x-transition:enter-end="opacity-100 transform scale-100"
                    x-transition:leave="transition ease-in duration-200"
                    x-transition:leave-start="opacity-100 transform scale-100"
                    x-transition:leave-end="opacity-0 transform scale-95"
                    class="panel border-0 p-0 rounded-lg overflow-hidden my-8 w-full max-w-lg"
                    style="border-radius:.5rem;border-width: 0;">
                    <div class="heading">
                        <h2 class="m-0">Add Serial for Product</h2>
                    </div>
                    <div class="p-5">
                        <form id="add_serial_form" @submit.prevent="submitForm">
                            <div class="mb-4">
                                <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Product
                                    Name:</label>
                                <input type="text"
                                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                    x-model="newProductName" name="product_name">
                            </div>
                            <div class="mb-4">
                                <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Serial
                                    Number:</label>
                                <input type="text"
                                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                    x-model="newSerialNumber" name="serial_number">
                            </div>

                            <div class="mb-6 flex flex-wrap items-center justify-center gap-4 lg:justify-end">
                                <button type="button" class="btn btn-outline-danger"
                                    @click="openModal = false">Cancel</button>
                                <button type="submit" class="btn btn-primary">Add</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script type="text/javascript">
        document.addEventListener("alpine:init", () => {
            Alpine.data("productList", () => ({
                openModal: false,
                newProductName: '',
                newSerialNumber: '',
                products: [{
                        name: 'Product 1',
                        serials: ['Ex2937', 'Ex2938', 'Ex2939']
                    },
                    {
                        name: 'Product 2',
                        serials: []
                    }
                ],
                openModalWithProduct(productName) {
                    this.newProductName = productName;
                    this.openModal = true;
                },
                submitForm() {
                    const product = this.products.find(product => product.name === this.newProductName);
                    if (product) {
                        product.serials.push(this.newSerialNumber);
                    } else {
                        this.products.push({
                            name: this.newProductName,
                            serials: [this.newSerialNumber]
                        });
                    }
                    this.newProductName = '';
                    this.newSerialNumber = '';
                    this.openModal = false;
                }
            }));
        });
    </script>
@endsection