@extends('layouts.app')

@section('content')

{{-- SUCCESS TOAST --}}
@if(session('success'))
    <div id="successToast"><i class="fa fa-check-circle"></i> {{ session('success') }}</div>
@endif
@if(session('error'))
    <div id="errorToast"><i class="fa fa-times-circle"></i> {{ session('error') }}</div>
@endif

{{-- ERRORS (modal re-open) --}}
@if($errors->any())
<script>
    document.addEventListener('DOMContentLoaded', function () {
        new bootstrap.Modal(document.getElementById('kt_modal_add_gateway')).show();
    });
</script>
@endif

{{-- OUTER CARD --}}
<div class="card">

    {{-- Card Header --}}
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3>
            <i class="fa fa-arrow-circle-right"></i>
            Payment Gateways
        </h3>
        <button type="button" class="btn btn-primary btn-sm px-4"
                data-bs-toggle="modal" data-bs-target="#kt_modal_add_gateway"
                onclick="resetGatewayModal()">
            <i class="fa fa-plus me-1"></i> Add Gateway
        </button>
    </div>

    {{-- Breadcrumb + Search --}}
    <div class="card-header border-bottom-0 px-4 py-2" style="border-top: 1px solid #f1f1f4;">
        <ul class="breadcrumb fs-7 my-0 me-auto">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
            <li class="breadcrumb-item">Gateways</li>
        </ul>
        <div class="input-icon-wrap ms-3" style="width:220px;">
            <i class="fa fa-magnifying-glass input-icon"></i>
            <input type="text" id="gatewaySearch"
                   class="setting-input setting-input--icon"
                   placeholder="Search gateways...">
        </div>
    </div>

    {{-- Card Body --}}
    <div class="card-body pt-4">

        <div class="section-panel">
            <div class="section-panel__body p-0">
                <div class="table-responsive">
                    <table class="supp-table">
                        <thead>
                            <tr>
                                <th style="width:60px;">Sr No</th>
                                <th>Name</th>
                                <th style="width:140px;">Status</th>
                                <th class="text-end" style="width:100px;">Action</th>
                            </tr>
                        </thead>
                        <tbody id="gwTableBody">
                            @forelse($gateways as $key => $gateway)
                            <tr data-name="{{ strtolower($gateway->name) }}">
                                <td class="text-muted">{{ $key + 1 }}</td>
                                <td class="fw-semibold">{{ $gateway->name }}</td>
                                <td>
                                    @if($gateway->active)
                                        <span class="status-badge status-badge--active">Active</span>
                                    @else
                                        <span class="status-badge status-badge--inactive">Inactive</span>
                                    @endif
                                </td>
                                <td class="text-end">
                                    <button type="button"
                                            class="btn btn-sm btn-outline-primary open-edit-modal"
                                            data-bs-toggle="modal"
                                            data-bs-target="#kt_modal_add_gateway"
                                            data-dataval='@json($gateway)'>
                                        <i class="fa fa-edit me-1"></i> Edit
                                    </button>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted py-4">No gateways found.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div id="gwEmpty" class="text-center py-5 d-none">
                    <i class="fa fa-magnifying-glass fa-2x text-muted mb-2"></i>
                    <p class="text-muted fw-semibold mb-0">No gateways match your search.</p>
                </div>

            </div>
        </div>

    </div>{{-- /card-body --}}

</div>{{-- /card --}}


{{-- ══════════════════════════════
     ADD / EDIT GATEWAY MODAL
══════════════════════════════ --}}
<div class="modal fade" id="kt_modal_add_gateway" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 560px;">
        <div class="modal-content" style="border-radius: 14px; overflow: hidden;">

            <form method="POST" action="{{ route('paymentgateway.save') }}">
            @csrf
            <input type="hidden" name="recordid" id="modal_recordid" value="">

                {{-- Modal Header --}}
                <div class="modal-header" style="background:#f8f9fc; border-bottom: 1px solid #e9ecef; padding: 16px 20px;">
                    <h5 id="modalTitle" style="margin:0; font-size:15px; font-weight:700; color:#333; display:flex; align-items:center; gap:8px;">
                        <i class="fa fa-plug" style="color:var(--bs-primary);"></i> Add Gateway
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                {{-- Modal Body --}}
                <div class="modal-body p-4">

                    @if($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show mb-3">
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <div class="row g-4">

                        <div class="col-12">
                            <label class="setting-label">Gateway Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" id="modal_name"
                                   class="setting-input"
                                   placeholder="e.g. Razorpay, Stripe"
                                   value="{{ old('name') }}" required>
                        </div>

                        <div class="col-md-6">
                            <label class="setting-label">Public Key</label>
                            <div class="input-icon-wrap">
                                <i class="fa fa-key input-icon"></i>
                                <input type="text" name="credentials[public_key]" id="modal_public_key"
                                       class="setting-input setting-input--icon"
                                       placeholder="pk_live_..."
                                       value="{{ old('credentials.public_key', $paymentGateway->credentials['public_key'] ?? '') }}">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label class="setting-label">Secret Key</label>
                            <div class="input-icon-wrap">
                                <i class="fa fa-lock input-icon"></i>
                                <input type="password" name="credentials[secret_key]" id="modal_secret_key"
                                       class="setting-input setting-input--icon setting-input--pass"
                                       placeholder="sk_live_..."
                                       value="{{ old('credentials.secret_key', $paymentGateway->credentials['secret_key'] ?? '') }}">
                                <button type="button" class="pass-toggle" onclick="toggleSecretKey()" title="Show/Hide">
                                    <i class="fa fa-eye" id="secretKeyIcon"></i>
                                </button>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="toggle-row">
                                <div class="toggle-row__info">
                                    <span class="toggle-row__title">
                                        <i class="fa fa-circle-check text-success me-2"></i> Active
                                    </span>
                                    <span class="toggle-row__desc">Enable this gateway for transactions</span>
                                </div>
                                <label class="toggle-switch">
                                    <input type="checkbox" name="active" id="modal_active" value="1"
                                           {{ old('active') ? 'checked' : '' }}>
                                    <span class="toggle-slider"></span>
                                </label>
                            </div>
                        </div>

                    </div>
                </div>

                {{-- Modal Footer --}}
                <div class="modal-footer" style="background:#f8f9fc; border-top: 1px solid #e9ecef; padding: 14px 20px;">
                    <button type="button" class="btn btn-sm btn-outline-secondary px-4" data-bs-dismiss="modal">
                        Discard
                    </button>
                    <button type="submit" class="btn btn-primary btn-sm px-4">
                        <i class="fa fa-save me-1"></i> <span id="modalSubmitLabel">Save Gateway</span>
                    </button>
                </div>

            </form>
        </div>
    </div>
</div>


<style>
    /* ---- Toasts ---- */
    #successToast, #errorToast {
        position: fixed; bottom: 30px; left: 30px;
        color: #fff; padding: 12px 20px; border-radius: 6px;
        font-size: 14px; font-weight: 500;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        z-index: 9999; display: flex; align-items: center; gap: 8px;
        animation: fadeInUp 0.3s ease;
    }
    #successToast { background-color: #155724; }
    #errorToast   { background-color: #721c24; }
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* ---- Card header ---- */
    .card-header h3 {
        font-size: 16px; font-weight: 600; margin: 0;
        display: flex; align-items: center; gap: 8px;
    }
    .card-header { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

    /* ---- Section panel ---- */
    .section-panel { border: 1px solid #e9ecef; border-radius: 10px; overflow: hidden; }
    .section-panel__body { padding: 20px 18px; }

    /* ---- Table ---- */
    .supp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .supp-table thead tr { background: #f8f9fc; border-bottom: 2px solid #e9ecef; }
    .supp-table thead th {
        padding: 12px 16px; font-size: 12px; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.5px; color: #6c757d;
    }
    .supp-table tbody tr { border-bottom: 1px solid #f1f1f4; transition: background 0.15s; }
    .supp-table tbody tr:last-child { border-bottom: none; }
    .supp-table tbody tr:hover { background: #f8f9fc; }
    .supp-table tbody td { padding: 13px 16px; color: #333; }

    /* ---- Status badges ---- */
    .status-badge {
        display: inline-block; padding: 3px 10px; border-radius: 20px;
        font-size: 12px; font-weight: 600;
    }
    .status-badge--active   { background: #e8f5e9; color: #2e7d32; }
    .status-badge--inactive { background: #fdecea; color: #c62828; }

    /* ---- Inputs ---- */
    .setting-label {
        display: block; font-size: 13px; font-weight: 600; color: #444; margin-bottom: 6px;
    }
    .setting-input {
        width: 100%; padding: 10px 14px;
        border: 1px solid #dee2e6; border-radius: 10px;
        font-size: 14px; outline: none; background: #f8f9fc;
        transition: border-color 0.2s, box-shadow 0.2s; color: #333;
    }
    .setting-input:focus {
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.12);
        background: #fff;
    }
    .setting-select { appearance: auto; cursor: pointer; }
    .input-icon-wrap { position: relative; }
    .input-icon {
        position: absolute; left: 14px; top: 50%;
        transform: translateY(-50%);
        color: #aaa; font-size: 14px; pointer-events: none;
    }
    .setting-input--icon { padding-left: 38px; }
    .setting-input--pass { padding-right: 42px; }

    /* Pass toggle */
    .pass-toggle {
        position: absolute; right: 12px; top: 50%;
        transform: translateY(-50%);
        background: none; border: none;
        color: #aaa; cursor: pointer; padding: 0; font-size: 14px;
        transition: color 0.2s;
    }
    .pass-toggle:hover { color: var(--bs-primary); }

    /* ---- Toggle switch ---- */
    .toggle-row {
        display: flex; align-items: center; justify-content: space-between;
        background: #f8f9fc; border: 1px solid #e9ecef;
        border-radius: 10px; padding: 14px 18px;
    }
    .toggle-row__info { display: flex; flex-direction: column; gap: 3px; }
    .toggle-row__title { font-size: 13px; font-weight: 600; color: #333; }
    .toggle-row__desc  { font-size: 12px; color: #888; }
    .toggle-switch { position: relative; display: inline-block; width: 46px; height: 24px; flex-shrink: 0; }
    .toggle-switch input { opacity: 0; width: 0; height: 0; }
    .toggle-slider {
        position: absolute; cursor: pointer; inset: 0;
        background: #dee2e6; border-radius: 24px; transition: 0.3s;
    }
    .toggle-slider::before {
        content: ''; position: absolute;
        width: 18px; height: 18px; left: 3px; bottom: 3px;
        background: #fff; border-radius: 50%; transition: 0.3s;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
    .toggle-switch input:checked + .toggle-slider { background: var(--bs-primary); }
    .toggle-switch input:checked + .toggle-slider::before { transform: translateX(22px); }
</style>

<script>
    // Toast dismiss
    ['successToast','errorToast'].forEach(function(id) {
        var t = document.getElementById(id);
        if (t) {
            setTimeout(function () {
                t.style.transition = 'opacity 0.5s ease';
                t.style.opacity = '0';
                setTimeout(function () { t.remove(); }, 500);
            }, 3000);
        }
    });

    // Search filter
    document.getElementById('gatewaySearch').addEventListener('input', function () {
        var q = this.value.toLowerCase().trim();
        var visible = 0;
        document.querySelectorAll('#gwTableBody tr').forEach(function(row) {
            if (!row.dataset.name) return;
            var match = row.dataset.name.includes(q);
            row.style.display = match ? '' : 'none';
            if (match) visible++;
        });
        document.getElementById('gwEmpty').classList.toggle('d-none', visible > 0);
    });

    // Edit modal — populate fields
    document.querySelectorAll('.open-edit-modal').forEach(function(btn) {
        btn.addEventListener('click', function () {
            var data = JSON.parse(this.getAttribute('data-dataval'));
            document.getElementById('modal_recordid').value  = data.id;
            document.getElementById('modal_name').value      = data.name;
            document.getElementById('modal_active').checked  = data.active == 1;
            document.getElementById('modalTitle').innerHTML  =
                '<i class="fa fa-pencil" style="color:var(--bs-primary);"></i> Edit Gateway';
            document.getElementById('modalSubmitLabel').textContent = 'Update Gateway';

            var creds = data.credentials || {};
            document.querySelector('input[name="credentials[public_key]"]').value =
                creds.public_key || '';
            document.querySelector('input[name="credentials[secret_key]"]').value =
                creds.secret_key || '';
        });
    });

    // Reset modal for "Add" mode
    function resetGatewayModal() {
        document.getElementById('modal_recordid').value = '';
        document.getElementById('modal_name').value     = '';
        document.getElementById('modal_active').checked = false;
        document.getElementById('modalTitle').innerHTML =
            '<i class="fa fa-plug" style="color:var(--bs-primary);"></i> Add Gateway';
        document.getElementById('modalSubmitLabel').textContent = 'Save Gateway';
        document.querySelector('input[name="credentials[public_key]"]').value = '';
        document.querySelector('input[name="credentials[secret_key]"]').value = '';
    }

    // Secret key toggle
    function toggleSecretKey() {
        var inp  = document.getElementById('modal_secret_key');
        var icon = document.getElementById('secretKeyIcon');
        if (inp.type === 'password') {
            inp.type = 'text';
            icon.classList.replace('fa-eye', 'fa-eye-slash');
        } else {
            inp.type = 'password';
            icon.classList.replace('fa-eye-slash', 'fa-eye');
        }
    }
</script>

@endsection