@extends('layouts.app')

@section('content')
<div class="container mx-auto p-6" x-data="{ showMessage: {{ session('success') ? 'true' : 'false' }}, search: '' }">
    <!-- Success Message -->
    <template x-if="showMessage">
        <div class="bg-green-500 text-white p-4 rounded-md mb-4">
            <p x-text="'{{ session('success') }}'"></p>
        </div>
    </template>

  <h1 class="text-3xl font-bold text-gray-700 mb-6 flex items-center space-x-3">
    <i class="fas fa-cogs text-blue-500"></i>
    <span>Settings</span>

    <!-- Activity Logs (Pushed to the Far Right) -->
    <div class="ml-right">
        <x-nav-link :href="route('admin.activity-logs')" :active="request()->routeIs('admin.activity-logs')" class="flex items-center space-x-2">
            <i class="fas fa-list-alt text-blue-500"></i>
            <span>{{ __('Activity Logs') }}</span>
        </x-nav-link>
    </div>
</h1>


    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <!-- System Users Section -->
        <div class="bg-white p-6 rounded-lg shadow-md">
            <h2 class="text-xl font-semibold mb-4">System Users</h2>
            <input type="text" x-model="search" placeholder="Search users..." class="w-full p-2 border rounded-md mb-4">
            <table class="w-full table-auto border border-gray-300">
                <thead>
                    <tr class="bg-gray-100">
                        <th class="border px-4 py-2 text-left">Name</th>
                        <th class="border px-4 py-2 text-left">Role</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($users as $user)
                        <tr x-show="search === '' || '{{ strtolower($user->name) }}'.includes(search.toLowerCase())">
                            <td class="border px-4 py-2">{{ $user->name }}</td>
                            <td class="border px-4 py-2">{{ $user->role_name ?? 'N/A' }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            <div class="mt-4">{{ $users->links() }}</div>
        </div>

        <!-- Assign Roles Section -->
        <div class="bg-white p-6 rounded-lg shadow-md">
            <h2 class="text-xl font-semibold mb-4">Assign Roles</h2>
            <form action="{{ route('assign.role') }}" method="POST">
                @csrf
                <div class="mb-4">
                    <label class="block font-medium">User</label>
                    <select name="user_id" class="w-full p-2 border rounded-md">
                        @foreach ($users as $user)
                            <option value="{{ $user->id }}">{{ $user->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-4">
                    <label class="block font-medium">Role</label>
                    <select name="role_id" class="w-full p-2 border rounded-md">
                        @foreach ($roles as $role)
                            <option value="{{ $role->id }}">{{ $role->name }}</option>
                        @endforeach
                    </select>
                </div>
                <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md w-full">Assign Role</button>
            </form>
        </div>

        <!-- Enable Members Login -->
        <div class="bg-white p-6 rounded-lg shadow-md">
            <h2 class="text-xl font-semibold mb-4">Enable Members Login</h2>
            <form action="{{ route('users.insert-members') }}" method="POST">
                @csrf
                <button type="submit" class="bg-green-500 text-white px-4 py-2 rounded-md w-full">Update Members</button>
            </form>
            <br>
            <hr>
            <h2 class="text-xl font-semibold mb-4">Roles</h2>
             <table class="w-full table-auto border border-gray-300">
                <thead>
                    <tr class="bg-gray-100">
                        <th class="border px-4 py-2 text-left">Role</th>
                        <th class="border px-4 py-2 text-left">Description</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($roles as $role)
                        <tr x-show="search === '' || '{{ strtolower($role->name) }}'.includes(search.toLowerCase())">
                            <td class="border px-4 py-2">{{ $role->name }}</td>
                            <td class="border px-4 py-2">{{ $role->description ?? 'N/A' }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            <div class="mt-4">{{ $users->links() }}</div>
        </div>

        <!-- Add Role Section -->
        <div class="bg-white p-6 rounded-lg shadow-md">
            <h2 class="text-xl font-semibold mb-4">Add Role</h2>
            <form action="{{ route('roles.store') }}" method="POST">
                @csrf
                <div class="mb-4">
                    <label class="block font-medium">Role Name</label>
                    <input type="text" name="name" class="w-full p-2 border rounded-md" required>
                </div>
                <div class="mb-4">
                    <label class="block font-medium">Description</label>
                    <textarea name="description" class="w-full p-2 border rounded-md" rows="3"></textarea>
                </div>
                <button type="submit" class="bg-purple-500 text-white px-4 py-2 rounded-md w-full">Add Role</button>
            </form>
        </div>
    </div>

   <!-- Loan Management Settings -->
<div class="bg-white p-6 rounded-lg shadow-md mt-6">
    <h2 class="text-xl font-semibold mb-4">Loan Management Settings</h2>

    <!-- Add New Setting Form -->
   <form action="{{ route('settings.store') }}" method="POST" class="mb-6 bg-white p-6 rounded-lg shadow-md max-w-3xl mx-auto">
    @csrf
    <h2 class="text-2xl font-semibold mb-4 text-gray-700">Add New Setting</h2>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
        <!-- Setting Name with Icon -->
        <div class="relative">
            <label for="name" class="block text-sm font-medium text-gray-600 mb-1">Setting Name</label>
            <div class="flex items-center border rounded-md focus-within:ring-2 focus-within:ring-blue-500">
                <span class="px-3 text-gray-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0 2.21-1.79 4-4 4s-4-1.79-4-4 1.79-4 4-4 4 1.79 4 4zM20 11h-3M20 11a8.964 8.964 0 00-3.92-7.35M20 11a8.964 8.964 0 013.92 7.35M4 11H1m3 0a8.964 8.964 0 013.92-7.35M4 11a8.964 8.964 0 00-3.92 7.35" />
                    </svg>
                </span>
                <input type="text" name="name" id="name" class="w-full p-3 focus:outline-none rounded-r-md" placeholder="Enter setting name" required>
            </div>
        </div>

        <!-- Setting Value with Icon -->
        <div class="relative">
            <label for="value" class="block text-sm font-medium text-gray-600 mb-1">Setting Value</label>
            <div class="flex items-center border rounded-md focus-within:ring-2 focus-within:ring-blue-500">
                <span class="px-3 text-gray-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 1.343-3 3v3a3 3 0 006 0v-3c0-1.657-1.343-3-3-3zm0 0V4m0 16v-4" />
                    </svg>
                </span>
                <input type="text" name="value" id="value" class="w-full p-3 focus:outline-none rounded-r-md" placeholder="Enter setting value" required>
            </div>
        </div>
    </div>

    <!-- Submit Button -->
    <div class="text-right">
        <button type="submit" class="bg-blue-500 text-white px-6 py-2 rounded-md text-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" 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>
            Add Setting
        </button>
    </div>
</form>


    <!-- Loan Settings Table -->
    <table class="w-full table-auto border border-gray-300">
        <thead>
            <tr class="bg-gray-100">
                <th class="border px-4 py-2">Name</th>
                <th class="border px-4 py-2">Value</th>
                <th class="border px-4 py-2">Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($settings as $setting)
            <tr>
                <td class="border px-4 py-2">{{ $setting->name }}</td>
                <td class="border px-4 py-2">
                    <!-- Editable Setting Value -->
                   <!-- <form action="{{ route('settings.update', ['setting' => $setting->id]) }}" method="POST" class="inline">
                    @csrf
                    @method('PUT') -->
                    <input readonly type="text" name="value" value="{{ $setting->value }}" class="w-full p-2 border rounded-md focus:ring-2 focus:ring-blue-500" required>
                    <!-- <button type="submit" class="bg-green-500 text-white px-4 py-2 rounded mt-2">Save</button> -->
                <!-- </form> -->

                </td>
                <td class="border px-4 py-2">
                    <!-- Edit and Delete Buttons -->
                    <form action="{{ route('settings.destroy', $setting) }}" method="POST" class="inline">
                        @csrf @method('DELETE')
                        <button type="submit" class="bg-red-500 text-white px-4 py-2 rounded">Delete</button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

</div>
@endsection