@extends('backend.master')
@section('title','Deposit Rules')

@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">

  <div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
    <h1 class="text-xl font-extrabold">Deposit Rules</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.deposit_rules.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 Rule
      </a>
    </div>
  </div>

  {{-- Desktop Table --}}
  <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">Range (BDT)</th>
          <th class="px-4 py-3">Type</th>
          <th class="px-4 py-3">Value</th>
          <th class="px-4 py-3">Active</th>
          <th class="px-4 py-3">Updated</th>
          <th class="px-4 py-3 text-right">Actions</th>
        </tr>
      </thead>
      <tbody>
        @forelse($rules as $r)
          <tr class="border-t">
            <td class="px-4 py-3 font-semibold">{{ number_format($r->min_amount) }} – {{ $r->max_amount ? number_format($r->max_amount) : '∞' }}</td>
            <td class="px-4 py-3 uppercase">{{ $r->calc_type }}</td>
            <td class="px-4 py-3">
              @if($r->calc_type === 'percent')
                {{ rtrim(rtrim(number_format($r->value, 2), '0'), '.') }}%
              @else
                ৳ {{ number_format($r->value) }}
              @endif
            </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
                {{ $r->is_active ? 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-100' : 'bg-slate-100 text-slate-600' }}">
                <i class="fa-solid {{ $r->is_active ? 'fa-check' : 'fa-minus' }}"></i>
                {{ $r->is_active ? 'Active' : 'Disabled' }}
              </span>
            </td>
            <td class="px-4 py-3 text-slate-500">{{ $r->updated_at->diffForHumans() }}</td>
            <td class="px-4 py-3">
              <div class="flex items-center justify-end gap-2">
                <a href="{{ route('admin.deposit_rules.edit', $r) }}"
                   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.deposit_rules.toggle', $r) }}" 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.deposit_rules.destroy', $r) }}" method="POST" onsubmit="return confirm('Delete this rule?')">
                  @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="6" class="px-4 py-6 text-center text-slate-500">No rules found.</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>

  {{-- Mobile Cards --}}
  <div class="sm:hidden space-y-3">
    @forelse($rules as $r)
      <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-10 w-10 items-center justify-center rounded-xl bg-rose-50 text-rose-600 ring-1 ring-rose-100">
            <i class="fa-solid fa-percent"></i>
          </div>
          <div class="min-w-0">
            <div class="font-extrabold">{{ number_format($r->min_amount) }} – {{ $r->max_amount ? number_format($r->max_amount) : '∞' }}</div>
            <div class="text-xs text-slate-500 uppercase">{{ $r->calc_type }}</div>
          </div>
          <span class="ms-auto inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[11px] font-semibold
            {{ $r->is_active ? 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-100' : 'bg-slate-100 text-slate-600' }}">
            <i class="fa-solid {{ $r->is_active ? 'fa-check' : 'fa-minus' }}"></i>
            {{ $r->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">Value</div>
            <div class="font-semibold">
              @if($r->calc_type === 'percent') {{ rtrim(rtrim(number_format($r->value, 2), '0'), '.') }}%
              @else ৳ {{ number_format($r->value) }} @endif
            </div>
          </div>
          <div class="rounded-lg bg-slate-50 px-3 py-2">
            <div class="text-[11px] text-slate-500">Updated</div>
            <div class="font-semibold">{{ $r->updated_at->diffForHumans() }}</div>
          </div>
        </div>

        <div class="mt-3 flex items-center gap-2">
          <a href="{{ route('admin.deposit_rules.edit', $r) }}"
             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.deposit_rules.toggle', $r) }}" 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.deposit_rules.destroy', $r) }}" method="POST" onsubmit="return confirm('Delete this rule?')">
            @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 rules found.</div>
    @endforelse
  </div>

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