{{-- Metric editor (design: Product creator "Edit metric"). --}}
@extends('layouts.app')
@section('title', ($metric->exists ? 'Edit metric' : 'Add metric').' — InLynq')
@section('heading', 'Metrics')

@php
  $displays = ['currency' => 'Exact', 'range' => 'Range', 'percentage' => 'Percentage', 'number' => 'Number', 'text' => 'Text', 'private' => 'Private'];
  $current = old('display', $display);
  $context = $metric->company_id ? 'company' : ($metric->product_id ? 'product' : 'profile');
@endphp

@section('content')
<form method="POST" action="{{ $metric->exists ? route('metrics.update', $metric) : route('metrics.store') }}" class="app-narrow" data-metric-editor data-preview-url="{{ route('metrics.preview') }}">
  @csrf @if($metric->exists) @method('PUT') @endif
  <x-iq.page-head :title="$metric->exists ? 'Edit metric' : 'Add metric'" crumb="Metrics" :crumb-href="route('metrics.index')" />

  <div class="iq-card" style="padding:20px;display:flex;flex-direction:column;gap:16px;border-color:var(--brand-600);box-shadow:0 0 0 3px var(--brand-50)">
    <div class="iq-grid-2">
      <x-iq.field label="Label" name="name" span><x-iq.input name="name" :value="$metric->name" required maxlength="80" placeholder="Monthly recurring revenue" /></x-iq.field>
      <div class="iq-field" style="grid-column:1/-1"><span class="iq-label">Show as</span>
        <div class="iq-seg" data-display-seg style="flex-wrap:wrap;align-self:flex-start">
          @foreach ($displays as $key => $label)<button type="button" data-value="{{ $key }}" @class(['is-active' => $current === $key])>{{ $label }}</button>@endforeach
        </div>
        <input type="hidden" name="display" value="{{ $current }}">
        @error('display')<span class="iq-error">{{ $message }}</span>@enderror
      </div>

      <div class="iq-field" data-show-for="private" style="grid-column:1/-1"><label class="iq-label" for="stored_as">Value kept privately as <span class="opt">Optional</span></label>
        <x-iq.select name="stored_as" :options="['number' => 'Number', 'currency' => 'Amount', 'range' => 'Range', 'percentage' => 'Percentage']" :value="old('stored_as', $metric->metric_type->value === 'text' ? 'number' : $metric->metric_type->value)" />
        <span class="iq-help">The label stays public; the value is hidden ("Shared on request"). Keep it for verification.</span></div>

      <x-iq.field label="Currency" name="currency" data-show-for="currency range"><x-iq.select name="currency" :options="collect(\App\Support\Money::SYMBOLS)->mapWithKeys(fn ($s, $c) => [$c => $c.' '.$s])->all()" :value="$metric->currency ?? 'NGN'" /></x-iq.field>
      <x-iq.field label="Value" name="value" data-show-for="currency number percentage private"><x-iq.input name="value" :value="$metric->value !== null ? rtrim(rtrim(number_format($metric->value, 2, '.', ''), '0'), '.') : null" inputmode="decimal" placeholder="12400000" /></x-iq.field>
      <x-iq.field label="From" name="value" data-show-for="range"><x-iq.input name="value" :value="$metric->value !== null ? rtrim(rtrim(number_format($metric->value, 2, '.', ''), '0'), '.') : null" inputmode="decimal" placeholder="1500000" /></x-iq.field>
      <x-iq.field label="To" name="value_max" data-show-for="range"><x-iq.input name="value_max" :value="$metric->value_max !== null ? rtrim(rtrim(number_format($metric->value_max, 2, '.', ''), '0'), '.') : null" inputmode="decimal" placeholder="2000000" /></x-iq.field>
      <x-iq.field label="Text" name="text_value" data-show-for="text" help="e.g. Bootstrapped"><x-iq.input name="text_value" :value="$metric->text_value" maxlength="60" /></x-iq.field>
      <x-iq.field label="Unit" name="suffix" optional data-show-for="number" help="Short suffix, e.g. yrs or +"><x-iq.input name="suffix" :value="$metric->suffix" maxlength="12" /></x-iq.field>

      <x-iq.field label="Belongs to" name="company_id" optional>
        <select class="iq-select" name="company_id" id="company_id">
          <option value="">{{ $context === 'product' ? 'The product below' : 'My profile (Proof section)' }}</option>
          @foreach ($companies as $c)<option value="{{ $c->id }}" @selected(old('company_id', $metric->company_id) == $c->id)>{{ $c->name }}</option>@endforeach
        </select>
      </x-iq.field>
      <x-iq.field label="Product" name="product_id" optional>
        <select class="iq-select" name="product_id" id="product_id"><option value="">None</option>
          @foreach ($products as $p)<option value="{{ $p->id }}" @selected(old('product_id', $metric->product_id) == $p->id)>{{ $p->name }}</option>@endforeach
        </select>
      </x-iq.field>
    </div>

    <div class="iq-row" style="justify-content:space-between;padding:12px 16px;border-radius:10px;background:var(--surface-2)">
      <span class="iq-row" style="gap:12px;font-size:14px">Displays as <b class="iq-num" style="font-size:18px" data-metric-display>{{ $metric->exists ? ($metric->is_public ? $metric->formatted_value : 'Private') : '—' }}</b><span class="iq-muted" data-metric-note></span></span>
      @if ($metric->is_verified)<span class="iq-verify-quiet"><x-iq.seal /> Verified · {{ $metric->verification_source }}</span>
      @else<a class="iq-row iq-link" style="gap:8px;font-size:13px" href="{{ route('verification.index') }}"><x-iq.seal /> Request verification</a>@endif
    </div>

    <div class="iq-row" style="gap:24px">
      <label class="iq-row" style="gap:10px;font-size:14px"><x-iq.switch name="is_visible" :checked="$metric->is_visible ?? true" /> Show on profile</label>
      <label class="iq-row" style="gap:10px;font-size:14px"><x-iq.switch name="show_on_card" :checked="$metric->show_on_card" /> Show on the company/product card</label>
    </div>
    @if ($metric->is_verified)<p class="iq-help" style="margin:0">Changing the value removes the verified badge until it's checked again.</p>@endif
  </div>

  <div class="app-formactions" style="border:0"><a class="iq-btn iq-btn-quiet" href="{{ url()->previous() }}">Cancel</a><button class="iq-btn iq-btn-primary">Save metric</button></div>
</form>
@endsection