@php
$records = collect($users ?? []);
@endphp

<style>
    #user_form .kt-input input,
    #user_form input[type="date"],
    #user_form input[type="number"],
    #user_form input[type="text"],
    #user_form input[type="tel"] {
        height: 42px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        padding: 0 12px;
        font-size: 14px;
        color: #374151;
        background: #fff;
        width: 100%;
        outline: none;
        transition: border-color 0.15s;
    }

    #user_form textarea {
        border: 1px solid #d1d5db;
        border-radius: 8px;
        padding: 10px 12px;
        font-size: 14px;
        color: #374151;
        background: #fff;
        width: 100%;
        outline: none;
        transition: border-color 0.15s;
    }

    #user_form input:focus,
    #user_form select:focus,
    #user_form textarea:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    #user_form input:invalid:not(:placeholder-shown) {
        border-color: #ef4444;
    }
</style>

<div class="user-screen">
    <div class="management-toolbar mb-4">
        <div class="roles-actions flex justify-end gap-3">
            <div class="roles-search relative flex items-center">
                <i class="ki-filled ki-magnifier absolute left-3 text-gray-400 pointer-events-none"></i>
                <input
                    id="user_search"
                    data-kt-datatable-search="#kt_datatable_user"
                    placeholder="Search user..."
                    type="text"
                    class="pl-9 border-none rounded-lg" />
            </div>

            <button
                type="button"
                class="kt-btn common-secondary-btn roles-add-btn p-4"
                id="user_add_btn"
                data-kt-modal-toggle="#user_modal"
                style="background-color:#2563eb;color:#fff;border-color:#2563eb;">
                <i class="ki-filled ki-plus"></i>
                Add Data
            </button>
        </div>
    </div>

    <div class="roles-panel">
        <div class="kt-card-table" style="border-radius:10px;border:1px solid #e5e7eb;overflow:hidden;background:#fff;">
            <div id="user_datatable_wrapper" class="p-0">
                <div class="kt-scrollable-x-auto">
                    <table class="kt-table kt-table-border roles-table w-full" id="kt_datatable_user">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Group</th>
                                <th>Active</th>
                                <th class="text-right">Actions</th>

                        </thead>

                        @foreach ($records as $record)
                        <tr data-record='@json($record)'>

                            <td>{{ $record->name }}</td>
                            <td>{{ $record->email }}</td>
                            <td>{{ $record->group_name ?? '-' }}</td>
                            <td>{{ $record->active ? 'Yes' : 'No' }}</td>

                            <td class="text-right">
                                <button class="user-edit-btn kt-btn-sm kt-btn-primary"
                                    data-record='@json($record)'>
                                    Edit
                                </button>

                                <button class="user-delete-btn kt-btn-sm kt-btn-danger"
                                    data-id="{{ $record->id }}">
                                    Delete
                                </button>
                            </td>

                        </tr>
                        @endforeach
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- MODAL --}}
<div class="kt-modal" data-kt-modal="true" id="user_modal" data-kt-modal-backdrop-static="true">
    <div class="kt-modal-content max-w-[800px] top-[10%]">
        <div class="kt-modal-header py-4 px-5">
            <h3 class="kt-modal-title text-base font-semibold" id="user_modal_title">Add Record</h3>
            <button class="kt-btn kt-btn-sm kt-btn-icon kt-btn-dim shrink-0" data-kt-modal-dismiss="true">
                <i class="ki-filled ki-cross"></i>
            </button>
        </div>

        <div class="kt-modal-body p-5 lg:p-7.5">
            <form id="user_form" class="flex flex-col gap-6" novalidate>
                @csrf
                <input type="hidden" name="record_id" id="user_record_id">

                {{-- NAME --}}
                <div class="flex flex-col gap-2">
                    <label class="text-sm font-semibold">Name</label>
                    <div class="kt-input w-full">
                        <input type="text" name="name" id="name" />
                    </div>
                </div>

                {{-- DESCRIPTION --}}
                <div class="flex flex-col gap-2">
                    <label class="text-sm font-semibold">Email</label>
                    <div class="kt-input w-full">
                        <input type="email" name="email" id="email" />
                    </div>
                </div>

                <div class="flex flex-col gap-2">
                    <label class="text-sm font-semibold">Password</label>
                    <div class="kt-input w-full">
                        <input type="password" name="password" id="password" />
                    </div>
                </div>

                {{-- IP FILTER --}}
                <div class="flex flex-col gap-2">
                    <label class="text-sm font-semibold">Select Group</label>

                    <select name="group_id" id="group_id" class="w-full border rounded p-2">
                        <option>Select</option>
                        @foreach($groups as $group)
                        <option value="{{ $group->id }}">{{ $group->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="flex flex-col gap-2">
                    <label class="text-sm font-semibold">Status</label>

                    <select name="active" id="active" class="w-full border rounded p-2">
                        <option value="">Select</option>
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>

                    </select>
                </div>
                {{-- BUTTONS --}}
                <div class="flex justify-end gap-3 pt-2">
                    <button type="button" data-kt-modal-dismiss="true"
                        class="kt-btn kt-btn-light">Cancel</button>

                    <button type="submit" id="user_submit_btn"
                        class="kt-btn kt-btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $(document).on('click', '.user-edit-btn', function() {
        const record = JSON.parse($(this).attr('data-record'));

        $('#user_record_id').val(record.id);
        $('#name').val(record.name || '');
        $('#email').val(record.email || '');
        $('#password').val(''); // never preload password

        $('#user_id').val(record.user_id || '');

        $('#user_modal_title').text('Edit User #' + record.id);
        $('#user_submit_btn').text('Update');

        // ACTIVE checkbox fix
        $('#active').val(String(record.active));

        const modalEl = document.querySelector('#user_modal');

        if (window.KTModal?.getOrCreateInstance) {
            window.KTModal.getOrCreateInstance(modalEl).show();
        } else {
            $('#user_modal').addClass('is-open');
        }
    });
    $(document).on('click', '.user-delete-btn', function() {

        const id = $(this).data('id');

        if (!id) return;
        if (!confirm('Delete this user?')) return;

        $.ajax({
            url: `/admin-forms/user/${id}`,
            method: 'POST',
            data: {
                _method: 'DELETE',
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function(res) {
                if (!res.status) return alert(res.message || 'Failed');

                $(`.user-delete-btn[data-id="${id}"]`).closest('tr').remove();
            },
            error: function() {
                alert('Delete failed');
            }
        });
    });
</script>