@extends('admin.layouts.app')

@section('title', 'Payment Methods')
@section('page-title', 'Payment Methods')

@section('page-actions')
    <x-admin.button :href="route('admin.payment-methods.create')" icon="bi-plus-lg">New Payment Method</x-admin.button>
@endsection

@section('content')
<div class="fade-in space-y-6">
    <!-- Search Panel -->
    <div class="mb-6 rounded-2xl border border-slate-200 bg-white p-4 shadow-soft dark:border-slate-800 dark:bg-slate-950">
        <div class="max-w-md">
            <x-admin.search-input id="paymentMethodsSearch" placeholder="Search payment methods..." />
        </div>
    </div>

    <x-datatable 
        id="paymentMethodsTable" 
        :ajax-url="route('admin.payment-methods.index')" 
        :columns="[
            ['data' => 'name', 'orderable' => true],
            ['data' => 'code', 'orderable' => true],
            ['data' => 'status', 'name' => 'is_active', 'orderable' => true],
            ['data' => 'order', 'name' => 'sort_order', 'orderable' => true],
            ['data' => 'actions', 'orderable' => false, 'searchable' => false]
        ]" 
        :order="[[3, 'asc']]" 
        :column-defs="[
            ['className' => 'text-left align-middle', 'targets' => [0, 1, 2, 3]],
            ['className' => 'text-right align-middle', 'targets' => [4]]
        ]" 
        search-id="paymentMethodsSearch" 
        :padding="false"
    >
        <x-slot name="thead">
            <th>Method</th>
            <th>Code</th>
            <th>Status</th>
            <th>Order</th>
            <th class="text-right">Actions</th>
        </x-slot>
    </x-datatable>
</div>
@endsection