@extends('layouts.super-admin')

@section('title', 'Edit Device')
@section('page-title', 'Edit Device')
@section('page-description', 'Perbarui informasi perangkat')

@section('content')
<div class="device-edit-container">

    <!-- Back Nav -->
    <div class="back-nav">
        <a href="/super-admin/devices/{{ $device->id }}" class="btn-back">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M19 12H5M12 5l-7 7 7 7"/>
            </svg>
            Kembali ke Detail Device
        </a>
    </div>

    @if(session('success'))
        <div class="alert alert-success">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>
            </svg>
            {{ session('success') }}
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
            </svg>
            <ul style="margin:0; padding-left:1rem;">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="/super-admin/devices/{{ $device->id }}" class="edit-form">
        @csrf
        @method('PUT')

        <div class="form-grid">

            <!-- Informasi Utama -->
            <div class="form-card">
                <div class="form-card-header">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>
                    </svg>
                    <h3>Informasi Utama</h3>
                </div>
                <div class="form-body">

                    <div class="form-group">
                        <label for="name">Nama Device <span class="required">*</span></label>
                        <input type="text" id="name" name="name"
                            value="{{ old('name', $device->name) }}"
                            class="form-input @error('name') is-error @enderror"
                            placeholder="Contoh: Sensor Gempa Bandung-01"
                            required>
                        @error('name')
                            <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="type">Tipe Device <span class="required">*</span></label>
                            <select id="type" name="type" class="form-input @error('type') is-error @enderror" required>
                                <option value="">-- Pilih Tipe --</option>
                                @foreach(['sensor' => 'Sensor', 'gateway' => 'Gateway', 'actuator' => 'Actuator'] as $val => $label)
                                    <option value="{{ $val }}" {{ old('type', $device->type) === $val ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                            @error('type')
                                <span class="form-error">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="status">Status <span class="required">*</span></label>
                            <select id="status" name="status" class="form-input @error('status') is-error @enderror" required>
                                <option value="">-- Pilih Status --</option>
                                @foreach(['active' => 'Active', 'online' => 'Online', 'offline' => 'Offline', 'inactive' => 'Inactive', 'pending' => 'Pending', 'maintenance' => 'Maintenance'] as $val => $label)
                                    <option value="{{ $val }}" {{ old('status', $device->status) === $val ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                            @error('status')
                                <span class="form-error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="user_id">Pemilik Device <span class="required">*</span></label>
                        <select id="user_id" name="user_id" class="form-input @error('user_id') is-error @enderror" required>
                            <option value="">-- Pilih User --</option>
                            @foreach($users as $user)
                                <option value="{{ $user->id }}"
                                    {{ old('user_id', $device->user_id) == $user->id ? 'selected' : '' }}>
                                    {{ $user->name }} &lt;{{ $user->email }}&gt;
                                </option>
                            @endforeach
                        </select>
                        @error('user_id')
                            <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="description">Deskripsi</label>
                        <textarea id="description" name="description" rows="3"
                            class="form-input @error('description') is-error @enderror"
                            placeholder="Deskripsi singkat tentang device ini...">{{ old('description', $device->description ?? '') }}</textarea>
                        @error('description')
                            <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>

                </div>
            </div>

            <!-- Lokasi -->
            <div class="form-card">
                <div class="form-card-header">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
                    </svg>
                    <h3>Lokasi</h3>
                </div>
                <div class="form-body">

                    <div class="form-group">
                        <label for="location">Nama Lokasi</label>
                        <input type="text" id="location" name="location"
                            value="{{ old('location', $device->location ?? '') }}"
                            class="form-input @error('location') is-error @enderror"
                            placeholder="Contoh: Bandung, Jawa Barat">
                        @error('location')
                            <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="latitude">Latitude</label>
                            <input type="number" id="latitude" name="latitude" step="0.000001"
                                value="{{ old('latitude', $device->latitude ?? '') }}"
                                class="form-input @error('latitude') is-error @enderror"
                                placeholder="-6.9175">
                            @error('latitude')
                                <span class="form-error">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="longitude">Longitude</label>
                            <input type="number" id="longitude" name="longitude" step="0.000001"
                                value="{{ old('longitude', $device->longitude ?? '') }}"
                                class="form-input @error('longitude') is-error @enderror"
                                placeholder="107.6191">
                            @error('longitude')
                                <span class="form-error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <!-- Preview koordinat -->
                    <div class="coords-preview" id="coordsPreview" style="display:none">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
                        </svg>
                        <span id="coordsText">—</span>
                    </div>

                </div>
            </div>

            <!-- Info Read-only -->
            <div class="form-card readonly-card">
                <div class="form-card-header">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                        <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                    </svg>
                    <h3>Informasi Sistem</h3>
                </div>
                <div class="form-body">
                    <div class="readonly-grid">
                        <div class="readonly-item">
                            <span class="readonly-label">Device ID</span>
                            <code class="readonly-val">{{ $device->device_id }}</code>
                        </div>
                        <div class="readonly-item">
                            <span class="readonly-label">API Key</span>
                            <code class="readonly-val api-key-val" id="apiKeyVal">{{ $device->api_key }}</code>
                            <button type="button" class="btn-copy" onclick="copyApiKey()">Salin</button>
                        </div>
                        <div class="readonly-item">
                            <span class="readonly-label">Dibuat</span>
                            <span class="readonly-val">{{ $device->created_at?->format('d M Y, H:i') }}</span>
                        </div>
                        <div class="readonly-item">
                            <span class="readonly-label">Diperbarui</span>
                            <span class="readonly-val">{{ $device->updated_at?->format('d M Y, H:i') }}</span>
                        </div>
                    </div>
                    <div class="regenerate-section">
                        <p class="regen-note">Regenerate API Key akan membuat key baru dan menonaktifkan key lama.</p>
                        <a href="#" onclick="confirmRegenerate(event)" class="btn-regen">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M23 4v6h-6"/><path d="M1 20v-6h6"/>
                                <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
                            </svg>
                            Regenerate API Key
                        </a>
                        <form id="regenForm" method="POST" action="/super-admin/devices/{{ $device->id }}/regenerate-key" style="display:none">
                            @csrf
                        </form>
                    </div>
                </div>
            </div>

        </div>

        <!-- Actions -->
        <div class="form-actions">
            <a href="/super-admin/devices/{{ $device->id }}" class="btn-cancel">Batal</a>
            <button type="submit" class="btn-save">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
                    <polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/>
                </svg>
                Simpan Perubahan
            </button>
        </div>

    </form>
</div>

<script>
// Koordinat preview
function updateCoordsPreview() {
    const lat = document.getElementById('latitude').value;
    const lng = document.getElementById('longitude').value;
    const preview = document.getElementById('coordsPreview');
    const text    = document.getElementById('coordsText');
    if (lat && lng) {
        text.textContent = `${parseFloat(lat).toFixed(6)}, ${parseFloat(lng).toFixed(6)}`;
        preview.style.display = 'flex';
    } else {
        preview.style.display = 'none';
    }
}
document.getElementById('latitude').addEventListener('input', updateCoordsPreview);
document.getElementById('longitude').addEventListener('input', updateCoordsPreview);
updateCoordsPreview();

// Copy API Key
function copyApiKey() {
    const key = document.getElementById('apiKeyVal').textContent.trim();
    navigator.clipboard.writeText(key).then(() => {
        const btn = document.querySelector('.btn-copy');
        btn.textContent = 'Tersalin!';
        setTimeout(() => btn.textContent = 'Salin', 2000);
    });
}

// Regenerate confirm
function confirmRegenerate(e) {
    e.preventDefault();
    if (confirm('API Key lama akan tidak berlaku. Lanjutkan?')) {
        document.getElementById('regenForm').submit();
    }
}
</script>

<style>
.device-edit-container { max-width: 1100px; margin: 0 auto; }

/* Back nav */
.back-nav { margin-bottom: 1rem; }
.btn-back {
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: #6b7280; font-size: 0.85rem; text-decoration: none; transition: color .2s;
}
.btn-back:hover { color: #dc2626; }

/* Alert */
.alert {
    display: flex; align-items: flex-start; gap: 0.6rem;
    padding: 0.85rem 1rem; border-radius: 10px; margin-bottom: 1.25rem; font-size: 0.85rem;
}
.alert svg { margin-top: 1px; flex-shrink: 0; }
.alert-success { background: #d1fae5; color: #065f46; }
.alert-danger  { background: #fee2e2; color: #991b1b; }

/* Form grid */
.form-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1rem; margin-bottom: 1rem;
}
.form-grid .form-card:first-child { grid-column: span 2; }

/* Cards */
.form-card {
    background: white; border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08); overflow: hidden;
}
.form-card-header {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.85rem 1.25rem; border-bottom: 1px solid #f3f4f6;
    background: #fafafa;
}
.form-card-header svg { color: #dc2626; }
.form-card-header h3 { font-size: 0.9rem; font-weight: 700; color: #111; margin: 0; }
.form-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }

/* Form elements */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group label { font-size: 0.82rem; font-weight: 600; color: #374151; }
.required { color: #dc2626; }
.form-input {
    padding: 0.55rem 0.85rem; border: 1px solid #e5e7eb; border-radius: 8px;
    font-size: 0.875rem; color: #111; transition: border-color .2s, box-shadow .2s;
    background: white; width: 100%; box-sizing: border-box;
}
.form-input:focus { outline: none; border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.08); }
.form-input.is-error { border-color: #dc2626; }
select.form-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; }
textarea.form-input { resize: vertical; min-height: 80px; }
.form-error { font-size: 0.75rem; color: #dc2626; }

/* Coords preview */
.coords-preview {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.75rem; background: #fef2f2; border-radius: 8px;
    font-size: 0.78rem; color: #dc2626;
}

/* Readonly card */
.readonly-grid { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.readonly-item { display: flex; flex-direction: column; gap: 0.2rem; }
.readonly-label { font-size: 0.75rem; color: #9ca3af; font-weight: 500; }
.readonly-val { font-size: 0.82rem; color: #111; font-weight: 600; }
code.readonly-val {
    font-family: monospace; font-size: 0.78rem;
    background: #f3f4f6; padding: 0.25rem 0.5rem; border-radius: 6px;
    word-break: break-all;
}
.api-key-val { display: block; }
.btn-copy {
    margin-top: 0.3rem; align-self: flex-start;
    padding: 0.2rem 0.65rem; background: #f3f4f6; border: none;
    border-radius: 6px; font-size: 0.72rem; cursor: pointer; transition: background .2s;
}
.btn-copy:hover { background: #e5e7eb; }

/* Regenerate */
.regenerate-section { border-top: 1px solid #f3f4f6; padding-top: 1rem; }
.regen-note { font-size: 0.75rem; color: #9ca3af; margin: 0 0 0.6rem; }
.btn-regen {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.9rem; border: 1px solid #fca5a5; border-radius: 8px;
    color: #dc2626; font-size: 0.8rem; text-decoration: none; transition: background .2s;
}
.btn-regen:hover { background: #fef2f2; }

/* Form actions */
.form-actions {
    display: flex; justify-content: flex-end; align-items: center;
    gap: 0.75rem; padding: 1rem 0;
}
.btn-cancel {
    padding: 0.55rem 1.25rem; border: 1px solid #e5e7eb; border-radius: 8px;
    color: #6b7280; font-size: 0.875rem; text-decoration: none; transition: border-color .2s;
}
.btn-cancel:hover { border-color: #9ca3af; color: #374151; }
.btn-save {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 1.5rem; background: #dc2626; color: white;
    border: none; border-radius: 8px; font-size: 0.875rem; font-weight: 600;
    cursor: pointer; transition: background .2s;
}
.btn-save:hover { background: #b91c1c; }

/* Responsive */
@media (max-width: 768px) {
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .form-card:first-child { grid-column: auto; }
    .form-row { grid-template-columns: 1fr; }
}
</style>
@endsection