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

<style>
    #group_form .kt-input input,
    #group_form input[type="date"],
    #group_form input[type="number"],
    #group_form input[type="text"],
    #group_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;
    }

    #group_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;
    }

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

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

<div class="group-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="group_search"
                    data-kt-datatable-search="#kt_datatable_group"
                    placeholder="Search group..."
                    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="group_add_btn"
                data-kt-modal-toggle="#group_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="group_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_group">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Description</th>
                                <th>IP Filter</th>
                                <th>Severity</th>
                                <th>Alerts</th>
                                <th>User</th>
                                <th>Active</th>
                                <th class="text-right">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($records as $record)

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

                                <td>{{ $record->name ?? '-' }}</td>
                                <td>{{ $record->description ?? '-' }}</td>

                                <td>
                                    {{ is_array($record->ip_filter) ? implode(',', $record->ip_filter) : ($record->ip_filter ?? '-') }}
                                </td>

                                <td>{{ $record->min_severity ?? '-' }}</td>

                                <td>
                                    {{ is_array($record->alert_types) ? implode(',', $record->alert_types) : ($record->alert_types ?? '-') }}
                                </td>

                                  <td>
                                    {{ $record->user_id ?? '-' }}
                                </td>
                                <td>
                                    {{ $record->is_active ? 'Yes' : 'No' }}
                                </td>

                                <td class="text-right">
                                    <div class="group-action-links" style="display:flex;gap:8px;justify-content:flex-end;">
                                        <a class="group-action-link edit group-edit-btn"
                                            href="javascript:void(0)"
                                            data-record='@json($record)'>
                                            <i class="ki-filled ki-notepad-edit text-base"></i>
                                        </a>

                                        <a class="group-action-link delete group-delete-btn"
                                            href="javascript:void(0)"
                                            data-id="{{ $record->id }}">
                                            <i class="ki-filled ki-trash text-base"></i>
                                        </a>
                                    </div>
                                </td>

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

{{-- MODAL --}}
<div class="kt-modal" data-kt-modal="true" id="group_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="group_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="group_form" class="flex flex-col gap-6" novalidate>
                @csrf
                <input type="hidden" name="record_id" id="group_record_id">

                {{-- NAME --}}
                <div class="flex flex-col gap-2">
                    <label class="text-sm font-semibold">Group 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">Description</label>
                    <div class="kt-input w-full">
                        <input name="description" id="description" rows="3"></textarea>
                    </div>
                </div>

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

                   <select name="user_id[]" id="user_id" class="w-full border rounded p-2" multiple>
                        <option value="">Select User</option>
                        @foreach($users as $user)
                        <option value="{{$user->id}}">{{$user->name}}</option>
                        @endforeach

                    </select>
                </div>

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

                    <select name="ip_filter[]" id="ip_filter" class="w-full border rounded p-2" multiple>
                        <option value="">Select</option>
                        <option value="hands">HANDS</option>
                        <option value="nrsp">NRSP</option>
                        <option value="safco">SAFCO</option>
                        <option value="srso">SRSO</option>
                        <option value="trdp">TRDP</option>
                    </select>
                </div>


                {{-- SEVERITY --}}
                <div class="flex flex-col gap-2">
                    <label class="text-sm font-semibold">Min Severity</label>
                    <select name="min_severity" id="min_severity" class="w-full border rounded p-2">
                        <option value="">Select</option>
                        <option value="green">Green</option>
                        <option value="yellow">Yellow</option>
                        <option value="amber">Amber</option>
                        <option value="red">Red</option>
                    </select>
                </div>

                {{-- ALERT TYPES --}}
                <div class="flex flex-col gap-2">
                    <label class="text-sm font-semibold">Alert Types</label>

                    <select name="alert_types[]" id="alert_types" class="w-full border rounded p-2">
                        <option value="">Select</option>
                        <!-- <option value="withdrawal">Withdrawal</option>
                        <option value="stage">Stage</option> -->
                        <option value="1st_tranche_withdrawl_date">First Withdrawl</option>
                        <option value="2nd_tranche_withdrawl_date">Second Withdrawl</option>
                        <option value="3rd_tranche_withdrawl_date">Third Withdrawl</option>
                        <option value="4th_tranche_withdrawl_date">Fourth Withdrawl</option>

                    </select>
                </div>

                {{-- SWITCHES --}}
                <div class="flex flex-col gap-2">
                    <label><input type="checkbox" name="notify_email" value="1" checked> Notify Email</label>
                    <label><input type="checkbox" name="notify_inapp" value="1" checked> Notify In-App</label>
                    <label><input type="checkbox" name="is_active" value="1" checked> Active</label>
                </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="group_submit_btn"
                        class="kt-btn kt-btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {

        // INIT SELECT2
        $('#ip_filter').select2({
            placeholder: 'Select IP Filter',
            width: '100%',
            dropdownParent: $('#group_modal')
        });

        $('#alert_types').select2({
            placeholder: 'Select Alert Types',
            width: '100%',
            dropdownParent: $('#group_modal')
        });

         $('#user_id').select2({
            placeholder: 'Select user',
            width: '100%',
            dropdownParent: $('#group_modal')
        });

    });

    // EDIT
    $(document).on('click', '.group-edit-btn', function() {

        const record = JSON.parse($(this).attr('data-record'));

        $('#group_record_id').val(record.id);
        $('#name').val(record.name);
        $('#description').val(record.description || '');

        $('#group_modal_title').text('Edit Group #' + record.id);
        $('#group_submit_btn').text('Update');

        // RESET
        $('#ip_filter').val(null).trigger('change');
        $('#alert_types').val(null).trigger('change');

        // SET VALUES
        $('#ip_filter').val(record.ip_filter || []).trigger('change');
        $('#alert_types').val(record.alert_types || []).trigger('change');

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

        $('input[name="notify_email"]').prop('checked', !!record.notify_email);
        $('input[name="notify_inapp"]').prop('checked', !!record.notify_inapp);
        $('input[name="is_active"]').prop('checked', !!record.is_active);

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

        if (window.KTModal?.getOrCreateInstance) {
            window.KTModal.getOrCreateInstance(modalEl).show();
        } else {
            $('#group_modal').addClass('is-open');
        }
    });
</script>