@extends('layout.admin')

@section('content')
<div class="mx-auto px-2 sm:px-3 md:px-4 max-w-4xl">

  <div class="flex items-center justify-between gap-2 flex-wrap mb-2 mt-0.5">
    <h1 class="text-lg font-semibold tracking-tight">Add Product</h1>
    <a href="{{ route('admin.products.index') }}" class="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 px-3 py-1.5 hover:bg-gray-50 text-sm">
      <i class="fa-solid fa-list text-[12px]"></i> Back to list
    </a>
  </div>

  @if($errors->any())
    <div class="mb-2 rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-rose-800 text-sm">
      <div class="font-semibold mb-1"><i class="fa-solid fa-triangle-exclamation mr-1.5"></i> Please fix:</div>
      <ul class="list-disc pl-4 space-y-0.5">
        @foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach
      </ul>
    </div>
  @endif

  <div class="rounded-xl bg-white shadow-sm border border-gray-100">
    <form action="{{ route('admin.products.store') }}" method="POST" enctype="multipart/form-data" class="p-3 grid gap-3">
      @csrf

      {{-- Category + Title --}}
      <div class="grid md:grid-cols-2 gap-3">
        <div class="grid gap-1.5">
          <label class="text-sm font-medium text-gray-700">Category <span class="text-rose-500">*</span></label>
          <select name="category_id" class="w-full rounded-lg border border-gray-200 px-3 py-2 text-[15px] focus:ring-2 focus:ring-indigo-500/50" required>
            <option value="">Select category</option>
            @foreach($categories as $c)
              <option value="{{ $c->id }}" @selected(old('category_id')==$c->id)>{{ $c->name }}</option>
            @endforeach
          </select>
        </div>
        <div class="grid gap-1.5">
          <label class="text-sm font-medium text-gray-700">Title <span class="text-rose-500">*</span></label>
          <input type="text" name="title" value="{{ old('title') }}" class="w-full rounded-lg border border-gray-200 px-3 py-2 text-[15px] focus:ring-2 focus:ring-indigo-500/50" required>
        </div>
      </div>

      {{-- Description --}}
      <div class="grid gap-1.5">
        <label class="text-sm font-medium text-gray-700">Description</label>
        <textarea name="description" rows="4" class="w-full rounded-lg border border-gray-200 px-3 py-2 text-[15px] focus:ring-2 focus:ring-indigo-500/50">{{ old('description') }}</textarea>
      </div>

      {{-- Admin / Reseller --}}
      <div class="grid md:grid-cols-2 gap-3">
        <div class="grid gap-1.5">
          <label class="text-sm font-medium text-gray-700">Admin Price (৳) <span class="text-rose-500">*</span></label>
          <input type="number" step="0.01" min="0" name="admin_price" value="{{ old('admin_price') }}" required class="w-full rounded-lg border border-gray-200 px-3 py-2">
        </div>
        <div class="grid gap-1.5">
          <label class="text-sm font-medium text-gray-700">Reseller Price (৳)</label>
          <input type="number" step="0.01" min="0" name="reseller_price" value="{{ old('reseller_price',0) }}" class="w-full rounded-lg border border-gray-200 px-3 py-2">
        </div>
      </div>

      {{-- Zone-wise Delivery charge --}}
      <div class="grid gap-1.5">
        <label class="text-sm font-medium text-gray-700">Zone-wise Delivery Charge (৳)</label>
        <div class="grid md:grid-cols-3 gap-3">
          <div class="grid gap-1.5">
            <label class="text-xs font-medium text-gray-500">ঢাকা সিটি</label>
            <input type="number" step="0.01" min="0" name="delivery_charge_dhaka_city" value="{{ old('delivery_charge_dhaka_city', old('delivery_charge', \App\Models\Product::DEFAULT_DELIVERY_CHARGE_DHAKA_CITY)) }}" class="w-full rounded-lg border border-gray-200 px-3 py-2">
          </div>
          <div class="grid gap-1.5">
            <label class="text-xs font-medium text-gray-500">সাব ঢাকা</label>
            <input type="number" step="0.01" min="0" name="delivery_charge_sub_dhaka" value="{{ old('delivery_charge_sub_dhaka', old('delivery_charge', \App\Models\Product::DEFAULT_DELIVERY_CHARGE_SUB_DHAKA)) }}" class="w-full rounded-lg border border-gray-200 px-3 py-2">
          </div>
          <div class="grid gap-1.5">
            <label class="text-xs font-medium text-gray-500">আউট ঢাকা</label>
            <input type="number" step="0.01" min="0" name="delivery_charge_outside_dhaka" value="{{ old('delivery_charge_outside_dhaka', old('delivery_charge', \App\Models\Product::DEFAULT_DELIVERY_CHARGE_OUT_DHAKA)) }}" class="w-full rounded-lg border border-gray-200 px-3 py-2">
          </div>
        </div>
        <p class="text-xs text-gray-500">অর্ডারের সময় user যেই zone সিলেক্ট করবে, সেই charge apply হবে।</p>
      </div>

      {{-- Delivery payment type / Stock / Delivery time --}}
      <div class="grid md:grid-cols-3 gap-3">
        <div class="grid gap-1.5">
          <label class="text-sm font-medium text-gray-700">Advance?</label>
          <select name="delivery_payment_type" class="w-full rounded-lg border border-gray-200 px-3 py-2">
            <option value="0" @selected(old('delivery_payment_type')==='0')>অগ্রিম লাগবে না</option>
            <option value="1" @selected(old('delivery_payment_type')==='1')>অগ্রিম পেমেন্ট লাগবে</option>
          </select>
        </div>
        <div class="grid gap-1.5">
          <label class="text-sm font-medium text-gray-700">Stock <span class="text-rose-500">*</span></label>
          <input type="number" min="0" name="stock" value="{{ old('stock',0) }}" required class="w-full rounded-lg border border-gray-200 px-3 py-2">
        </div>
        <div class="grid gap-1.5">
          <label class="text-sm font-medium text-gray-700">Delivery Time</label>
          <input type="text" name="delivery_time" value="{{ old('delivery_time') }}" placeholder="e.g. 2-4 days" class="w-full rounded-lg border border-gray-200 px-3 py-2">
        </div>
      </div>

      {{-- Optional Size / Color --}}
      <div class="grid md:grid-cols-2 gap-3">
        <div class="grid gap-1.5">
          <label class="text-sm font-medium text-gray-700">Size (optional)</label>
          <input type="text" name="size" value="{{ old('size') }}" class="w-full rounded-lg border border-gray-200 px-3 py-2">
        </div>
        <div class="grid gap-1.5">
          <label class="text-sm font-medium text-gray-700">Color (optional)</label>
          <input type="text" name="color" value="{{ old('color') }}" class="w-full rounded-lg border border-gray-200 px-3 py-2">
        </div>
      </div>

      {{-- Banner photo (single) --}}
      <div class="grid gap-1.5">
        <label class="text-sm font-medium text-gray-700">Banner Photo (১টি)</label>
        <input type="file" name="banner_photo" accept="image/*" class="w-full rounded-lg border border-gray-200 px-3 py-2">
      </div>

      {{-- Product photos (multiple) --}}
      <div class="grid gap-1.5">
        <label class="text-sm font-medium text-gray-700">Product Photos (multiple)</label>
        <input type="file" name="photos[]" accept="image/*" multiple class="w-full rounded-lg border border-gray-200 px-3 py-2">
        <p class="text-xs text-gray-500">একসাথে একাধিক ছবি সিলেক্ট করতে পারবেন।</p>
      </div>

      {{-- Status + Actions --}}
      <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 pt-1">
        <label class="inline-flex items-center gap-2">
          <input type="checkbox" name="status" value="1" {{ old('status','1') ? 'checked' : '' }} class="h-4 w-4 text-indigo-600">
          <span class="text-sm text-gray-700">Active</span>
        </label>

        <div class="sm:ml-auto flex gap-2">
          <button class="inline-flex items-center gap-1.5 rounded-lg border border-indigo-600 bg-indigo-600 px-3.5 py-2 text-white hover:bg-indigo-700 text-sm">
            <i class="fa-solid fa-floppy-disk text-[12px]"></i> Save Product
          </button>
          <a href="{{ route('admin.products.index') }}" class="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 px-3.5 py-2 hover:bg-gray-50 text-sm">
            Cancel
          </a>
        </div>
      </div>

    </form>
  </div>
</div>
@endsection
