@extends('layouts.admin')

@section('title', isset($product) ? 'Edit Add-on Product' : 'New Add-on Product')
@section('page-title', isset($product) ? 'Edit Add-on Product' : 'New Add-on Product')

@section('content')
<div class="mx-auto max-w-2xl space-y-6">

    <div class="flex items-center gap-4">
        <a href="{{ route('admin.addons.index') }}"
           class="rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50">
            ← Back
        </a>
        <h2 class="text-xl font-bold text-slate-900">
            {{ isset($product) ? "Edit: {$product->name}" : 'Create Add-on Product' }}
        </h2>
    </div>

    @if($errors->any())
        <div class="rounded-2xl border border-red-200 bg-red-50 px-5 py-4 text-sm text-red-800">
            <ul class="list-inside list-disc space-y-1">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST"
          action="{{ isset($product) ? route('admin.addons.update', $product) : route('admin.addons.store') }}"
          class="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm space-y-6">
        @csrf
        @if(isset($product)) @method('PUT') @endif

        {{-- Name --}}
        <div>
            <label class="block text-sm font-semibold text-slate-700">Product Name <span class="text-red-500">*</span></label>
            <input type="text" name="name" value="{{ old('name', $product?->name) }}" required
                   class="mt-1.5 w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10"
                   placeholder="e.g. Extra Monthly Reports">
        </div>

        {{-- Description --}}
        <div>
            <label class="block text-sm font-semibold text-slate-700">Description</label>
            <textarea name="description" rows="3"
                      class="mt-1.5 w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10"
                      placeholder="Short description shown to users…">{{ old('description', $product?->description) }}</textarea>
        </div>

        {{-- Price & Currency --}}
        <div class="grid gap-4 sm:grid-cols-2">
            <div>
                <label class="block text-sm font-semibold text-slate-700">Price <span class="text-red-500">*</span></label>
                <input type="number" name="price" step="0.01" min="0"
                       value="{{ old('price', $product?->price) }}" required
                       class="mt-1.5 w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10"
                       placeholder="9.99">
            </div>
            <div>
                <label class="block text-sm font-semibold text-slate-700">Currency <span class="text-red-500">*</span></label>
                <select name="currency" required
                        class="mt-1.5 w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                    @foreach(['usd' => 'USD', 'eur' => 'EUR', 'gbp' => 'GBP', 'myr' => 'MYR', 'sgd' => 'SGD'] as $code => $label)
                        <option value="{{ $code }}" @selected(old('currency', $product?->currency ?? 'usd') === $code)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- Type --}}
        <div>
            <label class="block text-sm font-semibold text-slate-700">Product Type <span class="text-red-500">*</span></label>
            <select name="type" required
                    class="mt-1.5 w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                <option value="one_time"       @selected(old('type', $product?->type) === 'one_time')>One-time Purchase</option>
                <option value="credit_pack"    @selected(old('type', $product?->type) === 'credit_pack')>Credit Pack</option>
                <option value="feature_unlock" @selected(old('type', $product?->type) === 'feature_unlock')>Feature Unlock</option>
            </select>
        </div>

        {{-- Payment IDs --}}
        <div class="grid gap-4 sm:grid-cols-2">
            <div>
                <label class="block text-sm font-semibold text-slate-700">Stripe Price ID</label>
                <input type="text" name="stripe_price_id"
                       value="{{ old('stripe_price_id', $product?->stripe_price_id) }}"
                       class="mt-1.5 w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10"
                       placeholder="price_xxxxxxxxxxxxx">
                <p class="mt-1 text-xs text-slate-400">From your Stripe dashboard → Products.</p>
            </div>
            <div>
                <label class="block text-sm font-semibold text-slate-700">PayPal Item ID</label>
                <input type="text" name="paypal_item_id"
                       value="{{ old('paypal_item_id', $product?->paypal_item_id) }}"
                       class="mt-1.5 w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10"
                       placeholder="SKU or PayPal catalog item ID">
            </div>
        </div>

        {{-- Active toggle --}}
        <div class="flex items-center gap-3">
            <input type="hidden" name="is_active" value="0">
            <input type="checkbox" id="is_active" name="is_active" value="1"
                   @checked(old('is_active', $product?->is_active ?? true))
                   class="h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-600">
            <label for="is_active" class="text-sm font-semibold text-slate-700">Active (visible to users in-app)</label>
        </div>

        {{-- Submit --}}
        <div class="flex items-center justify-end gap-3 border-t border-slate-100 pt-4">
            <a href="{{ route('admin.addons.index') }}"
               class="rounded-2xl border border-slate-200 bg-white px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50">
                Cancel
            </a>
            <button type="submit"
                    class="rounded-2xl bg-brand-600 px-6 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-brand-700">
                {{ isset($product) ? 'Save Changes' : 'Create Product' }}
            </button>
        </div>
    </form>

</div>
@endsection