@extends('layouts.app')

@php
    $pageTitle = 'Edit Device';
    $pageHeading = 'Active Device Parameter';
    $pageDescription = 'Edit parameter device aktif berdasarkan field yang memang tersedia di `iclock_terminal`, sambil memisahkan info yang hanya layak dibaca.';
    $formatCommandPreview = function ($content, $limit = 84) {
        $full = trim(preg_replace('/\s+/', ' ', (string) $content));
        $short = \Illuminate\Support\Str::limit($full, $limit);

        return [
            'full' => $full,
            'short' => $short,
            'truncated' => $short !== $full,
        ];
    };
@endphp

@section('content')
    <style>
        .device-edit-hero {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            padding: 20px 22px !important;
            border: 0 !important;
            border-left: 0 !important;
            color: #fff;
            background:
                radial-gradient(circle at 88% 10%, rgba(255,255,255,0.18), transparent 25%),
                linear-gradient(135deg, #12365b, #075985 58%, #0e7490) !important;
            box-shadow: 0 7px 20px rgba(15, 52, 86, 0.22) !important;
        }

        .device-edit-hero h3,
        .device-edit-hero p {
            color: #fff !important;
        }

        .device-edit-hero p {
            color: rgba(255,255,255,0.78) !important;
        }

        .device-edit-hero-status {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 11px;
            border: 1px solid rgba(255,255,255,0.30);
            border-radius: 999px;
            background: rgba(255,255,255,0.14);
            color: #fff;
            font-size: 12px;
            font-weight: 800;
            white-space: nowrap;
        }

        .device-edit-hero-status::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: {{ (int) $device->status === 1 ? '#4ade80' : '#fbbf24' }};
            box-shadow: 0 0 0 4px rgba(255,255,255,0.12);
        }

        .device-edit-layout {
            display: grid !important;
            grid-template-columns: minmax(0, 1.75fr) minmax(320px, 0.75fr) !important;
            align-items: start;
            gap: 16px !important;
        }

        .device-edit-card {
            padding: 16px !important;
            border: 1px solid #94a3b8 !important;
            border-top: 4px solid #2563eb !important;
            box-shadow: 0 5px 16px rgba(15, 23, 42, 0.10) !important;
        }

        .device-edit-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            margin-bottom: 16px;
            padding-bottom: 14px;
            border-bottom: 1px solid #cbd5e1;
        }

        .device-edit-card-head h3 {
            margin: 0 0 4px !important;
            color: #0f2942 !important;
            font-weight: 800 !important;
        }

        .device-edit-actions {
            display: flex;
            gap: 7px;
            align-items: center;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .device-edit-action {
            min-height: 34px;
            padding: 7px 11px !important;
            border: 0 !important;
            border-radius: 6px !important;
            color: #fff !important;
            background: #1d4ed8 !important;
            box-shadow: 0 2px 5px rgba(15, 23, 42, 0.18);
            font-size: 12px;
            font-weight: 800 !important;
            text-decoration: none !important;
            cursor: pointer;
        }

        .device-edit-action--green {
            background: #047857 !important;
        }

        .device-edit-action--slate {
            background: #475569 !important;
        }

        .device-edit-action--light {
            color: #1e3a5f !important;
            background: #dbeafe !important;
            border: 1px solid #93c5fd !important;
            box-shadow: none;
        }

        .device-parameter-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
        }

        .device-parameter-field {
            display: grid;
            align-content: start;
            gap: 6px;
            min-width: 0;
            padding: 11px;
            border: 1px solid #dbe3ec;
            border-radius: 9px;
            background: #f8fafc;
        }

        .device-parameter-field > span:first-child {
            color: #0f2942;
            font-size: 12px;
            font-weight: 800 !important;
        }

        .device-parameter-field input,
        .device-parameter-field select {
            min-height: 39px;
            padding: 8px 10px !important;
            border-color: #94a3b8 !important;
            border-radius: 6px !important;
            background: #fff !important;
            font-weight: 600;
        }

        .device-parameter-help {
            display: -webkit-box;
            overflow: hidden;
            color: #64748b !important;
            font-size: 10px !important;
            line-height: 1.45 !important;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .device-save-row {
            position: sticky;
            bottom: 0;
            z-index: 3;
            display: flex;
            justify-content: flex-end;
            margin: 16px -16px -16px !important;
            padding: 12px 16px;
            border-top: 1px solid #cbd5e1;
            background: rgba(255,255,255,0.94);
            backdrop-filter: blur(8px);
        }

        .device-save-button {
            border-radius: 6px !important;
            padding: 10px 18px !important;
            background: #047857 !important;
            box-shadow: 0 3px 8px rgba(4, 120, 87, 0.25);
        }

        .device-readonly-card {
            position: sticky;
            top: 82px;
            padding: 16px !important;
            border: 1px solid #94a3b8 !important;
            border-top: 4px solid #0891b2 !important;
            box-shadow: 0 5px 16px rgba(15, 23, 42, 0.10) !important;
        }

        .device-readonly-card h3 {
            margin: 0 0 12px !important;
            color: #0f2942 !important;
            font-weight: 800 !important;
        }

        .device-readonly-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 7px;
        }

        .device-readonly-item {
            min-width: 0;
            padding: 9px 10px;
            border: 1px solid #dbe3ec;
            border-radius: 7px;
            background: #f8fafc;
        }

        .device-readonly-label {
            display: block;
            margin-bottom: 3px;
            color: #64748b;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

        .device-readonly-value {
            overflow: hidden;
            color: #0f172a;
            font-size: 11px;
            font-weight: 700;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .device-diagnostics {
            grid-column: 1 / -1;
            display: grid;
            gap: 10px;
        }

        .device-detail-panel {
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 2px 7px rgba(15, 23, 42, 0.06);
            overflow: hidden;
        }

        .device-detail-panel > summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 12px 14px;
            color: #0f2942;
            background: #f1f5f9;
            font-size: 13px;
            font-weight: 800;
            cursor: pointer;
            list-style: none;
        }

        .device-detail-panel > summary::after {
            content: '+';
            color: #2563eb;
            font-size: 18px;
            line-height: 1;
        }

        .device-detail-panel[open] > summary::after {
            content: '-';
        }

        .device-detail-panel-body {
            padding: 14px;
        }

        .device-detail-panel table thead th {
            color: #fff !important;
            background: #1e3a5f !important;
        }

        @media (max-width: 1280px) {
            .device-parameter-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 1050px) {
            .device-edit-layout {
                grid-template-columns: 1fr !important;
            }

            .device-readonly-card {
                position: static;
            }
        }

        @media (max-width: 720px) {
            .device-edit-hero,
            .device-edit-card-head {
                align-items: flex-start;
                flex-direction: column;
            }

            .device-edit-actions {
                justify-content: flex-start;
            }

            .device-parameter-grid,
            .device-readonly-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>

    <section class="hero device-edit-hero">
        <div>
            <h3 style="margin: 0 0 6px; font-size: 22px;">{{ $device->alias ?: $device->sn }}</h3>
            <p style="margin: 0; line-height: 1.6;">Kelola parameter operasional dan pantau snapshot perangkat.</p>
        </div>
        <span class="device-edit-hero-status">
            {{ (int) $device->status === 1 ? 'APPROVED' : 'PENDING' }} · {{ $device->sn }}
        </span>
    </section>

    @if (session('status'))
        <section class="hero" style="border-color: rgba(45, 106, 79, 0.24); background: rgba(45, 106, 79, 0.08);">
            <strong style="display: block; color: var(--green-deep); margin-bottom: 6px;">Berhasil disimpan</strong>
            <div>{{ session('status') }}</div>
        </section>
    @endif

    @if ((int) $device->status !== 1)
        <section class="hero" style="border-color: rgba(180, 83, 9, 0.22); background: rgba(180, 83, 9, 0.08);">
            <strong style="display: block; color: var(--amber); margin-bottom: 6px;">Pending Approval / Ping Blocked</strong>
            <div>Device baru tetap tercatat di registry, tetapi heartbeat, transaksi, data user, dan command sync sengaja ditahan sampai status device diubah menjadi <strong>Approved</strong>.</div>
        </section>
    @elseif (empty($device->first_sync_at))
        <section class="hero" style="border-color: rgba(183, 121, 31, 0.24); background: rgba(183, 121, 31, 0.08);">
            <strong style="display: block; color: var(--amber); margin-bottom: 6px;">Waiting First Sync</strong>
            <div>Device sudah approved, tetapi feedback pertama dari mesin belum masuk ke database. Setelah mesin kirim `INFO`, `ATTLOG`, `OPERLOG`, atau `USERINFO`, status ini akan berubah menjadi synced.</div>
        </section>
    @endif

    @if ($errors->any())
        <section class="hero" style="border-color: rgba(180, 35, 24, 0.2); background: rgba(180, 35, 24, 0.06);">
            <strong style="display: block; color: var(--red); margin-bottom: 8px;">Beberapa input perlu diperbaiki</strong>
            <ul style="margin: 0; padding-left: 18px; color: var(--ink);">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </section>
    @endif

    <section class="grid device-edit-layout">
        <div class="table-card device-edit-card">
            <div class="device-edit-card-head">
                <div>
                    <h3 style="margin-bottom: 6px;">Edit Parameter</h3>
                    <div class="muted" style="font-size:12px;">Hanya field operasional yang aman untuk diperbarui.</div>
                </div>
                <div class="device-edit-actions">
                    <form method="POST" action="{{ route('devices.pull-users', $device) }}">
                        @csrf
                        <button
                            type="submit"
                            {{ (int) $device->status !== 1 ? 'disabled' : '' }}
                            class="device-edit-action device-edit-action--green"
                        >
                            Pull User
                        </button>
                    </form>
                    <a
                        href="{{ route('devices.users.export.xlsx', $device) }}"
                        class="device-edit-action device-edit-action--slate"
                    >
                        Export User
                    </a>
                    <a href="{{ route('employees.index', ['device_filter' => $device->sn]) }}" class="device-edit-action">Lihat User</a>
                    <a href="{{ route('devices.index') }}" class="device-edit-action device-edit-action--light">Kembali</a>
                </div>
            </div>

            <form method="POST" action="{{ route('devices.update', $device) }}">
                @csrf
                @method('PUT')

                <div class="device-parameter-grid">
                    @foreach ($editableFields as $field => $meta)
                        <label class="device-parameter-field">
                            <span style="font-weight: 700;">{{ $meta['label'] }}</span>

                            @if (($meta['type'] ?? 'text') === 'select')
                                <select
                                    name="{{ $field }}"
                                    style="width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);"
                                >
                                    @foreach (($meta['options'] ?? []) as $optionValue => $optionLabel)
                                        <option value="{{ $optionValue }}" @selected((string) old($field, $device->{$field}) === (string) $optionValue)>
                                            {{ $optionLabel }}
                                        </option>
                                    @endforeach
                                </select>
                            @else
                                <input
                                    type="{{ $meta['type'] ?? 'text' }}"
                                    name="{{ $field }}"
                                    value="{{ old($field, $field === 'terminal_tz' ? ($device->{$field} ?? 7) : $device->{$field}) }}"
                                    style="width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);"
                                >
                            @endif

                            <span class="muted device-parameter-help" title="{{ $meta['help'] }}{{ ! empty($meta['column']) ? ' Kolom: '.$meta['column'].'.' : '' }}">
                                {{ $meta['help'] }}
                                @if (! empty($meta['column']))
                                    Kolom: <code>{{ $meta['column'] }}</code>.
                                @endif
                            </span>
                        </label>
                    @endforeach
                </div>

                <div class="device-save-row">
                    <button
                        type="submit"
                        {{ (int) $device->status !== 1 ? 'disabled' : '' }}
                        class="device-save-button"
                        style="border: 0; border-radius: 999px; padding: 12px 18px; font-weight: 800; cursor: pointer; color: #fffaf2; background: linear-gradient(135deg, var(--green-deep), var(--green));"
                    >
                        Simpan Parameter
                    </button>
                </div>
            </form>
        </div>

        <div>
            <section class="table-card device-readonly-card">
                <h3>Snapshot Device</h3>
                <div class="device-readonly-grid">
                    @foreach ($readOnlyFields as $field => $label)
                        <div class="device-readonly-item" title="{{ $label }}: {{ $device->{$field} !== null && $device->{$field} !== '' ? $device->{$field} : '-' }}">
                            <span class="device-readonly-label">{{ $label }}</span>
                            <div class="device-readonly-value">{{ $device->{$field} !== null && $device->{$field} !== '' ? $device->{$field} : '-' }}</div>
                        </div>
                    @endforeach
                </div>
            </section>
        </div>

        <div class="device-diagnostics">
            <details class="device-detail-panel">
                <summary>Basis Mapping dan Catatan Teknis</summary>
                <div class="device-detail-panel-body">
                <div class="muted" style="line-height: 1.7;">
                    <div><strong style="color: var(--ink);">PDF PullSDK:</strong> kelompok terminal/device parameter dipakai sebagai acuan bahwa parameter waktu, nama terminal, mode autentikasi, dan kontrol reboot memang masuk keluarga parameter device.</div>
                    <div style="margin-top: 10px;"><strong style="color: var(--ink);">Schema database:</strong> hanya field yang benar-benar ada pada `iclock_terminal` yang dibuat editable agar tidak bikin admin mengubah parameter fiktif.</div>
                    <div style="margin-top: 10px;"><strong style="color: var(--ink);">Read only:</strong> versi firmware, platform, stamp counter, dan statistik biometric tetap ditampilkan sebagai data report perangkat.</div>
                    <div style="margin-top: 10px;"><strong style="color: var(--ink);">Pull user:</strong> tombol <code>Pull User Dari Mesin</code> akan mengirim command <code>QUERY USERINFO</code> ke queue. Setelah device mengambil command itu, server akan menyimpan payload user/template yang masuk ke <code>personnel_employee</code> dan <code>iclock_biodata</code>.</div>
                </div>
                </div>
            </details>

            <details class="device-detail-panel">
                <summary>Bootstrap Sync</summary>
                <div class="device-detail-panel-body">
                <div class="muted" style="margin-bottom: 12px; line-height: 1.7;">
                    Setelah approve pertama, device wajib melewati bootstrap command <code>INFO</code> dan <code>CHECK</code>.
                    Untuk first connect, <code>QUERY USERINFO</code> juga ikut dikirim sekali untuk mulai menarik master user dari mesin.
                </div>
                <table>
                    <thead>
                        <tr>
                            <th>Command</th>
                            <th>Status</th>
                            <th>Queued</th>
                            <th>Sent</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($bootstrapStatus as $row)
                            @php($preview = $formatCommandPreview($row['content'], 64))
                            <tr>
                                <td>
                                    <div title="{{ $preview['full'] }}" style="max-width: 420px;">
                                        <code style="display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ $preview['short'] }}</code>
                                    </div>
                                    @if ($preview['truncated'])
                                        <details style="margin-top: 8px;">
                                            <summary style="cursor: pointer; color: var(--green-deep); font-size: 12px; font-weight: 700;">Lihat full command</summary>
                                            <code style="display: block; margin-top: 8px; white-space: pre-wrap; word-break: break-word;">{{ $preview['full'] }}</code>
                                        </details>
                                    @endif
                                </td>
                                <td><span class="status {{ $row['class'] }}">{{ $row['label'] }}</span></td>
                                <td>{{ $row['command']?->commit_time ?: '-' }}</td>
                                <td>{{ $row['command']?->transfer_time ?: '-' }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                </div>
            </details>

            <details class="device-detail-panel">
                <summary>Command History · {{ $commandHistory->count() }} data terbaru</summary>
                <div class="device-detail-panel-body">
                <table>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Command</th>
                            <th>Queued</th>
                            <th>Sent</th>
                            <th>Result</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($commandHistory as $command)
                            @php($preview = $formatCommandPreview($command->content, 78))
                            <tr>
                                <td>{{ $command->id }}</td>
                                <td>
                                    <div title="{{ $preview['full'] }}" style="max-width: 560px;">
                                        <code style="display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ $preview['short'] }}</code>
                                    </div>
                                    @if ($preview['truncated'])
                                        <details style="margin-top: 8px;">
                                            <summary style="cursor: pointer; color: var(--green-deep); font-size: 12px; font-weight: 700;">Lihat full command</summary>
                                            <code style="display: block; margin-top: 8px; white-space: pre-wrap; word-break: break-word;">{{ $preview['full'] }}</code>
                                        </details>
                                    @endif
                                    @if ($command->context_label)
                                        <div style="margin-top: 6px;">
                                            <span class="status pending">{{ $command->context_label }}</span>
                                        </div>
                                    @endif
                                </td>
                                <td>{{ $command->commit_time }}</td>
                                <td>{{ $command->transfer_time ?: '-' }}</td>
                                <td>
                                    <span class="status {{ $command->result_class }}">{{ $command->result_label }}</span>
                                    @if ($command->return_time)
                                        <div class="muted" style="margin-top: 4px; font-size: 12px;">{{ $command->return_time }}</div>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="5" class="muted">Belum ada history command untuk device ini.</td></tr>
                        @endforelse
                    </tbody>
                </table>
                </div>
            </details>
        </div>
    </section>
@endsection