@extends('backend.master')
@section('title','Payment Methods')

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
@endpush

@section('content')
<div class="mx-auto  px-4 py-6">
  {{-- header --}}
  <div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
    <h1 class="text-xl font-extrabold">Payment Methods</h1>

    <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
      <form method="get" class="flex items-center gap-2">
        <div class="relative">
          <span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-slate-400">
            <i class="fa-solid fa-magnifying-glass"></i>
          </span>
          <input name="s" value="{{ request('s') }}" placeholder="Search..."
                 class="w-60 rounded-full border border-slate-200 bg-white pl-10 pr-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-rose-500/60">
        </div>
        <button class="rounded-full border border-slate-200 px-4 py-2 text-sm font-semibold hover:bg-slate-50">
          Filter
        </button>
      </form>

      <a href="{{ route('admin.payment_methods.create') }}"
         class="inline-flex items-center gap-2 rounded-full bg-rose-600 px-4 py-2 text-sm font-semibold text-white hover:brightness-105">
        <i class="fa-solid fa-plus"></i> Add Method
      </a>
    </div>
  </div>

  {{-- Table (desktop) --}}
  <div class="hidden overflow-x-auto rounded-2xl border border-slate-100 bg-white shadow-sm sm:block">
    <table class="min-w-full text-sm">
      <thead class="bg-slate-50 text-left text-slate-600">
        <tr>
          <th class="px-4 py-3">Logo</th>
          <th class="px-4 py-3">Label</th>
          <th class="px-4 py-3">Key</th>
          <th class="px-4 py-3">Agent</th>
          <th class="px-4 py-3">Active</th>
          <th class="px-4 py-3">Sort</th>
          <th class="px-4 py-3 text-right">Actions</th>
        </tr>
      </thead>
      <tbody>
        @forelse($methods as $m)
          <tr class="border-t">
            <td class="px-4 py-3">
              <div class="inline-flex h-10 w-10 items-center justify-center overflow-hidden rounded-lg ring-1 ring-slate-200 bg-white">
                @if($m->logo_path)
                  <img src="{{ Str::startsWith($m->logo_path, ['http','/']) ? $m->logo_path : asset('storage/'.$m->logo_path) }}"
                       alt="logo" class="h-full w-full object-contain">
                @else
                  <i class="fa-regular fa-image text-slate-300"></i>
                @endif
              </div>
            </td>
            <td class="px-4 py-3 font-semibold">{{ $m->label }}</td>
            <td class="px-4 py-3 text-slate-600">{{ $m->key }}</td>
            <td class="px-4 py-3">{{ $m->agent_number ?: '-' }}</td>
            <td class="px-4 py-3">
              <span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold
                {{ $m->is_active ? 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-100' : 'bg-slate-100 text-slate-600' }}">
                <i class="fa-solid {{ $m->is_active ? 'fa-check' : 'fa-minus' }}"></i>
                {{ $m->is_active ? 'Active' : 'Disabled' }}
              </span>
            </td>
            <td class="px-4 py-3">{{ $m->sort }}</td>
            <td class="px-4 py-3">
              <div class="flex items-center justify-end gap-2">
                <a href="{{ route('admin.payment_methods.edit', $m) }}"
                   class="inline-flex items-center gap-1 rounded-full border border-slate-200 px-3 py-1.5 text-xs hover:bg-slate-50">
                  <i class="fa-solid fa-pen-to-square"></i> Edit
                </a>
                <form action="{{ route('admin.payment_methods.toggle', $m) }}" method="POST" onsubmit="return confirm('Toggle status?')">
                  @csrf @method('PATCH')
                  <button class="inline-flex items-center gap-1 rounded-full border border-slate-200 px-3 py-1.5 text-xs hover:bg-slate-50">
                    <i class="fa-solid fa-toggle-on"></i> Toggle
                  </button>
                </form>
                <form action="{{ route('admin.payment_methods.destroy', $m) }}" method="POST" onsubmit="return confirm('Delete this method?')">
                  @csrf @method('DELETE')
                  <button class="inline-flex items-center gap-1 rounded-full border border-red-200 px-3 py-1.5 text-xs text-red-700 hover:bg-red-50">
                    <i class="fa-solid fa-trash"></i> Delete
                  </button>
                </form>
              </div>
            </td>
          </tr>
        @empty
          <tr><td colspan="7" class="px-4 py-6 text-center text-slate-500">No methods found.</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>

  {{-- Cards (mobile) --}}
  <div class="sm:hidden space-y-3">
    @forelse($methods as $m)
      <div class="rounded-2xl border border-slate-100 bg-white p-4 shadow-sm">
        <div class="flex items-center gap-3">
          <div class="inline-flex h-12 w-12 items-center justify-center overflow-hidden rounded-xl ring-1 ring-slate-200 bg-white">
            @if($m->logo_path)
              <img src="{{ Str::startsWith($m->logo_path, ['http','/']) ? $m->logo_path : asset('storage/'.$m->logo_path) }}"
                   alt="logo" class="h-full w-full object-contain">
            @else
              <i class="fa-regular fa-image text-slate-300"></i>
            @endif
          </div>
          <div class="min-w-0">
            <div class="font-extrabold">{{ $m->label }}</div>
            <div class="text-xs text-slate-500">Key: {{ $m->key }}</div>
          </div>
          <span class="ms-auto inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[11px] font-semibold
            {{ $m->is_active ? 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-100' : 'bg-slate-100 text-slate-600' }}">
            <i class="fa-solid {{ $m->is_active ? 'fa-check' : 'fa-minus' }}"></i>
            {{ $m->is_active ? 'Active' : 'Disabled' }}
          </span>
        </div>

        <div class="mt-3 grid grid-cols-2 gap-2 text-sm">
          <div class="rounded-lg bg-slate-50 px-3 py-2">
            <div class="text-[11px] text-slate-500">Agent</div>
            <div class="font-semibold">{{ $m->agent_number ?: '-' }}</div>
          </div>
          <div class="rounded-lg bg-slate-50 px-3 py-2">
            <div class="text-[11px] text-slate-500">Sort</div>
            <div class="font-semibold">{{ $m->sort }}</div>
          </div>
        </div>

        <div class="mt-3 flex items-center gap-2">
          <a href="{{ route('admin.payment_methods.edit', $m) }}"
             class="inline-flex flex-1 items-center justify-center gap-1 rounded-full border border-slate-200 px-3 py-2 text-xs hover:bg-slate-50">
            <i class="fa-solid fa-pen-to-square"></i> Edit
          </a>
          <form action="{{ route('admin.payment_methods.toggle', $m) }}" method="POST" onsubmit="return confirm('Toggle status?')" class="flex-1">
            @csrf @method('PATCH')
            <button class="inline-flex w-full items-center justify-center gap-1 rounded-full border border-slate-200 px-3 py-2 text-xs hover:bg-slate-50">
              <i class="fa-solid fa-toggle-on"></i> Toggle
            </button>
          </form>
          <form action="{{ route('admin.payment_methods.destroy', $m) }}" method="POST" onsubmit="return confirm('Delete this method?')">
            @csrf @method('DELETE')
            <button class="inline-flex items-center justify-center gap-1 rounded-full border border-red-200 px-3 py-2 text-xs text-red-700 hover:bg-red-50">
              <i class="fa-solid fa-trash"></i> Del
            </button>
          </form>
        </div>
      </div>
    @empty
      <div class="text-center text-slate-500">No methods found.</div>
    @endforelse
  </div>

  <div class="mt-4">{{ $methods->links() }}</div>
</div>
@endsection