@extends('layouts.master')

@section('content')
    <main class="flex-1 overflow-y-auto p-6">

        <div class="bg-dash-surface rounded-xl border border-dash-border overflow-hidden shadow-sm mb-6">
            <div class="p-6 border-b border-dash-border flex items-center justify-between">
                <h3 class="text-lg font-semibold">Module List</h3>
                <button onclick="openModuleModal()"
                    class="px-5 py-2.5 bg-dash-primary hover:bg-dash-primary-hover text-white rounded-xl text-sm font-medium shadow-md">
                    Create Module
                </button>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-dash-border">
                    <thead class="bg-dash-surface-hover">
                        <tr>
                            <th
                                class="px-6 py-4 text-left text-xs font-medium text-dash-text-muted uppercase tracking-wider">
                                #</th>
                            <th
                                class="px-6 py-4 text-left text-xs font-medium text-dash-text-muted uppercase tracking-wider">
                                Event</th>
                            <th
                                class="px-6 py-4 text-left text-xs font-medium text-dash-text-muted uppercase tracking-wider">
                                Status</th>
                            <th
                                class="px-6 py-4 text-left text-xs font-medium text-dash-text-muted uppercase tracking-wider">
                            </th>
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-dash-border">
                        @forelse($modules as $module)
                            <tr class="hover:bg-dash-surface-hover transition">
                                <td class="px-6 py-4 text-sm">{{ $loop->iteration }}</td>

                                <td class="px-6 py-4 text-sm font-medium">{{ $module->event }}</td>

                                <td class="px-6 py-4">
                                    @if($module->status === 'active')
                                        <span
                                            class="px-2 py-1 text-xs rounded-full bg-dash-success/20 text-dash-success">Active</span>
                                    @else
                                        <span
                                            class="px-2 py-1 text-xs rounded-full bg-dash-danger/20 text-dash-danger">Inactive</span>
                                    @endif
                                </td>

                                <td class="px-6 py-4 text-right flex justify-end gap-2">
                                    <button onclick="openEditModuleModal({{ $module->id }}, '{{ $module->event }}')"
                                        class="p-2 rounded-lg text-dash-primary hover:bg-dash-primary/10 transition">
                                        <i class="fas fa-edit text-base"></i>
                                    </button>
                                    <button onclick="showDeleteConfirm({{ $module->id }}, '{{ $module->event }}')"
                                        class="p-2 rounded-lg text-dash-danger hover:bg-dash-danger/10 transition">
                                        <i class="fas fa-ban text-base"></i>
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="px-6 py-4 text-center text-sm">No modules found</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </main>

    <div id="moduleModal" class="fixed inset-0 z-50 hidden items-center justify-center p-4">
        <div class="absolute inset-0 bg-black/70" onclick="closeModuleModal()"></div>
        <div class="relative bg-dash-surface rounded-2xl border border-dash-border shadow-2xl max-w-md w-full">
            <div id="createSuccess" class="hidden p-6 text-center space-y-4">
                <div
                    class="w-16 h-16 bg-dash-success/20 text-dash-success rounded-full flex items-center justify-center mx-auto">
                    <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                </div>
                <h3 class="text-xl font-semibold text-dash-text">Module Saved!</h3>
                <p class="text-dash-text-muted">The module has been successfully saved.</p>
                <button onclick="closeModuleModal()" class="px-4 py-2 bg-dash-surface-hover rounded-lg">Close</button>
            </div>
            <form id="moduleForm" action="{{ route('modules.store') }}" method="POST" class="p-6 space-y-5"
                data-method="POST">
                @csrf
                <div>
                    <label class="block text-sm mb-1.5">Event Name</label>
                    <input type="text" name="event"
                        class="w-full px-4 py-2.5 bg-dash-surface-hover border border-dash-border rounded-lg focus:border-dash-primary">
                    <p id="error-event" class="text-dash-danger text-xs mt-1 hidden"></p>
                </div>
                <div class="flex justify-end space-x-3 pt-4 border-t border-dash-border">
                    <button type="button" onclick="closeModuleModal()"
                        class="px-4 py-2 bg-dash-surface-hover rounded-lg">Cancel</button>
                    <button type="submit" class="px-4 py-2 bg-dash-primary text-white rounded-lg">Submit</button>
                </div>
            </form>
        </div>
    </div>


    <div id="confirmModal" class="fixed inset-0 z-50 hidden items-center justify-center p-4">
        <div class="absolute inset-0 bg-black/70" onclick="closeConfirmModal()"></div>
        <div class="relative bg-dash-surface rounded-xl p-6 w-full max-w-sm">
            <div id="deleteSuccess" class="hidden p-6 text-center space-y-4">
                <div
                    class="w-16 h-16 bg-dash-danger/20 text-dash-danger rounded-full flex items-center justify-center mx-auto">
                    <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-dash-danger">Module Deleted!</h3>
                <p class="text-sm text-dash-text-muted">The module has been permanently removed.</p>
                <button onclick="closeConfirmModal()" class="px-4 py-2 bg-dash-danger text-white rounded-lg">Close</button>
            </div>
            <div id="deleteConfirmSection">
                <h3 class="text-lg font-semibold mb-4">Confirm Delete</h3>
                <p id="confirmMessage" class="text-sm mb-6"></p>
                <div class="flex justify-end space-x-3">
                    <button onclick="closeConfirmModal()" class="px-4 py-2 bg-dash-surface-hover rounded-lg">Cancel</button>
                    <button id="confirmYesBtn" class="px-4 py-2 bg-dash-danger text-white rounded-lg">Delete</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        let editingModuleId = null;

        function openModuleModal() {
            editingModuleId = null;
            const form = document.getElementById('moduleForm');
            form.reset();
            form.dataset.method = 'POST';

            document.getElementById('moduleModal').classList.remove('hidden');
            document.getElementById('moduleModal').classList.add('flex');
            document.getElementById('createSuccess').classList.add('hidden');
            document.getElementById('moduleForm').classList.remove('hidden');
        }

        function openEditModuleModal(id, eventName) {
            editingModuleId = id;
            const form = document.getElementById('moduleForm');
            form.dataset.method = 'PUT';
            form.querySelector('input[name="event"]').value = eventName;

            document.getElementById('moduleModal').classList.remove('hidden');
            document.getElementById('moduleModal').classList.add('flex');
            document.getElementById('createSuccess').classList.add('hidden');
            document.getElementById('moduleForm').classList.remove('hidden');
        }

        function closeModuleModal() {
            document.getElementById('moduleModal').classList.add('hidden');
            document.getElementById('moduleModal').classList.remove('flex');
            editingModuleId = null;
            location.reload();
        }

        function closeConfirmModal() {
            document.getElementById('confirmModal').classList.add('hidden');
            document.getElementById('confirmModal').classList.remove('flex');
            location.reload();
        }

        document.getElementById('moduleForm').addEventListener('submit', function (e) {
            e.preventDefault();
            document.querySelectorAll('[id^="error-"]').forEach(el => {
                el.classList.add('hidden');
                el.textContent = '';
            });

            const formData = new FormData(this);
            let url = this.action;
            let method = this.dataset.method || 'POST';

            if (method === 'PUT' && editingModuleId) {
                url = `/modules/${editingModuleId}`;
                formData.append('_method', 'PUT');
            }

            fetch(url, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json'
                }
            })
                .then(async res => ({ status: res.status, body: await res.json() }))
                .then(({ status, body }) => {
                    if (status === 422) {
                        Object.keys(body.errors).forEach(field => {
                            const el = document.getElementById('error-' + field);
                            if (el) {
                                el.textContent = body.errors[field][0];
                                el.classList.remove('hidden');
                            }
                        });
                        return;
                    }

                    if (body.success) {
                        document.getElementById('moduleForm').classList.add('hidden');
                        document.getElementById('createSuccess').classList.remove('hidden');
                    }
                });
        });

        function showDeleteConfirm(id, name) {
            document.getElementById('confirmMessage').textContent = `Are you sure you want to delete "${name}"?`;
            document.getElementById('confirmModal').classList.remove('hidden');
            document.getElementById('confirmModal').classList.add('flex');

            document.getElementById('confirmYesBtn').onclick = function () {
                fetch(`/modules/${id}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json'
                    }
                })
                    .then(res => res.json())
                    .then(data => {
                        if (data.success) {
                            document.getElementById('deleteConfirmSection').classList.add('hidden');
                            document.getElementById('deleteSuccess').classList.remove('hidden');
                        }
                    });
            };
        }
    </script>
@endpush