@php
    $thresholdRecords = collect($thresholdRecords ?? [
        (object) ['id' => 1, 'username' => 'Ali Khan', 'file_name' => 'financial_report_march.xlsx', 'created_at' => '2024-03-12', 'status' => 'completed'],
        (object) ['id' => 2, 'username' => 'Sara Ahmed', 'file_name' => 'survey_data.csv', 'created_at' => '2024-03-10', 'status' => 'processing'],
        (object) ['id' => 3, 'username' => 'Usman Tariq', 'file_name' => 'baseline_data.xlsx', 'created_at' => '2024-03-08', 'status' => 'failed'],
        (object) ['id' => 4, 'username' => 'Hina Malik', 'file_name' => 'monitoring_report.xlsx', 'created_at' => '2024-03-05', 'status' => 'completed'],
    ]);
@endphp

<style>
    #threshold_modal .threshold-from-day {
        background-color: #f8fafc;
        color: #64748b;
        cursor: not-allowed;
    }

    #threshold_modal .threshold-footer-btn {
        height: 40px;
        min-width: 98px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        padding: 0 18px;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        box-shadow: none;
        outline: none;
    }

    #threshold_modal .threshold-cancel-btn {
        border: 1px solid #e2e8f0;
        background: #e2e8f0;
        color: #0f172a;
    }

    #threshold_modal .threshold-save-btn {
        border: 1px solid #2563eb;
        background: #2563eb;
        color: #fff;
    }

    #threshold_modal .threshold-save-btn:hover {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }
</style>

<div class="threshold-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="threshold_search"
                    data-kt-datatable-search="#kt_datatable_threshold"
                    placeholder="Search Threshold"
                    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="threshold_add_btn"
                data-kt-modal-toggle="#threshold_modal"
                style="background-color:#2563eb;color:#fff;border-color:#2563eb;"
            >
                <i class="ki-filled ki-plus"></i>
                Add New
            </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="threshold_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_threshold">
                        <thead>
                            <tr>
                                <th>SR</th>
                                <th>Username</th>
                                <th>File Name</th>
                                <th>Created At</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="threshold_tbody">
                            @forelse ($thresholdRecords as $index => $record)
                                @php
                                    $status = strtolower((string) ($record->status ?? ''));
                                    $statusStyles = match ($status) {
                                        'completed' => 'background:#dcfce7;color:#15803d;',
                                        'processing' => 'background:#dbeafe;color:#1d4ed8;',
                                        'failed' => 'background:#fee2e2;color:#dc2626;',
                                        default => 'background:#f3f4f6;color:#4b5563;',
                                    };
                                @endphp
                                <tr data-id="{{ $record->id ?? $index + 1 }}" data-record='@json($record)'>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $record->username ?? '-' }}</td>
                                    <td>
                                        <a href="javascript:void(0)" class="text-blue-600">
                                            {{ $record->file_name ?? '-' }}
                                        </a>
                                    </td>
                                    <td>{{ $record->created_at ?? '-' }}</td>
                                    <td>
                                        <span style="{{ $statusStyles }}display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;">
                                            <span style="width:5px;height:5px;border-radius:999px;background:currentColor;display:inline-block;"></span>
                                            {{ $status ?: 'unknown' }}
                                        </span>
                                    </td>
                                    <td class="text-right">
                                        <div class="component1-action-links">
                                            <a class="component1-action-link edit threshold-edit-btn" href="javascript:void(0)" data-record='@json($record)' aria-label="Edit record">
                                                <i class="ki-filled ki-notepad-edit text-base"></i>
                                            </a>
                                            <a class="component1-action-link threshold-view-btn" href="javascript:void(0)" data-record='@json($record)' aria-label="View record">
                                                <i class="ki-filled ki-eye text-base"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center py-8 text-muted-foreground">
                                        No threshold records found. <a href="javascript:void(0)" onclick="document.getElementById('threshold_add_btn').click()">Add one now</a>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="kt-modal" data-kt-modal="true" id="threshold_modal" data-kt-modal-backdrop-static="true">
    <div class="kt-modal-content max-w-[1080px] top-[2%] max-h-[96vh] overflow-hidden">
        <div style="background:#2563eb;color:#fff;padding:22px 34px;">
            <div class="flex items-start justify-between gap-4">
                <div>
                    <h3 class="kt-modal-title text-xl font-semibold text-white" id="threshold_modal_title">Add alarm rule</h3>
                    <p class="mt-1 text-xs text-blue-100">Configure zone thresholds and rule parameters for real-time monitoring.</p>
                </div>
                <button class="kt-btn kt-btn-sm kt-btn-icon shrink-0" data-kt-modal-dismiss="true" style="color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22);">
                    <i class="ki-filled ki-cross"></i>
                </button>
            </div>
        </div>

        <div class="kt-modal-body p-0 overflow-y-auto bg-white">
            <form id="threshold_form" class="flex flex-col">
                @csrf
                <input type="hidden" name="id" id="threshold_id">

                <div class="p-8 flex flex-col gap-8">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="flex flex-col gap-2">
                            <label class="text-sm font-semibold text-gray-700">Rule / stage name</label>
                            <input type="text" name="rule_stage_name" id="threshold_rule_stage_name" placeholder="e.g. Critical Threshold Alpha" class="kt-input w-full form-control" />
                            <p class="text-xs text-gray-400">Unique identifier for this specific alert stage.</p>
                            <div class="invalid-feedback" style="display: none;"></div>
                        </div>

                        <div class="flex flex-col gap-2">
                            <label class="text-sm font-semibold text-gray-700">Applicable stage / module</label>
                            <select name="applicable_module" id="threshold_applicable_module" class="kt-input w-full form-control">
                                <option value="">Select Module</option>
                                <option value="component1">Component 1</option>
                                <option value="component2">Component 2</option>
                                <option value="component3">Component 3</option>
                                <option value="component4">Component 4</option>
                                <option value="baseline">Baseline</option>
                            </select>
                            <p class="text-xs text-gray-400">The functional module where this rule applies.</p>
                            <div class="invalid-feedback" style="display: none;"></div>
                        </div>

                        <div class="flex flex-col gap-2">
                            <label class="text-sm font-semibold text-gray-700">Stage key</label>
                            <input type="text" name="stage_key" id="threshold_stage_key" value="CRIT_STAGE_01" class="kt-input w-full form-control" />
                            <p class="text-xs text-gray-400">System key for API and log references.</p>
                            <div class="invalid-feedback" style="display: none;"></div>
                        </div>
                    </div>

                    <div class="border-t border-gray-200"></div>

                    <div class="flex items-center justify-between gap-4">
                        <div>
                            <h4 class="text-sm font-semibold text-gray-800">Rule Status</h4>
                            <p class="text-xs text-gray-500">Determine if this rule is currently evaluating live data.</p>
                        </div>
                        <label class="inline-flex items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="is_active" id="threshold_is_active" value="1" checked class="sr-only peer">
                            <span class="relative w-12 h-7 rounded-full bg-gray-300 peer-checked:bg-blue-600 transition-colors after:content-[''] after:absolute after:top-1 after:left-1 after:w-5 after:h-5 after:bg-white after:rounded-full after:transition-transform peer-checked:after:translate-x-5"></span>
                            <span class="text-sm font-medium text-gray-700">Active</span>
                        </label>
                    </div>

                    <div class="border-t border-gray-200"></div>

                    <div class="flex flex-col gap-4">
                        <div class="flex items-center justify-between">
                            <h4 class="text-sm font-semibold uppercase tracking-wide text-gray-800">Zone Thresholds (Days)</h4>
                            <i class="ki-filled ki-information-2 text-gray-400"></i>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-5">
                            <div class="rounded-lg border border-gray-200 overflow-hidden bg-white">
                                <div class="flex items-center justify-between px-4 py-3 text-xs font-semibold uppercase text-white" style="background:#168555;">
                                    <span>Green</span>
                                    <i class="ki-filled ki-check-circle"></i>
                                </div>
                                <div class="p-4 flex flex-col gap-4">
                                    <div class="flex flex-col gap-2">
                                        <label class="text-xs font-semibold uppercase text-gray-500">From Day</label>
                                        <input type="number" name="green_from_day" id="threshold_green_from_day" value="0" class="kt-input w-full form-control threshold-from-day" disabled>
                                    </div>
                                    <div class="flex flex-col gap-2">
                                        <label class="text-xs font-semibold uppercase text-gray-500">Max Days</label>
                                        <input type="number" name="green_max_days" id="threshold_green_max_days" value="0" min="0" class="kt-input w-full form-control threshold-max-day" data-next-from="#threshold_yellow_from_day">
                                    </div>
                                </div>
                            </div>

                            <div class="rounded-lg border border-gray-200 overflow-hidden bg-white">
                                <div class="flex items-center justify-between px-4 py-3 text-xs font-semibold uppercase text-gray-900" style="background:#ffd92e;">
                                    <span>Yellow</span>
                                    <i class="ki-filled ki-information-2"></i>
                                </div>
                                <div class="p-4 flex flex-col gap-4">
                                    <div class="flex flex-col gap-2">
                                        <label class="text-xs font-semibold uppercase text-gray-500">From Day</label>
                                        <input type="number" name="yellow_from_day" id="threshold_yellow_from_day" value="0" class="kt-input w-full form-control threshold-from-day" disabled>
                                    </div>
                                    <div class="flex flex-col gap-2">
                                        <label class="text-xs font-semibold uppercase text-gray-500">Max Days</label>
                                        <input type="number" name="yellow_max_days" id="threshold_yellow_max_days" value="0" min="0" class="kt-input w-full form-control threshold-max-day" data-next-from="#threshold_amber_from_day">
                                    </div>
                                </div>
                            </div>

                            <div class="rounded-lg border border-gray-200 overflow-hidden bg-white">
                                <div class="flex items-center justify-between px-4 py-3 text-xs font-semibold uppercase text-white" style="background:#f97316;">
                                    <span>Amber</span>
                                    <i class="ki-filled ki-warning"></i>
                                </div>
                                <div class="p-4 flex flex-col gap-4">
                                    <div class="flex flex-col gap-2">
                                        <label class="text-xs font-semibold uppercase text-gray-500">From Day</label>
                                        <input type="number" name="amber_from_day" id="threshold_amber_from_day" value="0" class="kt-input w-full form-control threshold-from-day" disabled>
                                    </div>
                                    <div class="flex flex-col gap-2">
                                        <label class="text-xs font-semibold uppercase text-gray-500">Max Days</label>
                                        <input type="number" name="amber_max_days" id="threshold_amber_max_days" value="0" min="0" class="kt-input w-full form-control threshold-max-day" data-next-from="#threshold_red_from_day">
                                    </div>
                                </div>
                            </div>

                            <div class="rounded-lg border border-gray-200 overflow-hidden bg-white">
                                <div class="flex items-center justify-between px-4 py-3 text-xs font-semibold uppercase text-white" style="background:#ef2929;">
                                    <span>Red</span>
                                    <i class="ki-filled ki-information-2"></i>
                                </div>
                                <div class="p-4 flex flex-col gap-4">
                                    <div class="flex flex-col gap-2">
                                        <label class="text-xs font-semibold uppercase text-gray-500">From Day</label>
                                        <input type="number" name="red_from_day" id="threshold_red_from_day" value="0" class="kt-input w-full form-control threshold-from-day" disabled>
                                    </div>
                                    <p class="text-center text-xs text-gray-400 py-6">No upper limit</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="border-t border-gray-200"></div>

                    <div class="flex flex-col gap-2">
                        <label class="text-sm font-semibold text-gray-700">Internal notes &amp; Context</label>
                        <textarea name="internal_notes" id="threshold_internal_notes" rows="5" class="kt-input w-full form-control min-h-[112px]" placeholder="Provide context for why these specific thresholds were chosen..."></textarea>
                        <div class="invalid-feedback" style="display: none;"></div>
                    </div>
                </div>

                <div class="flex justify-end items-center gap-3 px-8 py-5 border-t border-gray-200 bg-gray-50 modal-btns">
                    <button type="button" class="threshold-footer-btn threshold-cancel-btn" data-kt-modal-dismiss="true">
                        Cancel
                    </button>

                    <button type="submit" class="threshold-footer-btn threshold-save-btn" id="threshold_submit_btn">
                        Save
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
$(document).ready(function () {
    const $table = $('#kt_datatable_threshold');
    let dt = null;

    if ($table.length && $.fn.DataTable && !$.fn.DataTable.isDataTable($table)) {
        $table.find('tbody td[colspan]').closest('tr').remove();

        dt = $table.DataTable({
            dom: 'rt<"flex justify-between items-center flex-wrap p-5 border-t border-input"<"flex items-center gap-2"li>p>',
            pageLength: 10,
            lengthMenu: [10, 25, 50, 100],
            autoWidth: false,
            language: {
                lengthMenu: "Show _MENU_",
                info: "Showing _START_ to _END_ of _TOTAL_ entries",
                emptyTable: "No records found.",
            }
        });
    }

    const searchInput = document.querySelector('[data-kt-datatable-search="#kt_datatable_threshold"]');
    searchInput?.addEventListener('keyup', function () {
        if (!dt) {
            return;
        }

        dt.search(this.value).draw();
    });

    const greenMax = document.getElementById('threshold_green_max_days');
    const yellowMax = document.getElementById('threshold_yellow_max_days');
    const amberMax = document.getElementById('threshold_amber_max_days');
    const yellowFrom = document.getElementById('threshold_yellow_from_day');
    const amberFrom = document.getElementById('threshold_amber_from_day');
    const redFrom = document.getElementById('threshold_red_from_day');

    function nextFromValue(maxInput) {
        const value = Number.parseInt(maxInput?.value || '0', 10);
        return Number.isFinite(value) && value >= 0 ? value + 1 : 0;
    }

    function syncThresholdDays() {
        if (yellowFrom) {
            yellowFrom.value = nextFromValue(greenMax);
        }

        if (amberFrom) {
            amberFrom.value = nextFromValue(yellowMax);
        }

        if (redFrom) {
            redFrom.value = nextFromValue(amberMax);
        }
    }

    [greenMax, yellowMax, amberMax].forEach((input) => {
        input?.addEventListener('input', syncThresholdDays);
        input?.addEventListener('change', syncThresholdDays);
    });

    syncThresholdDays();
});
</script>