@php
    use App\Support\PaymentGatewaySettings;
    $gatewaySettings = PaymentGatewaySettings::normalize($appSetting->payment_gateway_settings ?? null);
    $selectedGateway = old('payment_gateway', $appSetting->paymentGateway());
    $idPrefix = $idPrefix ?? '';
@endphp

<hr class="my-4">
<h6 class="fw-bold text-muted mb-3">Payment Gateway</h6>
<p class="text-muted mb-3" style="font-size:13px;">
    Choose which payment provider to use for paid bookings and enter its credentials.
</p>

<div class="d-flex flex-wrap gap-3 mb-3">
    <div class="form-check">
        <input class="form-check-input payment-gateway-option" type="radio" name="payment_gateway"
               id="{{ $idPrefix }}gateway_clover" value="clover"
               {{ $selectedGateway === 'clover' ? 'checked' : '' }}>
        <label class="form-check-label fw-bold" for="{{ $idPrefix }}gateway_clover">Clover</label>
    </div>
    <div class="form-check">
        <input class="form-check-input payment-gateway-option" type="radio" name="payment_gateway"
               id="{{ $idPrefix }}gateway_stripe" value="stripe"
               {{ $selectedGateway === 'stripe' ? 'checked' : '' }}>
        <label class="form-check-label fw-bold" for="{{ $idPrefix }}gateway_stripe">Stripe</label>
    </div>
</div>

<div id="{{ $idPrefix }}cloverCredentials" class="border rounded p-3 mb-3 payment-gateway-panel" style="{{ $selectedGateway === 'clover' ? '' : 'display:none;' }}">
    <h6 class="fw-bold mb-3">Clover Credentials</h6>
    <div class="mb-3">
        <label class="form-label fw-bold" style="font-size:13px;">Merchant ID</label>
        <input type="text" name="clover_merchant_id" class="form-control form-control-sm"
               value="{{ old('clover_merchant_id', $gatewaySettings['clover']['merchant_id']) }}"
               placeholder="Clover Merchant ID">
    </div>
    <div class="mb-3">
        <label class="form-label fw-bold" style="font-size:13px;">Access Token</label>
        <input type="password" name="clover_access_token" class="form-control form-control-sm"
               value="" autocomplete="new-password"
               placeholder="{{ $gatewaySettings['clover']['access_token'] ? 'Saved — leave blank to keep current' : 'Clover Access Token' }}">
    </div>
    <div class="mb-3">
        <label class="form-label fw-bold" style="font-size:13px;">Environment</label>
        <select name="clover_environment" class="form-select form-select-sm">
            <option value="testing" {{ old('clover_environment', $gatewaySettings['clover']['environment']) === 'testing' ? 'selected' : '' }}>Sandbox / Testing</option>
            <option value="production" {{ old('clover_environment', $gatewaySettings['clover']['environment']) === 'production' ? 'selected' : '' }}>Production</option>
        </select>
    </div>
    <div class="mb-0">
        <label class="form-label fw-bold" style="font-size:13px;">Webhook Secret <span class="text-muted fw-normal">(optional)</span></label>
        <input type="password" name="clover_webhook_secret" class="form-control form-control-sm"
               value="" autocomplete="new-password"
               placeholder="{{ $gatewaySettings['clover']['webhook_secret'] ? 'Saved — leave blank to keep current' : 'Webhook secret' }}">
    </div>
</div>

<div id="{{ $idPrefix }}stripeCredentials" class="border rounded p-3 mb-3 payment-gateway-panel" style="{{ $selectedGateway === 'stripe' ? '' : 'display:none;' }}">
    <h6 class="fw-bold mb-3">Stripe Credentials</h6>
    <div class="mb-3">
        <label class="form-label fw-bold" style="font-size:13px;">Publishable Key</label>
        <input type="text" name="stripe_publishable_key" class="form-control form-control-sm"
               value="{{ old('stripe_publishable_key', $gatewaySettings['stripe']['publishable_key']) }}"
               placeholder="pk_live_... or pk_test_...">
    </div>
    <div class="mb-3">
        <label class="form-label fw-bold" style="font-size:13px;">Secret Key</label>
        <input type="password" name="stripe_secret_key" class="form-control form-control-sm"
               value="" autocomplete="new-password"
               placeholder="{{ $gatewaySettings['stripe']['secret_key'] ? 'Saved — leave blank to keep current' : 'sk_live_... or sk_test_...' }}">
    </div>
    <div class="mb-0">
        <label class="form-label fw-bold" style="font-size:13px;">Webhook Secret <span class="text-muted fw-normal">(optional)</span></label>
        <input type="password" name="stripe_webhook_secret" class="form-control form-control-sm"
               value="" autocomplete="new-password"
               placeholder="{{ $gatewaySettings['stripe']['webhook_secret'] ? 'Saved — leave blank to keep current' : 'whsec_...' }}">
    </div>
</div>