@extends('layouts.super')

@section('content')
<div class="max-w-7xl mx-auto px-10 py-6 space-y-6">

    <!-- 🏷️ Page Header -->
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-3xl font-bold text-gray-800 mb-1">
                Manage Dewans - <span class="text-indigo-600">{{ $district->name ?? 'My District' }}</span>
            </h1>
            <p class="text-gray-500">Add, edit, assign admins, or toggle Dewan status for your district.</p>
        </div>
        <button class="bg-indigo-100 hover:bg-indigo-200 text-indigo-700 px-6 py-2 rounded-md shadow"
            data-modal-target="addDewanModal">
            ➕ Add Dewan
        </button>
    </div>

    <!-- 🏟️ Dewan Table -->
    <div class="bg-grey-100 rounded-lg shadow overflow-x-auto">
        <div class="flex justify-between items-center px-6 py-4 border-b border-gray-200 bg-violet-200">
            <h2 class="text-xl font-semibold text-gray-800">Existing Dewans</h2>
            <p class="text-sm text-gray-500">Dewans available for this district.</p>
        </div>
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-indigo-100">
                <tr>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-black-600">#</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-black-600">Name</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-black-600">Admins</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-black-600">Status</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-black-600">Rates (RM)</th>
                    <th class="px-4 py-2 text-center text-sm font-semibold text-black-600">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                @forelse ($dewans as $index => $dewan)
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-4 py-2 text-sm text-gray-500">{{ $index + 1 }}</td>
                        <td class="px-4 py-2 text-sm font-semibold text-gray-800">
                            {{ $dewan->name }}
                            <p class="text-xs text-gray-500">{{ $dewan->address ?? 'No address' }}</p>
                        </td>
                        <td class="px-4 py-2 text-sm text-gray-700">
                            @if ($dewan->admins->count() > 0)
                                @foreach ($dewan->admins as $admin)
                                    <div class="flex items-center justify-between">
                                        <p>{{ $admin->user->name }}
                                            <span class="text-xs text-gray-400">({{ $admin->user->email }})</span>
                                        </p>
                                        <form action="{{ route('super.dewans.unassignAdmin', $dewan->id) }}" method="POST" onsubmit="return confirm('Remove this admin from {{ $dewan->name }}?');">
                                            @csrf
                                            @method('DELETE')
                                            <input type="hidden" name="admin_id" value="{{ $admin->user_id }}">
                                            <button type="submit" class=" bg-red-100 text-red-700 text-xs hover:bg-red-200 ml-2 px-2 py-1 rounded-full"><small>Remove</small></button>
                                        </form>
                                    </div>
                                @endforeach
                            @else
                                <span class="text-gray-500 italic">Unassigned</span>
                            @endif
                        </td>
                        <td class="px-4 py-2 text-sm">
                            <form action="{{ route('super.dewans.toggleStatus', $dewan->id) }}" method="POST">
                                @csrf
                                @method('PATCH')
                                <button type="submit"
                                    class="px-3 py-1 rounded-full text-xs font-semibold
                                    {{ $dewan->status === 'active' 
                                        ? 'bg-green-100 text-green-700 hover:bg-green-200' 
                                        : 'bg-gray-200 text-gray-700 hover:bg-gray-300' }}">
                                    {{ ucfirst($dewan->status) }}
                                </button>
                            </form>
                        </td>
                        <td class="px-4 py-2 text-sm text-gray-600">
                            Kenduri: <strong>RM{{ number_format($dewan->rate_kenduri, 2) }}</strong><br>
                            Event: <strong>RM{{ number_format($dewan->rate_event, 2) }}</strong>
                        </td>
                        <td class="px-4 py-2 text-center">
                            <div class="flex items-center justify-center gap-3">
                                <!-- ✏️ Edit -->
                                <button
                                    class="px-4 py-1 bg-indigo-100 text-indigo-600 hover:bg-indigo-200 text-sm font-semibold rounded-full"
                                    data-modal-target="editDewanModal-{{ $dewan->id }}">
                                    Edit
                                </button>

                                @include('super.dewans.partials.edit-dewan', ['dewan' => $dewan, 'admins' => $admins])

                                <!-- 👤 Assign Admin -->
                                <button
                                    class="px-4 py-1 bg-blue-100 text-blue-700 hover:bg-blue-200 text-sm font-semibold rounded-full"
                                    data-modal-target="assignAdminModal-{{ $dewan->id }}">
                                    Assign
                                </button>

                                <!-- 🗑️ Delete -->
                                <form action="{{ route('super.dewans.destroy', $dewan->id) }}" method="POST"
                                    onsubmit="return confirm('Delete this Dewan? This cannot be undone.');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="px-4 py-1 bg-red-100 text-red-700 hover:bg-red-200 text-sm font-semibold rounded-full">
                                        Delete
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>

                    <!-- 👤 Assign Admin Modal -->
                    <div id="assignAdminModal-{{ $dewan->id }}" class="hidden fixed inset-0 z-50 bg-black/40 flex items-center justify-center">
                        <div class="bg-white rounded-lg shadow-lg w-full max-w-md p-6 space-y-4">
                            <h3 class="text-lg font-semibold text-gray-800 mb-2">Assign Admin to {{ $dewan->name }}</h3>
                            <form action="{{ route('super.dewans.assignAdmin', $dewan->id) }}" method="POST">
                                @csrf
                                <select name="admin_id" class="w-full border-gray-300 rounded-lg mb-4">
                                    @foreach ($admins as $admin)
                                        <option value="{{ $admin->id }}">{{ $admin->name }} ({{ $admin->email }})</option>
                                    @endforeach
                                </select>
                                <div class="flex justify-end gap-2">
                                    <button type="button"
                                        class="bg-gray-200 text-gray-700 px-4 py-1 rounded-md"
                                        onclick="document.getElementById('assignAdminModal-{{ $dewan->id }}').classList.add('hidden')">
                                        Cancel
                                    </button>
                                    <button type="submit"
                                        class="bg-indigo-600 text-white px-4 py-1 rounded-md hover:bg-indigo-700">
                                        Assign
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                @empty
                    <tr>
                        <td colspan="6" class="px-4 py-4 text-center text-gray-500">No Dewans found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="flex justify-end">                                        
        <button class="bg-emerald-100 hover:bg-emerald-200 text-emerald-700 px-4 py-2 rounded-md shadow"
            data-modal-target="createAdminModal">
            ➕ Create Admin
        </button>
    </div>
    <!-- 🧑‍💼 Existing Admins Section -->
    <div class="bg-white rounded-lg shadow mt-10 overflow-x-auto mb-4">
        <div class="flex justify-between items-center px-6 py-4 border-b border-gray-200 bg-green-100">
            <h2 class="text-xl font-semibold text-gray-800">Existing Admin Accounts</h2>
            <p class="text-sm text-gray-500">Admins created for this district.</p>
        </div>

        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-emerald-100">
                <tr>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-black-600">#</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-black-600">Name</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-black-600">Email</th>
                    <th class="px-4 py-2 text-left text-sm font-semibold text-black-600">Assigned Dewan</th>
                    <th class="px-4 py-2 text-center text-sm font-semibold text-black-600">Status</th>
                    <th class="px-4 py-2 text-center text-sm font-semibold text-black-600">Actions</th>
                </tr>
            </thead>

            <tbody class="divide-y divide-gray-100">
                @forelse ($admins as $index => $admin)
                    @php
                        $assignedDewan = $admin->adminProfile->dewan->name ?? '— None Assigned —';
                    @endphp

                    <tr class="hover:bg-gray-50 transition">
                        <!-- # -->
                        <td class="px-4 py-2 text-sm text-gray-500">{{ $index + 1 }}</td>

                        <!-- Name -->
                        <td class="px-4 py-2 text-sm font-semibold text-gray-800">
                            {{ $admin->name }}
                        </td>

                        <!-- Email -->
                        <td class="px-4 py-2 text-sm text-gray-600">
                            {{ $admin->email }}
                        </td>

                        <!-- Assigned Dewan -->
                        <td class="px-4 py-2 text-sm text-gray-600">
                            {{ $assignedDewan }}
                        </td>

                        <!-- ✅ STATUS (separate column) -->
                        <td class="px-4 py-2 text-center">
                            <form action="{{ route('super.admins.toggle', $admin->id) }}" method="POST">
                                @csrf
                                @method('PATCH')
                                <button type="submit"
                                    class="px-4 py-1 text-sm font-semibold rounded-full transition
                                    {{ $admin->is_active 
                                        ? 'bg-green-100 text-green-700 hover:bg-green-200' 
                                        : 'bg-gray-200 text-gray-700 hover:bg-gray-300' }}">
                                    {{ $admin->is_active ? 'Active' : 'Inactive' }}
                                </button>
                            </form>
                        </td>

                        <!-- 🎯 ACTIONS (edit/delete only) -->
                        <td class="px-4 py-2 text-center">
                            <div class="flex justify-center gap-3">
                                <!-- ✏️ Edit -->
                                <button
                                    class="px-4 py-1 bg-indigo-100 text-indigo-700 hover:bg-indigo-200 text-sm font-semibold rounded-full"
                                    data-modal-target="editAdminModal-{{ $admin->id }}">
                                    Edit
                                </button>

                                <!-- ❌ Delete -->
                                <form action="{{ route('super.admins.destroy', $admin->id) }}" method="POST"
                                    onsubmit="return confirm('Delete this admin account?');">
                                    @csrf
                                    @method('DELETE')
                                    <button
                                        class="px-4 py-1 bg-red-100 text-red-700 hover:bg-red-200 text-sm font-semibold rounded-full">
                                        Delete
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>

                    <!-- Include edit modal -->
                    @include('super.dewans.partials.edit-admin', ['user' => $admin])
                @empty
                    <tr>
                        <td colspan="6" class="px-4 py-4 text-center text-gray-500">No admin accounts found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

</div>

<!-- ➕ Add Dewan Modal -->
@include('super.dewans.partials.add-dewan')

<!-- 🧑‍💼 Create Admin Modal -->
@include('super.dewans.partials.create-admin')

<script>
document.querySelectorAll('[data-modal-target]').forEach(button => {
    button.addEventListener('click', () => {
        const target = document.getElementById(button.dataset.modalTarget);
        if (target) target.classList.remove('hidden');
    });
});
</script>
@endsection