<div>
    <x-layouts.app title="{{ __('Payment Methods') }}">
        <div class="page-header d-flex justify-content-between align-items-center">
            <div>
                <h1 class="page-title">{{ __('Payment Methods') }}</h1>
                <p class="text-muted mb-0">{{ __('Configure accepted payment methods') }}</p>
            </div>
            <button class="btn btn-primary" wire:click="openModal">
                <i class="fas fa-plus me-2"></i>{{ __('Add Method') }}
            </button>
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <div class="card">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 50px;">{{ __('Icon') }}</th>
                                <th>{{ __('Name') }}</th>
                                <th>{{ __('Code') }}</th>
                                <th class="text-center">{{ __('Requires Reference') }}</th>
                                <th>{{ __('Linked Account') }}</th>
                                <th class="text-center">{{ __('Status') }}</th>
                                <th class="text-end">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($methods as $method)
                                <tr wire:key="pm-{{ $method->id }}">
                                    <td class="text-center">
                                        <i class="fas {{ $method->icon ?? 'fa-money-bill' }} fa-lg text-primary"></i>
                                    </td>
                                    <td>
                                        <strong>{{ $method->name }}</strong>
                                        @if($method->name_ar)
                                            <small class="text-muted d-block">{{ $method->name_ar }}</small>
                                        @endif
                                    </td>
                                    <td><code>{{ $method->code }}</code></td>
                                    <td class="text-center">
                                        @if($method->requires_reference)
                                            <i class="fas fa-check text-success"></i>
                                        @else
                                            <i class="fas fa-times text-muted"></i>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if($method->requires_reference)
                                            <i class="fas fa-check text-success"></i>
                                        @else
                                            <i class="fas fa-times text-muted"></i>
                                        @endif
                                    </td>
                                    <td>
                                        @if($method->account)
                                            <span class="badge bg-info text-dark">
                                                {{ $method->account->code }} - {{ $method->account->name }}
                                            </span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <button class="btn btn-sm {{ $method->is_active ? 'btn-success' : 'btn-secondary' }}"
                                                wire:click="toggleActive({{ $method->id }})">
                                            {{ $method->is_active ? __('Active') : __('Inactive') }}
                                        </button>
                                    </td>
                                    <td class="text-end">
                                        <button class="btn btn-sm btn-outline-primary" wire:click="edit({{ $method->id }})">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger" 
                                                wire:click="delete({{ $method->id }})"
                                                wire:confirm="{{ __('Delete this payment method?') }}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center py-4 text-muted">
                                        {{ __('No payment methods configured.') }}
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Modal -->
        @if($showModal)
            <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">
                                {{ $isEditing ? __('Edit Payment Method') : __('Add Payment Method') }}
                            </h5>
                            <button type="button" class="btn-close" wire:click="$set('showModal', false)"></button>
                        </div>
                        <form wire:submit="save">
                            <div class="modal-body">
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label">{{ __('Name') }} <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                               wire:model="name" placeholder="Cash">
                                        @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">{{ __('Name (Arabic)') }}</label>
                                        <input type="text" class="form-control" wire:model="name_ar" dir="rtl" placeholder="نقدي">
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label">{{ __('Code') }} <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('code') is-invalid @enderror" 
                                               wire:model="code" placeholder="cash">
                                        @error('code') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">{{ __('Icon') }}</label>
                                        <select class="form-select" wire:model="icon">
                                            <option value="fa-money-bill">💵 Cash</option>
                                            <option value="fa-credit-card">💳 Card</option>
                                            <option value="fa-mobile-alt">📱 Mobile</option>
                                            <option value="fa-university">🏦 Bank</option>
                                            <option value="fa-file-invoice">📄 Invoice</option>
                                            <option value="fa-wallet">👛 Wallet</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label">{{ __('Sort Order') }}</label>
                                        <input type="number" class="form-control" wire:model="sort_order">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">{{ __('Sort Order') }}</label>
                                        <input type="number" class="form-control" wire:model="sort_order">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ __('Linked Account') }}</label>
                                    <select class="form-select" wire:model="account_id">
                                        <option value="">{{ __('Select Account') }}</option>
                                        @foreach($accounts as $account)
                                            <option value="{{ $account->id }}">
                                                {{ $account->code }} - {{ $account->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <small class="text-muted">{{ __('Journal entries will use this account') }}</small>
                                </div>
                                <div class="mb-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" wire:model="requires_reference" id="reqRef">
                                        <label class="form-check-label" for="reqRef">{{ __('Requires Reference Number') }}</label>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" wire:model="is_active" id="isActive">
                                        <label class="form-check-label" for="isActive">{{ __('Active') }}</label>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" wire:click="$set('showModal', false)">{{ __('Cancel') }}</button>
                                <button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        @endif
    </x-layouts.app>
</div>
