@extends('layouts.app')
@section('title', 'Payment Methods')

@section('content')
<div class="space-y-6" x-data="{ ...modal() }">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-xl font-bold">Payment Methods</h1>
            <p class="text-sm text-ink-muted">Fully dynamic — add, rename, disable or reorder how customers can pay. Every till, expense and shift screen picks this list up immediately.</p>
        </div>
        <button class="btn-primary btn-sm" x-on:click="$dispatch('open-modal-add-method')"><i data-lucide="plus" class="w-3.5 h-3.5"></i> Add payment method</button>
    </div>

    <div class="card overflow-x-auto">
        <table class="data-table">
            <thead><tr><th>Method</th><th>Code</th><th>Type</th><th>Needs reference</th><th>Status</th><th></th></tr></thead>
            <tbody>
                @forelse ($methods as $method)
                    <tr>
                        <td class="flex items-center gap-2 font-medium"><i data-lucide="{{ $method->icon }}" class="w-4 h-4 text-primary-600"></i> {{ $method->name }}</td>
                        <td class="font-mono text-xs">{{ $method->code }}</td>
                        <td>{{ ucwords(str_replace('_', ' ', $method->type)) }}</td>
                        <td>{{ $method->requires_reference ? 'Yes' : 'No' }}</td>
                        <td><x-badge :color="$method->is_active ? 'emerald' : 'slate'">{{ $method->is_active ? 'Active' : 'Disabled' }}</x-badge></td>
                        <td class="text-right">
                            <form method="POST" action="{{ route('settings.payment-methods.update', $method) }}" class="inline">
                                @csrf @method('PUT')
                                <input type="hidden" name="name" value="{{ $method->name }}">
                                <input type="hidden" name="code" value="{{ $method->code }}">
                                <input type="hidden" name="icon" value="{{ $method->icon }}">
                                <input type="hidden" name="type" value="{{ $method->type }}">
                                <input type="hidden" name="requires_reference" value="{{ $method->requires_reference ? 1 : 0 }}">
                                <input type="hidden" name="is_active" value="{{ $method->is_active ? 0 : 1 }}">
                                <button class="btn-ghost btn-sm">{{ $method->is_active ? 'Disable' : 'Enable' }}</button>
                            </form>
                            <form method="POST" action="{{ route('settings.payment-methods.destroy', $method) }}" class="inline" onsubmit="return confirm('Delete this payment method?')">
                                @csrf @method('DELETE')
                                <button class="btn-ghost btn-sm text-danger">Delete</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="text-center text-ink-muted py-8">No payment methods configured yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <x-modal id="add-method" title="Add payment method">
        <form method="POST" action="{{ route('settings.payment-methods.store') }}" id="add-method-form" class="space-y-4">
            @csrf
            <div><label class="field-label">Name</label><input type="text" name="name" class="input" required placeholder="e.g. Airtel Money"></div>
            <div><label class="field-label">Code (unique, no spaces)</label><input type="text" name="code" class="input" required placeholder="AIRTEL"></div>
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="field-label">Type</label>
                    <select name="type" class="input">
                        <option value="cash">Cash</option>
                        <option value="mobile_money">Mobile Money</option>
                        <option value="card">Card</option>
                        <option value="bank">Bank</option>
                        <option value="credit">Credit</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                <div>
                    <label class="field-label">Icon (lucide name)</label>
                    <input type="text" name="icon" value="wallet" class="input">
                </div>
            </div>
            <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="requires_reference" value="1" class="rounded border-border text-primary-500"> Requires a reference number (e.g. M-Pesa code)</label>
        </form>
        <x-slot:footer>
            <button class="btn-secondary" x-on:click="open = false">Cancel</button>
            <button form="add-method-form" class="btn-primary">Save</button>
        </x-slot:footer>
    </x-modal>
</div>
@endsection