@php
  $logoUrl = $method->logo_path
    ? (Str::startsWith($method->logo_path, ['http','/']) ? $method->logo_path : asset('storage/'.$method->logo_path))
    : null;

  $instructionUrl = $method->instruction_img
    ? (Str::startsWith($method->instruction_img, ['http','/']) ? $method->instruction_img : asset('storage/'.$method->instruction_img))
    : null;
@endphp

{{-- Errors --}}
@if ($errors->any())
  <div class="rounded-xl border border-rose-200 bg-rose-50/70 px-3 py-2 text-sm text-rose-800">
    <i class="fa-solid fa-triangle-exclamation"></i>
    {{ $errors->first() }}
  </div>
@endif

<div class="grid grid-cols-1 gap-4">
  {{-- key + label --}}
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
    <div>
      <label class="mb-1 block text-sm font-semibold">Key <span class="text-slate-400">(e.g. bkash)</span></label>
      <input name="key" value="{{ old('key', $method->key) }}" required
             class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-rose-500/60">
    </div>
    <div>
      <label class="mb-1 block text-sm font-semibold">Label</label>
      <input name="label" value="{{ old('label', $method->label) }}" required
             class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-rose-500/60">
    </div>
  </div>

  {{-- agent + sort --}}
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
    <div>
      <label class="mb-1 block text-sm font-semibold">Agent Number</label>
      <input name="agent_number" value="{{ old('agent_number', $method->agent_number) }}"
             class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-rose-500/60">
    </div>
    <div>
      <label class="mb-1 block text-sm font-semibold">Sort</label>
      <input type="number" min="0" name="sort" value="{{ old('sort', (int)$method->sort) }}"
             class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-rose-500/60">
    </div>
  </div>

  {{-- logo url + upload --}}
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
    <div>
      <label class="mb-1 block text-sm font-semibold">Logo URL (optional)</label>
      <input name="logo_path" value="{{ old('logo_path', $method->logo_path) }}"
             class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-rose-500/60" placeholder="https://...">
      <div class="mt-2 text-xs text-slate-500">OR upload below</div>
      <input type="file" name="logo_file" accept="image/*" class="mt-1 block w-full text-sm">
    </div>
    <div class="flex items-end">
      <div class="flex items-center gap-3">
        <div class="h-14 w-14 overflow-hidden rounded-lg ring-1 ring-slate-200 bg-white">
          @if($logoUrl)
            <img src="{{ $logoUrl }}" class="h-full w-full object-contain">
          @else
            <i class="fa-regular fa-image text-slate-300 text-2xl flex items-center justify-center h-full w-full"></i>
          @endif
        </div>
        <div class="text-xs text-slate-500">
          Current preview
        </div>
      </div>
    </div>
  </div>

  {{-- instruction url + upload --}}
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
    <div>
      <label class="mb-1 block text-sm font-semibold">Instruction Image URL (optional)</label>
      <input name="instruction_img" value="{{ old('instruction_img', $method->instruction_img) }}"
             class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-rose-500/60" placeholder="https://...">
      <div class="mt-2 text-xs text-slate-500">OR upload below</div>
      <input type="file" name="instruction_file" accept="image/*" class="mt-1 block w-full text-sm">
    </div>
    <div class="flex items-end">
      <div class="flex items-center gap-3">
        <div class="h-14 w-24 overflow-hidden rounded-lg ring-1 ring-slate-200 bg-white">
          @if($instructionUrl)
            <img src="{{ $instructionUrl }}" class="h-full w-full object-contain">
          @else
            <i class="fa-regular fa-image text-slate-300 text-2xl flex items-center justify-center h-full w-full"></i>
          @endif
        </div>
        <div class="text-xs text-slate-500">Current preview</div>
      </div>
    </div>
  </div>

  {{-- active --}}
  <div class="flex items-center gap-2">
    <input type="hidden" name="is_active" value="0">
    <input id="is_active" type="checkbox" name="is_active" value="1" {{ old('is_active', $method->is_active) ? 'checked' : '' }}
           class="h-4 w-4 rounded border-slate-300 text-rose-600 focus:ring-rose-500">
    <label for="is_active" class="text-sm font-semibold">Active</label>
  </div>
</div>