@extends('admin.layouts.master')
@section('title', __('Custom Gateways'))

@section('has-content-sidebar', 'has-content-sidebar')

@section('content-sidebar')
    @include('admin.settings.content-sidebar')
@endsection

@section('content')
<div class="nk-content-body">
    <div class="nk-block-head nk-block-head-sm">
        <div class="nk-block-between">
            <div class="nk-block-head-content">
                <h3 class="nk-block-title page-title">{{ __('Custom Gateways') }}</h3>
                <p>{{ __('Create and manage your own deposit and withdrawal gateways.') }}</p>
            </div>
            <div class="nk-block-head-content">
                <ul class="nk-block-tools gx-2">
                    <li>
                        <a href="#" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#add-gateway-modal">
                            <em class="icon ni ni-plus"></em><span>{{ __('Add Gateway') }}</span>
                        </a>
                    </li>
                    <li class="d-lg-none">
                        <a href="#" class="btn btn-icon btn-trigger toggle" data-target="pageSidebar"><em class="icon ni ni-menu-right"></em></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    {{-- Deposit Gateways --}}
    <div class="nk-block">
        <div class="nk-block-head nk-block-head-sm">
            <h5 class="nk-block-title">{{ __('Deposit Gateways') }}</h5>
        </div>
        <div class="card card-bordered">
            <div class="card-inner p-0">
                @if($depositGateways->count() > 0)
                <table class="table table-tranx">
                    <thead>
                        <tr class="tb-tnx-head">
                            <th class="tb-tnx-info"><span class="tb-tnx-desc">{{ __('Gateway Name') }}</span></th>
                            <th class="tb-tnx-amount"><span>{{ __('Min / Max') }}</span></th>
                            <th class="tb-tnx-amount"><span>{{ __('Fees') }}</span></th>
                            <th class="tb-tnx-action"><span>{{ __('Status') }}</span></th>
                            <th class="tb-tnx-action"><span>&nbsp;</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($depositGateways as $gw)
                        <tr class="tb-tnx-item">
                            <td class="tb-tnx-info">
                                <div class="tb-tnx-desc">
                                    <span class="title">{{ $gw->name }}</span>
                                    <span class="meta">
                                        @if($gw->currencies)
                                            {{ implode(', ', $gw->currencies) }}
                                        @else
                                            {{ __('All currencies') }}
                                        @endif
                                    </span>
                                </div>
                            </td>
                            <td class="tb-tnx-amount">
                                <span>{{ $gw->min_amount > 0 ? money($gw->min_amount, base_currency()) : __('No min') }}</span>
                                <span class="meta">{{ $gw->max_amount > 0 ? money($gw->max_amount, base_currency()) : __('No max') }}</span>
                            </td>
                            <td class="tb-tnx-amount">
                                <span>{{ $gw->fixed_fee > 0 ? money($gw->fixed_fee, base_currency()) : '-' }}</span>
                                <span class="meta">{{ $gw->percent_fee > 0 ? $gw->percent_fee.'%' : '-' }}</span>
                            </td>
                            <td class="tb-tnx-action">
                                <span class="badge badge-dot badge-{{ $gw->status == 'active' ? 'success' : 'danger' }}">{{ ucfirst($gw->status) }}</span>
                            </td>
                            <td class="tb-tnx-action">
                                <div class="dropdown">
                                    <a class="text-soft dropdown-toggle btn btn-icon btn-trigger" data-toggle="dropdown"><em class="icon ni ni-more-h"></em></a>
                                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-xs">
                                        <ul class="link-list-plain">
                                            <li><a href="#" class="edit-gateway" data-id="{{ $gw->id }}" data-name="{{ $gw->name }}" data-type="{{ $gw->type }}" data-description="{{ $gw->description }}" data-instructions="{{ $gw->instructions }}" data-min="{{ $gw->min_amount }}" data-max="{{ $gw->max_amount }}" data-fixedfee="{{ $gw->fixed_fee }}" data-percentfee="{{ $gw->percent_fee }}" data-currencies="{{ $gw->currencies ? implode(', ', $gw->currencies) : '' }}" data-fields='@json($gw->fields ?? [])'>{{ __('Edit') }}</a></li>
                                            <li><a href="#" class="toggle-gateway" data-id="{{ $gw->id }}" data-url="{{ route('admin.settings.gateway.custom.toggle', $gw->id) }}">{{ $gw->status == 'active' ? __('Disable') : __('Enable') }}</a></li>
                                            <li><a href="#" class="delete-gateway text-danger" data-id="{{ $gw->id }}" data-url="{{ route('admin.settings.gateway.custom.delete', $gw->id) }}">{{ __('Delete') }}</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                @else
                <div class="text-center py-4">
                    <em class="icon ni ni-wallet text-soft" style="font-size: 2.5rem;"></em>
                    <p class="mt-2 text-soft">{{ __('No custom deposit gateways yet.') }}</p>
                </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Withdraw Gateways --}}
    <div class="nk-block">
        <div class="nk-block-head nk-block-head-sm">
            <h5 class="nk-block-title">{{ __('Withdrawal Gateways') }}</h5>
        </div>
        <div class="card card-bordered">
            <div class="card-inner p-0">
                @if($withdrawGateways->count() > 0)
                <table class="table table-tranx">
                    <thead>
                        <tr class="tb-tnx-head">
                            <th class="tb-tnx-info"><span class="tb-tnx-desc">{{ __('Gateway Name') }}</span></th>
                            <th class="tb-tnx-amount"><span>{{ __('Min / Max') }}</span></th>
                            <th class="tb-tnx-amount"><span>{{ __('Fees') }}</span></th>
                            <th class="tb-tnx-action"><span>{{ __('Status') }}</span></th>
                            <th class="tb-tnx-action"><span>&nbsp;</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($withdrawGateways as $gw)
                        <tr class="tb-tnx-item">
                            <td class="tb-tnx-info">
                                <div class="tb-tnx-desc">
                                    <span class="title">{{ $gw->name }}</span>
                                    <span class="meta">
                                        @if($gw->currencies)
                                            {{ implode(', ', $gw->currencies) }}
                                        @else
                                            {{ __('All currencies') }}
                                        @endif
                                    </span>
                                </div>
                            </td>
                            <td class="tb-tnx-amount">
                                <span>{{ $gw->min_amount > 0 ? money($gw->min_amount, base_currency()) : __('No min') }}</span>
                                <span class="meta">{{ $gw->max_amount > 0 ? money($gw->max_amount, base_currency()) : __('No max') }}</span>
                            </td>
                            <td class="tb-tnx-amount">
                                <span>{{ $gw->fixed_fee > 0 ? money($gw->fixed_fee, base_currency()) : '-' }}</span>
                                <span class="meta">{{ $gw->percent_fee > 0 ? $gw->percent_fee.'%' : '-' }}</span>
                            </td>
                            <td class="tb-tnx-action">
                                <span class="badge badge-dot badge-{{ $gw->status == 'active' ? 'success' : 'danger' }}">{{ ucfirst($gw->status) }}</span>
                            </td>
                            <td class="tb-tnx-action">
                                <div class="dropdown">
                                    <a class="text-soft dropdown-toggle btn btn-icon btn-trigger" data-toggle="dropdown"><em class="icon ni ni-more-h"></em></a>
                                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-xs">
                                        <ul class="link-list-plain">
                                            <li><a href="#" class="edit-gateway" data-id="{{ $gw->id }}" data-name="{{ $gw->name }}" data-type="{{ $gw->type }}" data-description="{{ $gw->description }}" data-instructions="{{ $gw->instructions }}" data-min="{{ $gw->min_amount }}" data-max="{{ $gw->max_amount }}" data-fixedfee="{{ $gw->fixed_fee }}" data-percentfee="{{ $gw->percent_fee }}" data-currencies="{{ $gw->currencies ? implode(', ', $gw->currencies) : '' }}" data-fields='@json($gw->fields ?? [])'>{{ __('Edit') }}</a></li>
                                            <li><a href="#" class="toggle-gateway" data-id="{{ $gw->id }}" data-url="{{ route('admin.settings.gateway.custom.toggle', $gw->id) }}">{{ $gw->status == 'active' ? __('Disable') : __('Enable') }}</a></li>
                                            <li><a href="#" class="delete-gateway text-danger" data-id="{{ $gw->id }}" data-url="{{ route('admin.settings.gateway.custom.delete', $gw->id) }}">{{ __('Delete') }}</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                @else
                <div class="text-center py-4">
                    <em class="icon ni ni-signout text-soft" style="font-size: 2.5rem;"></em>
                    <p class="mt-2 text-soft">{{ __('No custom withdrawal gateways yet.') }}</p>
                </div>
                @endif
            </div>
        </div>
    </div>

    <div class="nk-block">
        <div class="notes">
            <ul>
                <li class="alert-note is-plain">
                    <em class="icon ni ni-info"></em>
                    <p>{{ __("Custom gateways work alongside the built-in payment modules. Users will see all active gateways when making deposits or withdrawals.") }}</p>
                </li>
                <li class="alert-note is-plain">
                    <em class="icon ni ni-info"></em>
                    <p>{{ __("Custom gateway transactions require manual approval by an administrator.") }}</p>
                </li>
            </ul>
        </div>
    </div>
</div>
@endsection

@push('modal')
{{-- Add/Edit Gateway Modal --}}
<div class="modal fade" id="add-gateway-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <a href="#" class="close" data-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
            <div class="modal-body modal-body-lg">
                <h4 class="title" id="gateway-modal-title">{{ __('Add Custom Gateway') }}</h4>
                <form id="gateway-form" method="POST" action="{{ route('admin.settings.gateway.custom.store') }}" class="form-settings mt-3">
                    @csrf
                    <input type="hidden" id="gateway-id" name="gateway_id" value="">
                    <div class="row gy-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label" for="gw-name">{{ __('Gateway Name') }} <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="gw-name" name="name" placeholder="{{ __('e.g. Mobile Money, USDT TRC20, Skrill') }}" required maxlength="190">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label" for="gw-type">{{ __('Gateway Type') }} <span class="text-danger">*</span></label>
                                <select class="form-select" id="gw-type" name="type" required>
                                    <option value="deposit">{{ __('Deposit') }}</option>
                                    <option value="withdraw">{{ __('Withdrawal') }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label class="form-label" for="gw-description">{{ __('Description') }}</label>
                                <textarea class="form-control" id="gw-description" name="description" rows="2" placeholder="{{ __('Brief description shown to users') }}"></textarea>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label class="form-label" for="gw-instructions">{{ __('Payment Instructions') }}</label>
                                <textarea class="form-control" id="gw-instructions" name="instructions" rows="3" placeholder="{{ __('Detailed instructions for users, e.g. wallet address, bank details, etc.') }}"></textarea>
                                <div class="form-note">{{ __('These instructions will be shown to users during the deposit/withdrawal process.') }}</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="form-label" for="gw-min">{{ __('Minimum Amount') }}</label>
                                <input type="number" step="0.01" class="form-control" id="gw-min" name="min_amount" value="0" min="0">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="form-label" for="gw-max">{{ __('Maximum Amount') }}</label>
                                <input type="number" step="0.01" class="form-control" id="gw-max" name="max_amount" value="0" min="0">
                                <div class="form-note">{{ __('0 = No limit') }}</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="form-label" for="gw-fixedfee">{{ __('Fixed Fee') }}</label>
                                <input type="number" step="0.01" class="form-control" id="gw-fixedfee" name="fixed_fee" value="0" min="0">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="form-label" for="gw-percentfee">{{ __('Percent Fee (%)') }}</label>
                                <input type="number" step="0.01" class="form-control" id="gw-percentfee" name="percent_fee" value="0" min="0" max="100">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label" for="gw-currencies">{{ __('Supported Currencies') }}</label>
                                <input type="text" class="form-control" id="gw-currencies" name="currencies" placeholder="{{ __('USD, EUR, BTC (leave blank for all)') }}">
                                <div class="form-note">{{ __('Comma-separated currency codes. Leave blank to support all currencies.') }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label" for="gw-icon">{{ __('Icon Class') }}</label>
                                <select class="form-select" id="gw-icon" name="icon">
                                    <option value="ni-wallet-fill">{{ __('Wallet') }}</option>
                                    <option value="ni-building-fill">{{ __('Bank') }}</option>
                                    <option value="ni-coin-alt-fill">{{ __('Coin') }}</option>
                                    <option value="ni-cc-alt2-fill">{{ __('Credit Card') }}</option>
                                    <option value="ni-sign-usd">{{ __('Dollar Sign') }}</option>
                                    <option value="ni-sign-btc-alt">{{ __('Bitcoin') }}</option>
                                    <option value="ni-sign-eth">{{ __('Ethereum') }}</option>
                                    <option value="ni-globe">{{ __('Globe') }}</option>
                                    <option value="ni-money">{{ __('Money') }}</option>
                                    <option value="ni-mobile">{{ __('Mobile') }}</option>
                                </select>
                            </div>
                        </div>

                        {{-- Custom Fields --}}
                        <div class="col-12">
                            <div class="divider"></div>
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <label class="form-label mb-0">{{ __('Custom Fields') }}</label>
                                <a href="#" id="add-field-btn" class="btn btn-xs btn-outline-primary"><em class="icon ni ni-plus-sm"></em> {{ __('Add Field') }}</a>
                            </div>
                            <div class="form-note mb-3">{{ __('Define custom fields that users must fill in (e.g. Wallet Address, Transaction Hash, Account Number).') }}</div>
                            <div id="custom-fields-container"></div>
                        </div>

                        <div class="col-12">
                            <div class="form-group mt-2">
                                <button type="submit" class="btn btn-primary submit-settings" id="gateway-submit-btn">
                                    <span class="spinner-border spinner-border-sm hide" role="status" aria-hidden="true"></span>
                                    <span>{{ __('Save Gateway') }}</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endpush

@push('scripts')
<script type="text/javascript">
(function($){
    "use strict";

    // Field counter
    var fieldIndex = 0;

    function addFieldRow(name, type, required) {
        name = name || '';
        type = type || 'text';
        required = required || false;
        var html = '<div class="row g-2 mb-2 align-center custom-field-row">' +
            '<div class="col-5"><input type="text" class="form-control form-control-sm" name="field_names[]" placeholder="{{ __("Field name") }}" value="' + name + '"></div>' +
            '<div class="col-3"><select class="form-select form-select-sm" name="field_types[]">' +
            '<option value="text"' + (type === 'text' ? ' selected' : '') + '>{{ __("Text") }}</option>' +
            '<option value="textarea"' + (type === 'textarea' ? ' selected' : '') + '>{{ __("Textarea") }}</option>' +
            '<option value="number"' + (type === 'number' ? ' selected' : '') + '>{{ __("Number") }}</option>' +
            '<option value="file"' + (type === 'file' ? ' selected' : '') + '>{{ __("File Upload") }}</option>' +
            '</select></div>' +
            '<div class="col-2"><div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" name="field_required[]" value="' + fieldIndex + '" id="freq-' + fieldIndex + '"' + (required ? ' checked' : '') + '><label class="custom-control-label" for="freq-' + fieldIndex + '">{{ __("Required") }}</label></div></div>' +
            '<div class="col-2"><a href="#" class="btn btn-icon btn-xs btn-danger remove-field-btn"><em class="icon ni ni-trash"></em></a></div>' +
            '</div>';
        $('#custom-fields-container').append(html);
        fieldIndex++;
    }

    $('#add-field-btn').on('click', function(e){
        e.preventDefault();
        addFieldRow();
    });

    $(document).on('click', '.remove-field-btn', function(e){
        e.preventDefault();
        $(this).closest('.custom-field-row').remove();
    });

    // Edit gateway
    $(document).on('click', '.edit-gateway', function(e){
        e.preventDefault();
        var el = $(this);
        $('#gateway-modal-title').text('{{ __("Edit Gateway") }}');
        $('#gw-name').val(el.data('name'));
        $('#gw-type').val(el.data('type'));
        $('#gw-description').val(el.data('description'));
        $('#gw-instructions').val(el.data('instructions'));
        $('#gw-min').val(el.data('min'));
        $('#gw-max').val(el.data('max'));
        $('#gw-fixedfee').val(el.data('fixedfee'));
        $('#gw-percentfee').val(el.data('percentfee'));
        $('#gw-currencies').val(el.data('currencies'));
        $('#gateway-id').val(el.data('id'));
        $('#gateway-form').attr('action', '{{ url("admin/settings/gateway/custom") }}/' + el.data('id') + '/update');

        // Load existing custom fields
        $('#custom-fields-container').empty();
        fieldIndex = 0;
        var fields = el.data('fields');
        if (fields && fields.length > 0) {
            fields.forEach(function(f) {
                addFieldRow(f.name, f.type, f.required);
            });
        }

        $('#add-gateway-modal').modal('show');
    });

    // Reset form on new
    $('[data-target="#add-gateway-modal"]').on('click', function(){
        $('#gateway-modal-title').text('{{ __("Add Custom Gateway") }}');
        $('#gateway-form')[0].reset();
        $('#gateway-id').val('');
        $('#gateway-form').attr('action', '{{ route("admin.settings.gateway.custom.store") }}');
        $('#custom-fields-container').empty();
        fieldIndex = 0;
    });

    // Toggle status
    $(document).on('click', '.toggle-gateway', function(e){
        e.preventDefault();
        var url = $(this).data('url');
        $.post(url, { _token: '{{ csrf_token() }}' }, function(res){
            if(res.msg) NioApp.Toast(res.msg, 'success');
            setTimeout(function(){ location.reload(); }, 800);
        });
    });

    // Delete gateway
    $(document).on('click', '.delete-gateway', function(e){
        e.preventDefault();
        var url = $(this).data('url');
        if(confirm('{{ __("Are you sure you want to delete this gateway?") }}')) {
            $.ajax({ url: url, type: 'DELETE', data: { _token: '{{ csrf_token() }}' }, success: function(res){
                if(res.msg) NioApp.Toast(res.msg, 'success');
                setTimeout(function(){ location.reload(); }, 800);
            }});
        }
    });

})(jQuery);
</script>
@endpush