@extends('layouts.sidebar')

@section('content')
    <div class="container px-4 mx-auto">
        <div class="flex justify-between py-5 ">
            <div>
                <h2 class="text-2xl font-bold ">Admin Information</h2>
            </div>
            @if (auth()->user()->role == 'Admin')
                <div>
                    <button class="px-4 py-2 mb-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
                        onclick="openModal('addItemModal')">Add Admin</button>
                </div>
            @endif



        </div>

        @if (session('success'))
            <div class="text-center text-red-900 alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        <table id="leaseTable" class="min-w-full text-center bg-white border-collapse rounded shadow-md">
            <thead class="">
                <tr>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Admin Name</th>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">email</th>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Role</th>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Action</th>

                </tr>
            </thead>
            <tbody class="text-sm text-gray-600">


            </tbody>
        </table>



        @foreach ($admins as $admin)
            <div id="deleteModal{{ $admin->admin_id }}"
                class="fixed inset-0 flex items-center justify-center hidden bg-black bg-opacity-50">
                <!-- Modal dialog -->
                <div class="max-w-md mx-auto overflow-hidden bg-white rounded-lg shadow-xl">
                    <!-- Modal header -->
                    <div class="flex items-center justify-between px-4 py-2 bg-red-500">
                        <h5 class="font-bold text-white">Confirm Delete</h5>
                        <button onclick="closeModal('deleteModal{{ $admin->admin_id }}')"
                            class="text-white">&times;</button>
                    </div>

                    <!-- Modal body -->
                    <div class="px-4 py-4">
                        <p>Are you sure you want to delete this user?</p>
                    </div>

                    <!-- Modal footer -->
                    <div class="flex items-center justify-end px-4 py-3 bg-gray-100">
                        <button onclick="closeModal('deleteModal{{ $admin->admin_id }}')"
                            class="px-3 py-1 mr-2 text-gray-800 bg-gray-300 rounded hover:bg-gray-400">Cancel</button>

                        <!-- Form for delete -->
                        <form id="deleteForm{{ $admin->admin_id }}" action="{{ route('admin.destroy', $admin->admin_id) }}"
                            method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="submit"
                                class="px-3 py-1 text-white bg-red-500 rounded hover:bg-red-600">Delete</button>
                        </form>
                    </div>
                </div>
            </div>

            <div id="editModal{{ $admin->admin_id }}"
                class="fixed inset-0 flex items-center justify-center hidden bg-black bg-opacity-50">
                <!-- Modal dialog -->
                <div class="max-w-md mx-auto overflow-hidden bg-white rounded-lg shadow-xl">
                    <!-- Modal header -->
                    <div class="flex items-center justify-between px-4 py-2 bg-blue-500">
                        <h5 class="font-bold text-white">Edit Admin</h5>
                        <button onclick="closeModal('editModal{{ $admin->admin_id }}')" class="text-white">&times;</button>
                    </div>

                    <div class="flex items-center justify-end px-4 py-3 bg-gray-100">


                        <form action="{{ route('admin.update', $admin->admin_id) }}" method="POST"
                            class="p-6 bg-white rounded shadow-md">
                            @csrf
                            @method('PUT') <!-- This is important for updating -->

                            <div class="flex items-end justify-center gap-4">
                                <div>
                                    <div class="row">
                                        <!-- Property -->
                                        <div class="mb-3 col-md-3">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="property"
                                                    name="property" value="1"
                                                    {{ $admin->user->property ? 'checked' : '' }}>
                                                <label class="form-check-label" for="property">Property</label>
                                            </div>
                                        </div>

                                        <!-- Client -->
                                        <div class="mb-3 col-md-3">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="client"
                                                    name="client" value="1"
                                                    {{ $admin->user->client ? 'checked' : '' }}>
                                                <label class="form-check-label" for="client">Client</label>
                                            </div>
                                        </div>

                                        <!-- Utility Bills -->
                                        <div class="mb-3 col-md-3">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="utility"
                                                    name="utility" value="1"
                                                    {{ $admin->user->utility ? 'checked' : '' }}>
                                                <label class="form-check-label" for="utility-bills">Utility Bills</label>
                                            </div>
                                        </div>

                                        <!-- Account Receivables -->
                                        <div class="mb-3 col-md-3">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="account-receivables"
                                                    name="recievables" value="1"
                                                    {{ $admin->user->recievables ? 'checked' : '' }}>
                                                <label class="form-check-label" for="account-receivables">Account
                                                    Receivables</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="mt-4 row">
                                        <!-- Payables -->
                                        <div class="mb-3 col-md-3">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="payables"
                                                    name="payables" value="1"
                                                    {{ $admin->user->payables ? 'checked' : '' }}>
                                                <label class="form-check-label" for="payables">Payables</label>
                                            </div>
                                        </div>

                                        <!-- Expense -->
                                        <div class="mb-3 col-md-3">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="expense"
                                                    name="expences" value="1"
                                                    {{ $admin->user->expences ? 'checked' : '' }}>
                                                <label class="form-check-label" for="expense">Expense</label>
                                            </div>
                                        </div>

                                        <!-- Reports -->
                                        <div class="mb-3 col-md-3">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="reports"
                                                    name="report" value="1"
                                                    {{ $admin->user->report ? 'checked' : '' }}>
                                                <label class="form-check-label" for="reports">Reports</label>
                                            </div>
                                        </div>

                                        <!-- Payroll -->
                                        <div class="mb-3 col-md-3">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="payroll"
                                                    name="payroll" value="1"
                                                    {{ $admin->user->payroll ? 'checked' : '' }}>
                                                <label class="form-check-label" for="payroll">Payroll</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="mt-4 row">
                                        <!-- Inventory -->
                                        <div class="mb-3 col-md-3">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="inventory"
                                                    name="inventory" value="1"
                                                    {{ $admin->user->inventory ? 'checked' : '' }}>
                                                <label class="form-check-label" for="inventory">Inventory</label>
                                            </div>
                                        </div>

                                        <!-- Audit Logs -->
                                        <div class="mb-3 col-md-3">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="audit-logs"
                                                    name="logs" value="1"
                                                    {{ $admin->user->logs ? 'checked' : '' }}>
                                                <label class="form-check-label" for="audit-logs">Audit Logs</label>
                                            </div>
                                        </div>

                                        <!-- Admin -->
                                        <div class="mb-3 col-md-3">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="admin"
                                                    name="admin" value="1"
                                                    {{ $admin->user->admin ? 'checked' : '' }}>
                                                <label class="form-check-label" for="admin">Admin</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <div class="mb-4">
                                        <label for="admin_name" class="block mb-2 font-bold text-gray-700">Admin
                                            Name</label>
                                        <input type="text" id="admin_name" name="admin_name"
                                            class="w-full p-2 border border-gray-300" value="{{ $admin->admin_name }}"
                                            required>
                                    </div>

                                    <div class="mb-4">
                                        <label for="email" class="block mb-2 font-bold text-gray-700">Email</label>
                                        <input type="email" id="email" name="email"
                                            class="w-full p-2 border border-gray-300" value="{{ $admin->user->email }}"
                                            required>
                                    </div>

                                    <div class="mb-4">
                                        <label for="role" class="block mb-2 font-bold text-gray-700">Role</label>
                                        <select id="role" name="role" class="w-full p-2 border border-gray-300"
                                            required>
                                            <option value="" disabled>Select a role</option>
                                            <option value="Admin" {{ $admin->user->role === 'Admin' ? 'selected' : '' }}>
                                                Admin
                                            </option>
                                            <option value="Employee"
                                                {{ $admin->user->role === 'Employee' ? 'selected' : '' }}>
                                                Employee</option>
                                        </select>
                                    </div>

                                    <div class="mb-4">
                                        <label for="password" class="block mb-2 font-bold text-gray-700">Password</label>
                                        <input type="password" id="password" name="password"
                                            class="w-full p-2 border border-gray-300"
                                            placeholder="Leave blank to keep current password">
                                    </div>
                                </div>
                            </div>

                            <div class="flex items-center justify-between">
                                <button type="submit"
                                    class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">
                                    Update Admin
                                </button>
                                <a href="{{ route('admin.index') }}" class="text-blue-500 hover:underline">Back to Admin
                                    List</a>
                            </div>
                        </form>


                    </div>
                </div>
            </div>
        @endforeach


        <div id="addItemModal" class="fixed inset-0 flex items-center justify-center hidden bg-black bg-opacity-50">
            <!-- Modal dialog -->
            <div class="w-auto mx-auto overflow-hidden bg-white rounded-lg shadow-xl">
                <!-- Modal header -->
                <div class="flex items-center justify-between px-4 py-2 bg-blue-500">
                    <h5 class="font-bold text-white">Add User</h5>
                    <button onclick="closeModal1('addItemModal')" class="text-white">&times;</button>
                </div>
                <!-- client.blade.php -->
                <form action="{{ route('admin.store') }}" method="POST" class="p-6 bg-white rounded shadow-md">
                    @csrf
                    <div class="flex items-end justify-center gap-4">
                        <div>
                            <div class="row">
                                <!-- Property -->
                                <div class="mb-3 col-md-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="property" name="property"
                                            value="1">
                                        <label class="form-check-label" for="property">Property</label>
                                    </div>
                                </div>

                                <!-- Client -->
                                <div class="mb-3 col-md-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="client" name="client"
                                            value="1">
                                        <label class="form-check-label" for="client">Client</label>
                                    </div>
                                </div>

                                <!-- Utility Bills -->
                                <div class="mb-3 col-md-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="utility" name="utility"
                                            value="1">
                                        <label class="form-check-label" for="utility-bills">Utility Bills</label>
                                    </div>
                                </div>

                                <!-- Account Receivables -->
                                <div class="mb-3 col-md-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="account-recievables"
                                            name="receivables" value="1">
                                        <label class="form-check-label" for="account-receivables">Account
                                            Receivables</label>
                                    </div>
                                </div>
                            </div>

                            <div class="mt-4 row">
                                <!-- Payables -->
                                <div class="mb-3 col-md-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="payables" name="payables"
                                            value="1">
                                        <label class="form-check-label" for="payables">Payables</label>
                                    </div>
                                </div>

                                <!-- Expense -->
                                <div class="mb-3 col-md-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="expense" name="expences"
                                            value="1">
                                        <label class="form-check-label" for="expense">Expense</label>
                                    </div>
                                </div>

                                <!-- Reports -->
                                <div class="mb-3 col-md-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="reports" name="report"
                                            value="1">
                                        <label class="form-check-label" for="reports">Reports</label>
                                    </div>
                                </div>

                                <!-- Payroll -->
                                <div class="mb-3 col-md-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="payroll" name="payroll"
                                            value="1">
                                        <label class="form-check-label" for="payroll">Payroll</label>
                                    </div>
                                </div>
                            </div>


                            <div class="mt-4 row">
                                <!-- Inventory -->
                                <div class="mb-3 col-md-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="inventory" name="inventory"
                                            value="1">
                                        <label class="form-check-label" for="inventory">Inventory</label>
                                    </div>
                                </div>

                                <!-- Audit Logs -->
                                <div class="mb-3 col-md-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="audit-logs" name="logs"
                                            value="1">
                                        <label class="form-check-label" for="audit-logs">Audit Logs</label>
                                    </div>
                                </div>

                                <!-- Admin -->
                                <div class="mb-3 col-md-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="admin" name="admin"
                                            value="1">
                                        <label class="form-check-label" for="admin">Admin</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="mb-4">
                                <label for="admin_name" class="block mb-2 font-bold text-gray-700">Admin Name</label>
                                <input type="text" id="admin_name" name="admin_name"
                                    class="w-full p-2 border border-gray-300" required>
                            </div>

                            <div class="mb-4">
                                <label for="email" class="block mb-2 font-bold text-gray-700">Email</label>
                                <input type="email" id="email" name="email"
                                    class="w-full p-2 border border-gray-300" required>
                            </div>

                            <div class="mb-4">
                                <label for="role" class="block mb-2 font-bold text-gray-700">Role</label>
                                <select id="role" name="role" class="w-full p-2 border border-gray-300" required>
                                    <option value="" disabled>Select a role</option>
                                    <option value="Admin">Admin
                                    </option>
                                    <option value="Employee">
                                        Employee</option>
                                </select>
                            </div>

                            <div class="mb-4">
                                <label for="password" class="block mb-2 font-bold text-gray-700">Password</label>
                                <input type="password" id="password" name="password"
                                    class="w-full p-2 border border-gray-300">

                            </div>
                        </div>
                    </div>

                    <div class="flex items-center justify-between">
                        <button type="submit"
                            class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">
                            Create Admin
                        </button>
                        <a href="{{ route('admin.index') }}" class="text-blue-500 hover:underline">Back to Admin
                            List</a>
                    </div>
                </form>
            </div>
        </div>
    @endsection
    @section('scripts')
        <script>
            $(document).ready(function() {
                $('#leaseTable').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: "{{ url('/admin') }}",
                    columns: [{
                            data: 'admin_name',
                            name: 'admin_name'
                        }, {
                            data: 'email',
                            name: 'email'
                        },
                        {
                            data: 'role',
                            name: 'role'
                        },

                        {
                            data: 'actions',
                            name: 'actions',
                            orderable: false,
                            searchable: false,

                        }
                    ]
                });
            });

            function openDeleteModal(clientId) {
                $('#deleteModal' + clientId).modal('show');

                $('#confirmDelete').on('click', function() {
                    deleteClient(clientId);
                });
            }

            function deleteClient(clientId) {
                $.ajax({
                    url: '/delete-client/' + clientId,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        $('#leaseTable').DataTable().ajax.reload();
                        closeModal('deleteModal' + clientId);
                    }
                });
            }

            function closeModal(modalId) {
                $('#' + modalId).modal('hide');
            }
        </script>






        <script>
            function openModal1(modalId) {
                var modal = document.getElementById(modalId);
                modal.classList.remove('hidden');
                modal.classList.add('flex');
            }

            // Function to close a modal
            function closeModal1(modalId) {
                var modal = document.getElementById(modalId);
                modal.classList.add('hidden');
                modal.classList.remove('flex');
            }

            // Function to open a modal
            function openModal(modalId) {
                var modal = document.getElementById(modalId);
                modal.classList.remove('hidden');
                modal.classList.add('flex');
            }

            // Function to close a modal
            function closeModal(modalId) {
                var modal = document.getElementById(modalId);
                modal.classList.add('hidden');
                modal.classList.remove('flex');
            }

            // Function to handle add item form submission
            function submitAddItemForm(event) {
                event.preventDefault();
                var itemName = document.getElementById('item-name').value;
                console.log('Adding item:', itemName);
                document.getElementById('addItemForm').reset(); // Reset form
                closeModal('addItemModal'); // Close modal
            }


            function openEditModal(propertyId) {

                document.getElementById('editItemModal' + propertyId).classList.remove('hidden');
            }


            function closeEditModal(propertyId) {
                // Hide the modal
                document.getElementById('editItemModal' + propertyId).classList.add('hidden');
            }

            // Function to handle form submission (in this case, just closing the modal)
            function submitEditItemForm(event, propertyId) {
                event.preventDefault(); // Prevent form submission

                // In a real scenario without AJAX, you might just close the modal
                closeEditModal(propertyId);
            }
        </script>
    @endsection