@extends('layouts.app')

@section('title', 'Offline payment modes')
@section('heading', 'Offline payment modes')

@section('content')
    <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <p class="text-slate-600">Manage payment modes for offline subscription payments (e.g. Bank Transfer, Cash, Cheque).</p>
        <a href="{{ route('superadmin.offline-payment-modes.create') }}" class="inline-flex rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white">Add mode</a>
    </div>

    <x-card>
        <div class="overflow-x-auto">
            <x-table>
                <x-slot name="head">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Name</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Description</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Actions</th>
                    </tr>
                </x-slot>
                @forelse($modes as $mode)
                    <tr class="hover:bg-slate-50">
                        <td class="whitespace-nowrap px-4 py-3 font-medium text-slate-900">{{ $mode->name }}</td>
                        <td class="px-4 py-3 text-sm text-slate-600">{{ Str::limit($mode->description, 60) ?? '—' }}</td>
                        <td class="whitespace-nowrap px-4 py-3">
                            <a href="{{ route('superadmin.offline-payment-modes.edit', $mode) }}" class="text-sm font-medium text-primary hover:underline">Edit</a>
                            <form action="{{ route('superadmin.offline-payment-modes.destroy', $mode) }}" method="post" class="inline ml-2" onsubmit="return confirm('Delete this payment mode?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-sm font-medium text-red-600 hover:underline">Delete</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="3" class="px-4 py-8 text-center text-sm text-slate-500">No payment modes. <a href="{{ route('superadmin.offline-payment-modes.create') }}" class="text-primary underline">Add one</a>.</td>
                    </tr>
                @endforelse
            </x-table>
        </div>
    </x-card>
@endsection