@extends('backend.layouts.app')
@section('content')
<div class="content-wrapper">
  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6"><h1>Payment Gateway Settings</h1></div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item active">Payment Gateways</li>
          </ol>
        </div>
      </div>
    </div>
  </section>

  <section class="content">
    <div class="container-fluid">

      @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">
          {{ session('success') }}
          <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
        </div>
      @endif
      @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show">
          {{ session('error') }}
          <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
        </div>
      @endif

      <!-- Nav Tabs -->
      <ul class="nav nav-tabs mb-3" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" data-toggle="tab" href="#razorpay-tab">
            <i class="fas fa-rupee-sign mr-1"></i> Razorpay
            @if($gateways['razorpay']->is_enabled)
              <span class="badge badge-success ml-1">ON</span>
            @else
              <span class="badge badge-secondary ml-1">OFF</span>
            @endif
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#sslcommerz-tab">
            <i class="fas fa-mobile-alt mr-1"></i> SSLCommerz
            @if($gateways['sslcommerz']->is_enabled)
              <span class="badge badge-success ml-1">ON</span>
            @else
              <span class="badge badge-secondary ml-1">OFF</span>
            @endif
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#stripe-tab">
            <i class="fab fa-stripe-s mr-1"></i> Stripe
            @if($gateways['stripe']->is_enabled)
              <span class="badge badge-success ml-1">ON</span>
            @else
              <span class="badge badge-secondary ml-1">OFF</span>
            @endif
          </a>
        </li>
      </ul>

      <div class="tab-content">

        {{-- ══════════════════ RAZORPAY ══════════════════ --}}
        <div class="tab-pane fade show active" id="razorpay-tab">
          <div class="card">
            <div class="card-header d-flex align-items-center">
              <h5 class="mb-0"><i class="fas fa-rupee-sign mr-2 text-primary"></i>Razorpay Settings</h5>
              <span class="ml-auto badge {{ $gateways['razorpay']->is_sandbox ? 'badge-warning' : 'badge-success' }}">
                {{ $gateways['razorpay']->is_sandbox ? 'SANDBOX / TEST MODE' : 'LIVE MODE' }}
              </span>
            </div>
            <form action="{{ route('admin.payment-gateways.update', 'razorpay') }}" method="POST">
              @csrf
              <div class="card-body">
                <div class="row mb-3">
                  <div class="col-md-6">
                    <div class="custom-control custom-switch">
                      <input type="checkbox" class="custom-control-input" id="rz_enabled" name="is_enabled" value="1" {{ $gateways['razorpay']->is_enabled ? 'checked' : '' }}>
                      <label class="custom-control-label font-weight-bold" for="rz_enabled">Enable Razorpay</label>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="custom-control custom-switch">
                      <input type="checkbox" class="custom-control-input" id="rz_sandbox" name="is_sandbox" value="1" {{ $gateways['razorpay']->is_sandbox ? 'checked' : '' }}>
                      <label class="custom-control-label" for="rz_sandbox">Sandbox / Test Mode</label>
                    </div>
                  </div>
                </div>
                <div class="alert alert-info">
                  <i class="fas fa-info-circle mr-1"></i>
                  Get your API keys from <a href="https://dashboard.razorpay.com/app/keys" target="_blank">Razorpay Dashboard → Settings → API Keys</a>.
                  Test Key ID pre-filled — add your Test Key Secret below.
                </div>
                <div class="form-group">
                  <label>Key ID <small class="text-muted">(Public — starts with rzp_test_ or rzp_live_)</small></label>
                  <input type="text" class="form-control" name="key_id" value="{{ $gateways['razorpay']->key_id }}" placeholder="rzp_test_xxxxxx">
                </div>
                <div class="form-group">
                  <label>Key Secret <small class="text-muted">(Private — from Razorpay Dashboard)</small></label>
                  <div class="input-group">
                    <input type="password" class="form-control" name="key_secret" value="{{ $gateways['razorpay']->key_secret }}" placeholder="Your Razorpay Key Secret" id="rz_secret">
                    <div class="input-group-append">
                      <button type="button" class="btn btn-outline-secondary toggle-pw" data-target="rz_secret"><i class="fas fa-eye"></i></button>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label>Currency <small class="text-muted">(INR for India)</small></label>
                  <select name="currency" class="form-control" style="max-width:200px">
                    @foreach(['INR','USD','EUR','GBP','AED','SGD'] as $cur)
                      <option value="{{ $cur }}" {{ $gateways['razorpay']->currency === $cur ? 'selected' : '' }}>{{ $cur }}</option>
                    @endforeach
                  </select>
                </div>
                <div class="form-group">
                  <label>Webhook Secret <small class="text-muted">(Optional — from Razorpay Dashboard → Webhooks)</small></label>
                  <input type="text" class="form-control" name="webhook_secret" value="{{ $gateways['razorpay']->webhook_secret }}" placeholder="Optional">
                </div>
                <div class="alert alert-secondary">
                  <strong>Test Cards (Razorpay Sandbox):</strong><br>
                  Card: <code>4111 1111 1111 1111</code> | Exp: any future | CVV: any
                </div>
              </div>
              <div class="card-footer">
                <button type="submit" class="btn btn-primary"><i class="fas fa-save mr-1"></i>Save Razorpay Settings</button>
              </div>
            </form>
          </div>
        </div>

        {{-- ══════════════════ SSLCOMMERZ ══════════════════ --}}
        <div class="tab-pane fade" id="sslcommerz-tab">
          <div class="card">
            <div class="card-header d-flex align-items-center">
              <h5 class="mb-0"><i class="fas fa-mobile-alt mr-2 text-success"></i>SSLCommerz Settings</h5>
              <span class="ml-auto badge {{ $gateways['sslcommerz']->is_sandbox ? 'badge-warning' : 'badge-success' }}">
                {{ $gateways['sslcommerz']->is_sandbox ? 'SANDBOX / TEST MODE' : 'LIVE MODE' }}
              </span>
            </div>
            <form action="{{ route('admin.payment-gateways.update', 'sslcommerz') }}" method="POST">
              @csrf
              <div class="card-body">
                <div class="row mb-3">
                  <div class="col-md-6">
                    <div class="custom-control custom-switch">
                      <input type="checkbox" class="custom-control-input" id="ssl_enabled" name="is_enabled" value="1" {{ $gateways['sslcommerz']->is_enabled ? 'checked' : '' }}>
                      <label class="custom-control-label font-weight-bold" for="ssl_enabled">Enable SSLCommerz</label>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="custom-control custom-switch">
                      <input type="checkbox" class="custom-control-input" id="ssl_sandbox" name="is_sandbox" value="1" {{ $gateways['sslcommerz']->is_sandbox ? 'checked' : '' }}>
                      <label class="custom-control-label" for="ssl_sandbox">Sandbox / Test Mode</label>
                    </div>
                  </div>
                </div>
                <div class="alert alert-info">
                  <i class="fas fa-info-circle mr-1"></i>
                  Get your credentials from <a href="https://manage.sslcommerz.com" target="_blank">SSLCommerz Merchant Panel</a>.
                  Sandbox credentials <code>testbox / qwerty</code> are pre-filled for testing.
                  Supports: bKash, Nagad, Rocket, Visa, MasterCard, and 30+ methods.
                </div>
                <div class="form-group">
                  <label>Store ID <small class="text-muted">(Your SSLCommerz Store ID)</small></label>
                  <input type="text" class="form-control" name="key_id" value="{{ $gateways['sslcommerz']->key_id }}" placeholder="testbox">
                </div>
                <div class="form-group">
                  <label>Store Password <small class="text-muted">(Your SSLCommerz Store Password)</small></label>
                  <div class="input-group">
                    <input type="password" class="form-control" name="key_secret" value="{{ $gateways['sslcommerz']->key_secret }}" placeholder="qwerty" id="ssl_secret">
                    <div class="input-group-append">
                      <button type="button" class="btn btn-outline-secondary toggle-pw" data-target="ssl_secret"><i class="fas fa-eye"></i></button>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label>Currency <small class="text-muted">(BDT for Bangladesh)</small></label>
                  <select name="currency" class="form-control" style="max-width:200px">
                    @foreach(['BDT','USD','EUR','GBP','SGD'] as $cur)
                      <option value="{{ $cur }}" {{ $gateways['sslcommerz']->currency === $cur ? 'selected' : '' }}>{{ $cur }}</option>
                    @endforeach
                  </select>
                </div>
                <div class="form-group">
                  <label>Webhook Secret <small class="text-muted">(Optional)</small></label>
                  <input type="text" class="form-control" name="webhook_secret" value="{{ $gateways['sslcommerz']->webhook_secret }}" placeholder="Optional">
                </div>
                <div class="alert alert-secondary">
                  <strong>Sandbox Test:</strong> Use Store ID <code>testbox</code> and Password <code>qwerty</code>.
                  In the payment screen, use any test card or bKash demo number.
                </div>
              </div>
              <div class="card-footer">
                <button type="submit" class="btn btn-success"><i class="fas fa-save mr-1"></i>Save SSLCommerz Settings</button>
              </div>
            </form>
          </div>
        </div>

        {{-- ══════════════════ STRIPE ══════════════════ --}}
        <div class="tab-pane fade" id="stripe-tab">
          <div class="card">
            <div class="card-header d-flex align-items-center">
              <h5 class="mb-0"><i class="fab fa-stripe-s mr-2 text-info"></i>Stripe Settings</h5>
              <span class="ml-auto badge {{ $gateways['stripe']->is_sandbox ? 'badge-warning' : 'badge-success' }}">
                {{ $gateways['stripe']->is_sandbox ? 'SANDBOX / TEST MODE' : 'LIVE MODE' }}
              </span>
            </div>
            <form action="{{ route('admin.payment-gateways.update', 'stripe') }}" method="POST">
              @csrf
              <div class="card-body">
                <div class="row mb-3">
                  <div class="col-md-6">
                    <div class="custom-control custom-switch">
                      <input type="checkbox" class="custom-control-input" id="st_enabled" name="is_enabled" value="1" {{ $gateways['stripe']->is_enabled ? 'checked' : '' }}>
                      <label class="custom-control-label font-weight-bold" for="st_enabled">Enable Stripe</label>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="custom-control custom-switch">
                      <input type="checkbox" class="custom-control-input" id="st_sandbox" name="is_sandbox" value="1" {{ $gateways['stripe']->is_sandbox ? 'checked' : '' }}>
                      <label class="custom-control-label" for="st_sandbox">Sandbox / Test Mode</label>
                    </div>
                  </div>
                </div>
                <div class="alert alert-info">
                  <i class="fas fa-info-circle mr-1"></i>
                  Get your API keys from <a href="https://dashboard.stripe.com/test/apikeys" target="_blank">Stripe Dashboard → Developers → API Keys</a>.
                  Test keys are pre-filled — replace with your own from the dashboard.
                </div>
                <div class="form-group">
                  <label>Publishable Key <small class="text-muted">(Public — starts with pk_test_ or pk_live_)</small></label>
                  <input type="text" class="form-control" name="key_id" value="{{ $gateways['stripe']->key_id }}" placeholder="pk_test_xxxxxx">
                </div>
                <div class="form-group">
                  <label>Secret Key <small class="text-muted">(Private — starts with sk_test_ or sk_live_)</small></label>
                  <div class="input-group">
                    <input type="password" class="form-control" name="key_secret" value="{{ $gateways['stripe']->key_secret }}" placeholder="sk_test_xxxxxx" id="st_secret">
                    <div class="input-group-append">
                      <button type="button" class="btn btn-outline-secondary toggle-pw" data-target="st_secret"><i class="fas fa-eye"></i></button>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label>Webhook Signing Secret <small class="text-muted">(From Stripe Dashboard → Webhooks — starts with whsec_)</small></label>
                  <div class="input-group">
                    <input type="password" class="form-control" name="webhook_secret" value="{{ $gateways['stripe']->webhook_secret }}" placeholder="whsec_xxxxxx" id="st_webhook">
                    <div class="input-group-append">
                      <button type="button" class="btn btn-outline-secondary toggle-pw" data-target="st_webhook"><i class="fas fa-eye"></i></button>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label>Currency <small class="text-muted">(USD, EUR, GBP etc.)</small></label>
                  <select name="currency" class="form-control" style="max-width:200px">
                    @foreach(['USD','EUR','GBP','AED','SGD','INR','BDT'] as $cur)
                      <option value="{{ $cur }}" {{ $gateways['stripe']->currency === $cur ? 'selected' : '' }}>{{ $cur }}</option>
                    @endforeach
                  </select>
                </div>
                <div class="alert alert-secondary">
                  <strong>Test Cards (Stripe):</strong><br>
                  Success: <code>4242 4242 4242 4242</code> | Exp: any future | CVV: any<br>
                  3D Secure: <code>4000 0027 6000 3184</code>
                </div>
              </div>
              <div class="card-footer">
                <button type="submit" class="btn btn-info"><i class="fas fa-save mr-1"></i>Save Stripe Settings</button>
              </div>
            </form>
          </div>
        </div>

      </div>{{-- end tab-content --}}
    </div>
  </section>
</div>

<script>
document.querySelectorAll('.toggle-pw').forEach(function(btn) {
  btn.addEventListener('click', function() {
    var input = document.getElementById(this.dataset.target);
    var icon  = this.querySelector('i');
    if (input.type === 'password') {
      input.type = 'text';
      icon.classList.replace('fa-eye', 'fa-eye-slash');
    } else {
      input.type = 'password';
      icon.classList.replace('fa-eye-slash', 'fa-eye');
    }
  });
});
</script>
@endsection