@extends('layout.master')

<style>
    .form-switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 24px;
    }

    .form-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: 0.4s;
        border-radius: 24px;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.4s;
        border-radius: 50%;
    }

    input:checked + .slider {
        background-color: #007bff;
    }

    input:checked + .slider:before {
        transform: translateX(26px);
    }
</style>

@section('content')
<div class="container my-1">
    <div class="row mb-3">
        <div class="col-lg-12">
            <h1 class="display-6">Manage API</h1>
            <p class="text-muted">Control API access, view API keys, and manage integrations seamlessly.</p>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title mb-2">API Keys</h5>
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>API Name</th>
                                <th>Status</th>
                                <th>API Key</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Authentication API</td>
                                <td>
                                    <label class="form-switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </td>
                                <td>
                                    <code>1234abcd-5678efgh-9012ijkl</code>
                                </td>
                                <td>
                                    <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#regenerateModal">Regenerate</button>
                                    <button class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#revokeModal">Revoke</button>
                                </td>
                            </tr>
                            <tr>
                                <td>Data Sync API</td>
                                <td>
                                    <label class="form-switch">
                                        <input type="checkbox">
                                        <span class="slider"></span>
                                    </label>
                                </td>
                                <td>
                                    <code>mnop3456-qrst7890-uvwx1234</code>
                                </td>
                                <td>
                                    <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#regenerateModal">Regenerate</button>
                                    <button class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#revokeModal">Revoke</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Regenerate Modal -->
    <div class="modal fade" id="regenerateModal" tabindex="-1" aria-labelledby="regenerateModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="regenerateModalLabel">Regenerate API Key</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to regenerate this API key? The old key will no longer be valid.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-warning">Regenerate</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Revoke Modal -->
    <div class="modal fade" id="revokeModal" tabindex="-1" aria-labelledby="revokeModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="revokeModalLabel">Revoke API Key</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to revoke this API key? It will no longer be active.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger">Revoke</button>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-lg-12">
            <h5 class="mt-2 mb-1">Best Practices</h5>
            <div class="alert alert-info" role="alert">
                <strong>Tip:</strong> Keep your API keys secure. Avoid sharing them publicly or embedding them in client-side code.
            </div>
            <div class="alert alert-secondary" role="alert">
                <strong>Note:</strong> You can regenerate or revoke API keys at any time to maintain security.
            </div>
        </div>
    </div>
</div>
@endsection
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>