@extends('layouts.app')

@section('content')
<div x-data="tenantManager()" class="bg-white shadow rounded-lg p-6">

    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-xl font-semibold text-gray-700">Tenants</h2>
        <button @click="openModal()"
                class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition">
            + New Tenant
        </button>
    </div>

    <!-- Table -->
    <div class="overflow-x-auto">
        <table class="w-full border-collapse text-left text-sm" id="tenant-table">
            <thead>
                <tr class="border-b bg-gray-100">
                    <th class="py-2 px-3 font-medium text-gray-600">Name</th>
                    <th class="py-2 px-3 font-medium text-gray-600">Domain</th>
                    <th class="py-2 px-3 font-medium text-gray-600">Created</th>
                    <th class="py-2 px-3 font-medium text-gray-600">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($tenants as $tenant)
                    <tr id="tenant-row-{{ $tenant->id }}" class="border-b hover:bg-gray-50">
                        <td class="py-2 px-3">{{ $tenant->name }}</td>
                        <td class="py-2 px-3">{{ $tenant->domain }}</td>
                        <td class="py-2 px-3 text-gray-500">{{ $tenant->created_at->diffForHumans() }}</td>
                        <td class="py-2 px-3">
                            <button class="text-indigo-600 hover:underline"
                                @click="editTenant({{ $tenant->id }})">Edit</button>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Modal -->
    <div x-show="modalOpen"
         class="fixed inset-0 bg-gray-800 bg-opacity-60 flex items-center justify-center z-50"
         x-transition
         @keydown.escape.window="modalOpen = false">
        <div class="bg-white rounded-lg shadow-lg w-full max-w-md p-6"
             @click.away="modalOpen = false">

            <h3 class="text-lg font-semibold mb-4" x-text="tenantId ? 'Edit Tenant' : 'New Tenant'"></h3>

            <form @submit.prevent="submitTenant">
                <div class="mb-4">
                    <label class="block text-gray-600 mb-1">Name</label>
                    <input type="text" x-model="name" required
                           class="w-full border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
                </div>
                <div class="mb-4">
                    <label class="block text-gray-600 mb-1">Domain</label>
                    <input type="text" x-model="domain" required
                           class="w-full border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
                </div>

                <div class="flex justify-end space-x-2">
                    <button type="button"
                            @click="modalOpen = false"
                            class="px-4 py-2 rounded-md border text-gray-700">
                        Cancel
                    </button>
                    <button type="submit"
                            class="px-4 py-2 rounded-md bg-indigo-600 text-white hover:bg-indigo-700"
                            x-text="tenantId ? 'Update' : 'Create'"></button>
                </div>
            </form>
        </div>
    </div>

</div>

<!-- Alpine.js -->
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>

<script>
function tenantManager() {
    return {
        tenants: @json($tenants),
        modalOpen: false,
        tenantId: null,
        name: '',
        domain: '',

        openModal() {
            this.modalOpen = true;
            this.tenantId = null;
            this.name = '';
            this.domain = '';
        },

        editTenant(id) {
            fetch(`/tenants/${id}`)
                .then(res => res.json())
                .then(data => {
                    this.modalOpen = true;
                    this.tenantId = data.id;
                    this.name = data.name;
                    this.domain = data.domain;
                });
        },

        submitTenant() {
            const url = this.tenantId ? `/tenants/${this.tenantId}` : '/tenants';
            const method = this.tenantId ? 'PUT' : 'POST';

            fetch(url, {
                method: method,
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    name: this.name,
                    domain: this.domain
                })
            })
            .then(res => res.json())
            .then(data => {
                this.modalOpen = false;
                this.updateTable(data);
                this.resetForm();
            });
        },

        updateTable(data) {
            const tbody = document.querySelector('#tenant-table tbody');
            let row = document.getElementById(`tenant-row-${data.id}`);

            const rowHtml = `
                <td class="py-2 px-3">${data.name}</td>
                <td class="py-2 px-3">${data.domain}</td>
                <td class="py-2 px-3 text-gray-500">${new Date(data.created_at).toLocaleString()}</td>
                <td class="py-2 px-3">
                    <button class="text-indigo-600 hover:underline"
                        @click="editTenant(${data.id})">Edit</button>
                </td>`;

            if (row) {
                row.innerHTML = rowHtml;
            } else {
                const newRow = document.createElement('tr');
                newRow.id = `tenant-row-${data.id}`;
                newRow.className = 'border-b hover:bg-gray-50';
                newRow.innerHTML = rowHtml;
                tbody.prepend(newRow);
            }
        },

        resetForm() {
            this.name = '';
            this.domain = '';
            this.tenantId = null;
        }
    };
}
</script>
@endsection