@extends('layout.admin')
@section('title','Edit Target Campaign')

@section('content')
<div class="max-w-3xl mx-auto px-4 py-6">
  <h1 class="text-xl font-extrabold text-slate-800 mb-4">✏️ Edit: {{ $target->title }}</h1>

  @if($errors->any())
    <div class="mb-4 rounded-lg border border-rose-200 bg-rose-50 text-rose-700 px-3 py-2">
      {{ $errors->first() }}
    </div>
  @endif

  <form method="POST" action="{{ route('admin.targets.update',$target->id) }}" class="grid gap-4 bg-white p-4 rounded-xl border border-slate-200">
    @csrf @method('PUT')

    <div>
      <label class="text-sm font-semibold text-slate-700">Title</label>
      <input name="title" value="{{ old('title',$target->title) }}" required class="mt-1 w-full border rounded-lg px-3 py-2"/>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
      <div>
        <label class="text-sm font-semibold text-slate-700">Project Type</label>
        <select name="project_type" id="project_type" class="mt-1 w-full border rounded-lg px-3 py-2" required>
          @foreach(['referral','jobpost','drive_offer','product'] as $opt)
            <option value="{{ $opt }}" {{ old('project_type',$target->project_type)===$opt?'selected':'' }}>
              {{ ucfirst(str_replace('_',' ',$opt)) }}
            </option>
          @endforeach
        </select>
      </div>

      <div id="level_wrap" class="{{ old('project_type',$target->project_type)==='referral' ? '' : 'hidden' }}">
        <label class="text-sm font-semibold text-slate-700">Referral Level (1-10)</label>
        <input type="number" name="referral_level" min="1" max="10" value="{{ old('referral_level',$target->referral_level) }}"
               class="mt-1 w-full border rounded-lg px-3 py-2"/>
      </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
      <div>
        <label class="text-sm font-semibold text-slate-700">Required Count</label>
        <input type="number" name="required_count" min="1" value="{{ old('required_count',$target->required_count) }}"
               class="mt-1 w-full border rounded-lg px-3 py-2" required/>
      </div>
      <div>
        <label class="text-sm font-semibold text-slate-700">Bonus Amount (৳)</label>
        <input type="number" step="0.01" min="0.01" name="bonus_amount" value="{{ old('bonus_amount',$target->bonus_amount) }}"
               class="mt-1 w-full border rounded-lg px-3 py-2" required/>
      </div>
      <div>
        <label class="text-sm font-semibold text-slate-700">Bonus Wallet</label>
        <select name="bonus_wallet" class="mt-1 w-full border rounded-lg px-3 py-2">
          <option value="cash" {{ old('bonus_wallet',$target->bonus_wallet)==='cash'?'selected':'' }}>Cash (balance)</option>
          <option value="voucher" {{ old('bonus_wallet',$target->bonus_wallet)==='voucher'?'selected':'' }}>Voucher</option>
        </select>
      </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
      <div>
        <label class="text-sm font-semibold text-slate-700">Start At</label>
        <input type="datetime-local" name="start_at"
               value="{{ old('start_at', $target->start_at->format('Y-m-d\TH:i')) }}"
               class="mt-1 w-full border rounded-lg px-3 py-2" required/>
      </div>
      <div>
        <label class="text-sm font-semibold text-slate-700">End At</label>
        <input type="datetime-local" name="end_at"
               value="{{ old('end_at', $target->end_at->format('Y-m-d\TH:i')) }}"
               class="mt-1 w-full border rounded-lg px-3 py-2" required/>
      </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
      <div>
        <label class="text-sm font-semibold text-slate-700">Status</label>
        <select name="is_active" class="mt-1 w-full border rounded-lg px-3 py-2">
          <option value="1" {{ old('is_active',$target->is_active)?'selected':'' }}>Active</option>
          <option value="0" {{ old('is_active',$target->is_active)?'':'selected' }}>Inactive</option>
        </select>
      </div>
      <div>
        <label class="text-sm font-semibold text-slate-700">Description (optional)</label>
        <textarea name="description" rows="1" class="mt-1 w-full border rounded-lg px-3 py-2">{{ old('description',$target->description) }}</textarea>
      </div>
    </div>

    <div class="pt-2 flex items-center gap-2">
      <button class="px-4 py-2 rounded-lg bg-indigo-600 text-white font-semibold hover:opacity-95">Update</button>
      <a href="{{ route('admin.targets.index') }}" class="px-4 py-2 rounded-lg border border-slate-300 text-slate-700">Cancel</a>
    </div>
  </form>
</div>

@push('scripts')
<script>
  (function(){
    const typeSel = document.getElementById('project_type');
    const levelWrap = document.getElementById('level_wrap');
    function toggleLevel(){
      levelWrap.classList.toggle('hidden', typeSel.value !== 'referral');
    }
    typeSel.addEventListener('change', toggleLevel);
    toggleLevel();
  })();
</script>
@endpush
@endsection