@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 class="breadcrumb-item">
                                    <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">
                                    Payment 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

            {{-- ── 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>Add Payment Gateway</h3>
                            </div>
                            <div class="location-form-body">
                                <form action="{{ url('/payment-gateway/settings/store') }}" 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>

                                    <button class="btn btn-primary" type="submit">
                                        <i class="fas fa-save mr-1"></i> Save Gateway
                                    </button>
                                </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) {
    // Update gateway_name field
    document.getElementById('gateway_name').value = val;

    // Highlight pill
    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';
    }

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

    // Update key hint label
    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';
//     }
// }

function toggleSecret(inputId, iconId) {
    const input = document.getElementById(inputId);
    const icon  = document.getElementById(iconId);
    // Use a data attribute to track state instead
    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')