<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" type="image/png" href="../img/<?= $res_site[0]['logo']; ?>">
    <title><?= $res_site[0]['site_name']; ?></title>

    <link href="../vendor/bootstrap-4.3.1-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="../vendor/fontawesome-free/css/all.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <script src="../vendor/chart.js/Chart.min.js"></script>
    <script src="../vendor/sweetalert/sweetalert.js"></script>

    <?php if ($tables == 1) { ?>
        <link href="../vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
        <link href="../vendor/datatables/buttons.dataTables.min.css" rel="stylesheet">
    <?php } ?>

    <style>
        * { font-family: 'Nunito', sans-serif; box-sizing: border-box; margin: 0; padding: 0; }
        body { background: #f0f2f8; }

        /* =============================================
           FULL HEADER — Single block, two rows
        ============================================= */
        .full-header {
            position: sticky;
            top: 0;
            z-index: 1030;
            box-shadow: 0 4px 18px rgba(0,0,0,0.18);
        }

        /* =============================================
           SINGLE GRADIENT WRAPPER
           Both top row + nav row inside one gradient
        ============================================= */
        .header-gradient {
            background: linear-gradient(
                90deg,
                #1a3ed6 0%,
                #1760c8 25%,
                #1192b8 55%,
                #10a848 100%
            );
            position: relative;
        }

        /* =============================================
           LOGO BOX
           - White box, left side
           - Spans full header height (both rows)
           - Only bottom-right rounded
        ============================================= */
        .logo-box {
            position: absolute;
            left: 0;
            top: 0;
            width: 185px;
            height: 100%; /* spans both rows */
            background: #ffffff;
            border-radius: 0 0 28px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            z-index: 200;
            box-shadow: 6px 0 20px rgba(0,0,0,0.10);
            flex-direction: column;
            padding: 10px;
        }
        .logo-box a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .logo-box img {
            width: 155px;       /* ✅ BIGGER logo */
            max-height: 85px;
            height: auto;
            object-fit: contain;
            display: block;
        }

        /* =============================================
           TOP ROW — Greeting | Buttons | Bell+Admin
        ============================================= */
        .top-row {
            height: 68px;
            display: flex;
            align-items: center;
            padding-left: 200px;  /* past logo */
            padding-right: 22px;
        }

        /* Greeting */
        .greeting-area {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
            margin-right: 22px;
        }
        .greeting-area .home-ic {
            color: white;
            font-size: 22px;
        }
        .greeting-txt {
            font-size: 17px;
            font-weight: 600;
            color: #fff;
            white-space: nowrap;
        }
        .greeting-txt .g-name {
            color: #32E05F;
            font-weight: 800;
        }

        /* Action Buttons — white boxes */
        .btn-area {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
            justify-content: center;
        }
        .act-btn {
            height: 40px;
            min-width: 170px;
            background: #ffffff;
            border: 2px solid rgba(255,255,255,0.9);
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 0 16px;
            font-size: 13.5px;
            font-weight: 700;
            color: #1a1a2e;
            text-decoration: none;
            white-space: nowrap;
            transition: all 0.2s;
            cursor: pointer;
        }
        .act-btn i {
            font-size: 15px;
            color: #10a848;
        }
        .act-btn:hover {
            background: #f0fff5;
            color: #10a848;
            text-decoration: none;
        }
        .act-btn input {
            border: none;
            outline: none;
            background: transparent;
            font-size: 13.5px;
            font-weight: 600;
            color: #333;
            width: 100%;
            font-family: 'Nunito', sans-serif;
        }
        .act-btn input::placeholder { color: #888; font-weight: 500; }

        /* Bell + Admin */
        .right-area {
            display: flex;
            align-items: center;
            gap: 14px;
            flex-shrink: 0;
            margin-left: 18px;
        }

        .bell-wrap { position: relative; }
        .bell-btn {
            background: none;
            border: none;
            color: white;
            font-size: 22px;
            cursor: pointer;
            display: flex;
            align-items: center;
            padding: 0;
            position: relative;
        }
        .bell-badge {
            position: absolute;
            top: -7px;
            right: -8px;
            background: #e74c3c;
            color: white;
            font-size: 9px;
            font-weight: 900;
            min-width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid white;
        }

        .admin-wrap {
            display: flex;
            align-items: center;
            gap: 9px;
            cursor: pointer;
            text-decoration: none;
            color: white;
        }
        .admin-wrap:hover { color: white; text-decoration: none; }
        .admin-wrap img {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            object-fit: cover;
            border: 2.5px solid rgba(255,255,255,0.9);
        }
        .adm-name {
            font-size: 14px;
            font-weight: 800;
            line-height: 1.2;
        }
        .adm-role {
            font-size: 11px;
            opacity: 0.85;
        }

        /* Dropdown menus */
        .hdr-drop {
            background:linear-gradient(
        90deg,
        #1a3ed6 0%,
        #1760c8 30%,
        #1192b8 65%,
        #10a848 100%
    ) !important;

    border:none !important;
    border-radius:12px;
    box-shadow:0 15px 35px rgba(0,0,0,.25);
    overflow:hidden;
}
        .hdr-drop .dropdown-item {
            color: rgba(255,255,255,0.85) !important;
            font-size: 13px;
            padding: 10px 18px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .hdr-drop .dropdown-item:hover {
            background: rgba(255,255,255,0.1) !important;
            color: white !important;
        }
        .hdr-drop .dropdown-divider { border-color: rgba(255,255,255,0.12) !important; }

        .notif-drop {
            background:linear-gradient(
        90deg,
        #1a3ed6 0%,
        #1760c8 30%,
        #1192b8 65%,
        #10a848 100%
    ) !important;

    border:none;
    border-radius:12px;
}
        .notif-drop .drop-title {
            color: rgba(255,255,255,0.55);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            padding: 10px 15px 8px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            font-weight: 700;
        }
        .notif-drop .view-all {
            display: block;
            color: rgba(255,255,255,0.5);
            font-size: 11px;
            text-align: center;
            padding: 8px;
            border-top: 1px solid rgba(255,255,255,0.1);
            text-decoration: none;
        }
        .notif-drop .view-all:hover { color: white; }

        /* =============================================
           DIVIDER LINE between top-row and nav-row
        ============================================= */
        .header-divider {
            height: 1px;
            background: rgba(255,255,255,0.20);
            margin-left: 185px; /* starts after logo */
        }

        /* =============================================
           NAV ROW — same gradient, height 44px
           Starts after logo width
        ============================================= */
        .nav-row {
            height: 44px;
            display: flex;
            align-items: center;
            padding-left: 188px;  /* past logo */
            padding-right: 6px;
            overflow: visible !important;
            position: relative;
            z-index: 100;
        }

        .nav-wrap {
            position: relative;
            display: inline-flex;
            align-items: center;
            height: 44px;
        }

        .nav-link-item {
            color: rgba(255,255,255,0.95);
            padding: 0 11px;
            font-size: 13px;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            height: 44px;
            border: none;
            border-bottom: 3px solid transparent;
            transition: all 0.2s;
            cursor: pointer;
            background: none;
            border-top: none;
            border-left: none;
            border-right: none;
            white-space: nowrap;
            position: relative;
        }
        .nav-link-item i { font-size: 13px; }
        .chev { font-size: 9px !important; opacity: 0.7; margin-left: 1px; }

        /* Active — white underline */
        .nav-link-item.active { color: white; font-weight: 700; }
        .nav-link-item.active::after {
            content: "";
            position: absolute;
            left: 6px;
            right: 6px;
            bottom: 0;
            height: 3px;
            background: #32E05F;
            border-radius: 3px 3px 0 0;
        }
        .nav-link-item:hover { color: white; text-decoration: none; }
        .nav-link-item:hover::after {
            content: "";
            position: absolute;
            left: 6px;
            right: 6px;
            bottom: 0;
            height: 3px;
            background: rgba(255,255,255,0.35);
            border-radius: 3px 3px 0 0;
        }

        /* Hover Dropdown */
        .nav-wrap:hover .nav-sub-menu { display: block; }
        .nav-sub-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;

    min-width:220px;

    background:linear-gradient(
        90deg,
        #1a3ed6 0%,
        #1760c8 30%,
        #1192b8 65%,
        #10a848 100%
    );

    border-radius:0 0 10px 10px;
    box-shadow:0 12px 35px rgba(0,0,0,.30);

    padding:8px 0;
    list-style:none;
    z-index:99999;

    border:1px solid rgba(255,255,255,.08);
}
        .nav-sub-menu a {
            display: block;
            color: rgba(255,255,255,0.88);
            padding: 8px 18px;
            font-size: 12.5px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.15s;
        }
        .nav-sub-menu a:hover {
            background: rgba(255,255,255,0.12);
            color: white;
            padding-left: 24px;
        }
        .sub-divider {
            border-top: 1px solid rgba(255,255,255,0.14);
            margin: 4px 0;
        }

        /* =============================================
           CONTENT
        ============================================= */
        #content-wrapper {
            background: #f0f2f8;
            min-height: calc(100vh - 112px);
        }
        .page-content { padding: 22px 25px; }
    </style>
</head>
<body>

<!-- =============================================
     FULL HEADER — Single gradient, two rows
============================================= -->
<div class="full-header">
<div class="header-gradient">

    <!-- ✅ LOGO BOX — spans full height, absolute left -->
    <div class="logo-box">
        <a href="index.php">
            <img src="../img/<?= $res_site[0]['logo']; ?>"
                 alt="<?= $res_site[0]['site_name']; ?>">
        </a>
    </div>

    <!-- ===== ROW 1: Greeting | Buttons | Bell+Admin ===== -->
    <div class="top-row">

        <!-- Greeting -->
        <div class="greeting-area">
            <i class="fas fa-home home-ic"></i>
            <div class="greeting-txt">
                <?php
                    $h = date('H');
                    if ($h < 12)     $greet = 'Morning';
                    elseif ($h < 17) $greet = 'Afternoon';
                    else             $greet = 'Evening';
                ?>
                Good <?= $greet; ?>,
                <span class="g-name">Admin</span>
                ☀️
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="btn-area">


            <div class="act-btn">
               <i class="fas fa-search"></i>
                <input type="text" id="search_number" placeholder="Search Number"
                    onkeypress="if(event.key==='Enter') window.location.href='recharge_history.php?number='+this.value">
            </div>

            <div class="act-btn">
                <i class="fas fa-user-friends"></i>
                <input type="text" id="search_user" placeholder="Search User"
                    onkeypress="if(event.key==='Enter') window.location.href='team.php?search='+this.value">
            </div>
            
             <a href="payment_options.php" class="act-btn">
                <i class="fas fa-university"></i> Bank Details
            </a>

        </div>

        <!-- Bell + Admin -->
        <div class="right-area">

            <!-- Bell -->
            <div class="bell-wrap dropdown">
                <button class="bell-btn" id="alertsDropdown"
                        data-toggle="dropdown"
                        onclick="show_admin_notifications()">
                    <i class="fas fa-bell"></i>
                    <span class="bell-badge" id="admin_notifications"></span>
                </button>
                <div class="dropdown-menu dropdown-menu-right notif-drop">
                    <div class="drop-title">Alerts Center</div>
                    <div id="my_admin_notifications"></div>
                    <a class="view-all" href="notification.php">Show All Alerts</a>
                </div>
            </div>

            <!-- Admin Profile -->
            <div class="dropdown">
                <a class="admin-wrap dropdown-toggle" href="#"
                   id="userDropdown" data-toggle="dropdown">
                    <img src="<?= $o->profile_pic; ?>" alt="Admin">
                    <div>
                        <div class="adm-name">
                            <?= $o->employee_name; ?>
                            <i class="fas fa-chevron-down"
                               style="font-size:10px; opacity:0.8; margin-left:3px;"></i>
                        </div>
                        <div class="adm-role">Admin</div>
                    </div>
                </a>
                <div class="dropdown-menu dropdown-menu-right hdr-drop">
                    <a class="dropdown-item" href="change_password.php">
                        <i class="fas fa-cogs" style="color:#f7d060;"></i>
                        Change Password
                    </a>
                   
                    <a class="dropdown-item" href="logout.php">
    <i class="fas fa-sign-out-alt"></i>
    Logout
</a>
                </div>
            </div>

        </div>
    </div><!-- end top-row -->

    <!-- Thin divider line -->
    <div class="header-divider"></div>

    <!-- ===== ROW 2: Navigation ===== -->
    <nav class="nav-row">

        <div class="nav-wrap">
            <a class="nav-link-item active" href="index.php">
                <i class="fas fa-th-large"></i> Dashboard
            </a>
        </div>

        <div class="nav-wrap">
            <button class="nav-link-item">
                <i class="fas fa-user-friends"></i> Users
                <i class="fas fa-chevron-down chev"></i>
            </button>
            <ul class="nav-sub-menu">
                <a href="team.php">Members List</a>
                <a href="team_details.php">Add Member</a>
                <div class="sub-divider"></div>
                <a href="admin_md_list.php">Master Distributor</a>
                <a href="admin_distributers_list.php">Distributers</a>
                <a href="admin_retailer_list.php">Retailers</a>
                <a href="admin_apiuser_list.php">Api Users</a>
            </ul>
        </div>

        <div class="nav-wrap">
            <button class="nav-link-item">
                <i class="fas fa-hand-holding-usd"></i> Paymeny Request
                <i class="fas fa-chevron-down chev"></i>
            </button>
            <ul class="nav-sub-menu">
                <a href="pending_requests.php">Pending Request</a>
                <a href="reject_money.php">Reject Request</a>
                <a href="approved_money.php">Approved Request</a>
                <a href="admin_fund.php">Admin Fund Transfer</a>
            </ul>
        </div>

        <div class="nav-wrap">
            <button class="nav-link-item">
                <i class="fas fa-clock"></i> Report
                <i class="fas fa-chevron-down chev"></i>
            </button>
            <ul class="nav-sub-menu">
                <a href="recharge_history.php">Recharge</a>
                <a href="all_history.php">All History</a>
                <a href="wallet_history.php">Wallet History</a>
                <a href="admin_fund.php">Admin Fund Transfer</a>
                <a href="disputes.php">Disputes</a>
            </ul>
        </div>

        <div class="nav-wrap">
            <button class="nav-link-item">
                <i class="fas fa-chart-bar"></i> Others Report
                <i class="fas fa-chevron-down chev"></i>
            </button>
            <ul class="nav-sub-menu">
                <a href="live_report.php" target="_blank">Live Reports</a>
                <a href="recharges.php">Txn Wise</a>
                <a href="top_up.php">Topup Wise</a>
                <a href="business_user.php">User Wise</a>
                <a href="business_operator.php">Operator Wise</a>
                <a href="business_api.php">Api Wise</a>
                <a href="disputes.php">Complain History</a>
                <a href="report_new_user.php">New User</a>
                <a href="excel_report.php">Excel Report</a>
            </ul>
        </div>

        <div class="nav-wrap">
            <button class="nav-link-item">
                <i class="fas fa-cog"></i> Settings
                <i class="fas fa-chevron-down chev"></i>
            </button>
            <ul class="nav-sub-menu">
                <a href="services.php">Services</a>
                <a href="providers.php">Providers</a>
                <a href="apis.php">API(s)</a>
                <a href="plans.php">User Plans</a>
                <a href="dmr_commission.php">DMR Commission</a>
                <a href="payment_options.php">Payment Options</a>
                <a href="website_settings.php?aid=1">Website Setting</a>
                <a href="upi_settings.php">UPI Setting</a>
                <a href="banner_setting.php">Banner Setting</a>
            </ul>
        </div>

       
        <div class="nav-wrap">
            <button class="nav-link-item">
                <i class="fas fa-route"></i> Routing
                <i class="fas fa-chevron-down chev"></i>
            </button>
            <ul class="nav-sub-menu">
                <a href="routes.php">Priority</a>
                <a href="route_members.php">Members</a>
                <a href="route_per_service.php">Service</a>
                <a href="route_per_operator.php">Operators</a>
                <a href="route_per_amount.php">Amount</a>
                <a href="route_per_plan.php">Plans</a>
                <a href="provider_blocked_transactions.php">Block Amount</a>
            </ul>
        </div>

       

        <div class="nav-wrap">
            <button class="nav-link-item">
                <i class="fab fa-whatsapp"></i> SMS
                <i class="fas fa-chevron-down chev"></i>
            </button>
            <ul class="nav-sub-menu">
                <a href="send_whatsapp.php">Send WhatsApp</a>
                <a href="whatsapp_templates.php">Message Templates</a>
                <a href="whatsapp_settings.php">API Settings</a>
                <a href="send_sms.php">SMS Settings</a>
            </ul>
        </div>

        <div class="nav-wrap">
            <button class="nav-link-item">
                <i class="fas fa-sync-alt"></i> Auto Refill
                <i class="fas fa-chevron-down chev"></i>
            </button>
            <ul class="nav-sub-menu">
                <a href="auto_refill_list.php">All Users</a>
                <a href="auto_refill_settings.php">Add/Edit Settings</a>
                <a href="auto_refill_logs.php">Refill History</a>
            </ul>
        </div>

         <div class="nav-wrap">
            <button class="nav-link-item">
                <i class="fas fa-bell"></i> News Setup
                <i class="fas fa-chevron-down chev"></i>
            </button>
            <ul class="nav-sub-menu">
                <a href="notice_board.php">Notice Board</a>
                <a href="notification.php">Notifications</a>
            </ul>
        </div>
        
        <div class="nav-wrap">
    <a href="pending_requests.php" class="nav-link-item">
        <i class="fas fa-hourglass-half"></i> Pending Payment
    </a>
</div>
        


    </nav><!-- end nav-row -->

</div><!-- end header-gradient -->
</div><!-- end full-header -->

<!-- =============================================
     LOGOUT MODAL
============================================= -->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content"
             style="border-radius:14px; border:none; overflow:hidden;">
            <div class="modal-header"
                 style="background:linear-gradient(90deg,#1a3ed6,#10a848);">
                <h5 class="modal-title text-white">
                    <i class="fas fa-sign-out-alt mr-2"></i> Ready to Leave?
                </h5>
                <button class="close text-white" type="button"
                        data-dismiss="modal"><span>×</span></button>
            </div>
            <div class="modal-body">
                Select "Logout" if you are ready to end your current session.
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button"
                        data-dismiss="modal">Cancel</button>
                <a class="btn btn-danger" href="logout.php">
                    <i class="fas fa-sign-out-alt mr-1"></i> Logout
                </a>
            </div>
        </div>
    </div>
</div>

<!-- =============================================
     CONTENT START
============================================= -->
<div id="content-wrapper">
<div class="page-content">
