@include('Partials.sidebar')

<section class="main_content dashboard_part large_header_bg">

    @include('Partials.header')

    <div class="main_content_iner default_main_contaner_iner">
        <div class="page-body">

            {{-- ── Page Title ── --}}
            <div class="container-fluid">
                <div class="page-title">
                    <div class="row">
                        <div class="col-sm-6 ps-0">
                            <h3>Payment Gateway</h3>
                        </div>
                        <div class="col-sm-6 pe-0">
                            <ol class="bc">
                                <li>
                                    <a href="/admin/dashboard" class="bc-home">
                                        <i class="fas fa-home"></i>
                                    </a>
                                </li>
                                <li class="bc-sep">›</li>
                                <li>
                                    <a href="/payment-gateway/settings" class="bc-link">Settings</a>
                                </li>
                                <li class="bc-sep">›</li>
                                <li class="bc-active">
                                    Edit Gateway
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ── Flash Messages ── --}}
            @if(session('success'))
                <div class="container-fluid">
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                    </div>
                </div>
            @endif

            @if($errors->any())
                <div class="container-fluid">
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <ul class="mb-0">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                    </div>
                </div>
            @endif

            {{-- ── Current active gateway badge ── --}}
            @if($settings->exists)
                <div class="container-fluid mb-3">
                    <div
                        style="display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.2);">
                        <span
                            style="width:8px;height:8px;border-radius:50%;background:#22c55e;display:inline-block;"></span>
                        <span style="font-size:13px;color:#86efac;font-weight:600;">Active:
                            {{ ucfirst($settings->gateway_name) }}</span>
                        <span style="font-size:12px;color:rgba(255,255,255,0.35);">·
                            {{ strtoupper($settings->mode) }}</span>
                    </div>
                </div>
            @endif

            {{-- ── Form ── --}}
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="location-form" style="width:100%">
                            <div class="location-form-header">
                                <h3>Edit Payment Gateway</h3>
                            </div>
                            <div class="location-form-body">
                                <form action="{{ url('/payment-gateway/settings/' . $settings->id . '/update') }}"
                                    method="POST">
                                    @csrf
                                    @method('PUT')

                                    {{-- Provider quick-select --}}
                                    <div class="row mb-3">
                                        <div class="col-12">
                                            <label class="form-label">Provider:</label>
                                            <div style="display:flex;gap:10px;flex-wrap:wrap;">
                                                @foreach(['razorpay' => 'Razorpay', 'stripe' => 'Stripe', 'phonepe' => 'PhonePe'] as $val => $label)
                                                    <span class="provider-pill" id="pill-{{ $val }}"
                                                        onclick="setProvider('{{ $val }}')"
                                                        style="display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:20px;
                                                                     border:2px solid {{ old('gateway_name', $settings->gateway_name) === $val ? 'rgba(201,169,110,0.6)' : 'rgba(255,255,255,0.1)' }};
                                                                     background:{{ old('gateway_name', $settings->gateway_name) === $val ? 'rgba(201,169,110,0.12)' : 'rgba(255,255,255,0.04)' }};
                                                                     color:{{ old('gateway_name', $settings->gateway_name) === $val ? '#c9a96e' : 'rgba(255,255,255,0.5)' }};
                                                                     font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;">
                                                        {{ $label }}
                                                    </span>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        {{-- Gateway Name --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-label">Gateway Name:</label>
                                                <input type="text" name="gateway_name" id="gateway_name"
                                                    value="{{ old('gateway_name', $settings->gateway_name) }}"
                                                    class="form-control" placeholder="e.g. razorpay" required>
                                                <small class="text-muted">Use lowercase: razorpay, stripe,
                                                    phonepe</small>
                                            </div>
                                        </div>

                                        {{-- API Key --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-label">API Key / Key ID:
                                                    <small class="text-muted" id="key-hint">Public key</small>
                                                </label>
                                                <input type="text" name="api_key" id="api_key"
                                                    value="{{ old('api_key', $settings->api_key) }}"
                                                    class="form-control" placeholder="Enter API key" required>
                                            </div>
                                        </div>

                                        {{-- API Secret --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-label">API Secret / Key Secret:</label>
                                                <div style="position:relative;">
                                                    <input type="password" name="api_secret" id="api_secret"
                                                        value="{{ old('api_secret', $settings->api_secret) }}"
                                                        class="form-control" style="padding-right:40px;"
                                                        placeholder="Leave blank to keep existing" required>
                                                    <button type="button"
                                                        onclick="toggleSecret('api_secret','eye-icon')"
                                                        style="position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:rgba(0, 0, 0);cursor:pointer;padding:0;font-size:14px;">
                                                        <i id="eye-icon" class="fas fa-eye"></i>
                                                    </button>
                                                </div>
                                                <small class="text-muted">Stored securely — never exposed to
                                                    frontend</small>
                                            </div>
                                        </div>

                                        {{-- Mode --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-label">Mode:</label>
                                                <select name="mode" class="form-control" required>
                                                    <option value="sandbox" {{ old('mode', $settings->mode) === 'sandbox' ? 'selected' : '' }}>🧪 Sandbox / Test</option>
                                                    <option value="live" {{ old('mode', $settings->mode) === 'live' ? 'selected' : '' }}>🚀 Live / Production</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Hint box --}}
                                    <div id="provider-hint"
                                        style="display:none;margin-bottom:20px;padding:12px 16px;border-radius:10px;background:rgba(201,169,110,0.08);border:1px solid rgba(201,169,110,0.2);font-size:13px;color:rgba(255,255,255,0.55);line-height:1.6;">
                                    </div>

                                    <div style="display:flex;gap:10px;align-items:center;">
                                        <button class="btn btn-primary" type="submit">
                                            <i class="fas fa-save mr-1"></i> Update Gateway
                                        </button>
                                        <a href="{{ url('/payment-gateway/settings/create') }}"
                                            class="btn btn-secondary">
                                            <i class="fas fa-plus mr-1"></i> Add New
                                        </a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

<script>
    const PROVIDER_HINTS = {
        razorpay: '🔑 <strong>Key ID</strong> starts with <code>rzp_test_</code> or <code>rzp_live_</code>. Find it in Razorpay Dashboard → Settings → API Keys.',
        stripe: '🔑 <strong>Publishable key</strong> starts with <code>pk_test_</code> or <code>pk_live_</code>. Secret starts with <code>sk_</code>. Find in Stripe Dashboard → Developers → API Keys.',
        phonepe: '🔑 <strong>Merchant ID</strong> is your API Key. <strong>Salt Key</strong> is the Secret. Find both in PhonePe Business Dashboard.',
    };

    function setProvider(val) {
        document.getElementById('gateway_name').value = val;

        document.querySelectorAll('.provider-pill').forEach(p => {
            p.style.borderColor = 'rgba(255,255,255,0.1)';
            p.style.background = 'rgba(255,255,255,0.04)';
            p.style.color = 'rgba(255,255,255,0.5)';
        });
        const active = document.getElementById('pill-' + val);
        if (active) {
            active.style.borderColor = 'rgba(201,169,110,0.6)';
            active.style.background = 'rgba(201,169,110,0.12)';
            active.style.color = '#c9a96e';
        }

        const hintBox = document.getElementById('provider-hint');
        if (PROVIDER_HINTS[val]) {
            hintBox.innerHTML = PROVIDER_HINTS[val];
            hintBox.style.display = 'block';
        }

        const keyHints = { razorpay: 'Key ID (public)', stripe: 'Publishable Key', phonepe: 'Merchant ID' };
        document.getElementById('key-hint').textContent = keyHints[val] || 'Public key';
    }

    function toggleSecret(inputId, iconId) {
        const input = document.getElementById(inputId);
        const icon = document.getElementById(iconId);
        if (input.type === 'password') {
            input.type = 'text';
            icon.className = 'fas fa-eye-slash';
        } else {
            input.type = 'password';
            icon.className = 'fas fa-eye';
        }
    }

    // Init — highlight whichever provider is already saved
    document.addEventListener('DOMContentLoaded', function () {
        const current = document.getElementById('gateway_name').value;
        if (current) setProvider(current);
    });
</script>

@include('Partials.footer')