@extends('layouts.app')

@section('title', 'Plugin branding')
@section('page_title', 'WP plugin branding')

@section('content')
<x-page-greeting
    title="WordPress plugin branding"
    italic="control how the plugin shows up in WP admin."
    subtitle="Edit name, slug, colour, icon, support email. Merchants who download from /integrations/woocommerce get the latest build."/>

@if(session('status'))<div class="alert alert-success mb-3">{{ session('status') }}</div>@endif

@if($errors->any())
    <div class="alert alert-danger mb-3">
        @foreach($errors->all() as $e)<div>{{ $e }}</div>@endforeach
    </div>
@endif

<x-section-card title="Brand identity" subtitle="strings + colours that get baked into every plugin build">
<form method="POST" action="{{ route('ops.plugin-branding.update') }}" class="row g-3">
    @csrf
    @method('PUT')

    <div class="col-md-6">
        <label class="label-eyebrow">Plugin name <span class="text-danger">*</span></label>
        <input type="text" name="name" class="form-control" required value="{{ old('name', $branding['name']) }}">
        <div class="form-text small">Shown in WP admin and in the plugin list. e.g. "Chalzo Sync".</div>
    </div>

    <div class="col-md-3">
        <label class="label-eyebrow">Slug <span class="text-danger">*</span></label>
        <input type="text" name="slug" class="form-control" required pattern="[a-z0-9\-]+" value="{{ old('slug', $branding['slug']) }}">
        <div class="form-text small">Folder + REST namespace. lowercase, hyphens. e.g. "chalzo-sync".</div>
    </div>

    <div class="col-md-3">
        <label class="label-eyebrow">Version</label>
        <input type="text" name="version" class="form-control" required value="{{ old('version', $branding['version']) }}">
        <div class="form-text small">Bump on every shipped change.</div>
    </div>

    <div class="col-12">
        <label class="label-eyebrow">Description <span class="text-danger">*</span></label>
        <textarea name="description" class="form-control" rows="2" required>{{ old('description', $branding['description']) }}</textarea>
    </div>

    <div class="col-md-4">
        <label class="label-eyebrow">Author</label>
        <input type="text" name="author" class="form-control" required value="{{ old('author', $branding['author']) }}">
    </div>
    <div class="col-md-4">
        <label class="label-eyebrow">Author URL</label>
        <input type="url" name="author_uri" class="form-control" value="{{ old('author_uri', $branding['author_uri']) }}">
    </div>
    <div class="col-md-4">
        <label class="label-eyebrow">Support email</label>
        <input type="email" name="support_email" class="form-control" required value="{{ old('support_email', $branding['support_email']) }}">
    </div>

    <div class="col-md-3">
        <label class="label-eyebrow">Primary colour</label>
        <div class="input-group">
            <input type="color" name="primary_color" class="form-control form-control-color" value="{{ old('primary_color', $branding['primary_color']) }}" style="max-width:60px;">
            <input type="text" class="form-control" readonly value="{{ $branding['primary_color'] }}">
        </div>
    </div>
    <div class="col-md-3">
        <label class="label-eyebrow">Icon emoji</label>
        <input type="text" name="icon_emoji" class="form-control" maxlength="4" value="{{ old('icon_emoji', $branding['icon_emoji']) }}">
        <div class="form-text small">One emoji — shown next to the plugin name in WP admin.</div>
    </div>
    <div class="col-md-3">
        <label class="label-eyebrow">Text domain</label>
        <input type="text" name="text_domain" class="form-control" value="{{ old('text_domain', $branding['text_domain']) }}" placeholder="defaults to slug">
    </div>
    <div class="col-md-3">
        <label class="label-eyebrow">API base URL <span class="text-danger">*</span></label>
        <input type="url" name="api_base_url" class="form-control" required value="{{ old('api_base_url', $branding['api_base_url']) }}">
        <div class="form-text small">The platform URL the plugin should call. Usually app.shipieons.com / app.chalzo.com.</div>
    </div>

    <div class="col-12 d-flex justify-content-end gap-2 mt-3">
        <a href="{{ route('ops.plugin-branding') }}" class="btn-soft">Cancel</a>
        <button type="submit" class="btn-dark-pill" style="padding:.65rem 1.5rem;">
            <i class="bi bi-floppy me-1"></i> Save branding &amp; rebuild
        </button>
    </div>
</form>
</x-section-card>

<x-section-card title="What this affects" subtitle="every value here is baked into the .zip on next download">
    <ul class="mb-0 small text-secondary" style="line-height:1.9;">
        <li>Plugin file header (name, description, author, version).</li>
        <li>Submenu item under WooCommerce ({{ $branding['icon_emoji'] }} {{ $branding['name'] }}).</li>
        <li>Primary button colours + accent border in plugin admin pages.</li>
        <li>REST endpoint namespace: <code>/wp-json/{{ $branding['slug'] }}/v1/shipment-update</code>.</li>
        <li>Support email shown on every plugin admin screen.</li>
        <li>Public branding endpoint that the plugin queries on activation: <code>{{ route('plugin.branding') }}</code>.</li>
    </ul>
</x-section-card>
@endsection