@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">

            <div class="container-fluid">
                <div class="page-title">
                    <div class="row">
                        <div class="col-sm-6 ps-0">
                            <h3>
                                <i class="fas fa-plus-circle mr-2" style="color:#c9a96e"></i>
                                Add Payment Gateway
                                @if(isset($currentTenant))
                                    <span class="badge badge-info ml-2" style="font-size:12px;">
                                        {{ $currentTenant->name ?? 'Tenant' }}
                                    </span>
                                @endif
                            </h3>
                            <p class="text-muted mb-0" style="font-size:13px;">
                                Add a new payment gateway for your tenant
                            </p>
                        </div>
                        <div class="col-sm-6 pe-0">
                            <ol class="bc">
                                <li>
                                    <a href="/{{ $tenantSlug }}/admin/dashboard" class="bc-home">
                                        <i class="fas fa-home"></i>
                                    </a>
                                </li>
                                <li class="bc-sep">›</li>
                                <li>
                                    <a href="{{ route('payment_gateway_settings.index', ['tenant' => $tenantSlug]) }}" class="bc-link">
                                        Settings
                                    </a>
                                </li>
                                <li class="bc-sep">›</li>
                                <li class="bc-active">Add 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

            <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>Add Payment Gateway</h3>
                            </div>
                            <div class="location-form-body">
                                <form action="{{ route('payment_gateway_settings.store', ['tenant' => $tenantSlug]) }}" method="POST">
                                    @csrf

                                    {{-- Provider quick-select --}}
                                    <div class="row mb-3">
                                        <div class="col-12">
                                            <label class="form-label">Select Provider:</label>
                                            <div style="display:flex;gap:10px;flex-wrap:wrap;">
                                                @foreach([
                                                    ['razorpay', 'Razorpay', '#2563eb'],
                                                    ['stripe', 'Stripe', '#7c3aed'],
                                                    ['phonepe', 'PhonePe', '#ea580c'],
                                                ] as [$val, $label, $color])
                                                <label style="cursor:pointer;margin:0;">
                                                    <input type="radio" name="_provider" value="{{ $val }}"
                                                           style="display:none;"
                                                           onchange="setProvider('{{ $val }}')">
                                                    <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 rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.5);font-size:13px;font-weight:600;transition:all 0.2s;cursor:pointer;">
                                                        {{ $label }}
                                                    </span>
                                                </label>
                                                @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') }}"
                                                       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') }}"
                                                       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="text" 
                                                           name="api_secret" 
                                                           id="api_secret"
                                                           data-hidden="true"
                                                           value="{{ old('api_secret') }}"
                                                           class="form-control" 
                                                           style="padding-right:40px; -webkit-text-security: disc;"
                                                           placeholder="Enter secret key" 
                                                           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:#000;cursor:pointer;padding:0;font-size:14px;">
                                                        <i id="eye-icon" class="fas fa-eye"></i>
                                                    </button>
                                                </div>
                                            </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','sandbox') === 'sandbox' ? 'selected' : '' }}>🧪 Sandbox / Test</option>
                                                    <option value="live" {{ old('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;flex-wrap:wrap;">
                                        <button class="btn btn-primary" type="submit">
                                            <i class="fas fa-save mr-1"></i> Save Gateway
                                        </button>
                                        <a href="{{ route('payment_gateway_settings.index', ['tenant' => $tenantSlug]) }}" 
                                           class="btn btn-secondary">
                                            <i class="fas fa-arrow-left mr-1"></i> Back
                                        </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);
    const isHidden = input.getAttribute('data-hidden') !== 'false';
    if (isHidden) {
        input.style.webkitTextSecurity = 'none';
        input.setAttribute('data-hidden', 'false');
        icon.className = 'fas fa-eye-slash';
    } else {
        input.style.webkitTextSecurity = 'disc';
        input.setAttribute('data-hidden', 'true');
        icon.className = 'fas fa-eye';
    }
}
</script>

@include('Partials.footer')