@php
  $money = fn (int $cents) => 'AUD '.number_format($cents / 100);
  $canManage = $wsMember->canManageTeam();
  $canLocations = $wsMember->canApprove();
  $currentTier = $wsCompany->tier;
@endphp
<x-layouts.wholesale :seo="$seo" title="Account & terms" subtitle="Your company profile, trade terms and delivery locations">
{{-- Terms --}}
<section class="grid grid-cols-2 gap-4 lg:grid-cols-4">
  @foreach([
    ['Tier', $currentTier?->name ?? 'Wholesale', 'crown'],
    ['Base discount', $wsCompany->baseDiscountLabel().($wsCompany->hasActiveCustomDiscount() ? ' ★' : ''), 'badge-percent'],
    ['Payment terms', $wsCompany->paymentTerm?->name ?? 'Proforma', 'calendar-clock'],
    ['Credit limit', $credit['limit_cents'] ? $money($credit['limit_cents']) : '—', 'landmark'],
  ] as $i => [$label, $value, $icon])
    <div class="wd-card wd-reveal p-5" style="--i:{{ $i }}">
      <div class="flex items-center justify-between"><p class="text-xs text-black/50">{{ $label }}</p><i data-lucide="{{ $icon }}" class="h-4 w-4 text-black/35"></i></div>
      <p class="mt-2 text-xl font-semibold">{{ $value }}</p>
    </div>
  @endforeach
</section>

{{-- Tier comparison --}}
@if($tiers->isNotEmpty())
  <section class="wd-card wd-reveal mt-6 p-6" style="--i:4">
    <div class="flex flex-wrap items-end justify-between gap-3">
      <div>
        <p class="wd-eyebrow">Partner program</p>
        <h2 class="mt-1 text-lg font-semibold">Tiers grow with your 12-month spend</h2>
      </div>
      <p class="text-sm text-black/50">Your trailing 12 months: <strong class="text-black">{{ $money($tierProgress['spend_cents']) }}</strong></p>
    </div>
    <div class="mt-5 grid gap-3 sm:grid-cols-2 {{ [1 => 'lg:grid-cols-1', 2 => 'lg:grid-cols-2', 3 => 'lg:grid-cols-3'][$tiers->count()] ?? 'lg:grid-cols-4' }}">
      @foreach($tiers as $tier)
        @php $isCurrent = $currentTier?->is($tier); @endphp
        <div class="relative rounded-2xl border p-5 {{ $isCurrent ? 'border-transparent bg-[#0b0b0b] text-white shadow-[0_24px_50px_-28px_rgba(0,0,0,.7)]' : 'border-black/10' }}">
          @if($isCurrent)<span class="absolute right-4 top-4 wd-pill wd-pill-gold">Your tier</span>@endif
          <span class="flex h-9 w-9 items-center justify-center rounded-full" style="background: {{ $tier->color }}22; color: {{ $tier->color }}"><i data-lucide="gem" class="h-4 w-4"></i></span>
          <p class="mt-3 font-semibold">{{ $tier->name }}</p>
          <p class="text-3xl wd-kpi" style="color: {{ $tier->color }}">{{ $tier->discountLabel() }}</p>
          <p class="mt-1 text-xs {{ $isCurrent ? 'text-white/50' : 'text-black/45' }}">{{ $tier->annual_spend_threshold_cents ? 'From '.$money($tier->annual_spend_threshold_cents).' / year' : 'Entry tier' }}{{ $tier->min_order_cents ? ' · min order '.$money($tier->min_order_cents) : '' }}</p>
          @if(! empty($tier->perks))
            <ul class="mt-4 space-y-1.5 text-xs {{ $isCurrent ? 'text-white/75' : 'text-black/65' }}">
              @foreach($tier->perks as $perk)
                <li class="flex gap-2"><i data-lucide="check" class="mt-0.5 h-3.5 w-3.5 shrink-0" style="color: {{ $tier->color }}"></i>{{ $perk }}</li>
              @endforeach
            </ul>
          @endif
        </div>
      @endforeach
    </div>
  </section>
@endif

<div class="mt-6 grid gap-6 lg:grid-cols-2">
  {{-- Company details --}}
  <section id="company" class="wd-card wd-reveal scroll-mt-24 p-6" style="--i:5">
    <p class="wd-eyebrow">Company</p>
    <h2 class="mt-1 text-lg font-semibold">{{ $wsCompany->name }}</h2>
    <form method="post" action="{{ route('wholesale.account.update') }}" class="mt-4 grid gap-4 sm:grid-cols-2">@csrf @method('PUT')
      <label class="block sm:col-span-2"><span class="wd-label">Trading name</span><input name="trading_name" value="{{ old('trading_name', $wsCompany->trading_name) }}" class="wd-input" @disabled(! $canManage)></label>
      <label class="block"><span class="wd-label">ABN / tax ID</span><input name="abn" value="{{ old('abn', $wsCompany->abn) }}" class="wd-input" @disabled(! $canManage)></label>
      <label class="block"><span class="wd-label">Phone</span><input name="phone" value="{{ old('phone', $wsCompany->phone) }}" class="wd-input" @disabled(! $canManage)></label>
      <label class="block sm:col-span-2"><span class="wd-label">Website</span><input name="website" type="url" value="{{ old('website', $wsCompany->website) }}" class="wd-input" placeholder="https://" @disabled(! $canManage)></label>
      @if($canManage)
        <div class="sm:col-span-2"><button class="wd-btn wd-btn-primary">Save details</button></div>
      @else
        <p class="text-xs text-black/45 sm:col-span-2">Only account owners can edit company details.</p>
      @endif
    </form>
  </section>

  {{-- Volume pricing --}}
  <section class="wd-card wd-reveal p-6" style="--i:6">
    <p class="wd-eyebrow">Volume pricing</p>
    <h2 class="mt-1 text-lg font-semibold">Your active breaks</h2>
    <p class="mt-1 text-sm text-black/50">Order-wide breaks add to your tier discount. Product breaks apply when they beat your order rate — you always get the better price.</p>
    <ul class="mt-4 space-y-2">
      @forelse($rules as $rule)
        <li class="flex items-center justify-between gap-3 rounded-xl border border-black/5 px-4 py-3 text-sm">
          <span class="flex items-center gap-2.5">
            <i data-lucide="{{ $rule->basis === 'quantity' ? 'boxes' : 'banknote' }}" class="h-4 w-4 text-black/40"></i>
            <span>{{ $rule->thresholdLabel() }} <span class="text-black/45">· {{ $rule->product?->title ?? 'whole order' }}</span>@if($rule->ends_at)<span class="block text-[11px] text-amber-700">Ends {{ $rule->ends_at->format('d M Y') }}</span>@endif</span>
          </span>
          <span class="wd-pill wd-pill-gold">{{ $rule->discountLabel() }}</span>
        </li>
      @empty
        <li class="rounded-xl bg-black/[0.03] p-4 text-sm text-black/50">No volume breaks are configured for your account yet.</li>
      @endforelse
    </ul>
  </section>
</div>

{{-- Locations --}}
<section id="locations" class="wd-card wd-reveal mt-6 scroll-mt-24 p-6" style="--i:7">
  <p class="wd-eyebrow">Delivery</p>
  <h2 class="mt-1 text-lg font-semibold">Locations</h2>
  <div class="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
    @forelse($locations as $location)
      <div class="rounded-2xl border border-black/10 p-4">
        <div class="flex items-start justify-between gap-2">
          <p class="flex items-center gap-2 font-semibold"><i data-lucide="map-pin" class="h-4 w-4 text-[var(--color-gold-dark)]"></i>{{ $location->label }}</p>
          @if($location->is_default)<span class="wd-pill">Default</span>@endif
        </div>
        <p class="mt-2 text-sm text-black/60">{{ $location->oneLine() }}</p>
        @if($canLocations && ! $location->is_default)
          <form method="post" action="{{ route('wholesale.account.locations.destroy', $location) }}" class="mt-3" data-wd-confirm="Remove {{ $location->label }}?">@csrf @method('DELETE')
            <button class="text-xs font-medium text-red-700 hover:underline">Remove</button>
          </form>
        @endif
      </div>
    @empty
      <p class="text-sm text-black/50">No locations yet.</p>
    @endforelse
  </div>

  @if($canLocations)
    <details class="mt-5 rounded-2xl border border-dashed border-black/15" @if($errors->hasAny(['label', 'line1', 'city', 'postal_code', 'country'])) open @endif>
      <summary class="flex cursor-pointer list-none items-center gap-2 px-4 py-3 text-sm font-medium"><i data-lucide="plus" class="h-4 w-4"></i> Add a location</summary>
      <form method="post" action="{{ route('wholesale.account.locations.store') }}" class="grid gap-3 border-t border-black/5 p-4 sm:grid-cols-6">@csrf
        <label class="block sm:col-span-2"><span class="wd-label">Label</span><input name="label" required maxlength="60" value="{{ old('label') }}" class="wd-input" placeholder="Warehouse, Gym 2…"></label>
        <label class="block sm:col-span-4"><span class="wd-label">Street</span><input name="line1" required maxlength="180" value="{{ old('line1') }}" class="wd-input"></label>
        <label class="block sm:col-span-3"><span class="wd-label">Unit / building</span><input name="line2" maxlength="180" value="{{ old('line2') }}" class="wd-input"></label>
        <label class="block sm:col-span-3"><span class="wd-label">City</span><input name="city" required maxlength="120" value="{{ old('city') }}" class="wd-input"></label>
        <label class="block sm:col-span-2"><span class="wd-label">State</span><input name="region" maxlength="120" value="{{ old('region') }}" class="wd-input"></label>
        <label class="block sm:col-span-2"><span class="wd-label">Postcode</span><input name="postal_code" required maxlength="20" value="{{ old('postal_code') }}" class="wd-input"></label>
        <label class="block sm:col-span-2"><span class="wd-label">Country</span><input name="country" required maxlength="2" value="{{ old('country', 'AU') }}" class="wd-input uppercase"></label>
        <label class="flex items-center gap-2 text-sm sm:col-span-4"><input type="checkbox" name="is_default" value="1" class="accent-[var(--color-gold-dark)]"> Make this the default delivery location</label>
        <div class="sm:col-span-2 sm:text-right"><button class="wd-btn wd-btn-primary">Add location</button></div>
      </form>
    </details>
  @endif
</section>

{{-- Profile & security --}}
@php
  $me = $wsMember->customer;
  $hasPassword = $me->password !== null;
@endphp
<section id="security" class="mt-6 grid scroll-mt-24 gap-6 lg:grid-cols-2">
  <div class="wd-card wd-reveal p-6" style="--i:8">
    <p class="wd-eyebrow">Your profile</p>
    <h2 class="mt-1 text-lg font-semibold">Personal details</h2>
    <p class="mt-1 text-sm text-black/50">How you appear to your team and on orders you place.</p>
    <form method="post" action="{{ route('wholesale.account.profile.update') }}" class="mt-4 grid gap-4 sm:grid-cols-2">@csrf @method('PUT')
      <label class="block sm:col-span-2"><span class="wd-label">Full name</span><input name="name" required maxlength="120" value="{{ old('name', $me->name) }}" class="wd-input"></label>
      <label class="block"><span class="wd-label">Email</span><input value="{{ $me->email }}" class="wd-input bg-black/[0.03]" disabled></label>
      <label class="block"><span class="wd-label">Phone</span><input name="phone" maxlength="40" value="{{ old('phone', $me->phone) }}" class="wd-input"></label>
      @if($errors->profile->any())<p class="text-sm text-red-700 sm:col-span-2">{{ $errors->profile->first() }}</p>@endif
      <div class="sm:col-span-2"><button class="wd-btn wd-btn-primary">Save profile</button></div>
    </form>
  </div>

  <div class="wd-card wd-reveal p-6" style="--i:9">
    <div class="flex items-start justify-between gap-3">
      <div>
        <p class="wd-eyebrow">Sign-in &amp; security</p>
        <h2 class="mt-1 text-lg font-semibold">{{ $hasPassword ? 'Change password' : 'Set a password' }}</h2>
      </div>
      <span class="wd-pill {{ $hasPassword ? 'wd-pill-gold' : '' }}"><i data-lucide="{{ $hasPassword ? 'shield-check' : 'shield' }}" class="h-3.5 w-3.5"></i> {{ $hasPassword ? 'Password on' : 'Code / Google only' }}</span>
    </div>
    <p class="mt-1 text-sm text-black/50">{{ $hasPassword ? 'Use 8+ characters with upper and lower case and a number.' : 'Add a password to sign in with email and password, as well as email codes or Google.' }}</p>
    <form method="post" action="{{ route('wholesale.account.password.update') }}" class="mt-4 grid gap-4">@csrf @method('PUT')
      @if($hasPassword)
        <label class="block"><span class="wd-label">Current password</span><input type="password" name="current_password" required autocomplete="current-password" class="wd-input"></label>
      @endif
      <div class="grid gap-4 sm:grid-cols-2">
        <label class="block"><span class="wd-label">New password</span><input type="password" name="password" required minlength="8" autocomplete="new-password" class="wd-input"></label>
        <label class="block"><span class="wd-label">Confirm new password</span><input type="password" name="password_confirmation" required autocomplete="new-password" class="wd-input"></label>
      </div>
      @if($errors->password->any())<p class="text-sm text-red-700">{{ $errors->password->first() }}</p>@endif
      <div class="flex flex-wrap items-center justify-between gap-3">
        <button class="wd-btn wd-btn-primary">{{ $hasPassword ? 'Update password' : 'Set password' }}</button>
        <span class="text-xs text-black/45">Last sign-in {{ $me->last_login_at?->diffForHumans() ?? '—' }}</span>
      </div>
    </form>
  </div>
</section>
</x-layouts.wholesale>