@extends('layouts.dashboard')
@section('title', __('Mobile App'))
@section('page_title', __('Mobile App'))

@section('content')
<form method="POST" action="{{ route('admin.mobile.update') }}" enctype="multipart/form-data">
    @csrf @method('PUT')
    <div class="row g-3">
        <div class="col-xl-8">
            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-phone text-primary me-2"></i>{{ __('App identity') }}</div>
                <div class="card-body row g-3">
                    <div class="col-md-6">
                        <label class="form-label">{{ __('App name') }}</label>
                        <input type="text" name="mobile_app_name" class="form-control @error('mobile_app_name') is-invalid @enderror" value="{{ old('mobile_app_name', $values['mobile_app_name']) }}" maxlength="40">
                        <div class="form-text">{{ __('Shown in the app shell and on the login screen.') }}</div>
                        @error('mobile_app_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{{ __('Deep link scheme') }}</label>
                        <div class="input-group">
                            <input type="text" name="mobile_deep_link" class="form-control @error('mobile_deep_link') is-invalid @enderror" value="{{ old('mobile_deep_link', $values['mobile_deep_link']) }}" maxlength="30">
                            <span class="input-group-text">://payment</span>
                            @error('mobile_deep_link')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="form-text">{{ __('Used to return from hosted payment pages. Must match the app build.') }}</div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{{ __('Support email') }}</label>
                        <input type="email" name="mobile_support_email" class="form-control @error('mobile_support_email') is-invalid @enderror" value="{{ old('mobile_support_email', $values['mobile_support_email']) }}">
                        @error('mobile_support_email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-6 d-flex flex-column justify-content-center gap-2 pt-3">
                        <div class="form-check form-switch">
                            <input type="hidden" name="mobile_onboarding_enabled" value="0">
                            <input class="form-check-input" type="checkbox" role="switch" name="mobile_onboarding_enabled" value="1" id="onb" @checked(old('mobile_onboarding_enabled', $values['mobile_onboarding_enabled']))>
                            <label class="form-check-label" for="onb">{{ __('Show onboarding slides') }}</label>
                        </div>
                        <div class="form-check form-switch">
                            <input type="hidden" name="mobile_guest_browsing" value="0">
                            <input class="form-check-input" type="checkbox" role="switch" name="mobile_guest_browsing" value="1" id="guest" @checked(old('mobile_guest_browsing', $values['mobile_guest_browsing']))>
                            <label class="form-check-label" for="guest">{{ __('Let guests browse before signing in') }}</label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-arrow-repeat text-primary me-2"></i>{{ __('Version gate') }}</div>
                <div class="card-body row g-3">
                    <div class="col-md-4">
                        <label class="form-label">{{ __('Latest version') }}</label>
                        <input type="text" name="mobile_latest_version" class="form-control @error('mobile_latest_version') is-invalid @enderror" value="{{ old('mobile_latest_version', $values['mobile_latest_version']) }}" placeholder="1.2.0">
                        @error('mobile_latest_version')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">{{ __('Minimum supported') }}</label>
                        <input type="text" name="mobile_min_version" class="form-control @error('mobile_min_version') is-invalid @enderror" value="{{ old('mobile_min_version', $values['mobile_min_version']) }}" placeholder="1.0.0">
                        @error('mobile_min_version')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-4 d-flex align-items-center pt-3">
                        <div class="form-check form-switch">
                            <input type="hidden" name="mobile_force_update" value="0">
                            <input class="form-check-input" type="checkbox" role="switch" name="mobile_force_update" value="1" id="force" @checked(old('mobile_force_update', $values['mobile_force_update']))>
                            <label class="form-check-label" for="force">{{ __('Force update') }}</label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label"><i class="bi bi-google-play me-1"></i>{{ __('Play Store URL') }}</label>
                        <input type="url" name="mobile_store_url_android" class="form-control @error('mobile_store_url_android') is-invalid @enderror" value="{{ old('mobile_store_url_android', $values['mobile_store_url_android']) }}" placeholder="https://play.google.com/store/apps/details?id=...">
                        @error('mobile_store_url_android')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label"><i class="bi bi-apple me-1"></i>{{ __('App Store URL') }}</label>
                        <input type="url" name="mobile_store_url_ios" class="form-control @error('mobile_store_url_ios') is-invalid @enderror" value="{{ old('mobile_store_url_ios', $values['mobile_store_url_ios']) }}" placeholder="https://apps.apple.com/app/id...">
                        @error('mobile_store_url_ios')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header"><i class="bi bi-terminal text-primary me-2"></i>{{ __('Build a branded release') }}</div>
                <div class="card-body">
                    <p class="text-muted small">{{ __('Run this from the Learnify-LMS-App folder. The app reads its colours, logo and name from this site at startup, so a rebuild is only needed when the URL, app name or deep link changes.') }}</p>
                    <div class="position-relative">
                        <pre class="bg-body-secondary rounded-3 p-3 small mb-0" id="buildCmd" style="white-space:pre-wrap">{{ $buildCommand }}</pre>
                        <button type="button" class="btn btn-sm btn-light position-absolute top-0 end-0 m-2" onclick="navigator.clipboard.writeText(document.getElementById('buildCmd').innerText);this.innerHTML='<i class=\'bi bi-check2\'></i>'"><i class="bi bi-clipboard"></i></button>
                    </div>
                    <div class="form-text mt-2">{{ __('Swap "apk" for "appbundle", "ios" or "macos" as needed.') }}</div>
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-palette text-primary me-2"></i>{{ __('Branding the app uses') }}</div>
                <div class="card-body">
                    @foreach(['mobile_app_logo' => 'light', 'mobile_app_logo_dark' => 'dark'] as $lfKey => $lfVariant)
                        @php($lfCur = $values[$lfKey])
                        @php($lfSite = site_logo_url($lfVariant))
                        <label class="form-label">{{ $lfVariant === 'dark' ? __('App logo (dark mode)') : __('App logo') }}</label>
                        <div class="lf-brand-field border rounded-3 p-3 mb-2 {{ $lfVariant === 'dark' ? 'lf-brand-field-dark' : '' }}">
                            <div class="lf-brand-preview mb-2 d-flex align-items-center gap-3" data-preview>
                                @if($lfCur)
                                    <img src="{{ $lfCur }}" alt="" style="max-height:48px;max-width:100%;object-fit:contain">
                                @elseif($lfSite)
                                    <img src="{{ $lfSite }}" alt="" style="max-height:40px;max-width:160px;object-fit:contain" class="{{ $lfVariant === 'dark' && ! setting('site_logo_dark') && ! current_tenant()?->logoUrl() ? 'lf-logo-knockout' : '' }}">
                                    <span class="text-muted small">{{ __('Using the site logo') }}</span>
                                @else
                                    <span class="text-muted small">{{ __('Not uploaded — the app name is shown as text.') }}</span>
                                @endif
                            </div>
                            <input type="file" name="{{ $lfKey }}" class="form-control form-control-sm @error($lfKey) is-invalid @enderror" accept=".png,.jpg,.jpeg,.webp" data-preview-input>
                            @error($lfKey)<div class="invalid-feedback">{{ $message }}</div>@enderror
                            @if($lfCur)
                                <label class="form-check mt-2 mb-0 small">
                                    <input type="checkbox" name="remove_{{ $lfKey }}" value="1" class="form-check-input"> {{ __('Remove — go back to the site logo') }}
                                </label>
                            @endif
                        </div>
                    @endforeach
                    <div class="form-text mb-3">{{ __('Shown full-width on the splash screen, the home header and the login screen — the same wordmark the website header uses. PNG or WebP with a transparent background, about 5:1, max 2 MB. The dark version is used in dark mode and on the splash gradient; without one the light logo is painted white there. Leave both empty to use the site logos.') }}</div>
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <span class="text-muted small me-1">{{ __('Colours') }}</span>
                        <span class="rounded-circle border" title="{{ __('Primary') }}" style="width:26px;height:26px;background:{{ $tenant?->primary_color ?: '#4f46e5' }}"></span>
                        <span class="rounded-circle border" title="{{ __('Secondary') }}" style="width:26px;height:26px;background:{{ $tenant?->secondary_color ?: '#7c3aed' }}"></span>
                    </div>
                    <p class="text-muted small mb-2">{{ __('The app pulls the logo and colours from this site every launch — change them once and every installed app follows.') }}</p>
                    <a href="{{ route('admin.settings.edit', ['tab' => 'branding']) }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-brush me-1"></i>{{ __('Edit branding') }}</a>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-plug text-primary me-2"></i>{{ __('What the app reads') }}</div>
                <div class="list-group list-group-flush small">
                    <div class="list-group-item d-flex justify-content-between"><span class="text-muted">{{ __('Config endpoint') }}</span><code>/api/v1/config</code></div>
                    <div class="list-group-item d-flex justify-content-between"><span class="text-muted">{{ __('API base') }}</span><code class="text-truncate ms-2">{{ rtrim(url('/'), '/') }}/api/v1</code></div>
                    <div class="list-group-item d-flex justify-content-between"><span class="text-muted">{{ __('Push') }}</span><span>{{ setting('push_enabled', '0') === '1' ? __('Enabled') : __('Disabled') }}</span></div>
                    <div class="list-group-item d-flex justify-content-between"><span class="text-muted">{{ __('Languages') }}</span><span>{{ implode(', ', array_keys(\App\Http\Middleware\SetLocale::active())) }}</span></div>
                </div>
            </div>

            <button class="btn btn-primary w-100"><i class="bi bi-check-lg me-1"></i>{{ __('Save settings') }}</button>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
// Show the chosen app logo before saving.
document.querySelectorAll('[data-preview-input]').forEach(function (input) {
    input.addEventListener('change', function () {
        var file = input.files && input.files[0], box = input.closest('.lf-brand-field').querySelector('[data-preview]');
        if (!file || !box) return;
        var img = document.createElement('img');
        img.style.maxHeight = '56px'; img.style.maxWidth = '100%'; img.style.objectFit = 'contain';
        img.src = URL.createObjectURL(file);
        box.innerHTML = ''; box.appendChild(img);
    });
});
</script>
@endpush