@extends('layouts.dash')
@section('title', $package->exists ? 'Edit Package' : 'New Package')
@section('content')
@php $pricingService = $pricingService ?? null; @endphp
<div class="page-head">
  <div><h1>{{ $pricingService ? 'Price Management' : ($package->exists ? 'Edit Package' : 'New Package') }}</h1><p>{{ $pricingService ? 'Create a product card for '.$pricingService->name.'. Price ৳0 = free instant-claim.' : 'Price ৳0 = free instant-claim package.' }}</p></div>
  <a class="btn btn-outline btn-sm" href="{{ $pricingService ? route('admin.services.pricing', $pricingService) : route('admin.packages') }}"><i class="fa-solid fa-arrow-left"></i>Back</a>
</div>
<div class="card" style="max-width:640px">
  <form method="POST" action="{{ $pricingService ? ($package->exists ? route('admin.services.pricing.update', [$pricingService, $package]) : route('admin.services.pricing.store', $pricingService)) : ($package->exists ? route('admin.packages.update', $package) : route('admin.packages.store')) }}">
    @csrf
    @if($package->exists) @method('PATCH') @endif
    @if($pricingService)
      <input type="hidden" name="service_id" value="{{ $pricingService->id }}">
      <div class="form-group"><label>API</label><div class="form-control" style="display:flex;align-items:center;gap:8px;background:var(--bg);font-weight:800"><i class="fa-solid {{ $pricingService->icon ?: 'fa-plug' }}" style="color:var(--primary)"></i>{{ $pricingService->name }} <span class="mono text-gray" style="font-size:11px">/api/{{ $pricingService->slug }}</span></div></div>
    @else
      <div class="form-group"><label>API <span class="req">*</span></label><select name="service_id" class="form-control">@foreach($services as $s)<option value="{{ $s->id }}" {{ old('service_id', $package->service_id) == $s->id ? 'selected' : '' }}>{{ $s->name }}</option>@endforeach</select></div>
    @endif
    <div class="form-row">
      <div class="form-group"><label>Package Name <span class="req">*</span></label><input type="text" name="name" class="form-control" required value="{{ old('name', $package->name ?? '') }}"></div>
      <div class="form-group"><label>Price (৳) <span class="req">*</span></label><input type="number" name="price" id="packagePrice" class="form-control" min="0" step="0.01" value="{{ old('price', $package->price ?? 100) }}"><div class="form-hint">0 = FREE (auto-approved)</div></div>
    </div>
    <div class="form-row">
      <div class="form-group"><label>Credits</label><input type="number" name="requests" id="packageRequests" class="form-control" min="1" value="{{ old('requests', $package->requests ?? 1000) }}"><div class="form-hint" id="packageUnitPrice">Unit price will appear here.</div></div>
      <div class="form-group"><label>Validity (days)</label><input type="number" name="validity_days" class="form-control" min="1" value="{{ old('validity_days', $package->validity_days ?? 30) }}"></div>
    </div>
    <div class="form-group"><label>Features (one per line)</label><textarea name="features" class="form-control">{{ old('features', $package->features ?? "Instant activation\n24/7 support") }}</textarea></div>
    <div class="form-row">
      <div class="form-group"><label>Status</label><select name="status" class="form-control"><option value="active" {{ old('status', $package->status ?? 'active') === 'active' ? 'selected' : '' }}>Active</option><option value="inactive" {{ old('status', $package->status) === 'inactive' ? 'selected' : '' }}>Inactive</option></select></div>
      <div class="form-group"><label>Sort Order</label><input type="number" name="sort_order" class="form-control" value="{{ old('sort_order', $package->sort_order ?? 0) }}"></div>
    </div>
    <label class="checkbox-row mb"><input type="checkbox" name="highlight" value="1" {{ old('highlight', $package->highlight ?? false) ? 'checked' : '' }}> Mark as "Most Popular"</label>
    <button class="btn btn-primary btn-block" type="submit"><i class="fa-solid fa-check"></i>{{ $pricingService ? ($package->exists ? 'Save Product Card' : 'Create Product Card') : ($package->exists ? 'Save Changes' : 'Create Package') }}</button>
  </form>
</div>
@push('scripts')
<script>
(function(){
  const price=document.getElementById('packagePrice'), requests=document.getElementById('packageRequests'), out=document.getElementById('packageUnitPrice');
  function update(){ const p=parseFloat(price?.value||0), q=parseInt(requests?.value||0); if(out) out.textContent=p>0 && q>0 ? 'Effective rate: ৳'+(p/q).toFixed(4)+' per credit' : 'Free package: credits are claimed instantly.'; }
  price?.addEventListener('input',update); requests?.addEventListener('input',update); update();
})();
</script>
@endpush
@endsection