@extends('layouts.admin')

@section('title', 'PWA Settings')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">PWA Settings</h1>
        <p class="page-subtitle">Configure the Progressive Web App manifest and service worker</p>
    </div>
</div>

<div class="grid-2">
    <div class="card">
        <div class="card-body">
            <form method="POST" action="{{ route('admin.settings.pwa.update') }}" id="pwaForm" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <div class="form-section">
                    <h3 class="form-section-title">App Identity</h3>
                    <div class="form-grid form-grid-2">
                        <div class="form-group">
                            <label for="pwa_name" class="form-label">App Name</label>
                            <input type="text" id="pwa_name" name="pwa_name" class="form-input" value="{{ old('pwa_name', $settings['pwa_name'] ?? 'BANKING') }}" placeholder="e.g. BANKING" oninput="previewManifest()">
                        </div>
                        <div class="form-group">
                            <label for="pwa_short_name" class="form-label">Short Name</label>
                            <input type="text" id="pwa_short_name" name="pwa_short_name" class="form-input" maxlength="24" value="{{ old('pwa_short_name', $settings['pwa_short_name'] ?? 'BANKING') }}" placeholder="e.g. BANKING" oninput="previewManifest()">
                        </div>
                        <div class="form-group" style="grid-column: span 2;">
                            <label for="pwa_description" class="form-label">Description</label>
                            <textarea id="pwa_description" name="pwa_description" class="form-input" rows="2" oninput="previewManifest()">{{ old('pwa_description', $settings['pwa_description'] ?? 'Secure, modern digital banking at your fingertips.') }}</textarea>
                        </div>
                        <div class="form-group" style="grid-column: span 2;">
                            <label for="pwa_logo" class="form-label">App Icon / Logo</label>
                            <input type="file" id="pwa_logo" name="pwa_logo" class="form-input" accept="image/png,image/jpeg,image/webp,image/svg+xml">
                            <span class="form-help">Recommended: a square PNG at least 512x512. Used as the app icon when installed.</span>
                            @error('pwa_logo')
                            <span class="form-error">{{ $message }}</span>
                            @enderror
                            @if(!empty($settings['pwa_logo']) && Storage::disk('public')->exists($settings['pwa_logo']))
                            <div class="pwa-logo-preview">
                                <img src="{{ Storage::disk('public')->url($settings['pwa_logo']) }}" alt="Current app icon" class="pwa-logo-img">
                                <label class="form-check" style="margin-top: 8px;">
                                    <input type="checkbox" name="pwa_logo_remove" value="1">
                                    <span class="form-check-text">Remove current icon</span>
                                </label>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="form-section" style="margin-top: 1.5rem;">
                    <h3 class="form-section-title">Colors</h3>
                    <div class="form-grid form-grid-2">
                        <div class="form-group">
                            <label for="pwa_theme_color" class="form-label">Theme Color</label>
                            <div class="color-input-row">
                                <input type="color" id="pwa_theme_color" name="pwa_theme_color" class="color-picker" value="{{ old('pwa_theme_color', $settings['pwa_theme_color'] ?? '#0D6B58') }}">
                                <input type="text" class="form-input" value="{{ old('pwa_theme_color', $settings['pwa_theme_color'] ?? '#0D6B58') }}" data-color-text="pwa_theme_color">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="pwa_background_color" class="form-label">Background Color</label>
                            <div class="color-input-row">
                                <input type="color" id="pwa_background_color" name="pwa_background_color" class="color-picker" value="{{ old('pwa_background_color', $settings['pwa_background_color'] ?? '#ffffff') }}">
                                <input type="text" class="form-input" value="{{ old('pwa_background_color', $settings['pwa_background_color'] ?? '#ffffff') }}" data-color-text="pwa_background_color">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-section" style="margin-top: 1.5rem;">
                    <h3 class="form-section-title">Behavior</h3>
                    <div class="form-grid form-grid-2">
                        <div class="form-group">
                            <label for="pwa_start_url" class="form-label">Start URL</label>
                            <input type="text" id="pwa_start_url" name="pwa_start_url" class="form-input" value="{{ old('pwa_start_url', $settings['pwa_start_url'] ?? '/') }}" placeholder="/">
                        </div>
                        <div class="form-group">
                            <label for="pwa_cache_version" class="form-label">Cache Version</label>
                            <input type="text" id="pwa_cache_version" name="pwa_cache_version" class="form-input" value="{{ old('pwa_cache_version', $settings['pwa_cache_version'] ?? 'v1') }}" placeholder="v1">
                            <span class="form-help">Bump this to force clients to refresh cached assets.</span>
                        </div>
                    </div>
                </div>

                <div class="form-actions" style="margin-top: 2rem;">
                    <button type="submit" class="btn btn-primary">Save PWA Settings</button>
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Live Preview</h3>
        </div>
        <div class="card-body">
            <div style="display:flex;justify-content:center;padding:1.5rem 0;">
                <div class="pwa-preview" style="--pwa-theme:#0D6B58;--pwa-bg:#ffffff;">
                    <div class="pwa-preview-screen">
                        <div class="pwa-preview-statusbar" id="previewStatusBar"></div>
                        <div class="pwa-preview-body">
                            <div class="pwa-preview-icon" id="previewIcon">B</div>
                            <p class="pwa-preview-name" id="previewName">BANKING</p>
                            <p class="pwa-preview-url">let's stay connected to your money</p>
                            <button class="pwa-preview-btn">OPEN</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">Manifest URL</label>
                <input type="text" class="form-input" value="{{ url('manifest.json') }}" readonly>
            </div>
            <div class="form-group">
                <label class="form-label">Service Worker</label>
                <input type="text" class="form-input" value="{{ url('sw.js') }}" readonly>
            </div>
            <span class="form-help">The manifest and service worker are generated dynamically, so any change you save here takes effect immediately.</span>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<style>
.pwa-logo-preview { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; }
.pwa-logo-img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; border: 1px solid #e2e8f0; }
</style>
<script>
function syncColorSwatch(sourceId) {
    var picker = document.getElementById(sourceId);
    var text = document.querySelector('[data-color-text="' + sourceId + '"]');
    if (text) text.value = picker.value;
    var preview = document.querySelector('.pwa-preview');
    if (sourceId === 'pwa_theme_color') preview.style.setProperty('--pwa-theme', picker.value);
    if (sourceId === 'pwa_background_color') preview.style.setProperty('--pwa-bg', picker.value);
}

document.querySelectorAll('.color-picker').forEach(function(input) {
    input.addEventListener('input', function() { syncColorSwatch(this.id); });
    input.addEventListener('change', function() { syncColorSwatch(this.id); });
});

document.querySelectorAll('[data-color-text]').forEach(function(input) {
    input.addEventListener('input', function() {
        var picker = document.getElementById(this.dataset.colorText);
        if (picker && /^#[0-9a-fA-F]{6}$/.test(this.value)) picker.value = this.value;
    });
});

function previewManifest() {
    var name = document.getElementById('pwa_name').value || 'BANKING';
    document.getElementById('previewName').textContent = name;
    document.getElementById('previewStatusBar').textContent = (document.getElementById('pwa_short_name').value || 'BANKING') + '  9:41'
        .replace('BANKING', document.getElementById('pwa_short_name').value || 'BANKING');
}

document.getElementById('pwa_logo').addEventListener('change', function() {
    var file = this.files && this.files[0];
    if (!file) return;
    var reader = new FileReader();
    reader.onload = function(e) {
        document.getElementById('previewIcon').innerHTML = '<img src="' + e.target.result + '" alt="logo" style="width:100%;height:100%;border-radius:22%;object-fit:cover;">';
    };
    reader.readAsDataURL(file);
});

previewManifest();
</script>
@endpush