@extends('layouts.app')
@section('title', 'Device Settings')
@section('page-title', 'Device')

@section('content')
<div class="page-header">
    <h1>Device Settings</h1>
    <p>Configure what your ESP32 displays and how it behaves</p>
</div>

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

    <div class="row g-4">

        {{-- ─── Left Column ────────────────────────────────── --}}
        <div class="col-lg-6">
            <div class="glass-card h-100">
                <h6 class="fw-700 mb-1">
                    <i class="bi bi-person-badge-fill me-2" style="color:#0d6efd;"></i>Display Content
                </h6>
                <p class="mb-4" style="font-size:0.8rem;color:#8b949e;">Text shown on the ESP32 display</p>

                {{-- Device Name --}}
                <div class="mb-3">
                    <label for="name" class="form-label">Device Name</label>
                    <input type="text" id="name" name="name"
                           class="form-control @error('name') is-invalid @enderror"
                           value="{{ old('name', $device->name) }}"
                           placeholder="e.g. Ebad's Desk" maxlength="100" required>
                    @error('name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Today's Goal --}}
                <div class="mb-3">
                    <label for="goal" class="form-label">Today's Goal</label>
                    <input type="text" id="goal" name="goal"
                           class="form-control @error('goal') is-invalid @enderror"
                           value="{{ old('goal', $device->goal) }}"
                           placeholder="e.g. Finish Laravel project" maxlength="255">
                    @error('goal')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Weather --}}
                <div class="mb-3">
                    <label for="weather" class="form-label">Weather</label>
                    <input type="text" id="weather" name="weather"
                           class="form-control @error('weather') is-invalid @enderror"
                           value="{{ old('weather', $device->weather) }}"
                           placeholder="e.g. 37°C Sunny" maxlength="50">
                    @error('weather')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Quote --}}
                <div class="mb-3">
                    <label for="quote" class="form-label">Motivational Quote</label>
                    <input type="text" id="quote" name="quote"
                           class="form-control @error('quote') is-invalid @enderror"
                           value="{{ old('quote', $device->quote) }}"
                           placeholder="e.g. Keep Learning" maxlength="255">
                    @error('quote')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        {{-- ─── Right Column ───────────────────────────────── --}}
        <div class="col-lg-6">
            <div class="glass-card h-100">
                <h6 class="fw-700 mb-1">
                    <i class="bi bi-sliders me-2" style="color:#fd7e14;"></i>Hardware Config
                </h6>
                <p class="mb-4" style="font-size:0.8rem;color:#8b949e;">Display and timing parameters</p>

                {{-- Brightness --}}
                <div class="mb-4">
                    <label for="brightness" class="form-label d-flex justify-content-between">
                        <span>Brightness</span>
                        <span id="brightnessVal" style="color:#0d6efd;font-weight:700;">
                            {{ old('brightness', $device->brightness) }}%
                        </span>
                    </label>
                    <input type="range" id="brightness" name="brightness"
                           class="form-range @error('brightness') is-invalid @enderror"
                           min="0" max="100" step="5"
                           value="{{ old('brightness', $device->brightness) }}">
                    <div class="d-flex justify-content-between mt-1" style="font-size:0.72rem;color:#8b949e;">
                        <span>0% (Off)</span>
                        <span>100% (Max)</span>
                    </div>
                    @error('brightness')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Animation --}}
                <div class="mb-4">
                    <label for="animation" class="form-label">Animation</label>
                    <select id="animation" name="animation"
                            class="form-select @error('animation') is-invalid @enderror">
                        @foreach(['happy' => '😊 Happy', 'sad' => '😢 Sad', 'idle' => '😐 Idle', 'excited' => '🤩 Excited', 'sleepy' => '😴 Sleepy'] as $val => $label)
                            <option value="{{ $val }}"
                                {{ old('animation', $device->animation) === $val ? 'selected' : '' }}>
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                    @error('animation')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Refresh Interval --}}
                <div class="mb-4">
                    <label for="refresh" class="form-label d-flex justify-content-between">
                        <span>Refresh Interval</span>
                        <span id="refreshVal" style="color:#fd7e14;font-weight:700;">
                            {{ old('refresh', $device->refresh) }}s
                        </span>
                    </label>
                    <input type="range" id="refresh" name="refresh"
                           class="form-range @error('refresh') is-invalid @enderror"
                           min="5" max="300" step="5"
                           value="{{ old('refresh', $device->refresh) }}">
                    <div class="d-flex justify-content-between mt-1" style="font-size:0.72rem;color:#8b949e;">
                        <span>5s (Fast)</span>
                        <span>300s (5 min)</span>
                    </div>
                    @error('refresh')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

    </div>

    {{-- ─── Save Bar ───────────────────────────────────────── --}}
    <div class="glass-card mt-4 d-flex align-items-center justify-content-between flex-wrap gap-3">
        <div>
            <div style="font-size:0.85rem;font-weight:600;">Save Changes</div>
            <div style="font-size:0.78rem;color:#8b949e;">The ESP32 will pick up new settings on its next refresh</div>
        </div>
        <button type="submit" class="btn btn-primary" id="saveBtn">
            <i class="bi bi-cloud-upload-fill me-2"></i>Save Settings
        </button>
    </div>

</form>

{{-- ─── JSON Preview ───────────────────────────────────────── --}}
<div class="glass-card mt-4">
    <div class="d-flex align-items-center justify-content-between mb-3">
        <h6 class="mb-0 fw-600">
            <i class="bi bi-braces me-2" style="color:#20c997;"></i>Live API Preview
        </h6>
        <a href="{{ url('/api/device') }}" target="_blank" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-box-arrow-up-right me-1"></i>Open
        </a>
    </div>
    <pre id="jsonPreview"
         style="background:rgba(42,46,51,0.8);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:1rem;font-size:0.82rem;color:#20c997;margin:0;overflow-x:auto;">{}</pre>
</div>

@endsection

@push('scripts')
<script>
const brightnessInput = document.getElementById('brightness');
const brightnessVal   = document.getElementById('brightnessVal');
const refreshInput    = document.getElementById('refresh');
const refreshVal      = document.getElementById('refreshVal');
const preview         = document.getElementById('jsonPreview');

function getFormData() {
    return {
        name:       document.getElementById('name').value,
        goal:       document.getElementById('goal').value,
        weather:    document.getElementById('weather').value,
        quote:      document.getElementById('quote').value,
        brightness: parseInt(brightnessInput.value),
        animation:  document.getElementById('animation').value,
        refresh:    parseInt(refreshInput.value),
    };
}

function updatePreview() {
    preview.textContent = JSON.stringify(getFormData(), null, 2);
}

brightnessInput.addEventListener('input', () => {
    brightnessVal.textContent = brightnessInput.value + '%';
    updatePreview();
});

refreshInput.addEventListener('input', () => {
    refreshVal.textContent = refreshInput.value + 's';
    updatePreview();
});

document.querySelectorAll('#deviceForm input, #deviceForm select').forEach(el => {
    el.addEventListener('input', updatePreview);
});

// Save button animation
document.getElementById('saveBtn').addEventListener('click', function() {
    this.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Saving…';
    this.disabled = true;
});

// Initialize preview
updatePreview();
</script>
@endpush
