@extends('root')
@section('title', 'Payment Gateway Configuration')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Payment Gateway',
        'links' => [
            ['url' => route('admin.dashboard'), 'label' => 'Dashboard'],
        ],
        'current' => 'Payment Gateway'
    ])

    <div class="row g-4">
        @foreach($gateways as $gateway)
        <div class="col-md-6">
            <div class="card h-100 {{ $gateway->is_active ? 'border-primary' : '' }}">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center gap-2">
                        @if($gateway->gateway_name === 'pakar_digital')
                            <i class="ti ti-brand-stripe fs-5 text-primary"></i>
                        @else
                            <i class="ti ti-credit-card fs-5 text-success"></i>
                        @endif
                        <h5 class="mb-0">{{ $gateway->display_name }}</h5>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        @if($gateway->is_active)
                            <span class="badge bg-success">Aktif</span>
                        @else
                            <span class="badge bg-secondary">Nonaktif</span>
                        @endif
                    </div>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        @if($gateway->gateway_name === 'pakar_digital')
                            <p class="text-muted small mb-2">
                                <i class="ti ti-info-circle"></i>
                                Gunakan API dari <a href="https://pakar-digital.com" target="_blank">Pakar Digital</a>
                            </p>
                            <div class="row g-2">
                                <div class="col-6">
                                    <span class="text-muted small">Email API:</span>
                                    <p class="mb-0 fw-medium">{{ $gateway->email_api ? Str::mask($gateway->email_api, '*', 3, 10) : '-' }}</p>
                                </div>
                                <div class="col-6">
                                    <span class="text-muted small">Password API:</span>
                                    <p class="mb-0 fw-medium">{{ $gateway->password_api ? '********' : '-' }}</p>
                                </div>
                            </div>
                        @else
                            <p class="text-muted small mb-2">
                                <i class="ti ti-info-circle"></i>
                                Gunakan Midtrans Snap untuk pembayaran
                            </p>
                            <div class="row g-2">
                                <div class="col-6">
                                    <span class="text-muted small">Server Key:</span>
                                    <p class="mb-0 fw-medium">{{ $gateway->server_key ? '********' : '-' }}</p>
                                </div>
                                <div class="col-6">
                                    <span class="text-muted small">Client Key:</span>
                                    <p class="mb-0 fw-medium">{{ $gateway->client_key ? Str::limit($gateway->client_key, 15, '...') : '-' }}</p>
                                </div>
                            </div>
                        @endif
                    </div>
                    <div class="d-flex align-items-center gap-2 text-muted small mb-3">
                        <span class="badge {{ $gateway->is_production ? 'bg-warning' : 'bg-info' }}">
                            {{ $gateway->is_production ? 'Production' : 'Sandbox' }}
                        </span>
                    </div>
                </div>
                <div class="card-footer bg-transparent d-flex justify-content-between">
                    <a href="{{ route('admin.payment-gateway.edit', $gateway->id) }}" class="btn btn-sm btn-outline-primary">
                        <i class="ti ti-pencil"></i> Edit Kredensial
                    </a>
                    <button type="button" class="btn btn-sm {{ $gateway->is_active ? 'btn-outline-danger' : 'btn-success' }}" onclick="toggleGateway({{ $gateway->id }})">
                        @if($gateway->is_active)
                            <i class="ti ti-power"></i> Nonaktifkan
                        @else
                            <i class="ti ti-power"></i> Aktifkan
                        @endif
                    </button>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <div class="card mt-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0"><i class="ti ti-list-details me-2"></i>Transaksi Topup</h5>
            <a href="{{ route('admin.payment-gateway.transactions') }}" class="btn btn-sm btn-primary">
                Lihat Semua
            </a>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped" id="datatable-transactions">
                    <thead>
                        <tr>
                            <th>Order ID</th>
                            <th>Client</th>
                            <th>Gateway</th>
                            <th>Amount</th>
                            <th>Status</th>
                            <th>Tanggal</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function toggleGateway(id) {
    Swal.fire({
        title: 'Konfirmasi',
        text: 'Apakah Anda yakin ingin mengubah status gateway ini?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Ya',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: '{{ url("/admin/payment-gateway") }}/' + id + '/toggle',
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(res) {
                    toastr.success(res.message || 'Status gateway berhasil diubah');
                    setTimeout(() => location.reload(), 1000);
                },
                error: function(xhr) {
                    toastr.error(xhr.responseJSON?.message || 'Gagal mengubah status gateway');
                }
            });
        }
    });
}

$(document).ready(function () {
    $('#datatable-transactions').DataTable({
        processing: true,
        serverSide: false,
        autoWidth: false,
        pageLength: 5,
        order: [[0, 'desc']],
        ajax: {
            url: '{{ route('admin.payment-gateway.transactions.data') }}',
            dataSrc: 'data'
        },
        columns: [
            {
                data: 'created_at_timestamp',
                visible: false,
                orderable: true
            },
            { data: 'order_id', name: 'order_id' },
            { data: 'client_name', name: 'client_name' },
            { 
                data: 'gateway', 
                name: 'gateway',
                render: function(data) {
                    return data === 'pakar_digital' ? 'Pakar Digital' : 'Midtrans';
                }
            },
            { data: 'amount', name: 'amount' },
            { 
                data: 'status', 
                name: 'status',
                render: function(data, type, row) {
                    let badgeClass = 'bg-secondary';
                    if (data === 'SUCCESS') badgeClass = 'bg-success';
                    else if (data === 'PENDING') badgeClass = 'bg-warning';
                    else if (data === 'EXPIRED') badgeClass = 'bg-danger';
                    
                    return '<span class="badge ' + badgeClass + '">' + data + '</span>';
                }
            },
            { data: 'created_at', name: 'created_at' },
        ]
    });
});
</script>
@endpush