@extends('root')
@section('title', 'Edit ' . $gateway->display_name)

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

    <div class="row justify-content-center">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        @if($gateway->gateway_name === 'pakar_digital')
                            <i class="ti ti-brand-stripe text-primary me-2"></i>
                        @else
                            <i class="ti ti-credit-card text-success me-2"></i>
                        @endif
                        Konfigurasi {{ $gateway->display_name }}
                    </h5>
                </div>
                <div class="card-body">
                    <form id="form-gateway">
                        @if($gateway->gateway_name === 'pakar_digital')
                            <div class="alert alert-info small">
                                <i class="ti ti-info-circle me-1"></i>
                                Dapatkan kredensial API dari dashboard <a href="https://pakar-digital.com" target="_blank">Pakar Digital</a>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Email API <span class="text-danger">*</span></label>
                                <input type="email" name="email_api" class="form-control" value="{{ $gateway->email_api }}" placeholder="email@example.com">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Password API <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="password" name="password_api" class="form-control" placeholder="Masukkan password baru atau kosongkan jika tidak diubah">
                                    <button type="button" class="btn btn-outline-secondary" onclick="togglePassword(this)">
                                        <i class="ti ti-eye"></i>
                                    </button>
                                </div>
                                <small class="text-muted">Kosongkan jika tidak ingin mengubah password</small>
                            </div>
                        @else
                            <div class="alert alert-info small">
                                <i class="ti ti-info-circle me-1"></i>
                                Dapatkan kredensial dari dashboard <a href="https://dashboard.midtrans.com" target="_blank">Midtrans</a>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Server Key <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="password" name="server_key" class="form-control" placeholder="Masukkan server key baru atau kosongkan">
                                    <button type="button" class="btn btn-outline-secondary" onclick="togglePassword(this)">
                                        <i class="ti ti-eye"></i>
                                    </button>
                                </div>
                                <small class="text-muted">Kosongkan jika tidak ingin mengubah</small>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Client Key <span class="text-danger">*</span></label>
                                <input type="text" name="client_key" class="form-control" value="{{ $gateway->client_key }}" placeholder="Client key untuk Snap.js">
                            </div>
                        @endif

                        <div class="mb-3">
                            <label class="form-label">Mode</label>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="is_production" id="is_production" {{ $gateway->is_production ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_production">
                                    Production Mode
                                </label>
                            </div>
                            <small class="text-muted">Aktifkan untuk menggunakan mode production (transaksi nyata)</small>
                        </div>

                        <hr>

                        <div class="d-flex gap-2">
                            <a href="{{ route('admin.payment-gateway.index') }}" class="btn btn-outline-secondary">
                                <i class="ti ti-arrow-left"></i> Kembali
                            </a>
                            <button type="submit" class="btn btn-primary flex-grow-1">
                                <i class="ti ti-device-floppy"></i> Simpan Perubahan
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function togglePassword(btn) {
    const input = btn.parentElement.querySelector('input');
    const icon = btn.querySelector('i');
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.remove('ti-eye');
        icon.classList.add('ti-eye-off');
    } else {
        input.type = 'password';
        icon.classList.remove('ti-eye-off');
        icon.classList.add('ti-eye');
    }
}

$(document).ready(function() {
    $('#form-gateway').on('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        formData.append('is_production', $('#is_production').is(':checked') ? 1 : 0);

        $.ajax({
            url: '{{ route('admin.payment-gateway.update', $gateway->id) }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'X-HTTP-Method-Override': 'PUT'
            },
            success: function(res) {
                toastr.success(res.message || 'Berhasil menyimpan perubahan');
                setTimeout(() => {
                    window.location.href = '{{ route('admin.payment-gateway.index') }}';
                }, 1000);
            },
            error: function(xhr) {
                const errors = xhr.responseJSON?.errors;
                if (errors) {
                    Object.values(errors).forEach(err => toastr.error(err[0]));
                } else {
                    toastr.error(xhr.responseJSON?.message || 'Gagal menyimpan perubahan');
                }
            }
        });
    });
});
</script>
@endpush