<?php require_once('../database/header.php'); ?>

<style>
    /* General box container (three boxes per row) */
    .box-container {
        display: flex;
        justify-content: flex-start;
        gap: 20px;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

    /* General box styling with hover zoom effect */
    .box {
        border: 1px solid #ddd;
        padding: 15px;
        width: calc(33.33% - 20px); /* Adjust width to fit three boxes per row with gap */
        position: relative;
        background-color: #fff;
        text-decoration: none; /* Remove link underline */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for zoom effect */
        overflow: hidden; /* Ensure badge doesn't overflow */
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    /* Box hover effect (zoom in and shadow) */
    .box:hover {
        transform: scale(1.03); /* Slight zoom effect */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
    }

    /* Box header with badge on top right */
    .box-header {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .badge-btn-live {
        padding: 5px 10px;
        background-color: #4CAF50; /* Green badge background color */
        color: white;
        font-size: 12px;
        font-weight: bold;
        border-radius: 20px;
    }
    
    .badge-btn-update {
        padding: 5px 10px;
        background-color: #0dc4d1; /* Cyan badge background color */
        color: white;
        font-size: 12px;
        font-weight: bold;
        border-radius: 20px;
    }
    
    .badge-btn-coming {
        padding: 5px 10px;
        background-color: #d9020d; /* Red badge background color */
        color: white;
        font-size: 12px;
        font-weight: bold;
        border-radius: 20px;
    }
    
    /* Box content */
    .box-content {
        display: flex;
        align-items: center;
        margin-top: 20px;
    }

    /* Logo styling */
    .logo {
        margin-right: 15px;
    }

    .rounded-logo {
        width: 50px;
        height: 50px;
        border-radius: 0; /* Square shape */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
        object-fit: contain;
    }

    /* Text and name styling */
    .text {
        display: flex;
        flex-direction: column;
    }

    .name {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-bottom: 3px;
    }

    .subtitle {
        font-size: 13px;
        color: #666; /* Lighter color for the subtitle */
    }

    /* Card styling */
    .card {
        border-radius: 10px;
        overflow: hidden;
    }
    
    .card-header.bg-primary {
        background-color: #4e73df !important;
    }

    /* Responsive Layout for smaller screens */
    @media (max-width: 992px) {
        .box {
            width: calc(50% - 20px); /* 2 boxes per row on medium screens */
        }
    }

    @media (max-width: 576px) {
        .box {
            width: 100%; /* 1 box per row on extra small screens */
        }
    }
</style>

<div class="main-panel">
    <div class="content-wrapper">
        <!-- DataTales Example -->
        <div class="card shadow mb-4">
            <div class="card-header py-3 bg-primary">
                <h6 class="m-0 font-weight-bold text-white">添加商户</h6>
            </div>
            <div class="card-body">
                <div class="box-container">
                    <div class="alert alert-info w-100 text-center">
                        <strong>信息！</strong> 商户集成由管理员自动管理。您无需手动添加商户。
                        <br>
                        您的网关密钥和凭证在创建账户时自动生成。
                    </div>
                </div>
            </div>
        </div>
    </div>


<?php require_once('../database/footer.php'); ?>
