    <style>
        
        .main-content {
            padding: 20px;
        }
        
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            margin-bottom: 20px;
            transition: transform 0.3s;
        }
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        .card-header {
            background-color: white;
            border-bottom: 1px solid #eee;
            border-radius: 10px 10px 0 0 !important;
            padding: 15px 20px;
            font-weight: 600;
        }
        
        .status-badge {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }
        
        .status-pending {
            background-color: rgba(243, 156, 18, 0.2);
            color: #b06c0f;
        }
        
        .status-ongoing {
            background-color: rgba(52, 152, 219, 0.2);
            color: #1a5a8a;
        }
        
        .status-completed {
            background-color: rgba(39, 174, 96, 0.2);
            color: #1a6b3a;
        }
        
        .status-urgent {
            background-color: rgba(231, 76, 60, 0.2);
            color: #a83224;
        }
        
        .complaint-item {
            border-bottom: 1px solid #eee;
            padding: 15px 0;
            transition: background-color 0.2s;
        }
        
        .complaint-item:hover {
            background-color: #f8f9fa;
        }
        
        .complaint-item:last-child {
            border-bottom: none;
        }
        
        .resident-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #eee;
        }
        
        .priority-indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 5px;
        }
        
        .priority-high {
            background-color: var(--danger);
        }
        
        .priority-medium {
            background-color: var(--warning);
        }
        
        .priority-low {
            background-color: var(--success);
        }
        
        .stats-card {
            text-align: center;
            padding: 20px;
        }
        
        .stats-card i {
            font-size: 2rem;
            margin-bottom: 10px;
        }
        
        .stats-value {
            font-size: 2rem;
            font-weight: 700;
            margin: 10px 0;
        }
        
        .stats-label {
            color: #6c757d;
            font-size: 0.9rem;
        }
        
        .filter-btn.active {
            background-color: var(--secondary);
            color: white;
        }
        
        .action-btn {
            padding: 5px 10px;
            font-size: 0.85rem;
            margin-right: 5px;
            margin-bottom: 5px;
        }
        
        .complaint-details {
            background-color: #f8f9fa;
            border-radius: 5px;
            padding: 15px;
            margin-top: 10px;
        }
      
    </style>

<!-- Page Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="mb-1">Resident Complaints</h2>
        <p class="text-muted mb-0">Manage and track complaints from your assigned residents</p>
        <br>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <!-- Filters and Search -->
        <div class="card mb-4">
            <div class="card-body">
                <div class="row align-items-end">
                    <div class="col-md-8">
                        <div class="form-inline">
                            <div class="form-group mr-3 mb-2">
                                <label for="statusFilter" class="mr-2">Status:</label>
                                <select class="form-control" id="statusFilter">
                                    <option value="all">All Status</option>
                                    <option value="Pending">Pending</option>
                                    <option value="Ongoing">In Progress</option>
                                    <option value="Completed">Resolved</option>
                                </select>
                            </div>
                            <div class="form-group mb-2">
                                <label for="dateFilter" class="mr-2">Date:</label>
                                <input type="date" class="form-control" id="dateFilter">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="input-group">
                            <input type="text" class="form-control" id="searchFilter" placeholder="Search complaints...">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" id="searchBtn" type="button">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Complaints List -->
        <div class="card w-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Recent Complaints</h5>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-outline-secondary active">All</button>
                    <button class="btn btn-outline-secondary">My Assignments</button>
                </div>
            </div>
            <div class="card-body">
                <div id="complaint-list"></div>
            </div>
        </div>


        <!-- Modal -->
<div class="modal fade" id="add-remarks" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Submit report</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
    <small> Notes: Provide a short description or feedback related to this case for reporting purposes.</small>
    <input type="hidden" id="transaction">
    <textarea class="form-control mb-3" id="description" style="height: 200px;"></textarea>
    <div id="msg"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="submit_reports()">Submit</button>
      </div>
    </div>
  </div>
</div>



<!-- Modal -->
<div class="modal fade" id="add-hearing-schedule" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add Hearing Schedule</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="sched_trans_id">
        <label>Schedule Hearing</label>
        <input type="date" class="form-control" id="date_settle">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="add_date_hearing()">Save changes</button>
      </div>
    </div>
  </div>
</div>
    </div>
</div>

<!-- jQuery AJAX Filters -->
<script>
    function add_date_hearing(){
        let sched_trans_id = $('#sched_trans_id').val();
        let date_settle = $('#date_settle').val();

        if (sched_trans_id === "" || date_settle === "") {
            swal("Good job!", "You clicked the button!", "success");
            return;
        }

         $.ajax({
            method: 'POST',
            url: 'query/assignment_query.php',
            data:{
                "adding_schedule": 1,
                "sched_trans_id": sched_trans_id,
                "date_settle": date_settle
            },
            success: function(res){
                swal("Success!", res + "!", "success");
                load_complaints_assigned();
            }
        });
    }


    function submit_reports(){
        let transaction = $('#transaction').val();
        let   description = $('#description').val();

        if (transaction === "" || description === "") {
            $('#msg').html(`<div class="alert alert-danger text-center" role="alert"><i class="fa fa-info-circle"></i> Please fill the fields!</div>`).show().fadeOut(4000);
            return;
        }

        $.ajax({
            method: 'POST',
            url: 'query/assignment_query.php',
            data:{
                "submitting_reports": 1,
                "transaction": transaction,
                "description": description
            },
            success: function(res){
                load_complaints_assigned();
                if (res) {
                 $('#msg').html(`<div class="alert alert-success text-center" role="alert"><i class="fa fa-info-circle"></i>${res}</div>`).show().fadeOut(4000);
                }
            }
        });
    }
    function edit_reports_info(UniqueID){
           $('#transaction').val(UniqueID);
           $('#sched_trans_id').val(UniqueID);

    }
    // Load initially
    load_complaints_assigned();

    // Filters
    $('#statusFilter, #dateFilter').on('change', function() {
        load_complaints_assigned();
    });

    $('#searchBtn').on('click', function() {
        load_complaints_assigned();
    });

    $('#searchFilter').on('keyup', function(e) {
        if (e.key === 'Enter') {
            load_complaints_assigned();
        }
    });

    // Update status
    $(document).on('click', '.update-assignment', function() {
        let id = $(this).data('id');
        let status = $(this).data('status');

        $.ajax({
            method: 'POST',
            url: 'query/assignment_query.php',
            data: {
                updating_complaints_assigned: 1,
                id: id,
                status: status
            },
            success: function() {
                load_complaints_assigned();
            }
        });
    });

    // Load complaints with filters
    function load_complaints_assigned() {
        let status = $('#statusFilter').val();
        let date = $('#dateFilter').val();
        let search = $('#searchFilter').val();

        $.ajax({
            method: 'POST',
            url: 'query/assignment_query.php',
            data: {
                loading_complaints_assigned: 1,
                status: status,
                date: date,
                search: search
            },
            success: function(res) {
                $('#complaint-list').html(res);
            }
        });
    }

</script>


    
