@extends('layouts.webphone')

@push('style')
<style>
html, body {
    background: #0f172a;
}
.wallboard-manage-shell {
    min-height: 100vh;
    padding: 24px;
    color: #e2e8f0;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.18), transparent 30%), #0f172a;
}
.wallboard-manage-card {
    max-width: 1080px;
    margin: 0 auto;
    background: #1e293b;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.35);
    overflow: hidden;
}
.wallboard-manage-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.wallboard-manage-body {
    padding: 24px;
}
.wallboard-manage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.wallboard-manage-section {
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    padding: 18px;
}
.wallboard-manage-users {
    display: grid;
    gap: 12px;
}
.wallboard-manage-user {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 900px) {
    .wallboard-manage-grid,
    .wallboard-manage-user {
        grid-template-columns: 1fr;
    }
}
</style>
@endpush

@section('content')
@php($branding = $settings['branding'] ?? [])
@php($display = $settings['display'] ?? [])
@php($users = $settings['users'] ?? [])
<div class="wallboard-manage-shell">
    <div class="wallboard-manage-card">
        <div class="wallboard-manage-header">
            <div>
                <h3 class="mb-1 text-light">Wallboard Management</h3>
                <div class="text-secondary">Configure branding, TV behavior, alerts, and wallboard login users.</div>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('wallboard.index') }}" class="btn btn-outline-light btn-sm">Open Wallboard</a>
            </div>
        </div>
        <div class="wallboard-manage-body">
            @if (session('status'))
                <div class="alert alert-success">{{ session('status') }}</div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger">{{ $errors->first() }}</div>
            @endif

            <form method="POST" action="{{ route('wallboard.manage.update') }}">
                @csrf
                <div class="wallboard-manage-grid mb-4">
                    <section class="wallboard-manage-section">
                        <h5 class="text-light mb-3">Branding</h5>
                        <div class="mb-3">
                            <label class="form-label text-light">Brand Name</label>
                            <input type="text" name="brand_name" class="form-control" value="{{ old('brand_name', $branding['brand_name'] ?? 'Call Center Wallboard') }}" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label text-light">Brand Subtitle</label>
                            <input type="text" name="brand_subtitle" class="form-control" value="{{ old('brand_subtitle', $branding['brand_subtitle'] ?? '') }}">
                        </div>
                        <div class="mb-3">
                            <label class="form-label text-light">Brand Mark</label>
                            <input type="text" name="brand_mark" class="form-control" maxlength="8" value="{{ old('brand_mark', $branding['brand_mark'] ?? 'CC') }}">
                        </div>
                        <div>
                            <label class="form-label text-light">Logo URL</label>
                            <input type="text" name="logo_url" class="form-control" value="{{ old('logo_url', $branding['logo_url'] ?? '') }}" placeholder="https://.../logo.png">
                        </div>
                    </section>

                    <section class="wallboard-manage-section">
                        <h5 class="text-light mb-3">Display & Alerts</h5>
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" name="auto_fullscreen" value="1" id="auto_fullscreen" {{ old('auto_fullscreen', $display['auto_fullscreen'] ?? true) ? 'checked' : '' }}>
                            <label class="form-check-label text-light" for="auto_fullscreen">Enable auto fullscreen mode</label>
                        </div>
                        <div class="mb-3">
                            <label class="form-label text-light">TV Rotation Seconds</label>
                            <input type="number" name="tv_rotation_seconds" min="5" max="120" class="form-control" value="{{ old('tv_rotation_seconds', $display['tv_rotation_seconds'] ?? 20) }}">
                        </div>
                        <div class="mb-3">
                            <label class="form-label text-light">Idle Reload Seconds</label>
                            <input type="number" name="idle_reload_seconds" min="30" max="3600" class="form-control" value="{{ old('idle_reload_seconds', $display['idle_reload_seconds'] ?? 900) }}">
                        </div>
                        <div class="mb-3">
                            <label class="form-label text-light">Waiting Alert Threshold</label>
                            <input type="number" name="waiting_alert_threshold" min="1" max="500" class="form-control" value="{{ old('waiting_alert_threshold', $display['waiting_alert_threshold'] ?? 5) }}">
                        </div>
                        <div>
                            <label class="form-label text-light">Wait Alert Seconds</label>
                            <input type="number" name="wait_alert_seconds" min="10" max="3600" class="form-control" value="{{ old('wait_alert_seconds', $display['wait_alert_seconds'] ?? 60) }}">
                        </div>
                    </section>
                </div>

                <section class="wallboard-manage-section mb-4">
                    <h5 class="text-light mb-3">Wallboard Users</h5>
                    <div class="wallboard-manage-users">
                        @for ($i = 0; $i < max(3, count($users)); $i++)
                            <div class="wallboard-manage-user">
                                <div>
                                    <label class="form-label text-light">Username</label>
                                    <input type="text" name="users[{{ $i }}][username]" class="form-control" value="{{ old('users.' . $i . '.username', $users[$i]['username'] ?? '') }}">
                                </div>
                                <div>
                                    <label class="form-label text-light">Password</label>
                                    <input type="text" name="users[{{ $i }}][password]" class="form-control" placeholder="Enter new password" value="">
                                </div>
                            </div>
                        @endfor
                    </div>
                </section>

                <div class="d-flex justify-content-end">
                    <button type="submit" class="btn btn-primary">Save Wallboard Settings</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection