@extends('layouts.app')

@section('title', 'PWA Portal Brand')

@section('css')
<style>
    .vc-pb-card { background:#fff; border-radius:12px; box-shadow:0 1px 6px rgba(0,0,0,.08); border:1px solid #e8ecf1; padding:24px; margin-bottom:18px; }
    .vc-pb-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#64748b; margin-bottom:14px; }
    .vc-pb-help  { color:#64748b; font-size:12px; margin-top:4px; }
    .vc-pb-row   { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
    .vc-pb-pill  { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:18px; font-size:12px; font-weight:600; background:#f1f5f9; color:#0f172a; border:1.5px solid #e2e8f0; cursor:pointer; transition:.15s; }
    .vc-pb-pill input { display:none; }
    .vc-pb-pill.checked { background:#0d9488; color:#fff; border-color:#0d9488; }
    .vc-pb-logo-preview { width:80px; height:80px; border-radius:14px; background:#f8fafc; border:1.5px dashed #cbd5e1; display:flex; align-items:center; justify-content:center; overflow:hidden; }
    .vc-pb-logo-preview img { width:100%; height:100%; object-fit:cover; }
    .vc-pb-url { padding:10px 14px; background:#0f172a; color:#a3e635; border-radius:8px; font-family:Menlo,Monaco,monospace; font-size:12.5px; word-break:break-all; }
    .vc-pb-submit { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; position:sticky; bottom:0; z-index:5; box-shadow:0 -4px 14px rgba(15,23,42,.08); border-top:2px solid #0d9488; }
    .vc-pb-save-btn { background:#0d9488 !important; border-color:#0d9488 !important; color:#fff !important; font-weight:700; padding:10px 26px; border-radius:8px; box-shadow:0 4px 12px rgba(13,148,136,.35); }
    .vc-pb-save-btn:hover, .vc-pb-save-btn:focus { background:#0b7c72 !important; border-color:#0b7c72 !important; }
</style>
@endsection

@section('content')
<section class="content-header">
    <h1><i class="fas fa-mobile-alt"></i> Patient PWA · Portal Brand</h1>
</section>

<section class="content">
    @if(session('status'))
        <div class="alert alert-success" style="border-radius:8px;">{{ session('status') }}</div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger" style="border-radius:8px;">{{ session('error') }}</div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger" style="border-radius:8px;">
            <strong>Couldn't save:</strong>
            <ul style="margin:6px 0 0;padding-left:18px;">
                @foreach($errors->all() as $err)<li>{{ $err }}</li>@endforeach
            </ul>
        </div>
    @endif

    <div class="row">
        <div class="col-md-8">

            {{-- ─── BASICS ──────────────────────────────────────────── --}}
            <form method="POST" action="{{ route('clinic.portal-brand.save') }}">
                @csrf

                <div class="vc-pb-card">
                    <div class="vc-pb-title">Branding</div>

                    <div class="form-group">
                        <label>Display name</label>
                        <input type="text" name="name" class="form-control"
                               value="{{ old('name', $brand->name ?? config('app.name', 'Patient Portal')) }}"
                               required maxlength="191">
                        <p class="vc-pb-help">Shown in the top bar and on the home-screen install prompt.</p>
                    </div>

                    <div class="vc-pb-row">
                        <div class="form-group">
                            <label>URL slug</label>
                            <input type="text" name="slug" class="form-control"
                                   value="{{ old('slug', $brand->slug ?? '') }}"
                                   pattern="[a-z0-9][a-z0-9-]*"
                                   required minlength="2" maxlength="64"
                                   placeholder="happy-paws">
                            <p class="vc-pb-help">
                                Lowercase letters, numbers, dashes. Used as
                                <code>/app/{slug}/</code> path AND as the subdomain
                                <code>{slug}.your-erp-domain.com</code>.
                            </p>
                        </div>

                        <div class="form-group">
                            <label>Accent color</label>
                            <input type="color" name="accent_hex" class="form-control"
                                   value="{{ old('accent_hex', $brand->accent_hex ?? '#0d9488') }}"
                                   style="height:38px;padding:2px;">
                            <p class="vc-pb-help">Sets the PWA's primary brand color (buttons, gradient, theme).</p>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Custom domain <small style="color:#94a3b8;font-weight:400;">(optional)</small></label>
                        <input type="text" name="custom_domain" class="form-control"
                               value="{{ old('custom_domain', $brand->custom_domain ?? '') }}"
                               placeholder="happypaws.com" maxlength="191">
                        <p class="vc-pb-help">
                            If you own a domain like <code>happypaws.com</code>, point its
                            DNS at this ERP server. The PWA will resolve to your brand
                            even without a slug in the URL.
                        </p>
                    </div>
                </div>

                {{-- ─── CONTACT ─────────────────────────────────────── --}}
                <div class="vc-pb-card">
                    <div class="vc-pb-title">Contact info (shown to contacts)</div>

                    <div class="vc-pb-row">
                        <div class="form-group">
                            <label>Phone</label>
                            <input type="text" name="contact_phone" class="form-control"
                                   value="{{ old('contact_phone', $brand->contact_phone ?? '') }}"
                                   placeholder="+20 100 555 0102" maxlength="32">
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" name="contact_email" class="form-control"
                                   value="{{ old('contact_email', $brand->contact_email ?? '') }}"
                                   placeholder="reception@happypaws.com" maxlength="191">
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Address (1 line)</label>
                        <input type="text" name="address" class="form-control"
                               value="{{ old('address', $brand->address ?? '') }}"
                               placeholder="12 Clinic Street, Cairo" maxlength="191">
                    </div>
                </div>

                {{-- ─── LOGIN METHODS ───────────────────────────────── --}}
                <div class="vc-pb-card">
                    <div class="vc-pb-title">Sign-in methods enabled for contacts</div>
                    <p class="vc-pb-help" style="margin-top:-8px;margin-bottom:14px;">
                        The login screen shows only the tabs you turn on here.
                    </p>

                    @php $enabled = old('login_methods', $brand->login_methods ?? ['otp','magic','password','staff']); @endphp
                    <div style="display:flex;gap:8px;flex-wrap:wrap;">
                        @foreach (['otp'=>'Phone OTP','magic'=>'Email magic link','password'=>'Email + password','staff'=>'Staff-provisioned password'] as $code => $label)
                            <label class="vc-pb-pill {{ in_array($code, $enabled, true) ? 'checked' : '' }}">
                                <input type="checkbox" name="login_methods[]" value="{{ $code }}"
                                       {{ in_array($code, $enabled, true) ? 'checked' : '' }}
                                       onchange="this.parentElement.classList.toggle('checked', this.checked)">
                                {{ $label }}
                            </label>
                        @endforeach
                    </div>
                </div>

                {{-- ─── PUBLIC ONLINE BOOKING ───────────────────────── --}}
                <div class="vc-pb-card">
                    <div class="vc-pb-title">Public online booking</div>
                    <label style="display:flex;align-items:center;gap:8px;cursor:pointer;margin:0;">
                        <input type="checkbox" name="public_booking" value="1"
                               {{ old('public_booking', $brand->public_booking ?? false) ? 'checked' : '' }}>
                        <span><strong>Let anyone book an appointment online</strong>
                            <small style="color:#94a3b8;">— a no-login page where patients request a visit</small></span>
                    </label>
                    <label style="display:flex;align-items:center;gap:8px;cursor:pointer;margin:10px 0 0;padding-left:24px;">
                        <input type="checkbox" name="booking_otp" value="1"
                               {{ old('booking_otp', $brand->booking_otp ?? false) ? 'checked' : '' }}>
                        <span>Require phone verification (OTP)
                            <small style="color:#94a3b8;">— patients confirm an SMS code before booking (needs SMS configured)</small></span>
                    </label>
                    @if($brand && $brand->slug)
                        <div class="vc-pb-url" style="margin-top:12px;">{{ url('/book/' . $brand->slug) }}</div>
                        <p class="vc-pb-help">Share this link. Requests arrive as <strong>pending</strong> appointments for staff to confirm, and the patient gets a WhatsApp confirmation automatically. Leave this off and the page is disabled (404).</p>
                    @else
                        <p class="vc-pb-help" style="margin-top:10px;">Save a slug above first — the booking link is <code>/book/{slug}</code>.</p>
                    @endif
                </div>

                {{-- ─── STATUS + SUBMIT ─────────────────────────────── --}}
                <div class="vc-pb-card vc-pb-submit">
                    <label style="margin:0;display:flex;align-items:center;gap:8px;cursor:pointer;flex:1;min-width:200px;">
                        <input type="checkbox" name="is_active" value="1"
                               {{ old('is_active', $brand->is_active ?? true) ? 'checked' : '' }}>
                        <span><strong>Brand is active</strong> <small style="color:#94a3b8;">— uncheck to take the PWA offline for this clinic</small></span>
                    </label>
                    <button type="submit" class="btn btn-primary btn-lg vc-pb-save-btn">
                        <i class="fa fa-save"></i> Save brand
                    </button>
                </div>
            </form>

            {{-- ─── LOGO UPLOAD ─────────────────────────────────────── --}}
            <form method="POST" action="{{ route('clinic.portal-brand.logo') }}" enctype="multipart/form-data">
                @csrf
                <div class="vc-pb-card">
                    <div class="vc-pb-title">Logo</div>
                    <div style="display:flex;gap:18px;align-items:center;flex-wrap:wrap;">
                        <div class="vc-pb-logo-preview">
                            @if(! empty($brand?->logo_url))
                                <img src="{{ $brand->logo_url }}" alt="Current logo">
                            @else
                                <i class="fa fa-image" style="font-size:28px;color:#cbd5e1;"></i>
                            @endif
                        </div>
                        <div style="flex:1;min-width:240px;">
                            <input type="file" name="logo" accept="image/png,image/jpeg,image/svg+xml,image/webp" required>
                            <p class="vc-pb-help">PNG, JPG, SVG or WebP · max 1 MB · 512×512 square recommended.</p>
                        </div>
                        <button type="submit" class="btn btn-default" {{ empty($brand) ? 'disabled title=\'Save the brand first\'' : '' }}>
                            <i class="fa fa-upload"></i> Upload
                        </button>
                    </div>
                </div>
            </form>

        </div>

        {{-- ─── LIVE PREVIEW SIDEBAR ────────────────────────────────── --}}
        <div class="col-md-4">
            <div class="vc-pb-card">
                <div class="vc-pb-title">Patient portal URL</div>
                @if($brand && $brand->slug)
                    <div class="vc-pb-url">{{ $appUrl }}</div>
                    <p class="vc-pb-help">Share this URL with contacts — opens the PWA at your branded sign-in screen.</p>
                @else
                    <p class="vc-pb-help">Save a slug above to see your branded URL.</p>
                @endif
            </div>

            <div class="vc-pb-card">
                <div class="vc-pb-title">Where this brand resolves</div>
                <ol style="font-size:13px;color:#475569;padding-left:18px;line-height:1.7;">
                    <li>Custom domain — <strong>{{ $brand->custom_domain ?? '—' }}</strong></li>
                    <li>Subdomain — <strong>{{ $brand?->slug ? $brand->slug . '.your-erp.com' : '—' }}</strong></li>
                    <li>Path — <strong>{{ $brand?->slug ? '/app/' . $brand->slug . '/' : '—' }}</strong></li>
                </ol>
                <p class="vc-pb-help">
                    DNS for the custom domain or subdomain must point to this server's IP. Path-based URLs work without any DNS changes.
                </p>
            </div>
        </div>
    </div>
</section>
@endsection
