{{-- Product creator (design: Screens · Dashboard / Product creator). --}}
@extends('layouts.app')
@section('title', ($product->exists ? $product->name : 'Add product').' — InLynq')
@section('heading', 'Products')

@section('content')
<form method="POST" action="{{ $product->exists ? route('products.update', $product) : route('products.store') }}" enctype="multipart/form-data" data-card-preview>
  @csrf @if($product->exists) @method('PUT') @endif

  <x-iq.page-head :title="$product->exists ? $product->name : 'Add product'" crumb="Products" :crumb-href="route('products.index')">
    <a class="iq-btn iq-btn-quiet" href="{{ route('products.index') }}">Cancel</a>
    <button class="iq-btn iq-btn-primary">{{ $product->exists ? 'Save changes' : 'Add to profile' }}</button>
  </x-iq.page-head>

  <div class="app-creator">
    <div>
      <x-iq.form-group title="Basics" description="What it is and where to find it.">
        <div class="iq-field" style="grid-column:1/-1"><label class="iq-label">Logo <span class="opt">Optional</span></label><x-iq.upload name="logo" :src="$product->logo_url" help="Square, 256px+." /></div>
        <x-iq.field label="Product name" name="name"><x-iq.input name="name" :value="$product->name" required maxlength="120" data-preview-bind="name" /></x-iq.field>
        <x-iq.field label="Website" name="website" optional><x-iq.affix name="website" prefix="https://" :value="preg_replace('#^https?://#', '', (string) $product->website)" placeholder="example.com" /></x-iq.field>
        <x-iq.field label="Description" name="description" :counter="mb_strlen((string) $product->description).' / 300'" span><x-iq.textarea name="description" :value="$product->description" max="300" style="min-height:72px" data-preview-bind="description" /></x-iq.field>
      </x-iq.form-group>

      <x-iq.form-group title="Details" description="Category, company and lifecycle.">
        <x-iq.field label="Company" name="company_id" optional><x-iq.select name="company_id" :options="$companies->pluck('name', 'id')->all()" :value="$product->company_id" placeholder="Independent product" /></x-iq.field>
        <x-iq.field label="Category" name="category" optional><x-iq.input name="category" :value="$product->category" list="categories" data-preview-bind="category" /><datalist id="categories">@foreach ($categories as $c)<option value="{{ $c }}">@endforeach</datalist></x-iq.field>
        <x-iq.field label="Launch date" name="launch_date" optional><x-iq.input type="month" name="launch_date" :value="$product->launch_date?->format('Y-m')" /></x-iq.field>
        <x-iq.field label="Status" name="status"><x-iq.select name="status" :options="$statuses" :value="$product->status" /></x-iq.field>
        <x-iq.field label="Pricing" name="pricing" optional><x-iq.input name="pricing" :value="$product->pricing" placeholder="From ₦15,000 / month" /></x-iq.field>
        <label class="iq-row" style="gap:12px;font-size:14px;align-self:end"><x-iq.switch name="is_visible" :checked="$product->is_visible ?? true" /> Show on my profile</label>
      </x-iq.form-group>

      @if ($product->exists)
      <x-iq.form-group title="Revenue & metrics" description="You decide how much to reveal. Revenue is never required.">
        @include('dashboard.partials.metric-rows', ['metrics' => $product->metrics, 'addUrl' => route('metrics.create', ['product' => $product->id])])
      </x-iq.form-group>
      @else
      <x-iq.form-group title="Revenue & metrics" description="You decide how much to reveal.">
        <p class="iq-help" style="grid-column:1/-1;margin:0">Save the product first, then add users, revenue or any other metric.</p>
      </x-iq.form-group>
      @endif

      <div class="app-formactions"><a class="iq-btn iq-btn-quiet" href="{{ route('products.index') }}">Cancel</a><button class="iq-btn iq-btn-primary">{{ $product->exists ? 'Save changes' : 'Add to profile' }}</button></div>
    </div>

    <aside class="app-creator-aside">
      <span class="iq-overline">Card preview</span>
      @php($card = $product->exists ? $product->metrics->firstWhere('show_on_card', true) : null)
      <article class="iq-card iq-entity">
        <div class="iq-row" style="justify-content:space-between"><x-iq.tile :name="$product->name ?: 'P'" :src="$product->logo_url" size="sm" /><x-iq.status :status="$product->status" /></div>
        <div><h3 class="iq-card-title" data-preview="name">{{ $product->name ?: 'Product name' }}</h3><p class="iq-card-desc" style="margin-top:4px" data-preview="description">{{ $product->description ?: 'What it does, for whom.' }}</p></div>
        <div class="iq-card-foot" style="margin-top:auto">
          @if ($card)<div class="iq-kv"><span class="v">{{ $card->is_public ? $card->formatted_value : 'Private' }}</span><span class="k">{{ $card->name }}</span></div>@else<span></span>@endif
          <div class="iq-meta" style="text-align:right"><span data-preview="category">{{ $product->category ?: 'Category' }}</span></div>
        </div>
      </article>
    </aside>
  </div>
</form>

@if ($product->exists)
<form method="POST" action="{{ route('products.destroy', $product) }}" style="margin-top:32px" data-confirm="Delete {{ $product->name }}?" data-confirm-body="It will be removed from your profile the next time you publish." data-confirm-action="Delete product">
  @csrf @method('DELETE')<button class="iq-btn iq-btn-danger iq-btn-sm"><x-iq.icon name="trash" /> Delete product</button>
</form>
@endif
@endsection