<?php
$page_title = "Delhi Birth Certificate List";
include "includes/header.php";

// Check if user is logged in
if(!isset($_SESSION['user_id'])){
    header("Location: login.php");
    exit();
}

include "db.php";

$user_id = $_SESSION['user_id'];
$result = mysqli_query($conn, "SELECT * FROM birth_certificate WHERE user_id='$user_id' ORDER BY id DESC");
?>

<?php include "includes/user_sidebar.php"; ?>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap4.min.css">

<style>
.delhi-list-card {
    max-width: 1100px;
    margin: 25px auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    overflow: hidden;
}
.delhi-list-header {
    background: linear-gradient(135deg, #00008B 0%, #1a3a8a 100%);
    color: #fff;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.delhi-list-header h4 { margin: 0; font-weight: 600; }
.delhi-list-body { padding: 20px 30px; }
.btn-add {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
}
.btn-add:hover { color: #fff; text-decoration: none; transform: translateY(-2px); }
.btn-pdf {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: #fff;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-right: 5px;
}
.btn-pdf:hover { color: #fff; text-decoration: none; transform: translateY(-1px); }
.btn-view {
    background: linear-gradient(135deg, #00008B 0%, #1a3a8a 100%);
    color: #fff;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-right: 5px;
}
.btn-view:hover { color: #fff; text-decoration: none; transform: translateY(-1px); }
table.dataTable thead th {
    background: #f1f5f9;
    font-size: 13px;
    font-weight: 700;
    color: #344767;
    text-transform: uppercase;
}
table.dataTable tbody td { font-size: 13px; vertical-align: middle; }
</style>

<div class="main-content">
    <?php include "includes/topbar.php"; ?>

    <div class="page-content">
        <div class="delhi-list-card">
            <div class="delhi-list-header">
                <div>
                    <h4><i class="fas fa-list-alt"></i> Delhi Birth Certificate - Apply List</h4>
                    <small style="opacity:0.8;">All your Delhi birth certificate applications</small>
                </div>
                <a href="delhi_birth_apply.php" class="btn-add"><i class="fas fa-plus-circle"></i> New Application</a>
            </div>
            <div class="delhi-list-body">
                <?php if ($result && mysqli_num_rows($result) > 0): ?>
                <div class="table-responsive">
                    <table id="delhiBirthTable" class="table table-bordered table-striped" style="width:100%">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Registration No</th>
                                <th>Name</th>
                                <th>Father Name</th>
                                <th>DOB</th>
                                <th>Place</th>
                                <th>Issue Date</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php $i = 1; while ($row = mysqli_fetch_assoc($result)): ?>
                            <tr>
                                <td><?php echo $i++; ?></td>
                                <td><strong><?php echo $row['registration_no']; ?></strong></td>
                                <td><?php echo $row['name']; ?></td>
                                <td><?php echo $row['father_name']; ?></td>
                                <td><?php echo date('d-m-Y', strtotime($row['date_of_birth'])); ?></td>
                                <td><?php echo substr($row['place_of_birth'], 0, 30) . (strlen($row['place_of_birth']) > 30 ? '...' : ''); ?></td>
                                <td><?php echo date('d-m-Y', strtotime($row['date_of_issue'])); ?></td>
                                <td>
                                    <a href="view_certificate.php?reg_no=<?php echo urlencode($row['registration_no']); ?>" class="btn-view" target="_blank" title="View Certificate"><i class="fas fa-eye"></i> View</a>
                                    <a href="generate_certificate.php?reg_no=<?php echo urlencode($row['registration_no']); ?>" class="btn-pdf" target="_blank" title="Download PDF"><i class="fas fa-file-pdf"></i> PDF</a>
                                </td>
                            </tr>
                            <?php endwhile; ?>
                        </tbody>
                    </table>
                </div>
                <?php else: ?>
                <div style="text-align:center; padding:50px; color:#94a3b8;">
                    <i class="fas fa-folder-open" style="font-size:60px; margin-bottom:20px; color:#cbd5e1;"></i>
                    <p style="font-size:16px;">No applications found</p>
                    <a href="delhi_birth_apply.php" class="btn-add" style="margin-top:15px;"><i class="fas fa-plus"></i> Create First Application</a>
                </div>
                <?php endif; ?>
            </div>
        </div>
    </div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function() {
    $('#delhiBirthTable').DataTable({
        "order": [[0, "desc"]],
        "pageLength": 25,
        "language": { "search": "Search:", "lengthMenu": "Show _MENU_ entries" }
    });
});
</script>

<?php include "includes/footer.php"; ?>