<?php
ob_start();
if (session_status() === PHP_SESSION_NONE) { session_start(); }
if (!isset($_SESSION['user_id'])) { header("Location: login.php"); exit(); }

require_once('../titancore/titanconfig.php');

// Fix Database Encoding
mysqli_set_charset($conn, "utf8mb4");
mysqli_query($conn, "SET NAMES 'utf8mb4'");
mysqli_query($conn, "SET CHARACTER SET 'utf8mb4'");

require_once('../titancore/titanheader.php');

$uid = $_SESSION['user_id'];
$utype = $_SESSION['utype'] ?? $_SESSION['user_type'] ?? 'Retailer';

$filter = ($utype == 'TitanAdmin') ? "" : "WHERE user_id = '$uid'";
$query = "SELECT * FROM mp_samagra_history $filter ORDER BY id DESC";
$result = $conn->query($query);
?>

<div class="row mb-3">
    <div class="col">
        <div class="card bg-100 shadow-none border">
            <div class="row gx-0 flex-between-center p-3">
                <div class="col-sm-auto d-flex align-items-center">
                    <div class="icon-item bg-success-subtle shadow-none me-3">
                        <span class="fas fa-list text-success fs-4"></span>
                    </div>
                    <div>
                        <h6 class="text-success fs-10 mb-0">History Log</h6>
                        <h4 class="text-primary fw-bold mb-0">MP Samagra <span class="fw-medium">Records</span></h4>
                    </div>
                </div>
                <div class="col-md-auto mt-3 mt-md-0">
                    <a href="Mp_Samagra_Details.php" class="btn btn-sm btn-success shadow-none fw-bold"><i class="fas fa-search me-1"></i> Search New Mobile</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card mb-3 border-0 shadow-sm border-top border-4 border-success">
    <div class="card-body p-0">
        <div class="table-responsive scrollbar">
            <table class="table table-sm table-striped fs-10 mb-0 text-center align-middle">
                <thead class="bg-200 text-900">
                    <tr>
                        <th class="py-2">#ID</th>
                        <th>Mobile No.</th>
                        <th>Family ID</th>
                        <th>Total Members</th>
                        <th>Amount</th>
                        <th>Date & Time</th>
                        <th class="text-end pe-4">Action</th>
                    </tr>
                </thead>
                <tbody class="list">
                    <?php if($result && $result->num_rows > 0): ?>
                        <?php while($row = $result->fetch_assoc()): 
                            // Decode JSON to count total members
                            $members = json_decode($row['member_data'], true);
                            $total_members = is_array($members) ? count($members) : 0;
                            
                            // Secure JSON data pass kar rahe hain HTML attribute me
                            $secure_json_data = htmlspecialchars($row['member_data'], ENT_QUOTES, 'UTF-8');
                            
                            // Format amount
                            $amount = !empty($row['deducted_amount']) ? '₹' . number_format($row['deducted_amount'], 2) : '₹5.00';
                        ?>
                            <tr>
                                <td class="py-3 fw-bold">#<?php echo $row['id']; ?></td>
                                <td>
                                    <span class="badge badge-subtle-primary fs-11 px-3 py-2 font-monospace border border-primary">
                                        <i class="fas fa-mobile-alt me-1"></i> <?php echo htmlspecialchars($row['mobile_no']); ?>
                                    </span>
                                </td>
                                <td>
                                    <span class="badge badge-subtle-secondary fs-11 px-3 py-2 border border-secondary">
                                        <i class="fas fa-id-card me-1"></i> <?php echo htmlspecialchars($row['family_id'] ?? 'N/A'); ?>
                                    </span>
                                </td>
                                <td>
                                    <span class="badge badge-subtle-info fs-11 px-3 py-2 border border-info">
                                        <i class="fas fa-users me-1"></i> <?php echo $total_members; ?> Members
                                    </span>
                                </td>
                                <td>
                                    <span class="badge badge-subtle-danger fs-11 px-3 py-2 border border-danger">
                                        <i class="fas fa-rupee-sign me-1"></i> <?php echo $amount; ?>
                                    </span>
                                </td>
                                <td class="text-600">
                                    <?php echo date('d M Y, h:i A', strtotime($row['created_at'])); ?>
                                </td>
                                <td class="text-end pe-4">
                                    <button class="btn btn-sm btn-falcon-success fw-bold px-3 shadow-none" 
                                            data-json="<?php echo $secure_json_data; ?>" 
                                            data-mobile="<?php echo htmlspecialchars($row['mobile_no']); ?>" 
                                            data-family="<?php echo htmlspecialchars($row['family_id'] ?? 'N/A'); ?>"
                                            onclick="viewMembers(this)">
                                        <i class="fas fa-eye me-1"></i> View Details
                                    </button>
                                </td>
                            </tr>
                        <?php endwhile; ?>
                    <?php else: ?>
                        <tr>
                            <td colspan="7" class="py-4 text-500 fst-italic">
                                <i class="fas fa-inbox me-2"></i>No records found. Search a mobile number first.
                            </td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function viewMembers(btn) {
        let mobile = btn.getAttribute('data-mobile');
        let familyId = btn.getAttribute('data-family');
        
        // Direct JSON Parse (Bina atob() ke, jisse Hindi corrupt nahi hogi)
        let rawData = btn.getAttribute('data-json');
        let members = JSON.parse(rawData);

        // Build HTML Table dynamically
        let htmlTable = `
            <div class="table-responsive mt-3" style="max-height: 400px; overflow-y: auto;">
                <table class="table table-bordered table-sm fs-10 text-start align-middle">
                    <thead class="bg-200 text-900 position-sticky top-0 shadow-sm">
                        <tr>
                            <th class="text-center">Sr.</th>
                            <th>Photo</th>
                            <th>Name</th>
                            <th>Member ID</th>
                            <th>District</th>
                            <th>Address</th>
                        </tr>
                    </thead>
                    <tbody>
        `;

        // Array ke har member ko loop karke table me dikhana
        if (Array.isArray(members) && members.length > 0) {
            members.forEach((m, index) => {
                let photoHtml = '';
                if (m.photo_url && m.photo_url !== '') {
                    photoHtml = `<img src="${m.photo_url}" alt="Photo" class="rounded-circle" style="width: 40px; height: 40px; object-fit: cover;" onerror="this.style.display='none'">`;
                } else {
                    photoHtml = `<i class="fas fa-user-circle fs-3 text-secondary"></i>`;
                }
                
                htmlTable += `
                    <tr>
                        <td class="text-center fw-bold">${index + 1}</td>
                        <td class="text-center">${photoHtml}</td>
                        <td>
                            <strong class="text-primary">${m.name || 'N/A'}</strong>
                        </td>
                        <td><span class="badge badge-subtle-secondary">${m.member_id || 'N/A'}</span></td>
                        <td><span class="badge badge-subtle-info">${m.district || 'N/A'}</span></td>
                        <td class="text-wrap" style="max-width: 200px; font-size: 11px;">${m.address || 'N/A'}</td>
                    </tr>
                `;
            });
        } else {
            htmlTable += `
                <tr>
                    <td colspan="6" class="text-center text-muted py-3">
                        <i class="fas fa-info-circle me-2"></i>No member data available
                    </td>
                </tr>
            `;
        }

        htmlTable += `</tbody></table></div>`;

        // Pop-up show karna
        Swal.fire({
            title: `<h5 class="mb-0 text-success"><i class="fas fa-users me-2"></i>Family Details</h5>
                    <div class="mt-1">
                        <span class="badge badge-subtle-primary fs-11">Mobile: ${mobile}</span>
                        <span class="badge badge-subtle-secondary fs-11 ms-2">Family ID: ${familyId}</span>
                    </div>`,
            html: htmlTable,
            width: '900px', // Bada popup table ke liye
            confirmButtonText: 'Close',
            customClass: { 
                confirmButton: 'btn btn-success shadow-none px-4',
                title: 'text-success'
            },
            buttonsStyling: false
        });
    }
</script>

<?php 
require_once('../titancore/TitanFooter.php'); 
ob_end_flush();
?>