@extends('layouts.app')

@section('page_title', 'Top-up Settings')

@section('content')
    @include('components.table-component', [
        'pageTitle' => 'Top-up Settings',
        'data' => $topUpSettings ?? [],
        'columns' => [
            ['name' => 'Amount', 'key' => 'amount', 'sortable' => true],
            ['name' => 'Description', 'key' => 'description', 'sortable' => true],
            ['name' => 'Status', 'key' => 'status', 'sortable' => true],
            ['name' => 'Created At', 'key' => 'created_at', 'sortable' => true]
        ],
        'allFields' => [
            ['name' => 'Amount', 'key' => 'amount', 'type' => 'number', 'required' => true, 'min' => 0],
            ['name' => 'Description', 'key' => 'description', 'type' => 'textarea', 'required' => true],
            ['name' => 'Status', 'key' => 'status', 'type' => 'select', 'options' => ['Active', 'Inactive'], 'required' => true]
        ],
        'actions' => ['edit', 'delete'],
        'showAddButton' => true,
        'addButtonUrl' => route('top-up-settings.create'),
        'showCheckboxes' => true,
        'showBatchDelete' => true,
        'showEditModal' => true,
        'baseRoute' => 'top-up-settings'
    ])
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    const dataTable = initializeDataTable({
        route: '{{ route("top-up-settings.data") }}',
        columns: [
            { 
                data: 'amount',
                render: function(data) {
                    return new Intl.NumberFormat('en-US', {
                        style: 'currency',
                        currency: 'PHP'
                    }).format(data);
                }
            },
            { data: 'description' },
            { 
                data: 'status',
                render: function(data) {
                    return `<span class="badge badge-${data === 'Active' ? 'success' : 'danger'}">${data}</span>`;
                }
            },
            { 
                data: 'created_at',
                render: function(data) {
                    return moment(data).format('YYYY-MM-DD HH:mm:ss');
                }
            }
        ]
    });

    // Handle form submissions
    handleFormSubmission({
        addRoute: '{{ route("top-up-settings.store") }}',
        editRoute: '{{ route("top-up-settings.update", ":id") }}',
        deleteRoute: '{{ route("top-up-settings.destroy", ":id") }}',
        dataTable: dataTable,
        validation: {
            amount: {
                required: true,
                number: true,
                min: 0
            },
            description: {
                required: true,
                minlength: 3
            },
            status: {
                required: true
            }
        }
    });
});
</script>
@endpush