@extends('layouts.admin')
@section('title','Payment Gateways')

@section('content')

<style>
/* Toggle switch — reused from tax settings */
.pg-toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.pg-toggle input{position:absolute;opacity:0;width:0;height:0}
.pg-track{
  width:2.75rem;height:1.5rem;border-radius:9999px;
  background:var(--border);border:1px solid var(--border);
  position:relative;transition:background .2s,border-color .2s;flex-shrink:0;
}
.pg-toggle input:checked ~ .pg-track{background:var(--foreground);border-color:var(--foreground)}
.pg-thumb{
  position:absolute;top:2px;left:2px;
  width:16px;height:16px;border-radius:50%;
  background:var(--background);
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
.pg-toggle input:checked ~ .pg-track .pg-thumb{transform:translateX(1.25rem)}

/* Gateway card */
.gw-card{
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--card);overflow:hidden;transition:border-color .15s;
}
.gw-card.is-enabled{border-color:var(--foreground)}

/* Fields grid */
.gw-fields{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  padding:1.375rem;border-top:1px solid var(--border);background:var(--background);
}
@media(max-width:640px){.gw-fields{grid-template-columns:1fr}}
</style>

{{-- Page header --}}
<div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.5rem">
  <div>
    <h1 style="font-size:1.25rem;font-weight:800;color:var(--foreground);letter-spacing:-.025em;margin:0 0 .25rem">
      Payment Gateways
    </h1>
    <p style="font-size:.8125rem;color:var(--muted-foreground);margin:0">
      Configure payment methods available on your customer checkout.
    </p>
  </div>
  <button type="submit" form="pg-form" class="btn btn-primary btn-sm">
    <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
    </svg>
    Save All Settings
  </button>
</div>

<form method="POST" action="{{ route('admin.payment-gateways.update') }}" id="pg-form">
@csrf

<div style="display:flex;flex-direction:column;gap:1rem">

{{-- ════════════════════════════════════════
     STRIPE
════════════════════════════════════════ --}}
@php $stripeOn = $settings['stripe_enabled'] === '1'; @endphp
<div class="gw-card {{ $stripeOn ? 'is-enabled' : '' }}" id="card-stripe">

  {{-- Header --}}
  <div style="display:flex;align-items:center;gap:1rem;padding:1.125rem 1.375rem">
    {{-- Icon --}}
    <div style="width:2.5rem;height:2.5rem;border-radius:.65rem;
      background:#635bff;display:flex;align-items:center;justify-content:center;flex-shrink:0">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
        <text x="2" y="17" font-family="Arial" font-weight="900" font-size="13" fill="#fff">S</text>
      </svg>
    </div>
    {{-- Name + description --}}
    <div style="flex:1">
      <div style="font-size:1rem;font-weight:700;color:var(--foreground)">Stripe</div>
      <div style="font-size:.78rem;color:var(--muted-foreground)">
        Credit & debit cards via Stripe Checkout
      </div>
    </div>
    {{-- Toggle --}}
    <label class="pg-toggle" title="Toggle Stripe">
      <input type="hidden" name="stripe_enabled" value="0">
      <input type="checkbox" name="stripe_enabled" value="1" @checked($stripeOn)
        onchange="toggleGateway('stripe', this.checked)">
      <span class="pg-track"><span class="pg-thumb"></span></span>
    </label>
  </div>

  {{-- Fields (visible when enabled) --}}
  <div id="fields-stripe" class="gw-fields" style="{{ $stripeOn ? '' : 'display:none' }}">

    <div>
      <label>Display Label</label>
      <input type="text" name="stripe_label" class="input"
        value="{{ $settings['stripe_label'] ?: 'Stripe' }}" placeholder="Stripe">
    </div>

    <div>
      <label>Environment</label>
      <select name="stripe_environment" class="select">
        <option value="sandbox" @selected(($settings['stripe_environment']??'sandbox')==='sandbox')>Sandbox</option>
        <option value="live"    @selected(($settings['stripe_environment']??'sandbox')==='live')>Live</option>
      </select>
    </div>

    <div>
      <label>Publishable Key</label>
      <input type="text" name="stripe_public_key" class="input"
        value="{{ $settings['stripe_public_key'] }}" placeholder="pk_test_…">
    </div>

    <div>
      <label>Secret Key</label>
      <input type="password" name="stripe_secret_key" class="input"
        value="" placeholder="Leave blank to keep current"
        autocomplete="new-password">
      @if($settings['stripe_secret_key'])
      <p style="font-size:.72rem;color:var(--muted-foreground);margin:.25rem 0 0">
        ✓ Key is saved — leave blank to keep it unchanged.
      </p>
      @endif
    </div>

    <div style="grid-column:1/-1">
      <label>Webhook Secret</label>
      <input type="password" name="stripe_webhook" class="input"
        value="" placeholder="whsec_… — leave blank to keep current"
        autocomplete="new-password">
    </div>

  </div>
</div>

{{-- ════════════════════════════════════════
     PAYPAL
════════════════════════════════════════ --}}
@php $paypalOn = $settings['paypal_enabled'] === '1'; @endphp
<div class="gw-card {{ $paypalOn ? 'is-enabled' : '' }}" id="card-paypal">

  <div style="display:flex;align-items:center;gap:1rem;padding:1.125rem 1.375rem">
    <div style="width:2.5rem;height:2.5rem;border-radius:.65rem;
      background:#003087;display:flex;align-items:center;justify-content:center;flex-shrink:0">
      <svg width="22" height="14" viewBox="0 0 60 24">
        <text y="18" font-family="Arial" font-weight="900" font-size="14" fill="#fff">Pay</text>
        <text x="26" y="18" font-family="Arial" font-weight="900" font-size="14" fill="#009cde">Pal</text>
      </svg>
    </div>
    <div style="flex:1">
      <div style="font-size:1rem;font-weight:700;color:var(--foreground)">PayPal</div>
      <div style="font-size:.78rem;color:var(--muted-foreground)">
        PayPal account, cards and local payment methods
      </div>
    </div>
    <label class="pg-toggle" title="Toggle PayPal">
      <input type="hidden" name="paypal_enabled" value="0">
      <input type="checkbox" name="paypal_enabled" value="1" @checked($paypalOn)
        onchange="toggleGateway('paypal', this.checked)">
      <span class="pg-track"><span class="pg-thumb"></span></span>
    </label>
  </div>

  <div id="fields-paypal" class="gw-fields" style="{{ $paypalOn ? '' : 'display:none' }}">

    <div>
      <label>Display Label</label>
      <input type="text" name="paypal_label" class="input"
        value="{{ $settings['paypal_label'] ?: 'PayPal' }}" placeholder="PayPal">
    </div>

    <div>
      <label>Environment</label>
      <select name="paypal_sandbox" class="select">
        <option value="1" @selected($settings['paypal_sandbox']==='1')>Sandbox</option>
        <option value="0" @selected($settings['paypal_sandbox']==='0')>Live</option>
      </select>
    </div>

    <div>
      <label>Client ID</label>
      <input type="text" name="paypal_client_id" class="input"
        value="{{ $settings['paypal_client_id'] }}" placeholder="AXxx…">
    </div>

    <div>
      <label>Secret</label>
      <input type="password" name="paypal_secret" class="input"
        value="" placeholder="Leave blank to keep current"
        autocomplete="new-password">
      @if($settings['paypal_secret'])
      <p style="font-size:.72rem;color:var(--muted-foreground);margin:.25rem 0 0">
        ✓ Secret is saved — leave blank to keep it unchanged.
      </p>
      @endif
    </div>

  </div>
</div>

{{-- ════════════════════════════════════════
     RAZORPAY
════════════════════════════════════════ --}}
@php $razorOn = $settings['razorpay_enabled'] === '1'; @endphp
<div class="gw-card {{ $razorOn ? 'is-enabled' : '' }}" id="card-razorpay">

  <div style="display:flex;align-items:center;gap:1rem;padding:1.125rem 1.375rem">
    <div style="width:2.5rem;height:2.5rem;border-radius:.65rem;
      background:#072654;display:flex;align-items:center;justify-content:center;flex-shrink:0">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
        <text x="1" y="18" font-family="Arial" font-weight="900" font-size="12" fill="#3395ff">R</text>
        <text x="8" y="18" font-family="Arial" font-weight="900" font-size="10" fill="#fff">pay</text>
      </svg>
    </div>
    <div style="flex:1">
      <div style="font-size:1rem;font-weight:700;color:var(--foreground)">Razorpay</div>
      <div style="font-size:.78rem;color:var(--muted-foreground)">
        Cards, UPI, Netbanking, wallets — India & global
      </div>
    </div>
    <label class="pg-toggle" title="Toggle Razorpay">
      <input type="hidden" name="razorpay_enabled" value="0">
      <input type="checkbox" name="razorpay_enabled" value="1" @checked($razorOn)
        onchange="toggleGateway('razorpay', this.checked)">
      <span class="pg-track"><span class="pg-thumb"></span></span>
    </label>
  </div>

  <div id="fields-razorpay" class="gw-fields" style="{{ $razorOn ? '' : 'display:none' }}">

    <div>
      <label>Display Label</label>
      <input type="text" name="razorpay_label" class="input"
        value="{{ $settings['razorpay_label'] ?: 'Razorpay' }}" placeholder="Razorpay">
    </div>

    <div>
      <label>Environment</label>
      <select name="razorpay_environment" class="select">
        <option value="sandbox" @selected(($settings['razorpay_environment']??'sandbox')==='sandbox')>Sandbox</option>
        <option value="live"    @selected(($settings['razorpay_environment']??'sandbox')==='live')>Live</option>
      </select>
    </div>

    <div>
      <label>Key ID</label>
      <input type="text" name="razorpay_key_id" class="input"
        value="{{ $settings['razorpay_key_id'] }}" placeholder="rzp_test_…">
    </div>

    <div>
      <label>Key Secret</label>
      <input type="password" name="razorpay_key_secret" class="input"
        value="" placeholder="Leave blank to keep current"
        autocomplete="new-password">
      @if($settings['razorpay_key_secret'])
      <p style="font-size:.72rem;color:var(--muted-foreground);margin:.25rem 0 0">
        ✓ Secret is saved — leave blank to keep it unchanged.
      </p>
      @endif
    </div>

  </div>
</div>

{{-- ════════════════════════════════════════
     CASHFREE
════════════════════════════════════════ --}}
@php $cashOn = $settings['cashfree_enabled'] === '1'; @endphp
<div class="gw-card {{ $cashOn ? 'is-enabled' : '' }}" id="card-cashfree">

  <div style="display:flex;align-items:center;gap:1rem;padding:1.125rem 1.375rem">
    <div style="width:2.5rem;height:2.5rem;border-radius:.65rem;
      background:#1a73e8;display:flex;align-items:center;justify-content:center;flex-shrink:0">
      <svg width="22" height="12" viewBox="0 0 70 20">
        <text y="16" font-family="Arial" font-weight="900" font-size="12" fill="#fff">CF</text>
      </svg>
    </div>
    <div style="flex:1">
      <div style="font-size:1rem;font-weight:700;color:var(--foreground)">Cashfree</div>
      <div style="font-size:.78rem;color:var(--muted-foreground)">
        Cards, UPI, Netbanking — fast payouts for India
      </div>
    </div>
    <label class="pg-toggle" title="Toggle Cashfree">
      <input type="hidden" name="cashfree_enabled" value="0">
      <input type="checkbox" name="cashfree_enabled" value="1" @checked($cashOn)
        onchange="toggleGateway('cashfree', this.checked)">
      <span class="pg-track"><span class="pg-thumb"></span></span>
    </label>
  </div>

  <div id="fields-cashfree" class="gw-fields" style="{{ $cashOn ? '' : 'display:none' }}">

    <div>
      <label>Display Label</label>
      <input type="text" name="cashfree_label" class="input"
        value="{{ $settings['cashfree_label'] ?: 'Cashfree' }}" placeholder="Cashfree">
    </div>

    <div>
      <label>Environment</label>
      <select name="cashfree_environment" class="select">
        <option value="sandbox" @selected(($settings['cashfree_environment']??'sandbox')==='sandbox')>Sandbox</option>
        <option value="live"    @selected(($settings['cashfree_environment']??'sandbox')==='live')>Live</option>
      </select>
    </div>

    <div>
      <label>App ID</label>
      <input type="text" name="cashfree_app_id" class="input"
        value="{{ $settings['cashfree_app_id'] }}" placeholder="Your Cashfree App ID">
    </div>

    <div>
      <label>Secret Key</label>
      <input type="password" name="cashfree_secret_key" class="input"
        value="" placeholder="Leave blank to keep current"
        autocomplete="new-password">
      @if($settings['cashfree_secret_key'])
      <p style="font-size:.72rem;color:var(--muted-foreground);margin:.25rem 0 0">
        ✓ Secret is saved — leave blank to keep it unchanged.
      </p>
      @endif
    </div>

  </div>
</div>

</div>{{-- end gateway list --}}

{{-- Footer save bar --}}
<div style="display:flex;align-items:center;justify-content:space-between;
  margin-top:1.5rem;padding:1rem 1.375rem;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius)">
  <div style="display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--muted-foreground)">
    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
    </svg>
    Password fields are only updated when you enter a new value.
    Enabled gateways will appear on the customer checkout page.
  </div>
  <button type="submit" class="btn btn-primary btn-sm">
    <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
    </svg>
    Save All Settings
  </button>
</div>

</form>

<script>
function toggleGateway(name, enabled) {
  var fields = document.getElementById('fields-' + name);
  var card   = document.getElementById('card-' + name);
  if (fields) {
    fields.style.display  = enabled ? 'grid' : 'none';
  }
  if (card) {
    card.classList.toggle('is-enabled', enabled);
  }
}
</script>

@endsection