@extends('layouts.admin')

@section('title', 'Fee Management')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Fee Management</h1>
    </div>
    <div class="page-actions">
        <button type="button" class="btn btn-primary" onclick="openModal('addFeeModal')">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
            Add Fee
        </button>
    </div>
</div>

<div class="card">
    <x-data-table emptyMessage="No fees configured yet.">
        <x-slot:thead>
            <th>Name</th>
            <th>Type</th>
            <th>Value</th>
            <th>Applies To</th>
            <th>Status</th>
            <th>Actions</th>
        </x-slot:thead>
        <x-slot:tbody>
            @forelse($fees ?? [] as $fee)
            <tr>
                <td class="text-semibold">{{ $fee->name }}</td>
                <td><span class="badge badge-{{ $fee->type === 'fixed' ? 'blue' : 'green' }}">{{ ucfirst($fee->type) }}</span></td>
                <td class="text-semibold">
                    @if($fee->type === 'fixed')
                    {{ $currency ?? '₦' }}{{ number_format($fee->value, 2) }}
                    @else
                    {{ number_format($fee->value, 1) }}%
                    @endif
                </td>
                <td>{{ is_array($fee->applies_to) ? implode(', ', $fee->applies_to) : ($fee->applies_to ?? 'All') }}</td>
                <td>
                    <label class="toggle toggle-sm">
                        <input type="checkbox" {{ $fee->is_active ? 'checked' : '' }} onchange="toggleFee({{ $fee->id }}, this.checked)">
                        <span class="toggle-slider"></span>
                    </label>
                </td>
                <td>
                    <div class="table-actions">
                        <button type="button" class="btn btn-sm btn-outline" onclick="openEditFee({{ $fee->id }}, '{{ addslashes($fee->name) }}', '{{ $fee->type }}', {{ $fee->value }}, '{{ is_array($fee->applies_to) ? implode(', ', $fee->applies_to) : ($fee->applies_to ?? '') }}')">Edit</button>
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="6">
                    <div class="data-table-empty-content">
                        <p>No fees configured yet.</p>
                    </div>
                </td>
            </tr>
            @endforelse
        </x-slot:tbody>
    </x-data-table>
</div>

<x-modal id="addFeeModal" title="Add Fee">
    <form method="POST" action="{{ route('admin.settings.fees.store') }}">
        @csrf
        <div class="form-group">
            <label for="add_name" class="form-label">Fee Name <span class="required">*</span></label>
            <input type="text" id="add_name" name="name" class="form-input" required>
        </div>
        <div class="form-grid form-grid-2">
            <div class="form-group">
                <label for="add_type" class="form-label">Type</label>
                <select id="add_type" name="type" class="form-select" onchange="toggleFeeValueInput('add')">
                    <option value="fixed">Fixed Amount</option>
                    <option value="percentage">Percentage</option>
                </select>
            </div>
            <div class="form-group">
                <label for="add_value" class="form-label">Value</label>
                <input type="number" id="add_value" name="value" class="form-input" step="0.01" min="0" required>
            </div>
        </div>
        <div class="form-group">
            <label for="add_applies_to" class="form-label">Applies To</label>
            <select id="add_applies_to" name="applies_to" class="form-select">
                <option value="all">All Transactions</option>
                <option value="transfer">Transfers</option>
                <option value="withdrawal">Withdrawals</option>
                <option value="deposit">Deposits</option>
                <option value="card">Card Transactions</option>
                <option value="airtime">Airtime & Data</option>
                <option value="bills">Bill Payments</option>
            </select>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-outline" onclick="closeModal('addFeeModal')">Cancel</button>
            <button type="submit" class="btn btn-primary">Add Fee</button>
        </div>
    </form>
</x-modal>

<x-modal id="editFeeModal" title="Edit Fee">
    <form id="editFeeForm" method="POST" action="">
        @csrf
        @method('PUT')
        <div class="form-group">
            <label for="edit_name" class="form-label">Fee Name</label>
            <input type="text" id="edit_name" name="name" class="form-input" required>
        </div>
        <div class="form-grid form-grid-2">
            <div class="form-group">
                <label for="edit_type" class="form-label">Type</label>
                <select id="edit_type" name="type" class="form-select" onchange="toggleFeeValueInput('edit')">
                    <option value="fixed">Fixed Amount</option>
                    <option value="percentage">Percentage</option>
                </select>
            </div>
            <div class="form-group">
                <label for="edit_value" class="form-label">Value</label>
                <input type="number" id="edit_value" name="value" class="form-input" step="0.01" min="0" required>
            </div>
        </div>
        <div class="form-group">
            <label for="edit_applies_to" class="form-label">Applies To</label>
            <select id="edit_applies_to" name="applies_to" class="form-select">
                <option value="all">All Transactions</option>
                <option value="transfer">Transfers</option>
                <option value="withdrawal">Withdrawals</option>
                <option value="deposit">Deposits</option>
                <option value="card">Card Transactions</option>
                <option value="airtime">Airtime & Data</option>
                <option value="bills">Bill Payments</option>
            </select>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-outline" onclick="closeModal('editFeeModal')">Cancel</button>
            <button type="submit" class="btn btn-primary">Update Fee</button>
        </div>
    </form>
</x-modal>
@endsection

@push('scripts')
<script>
function openEditFee(id, name, type, value, appliesTo) {
    document.getElementById('editFeeForm').action = '{{ url("admin/settings/fees") }}/' + id;
    document.getElementById('edit_name').value = name;
    document.getElementById('edit_type').value = type;
    document.getElementById('edit_value').value = value;
    document.getElementById('edit_applies_to').value = appliesTo || 'all';
    openModal('editFeeModal');
}

function toggleFee(id, active) {
    fetch('{{ route('admin.settings.fees.toggle', ':id') }}'.replace(':id', id), {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content, 'X-Requested-With': 'XMLHttpRequest' },
        body: JSON.stringify({ is_active: active })
    });
}

function toggleFeeValueInput(prefix) {
    var type = document.getElementById(prefix + '_type').value;
    var label = document.getElementById(prefix + '_value').previousElementSibling;
    if (label) label.textContent = type === 'fixed' ? 'Amount' : 'Percentage (%)';
}
</script>
@endpush