<style>
    .inv_details {
        padding: 20px;
        font-family: 'Segoe UI', Arial, sans-serif;
        background: #f0f4ff;
        min-height: 100%;
    }

    .inv_card {
        background: rgba(255, 255, 255, 0.75);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.9);
        border-radius: 14px;
        padding: 20px 24px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        margin-bottom: 16px;
    }

    .inv_section_title {
        font-size: 12px;
        font-weight: 700;
        color: #0f3460;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin-bottom: 14px;
        padding-bottom: 8px;
        border-bottom: 2px solid rgba(15, 52, 96, 0.2);
    }

    .inv_info_grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px;
    }

    .inv_info_item {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .inv_info_label {
        font-size: 11px;
        font-weight: 700;
        color: #999;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }

    .inv_info_value {
        font-size: 14px;
        font-weight: 600;
        color: #1a1a2e;
        background: rgba(15, 52, 96, 0.04);
        border: 1px solid rgba(15, 52, 96, 0.1);
        border-radius: 8px;
        padding: 8px 12px;
    }

    .qty_value {
        font-size: 18px;
        font-weight: 700;
        color: #0f3460;
        background: rgba(15, 52, 96, 0.08);
        border: 1px solid rgba(15, 52, 96, 0.2);
    }

    .tracking_title {
        font-size: 12px;
        font-weight: 700;
        color: #f47f20;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin-bottom: 14px;
        padding-bottom: 8px;
        border-bottom: 2px solid rgba(244, 127, 32, 0.2);
    }

    .tracking_table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
        font-family: 'Segoe UI', Arial, sans-serif;
    }

    .tracking_table thead tr {
        background: linear-gradient(135deg, #1a1a2e, #0f3460);
    }

    .tracking_table thead th {
        color: rgba(255, 255, 255, 0.85);
        padding: 10px 12px;
        text-align: left;
        font-weight: 600;
        font-size: 11px;
        letter-spacing: 0.3px;
        border: none;
        white-space: nowrap;
    }

    .tracking_table tbody tr {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        transition: background 0.15s;
    }

    .tracking_table tbody tr:hover {
        background: rgba(244, 127, 32, 0.04);
    }

    .tracking_table tbody td {
        padding: 10px 12px;
        color: #333;
        border: none;
        font-size: 13px;
        vertical-align: middle;
    }

    .qty_positive {
        color: #2e7d32;
        font-weight: 700;
    }

    .qty_negative {
        color: #dc3545;
        font-weight: 700;
    }

    .no_data {
        text-align: center;
        padding: 24px;
        color: #999;
        font-style: italic;
        font-size: 13px;
    }

    /* ── Responsive ── */
    @media (max-width: 768px) {

        .inv_details {
            padding: 12px;
        }

        .inv_card {
            padding: 14px 16px;
            margin-bottom: 12px;
        }

        .inv_info_grid {
            grid-template-columns: 1fr;
        }

        .inv_info_value {
            font-size: 13px;
            padding: 7px 10px;
        }

        .qty_value {
            font-size: 16px;
        }

        /* Table horizontal scroll */
        .inv_card:last-child {
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch;
        }

        .tracking_table {
            min-width: 480px;
        }

        .tracking_table thead th {
            padding: 8px 10px;
            font-size: 10px;
        }

        .tracking_table tbody td {
            padding: 8px 10px;
            font-size: 12px;
        }
    }

    @media (max-width: 480px) {

        .inv_details {
            padding: 8px;
        }

        .inv_card {
            padding: 12px;
        }

        .inv_section_title,
        .tracking_title {
            font-size: 11px;
        }

        .inv_info_label {
            font-size: 10px;
        }
    }
</style>

<?php
echo form_open('items/find_item_info/' . $item_info->item_id, array('id' => 'item_number_form'));
echo form_close();
echo form_open('items/save_inventory/' . $item_info->item_id, array('id' => 'item_form'));
echo form_close();
?>

<div class="inv_details">

    <!-- Item Info Card -->
    <div class="inv_card">
        <div class="inv_section_title">📦 <?php echo $this->lang->line('items_basic_information'); ?></div>
        <div class="inv_info_grid">
            <div class="inv_info_item">
                <span class="inv_info_label"><?php echo $this->lang->line('items_item_number'); ?></span>
                <span class="inv_info_value"><?php echo $item_info->item_number ? $item_info->item_number : '—'; ?></span>
            </div>
            <div class="inv_info_item">
                <span class="inv_info_label"><?php echo $this->lang->line('items_name'); ?></span>
                <span class="inv_info_value"><?php echo $item_info->name; ?></span>
            </div>
            <div class="inv_info_item">
                <span class="inv_info_label"><?php echo $this->lang->line('items_category'); ?></span>
                <span class="inv_info_value"><?php echo $item_info->category; ?></span>
            </div>
            <div class="inv_info_item">
                <span class="inv_info_label"><?php echo $this->lang->line('items_current_quantity'); ?></span>
                <span class="inv_info_value qty_value"><?php echo number_format($item_info->quantity, 2); ?></span>
            </div>
        </div>
    </div>

    <!-- Tracking Table Card -->
    <div class="inv_card" style="padding:0;overflow:hidden;">
        <div style="padding:16px 20px 0;">
            <div class="tracking_title">📊 Inventory Data Tracking</div>
        </div>
        <table class="tracking_table">
            <thead>
                <tr>
                    <th style="width:20%;">Date</th>
                    <th style="width:25%;">Employee</th>
                    <th style="width:15%;text-align:right;">In/Out Qty</th>
                    <th style="width:40%;">Remarks</th>
                </tr>
            </thead>
            <tbody>
                <?php
                $CI = &get_instance();
                $trans_items_id = $item_info->item_id;

                $CI->db->from('phppos_inventory');
                $CI->db->where('trans_items', $trans_items_id);
                $CI->db->order_by('trans_date', 'DESC');
                $query = $CI->db->get();

                if ($query->num_rows() == 0):
                ?>
                    <tr>
                        <td colspan="4" class="no_data">No inventory transactions found for this item.</td>
                    </tr>
                    <?php
                else:
                    foreach ($query->result_array() as $row):
                        $CI->db->from('phppos_people');
                        $CI->db->where('person_id', $row['trans_user']);
                        $user_query = $CI->db->get();
                        $employee_name = '';
                        if ($user_query->num_rows() > 0) {
                            $user_row = $user_query->row();
                            $employee_name = $user_row->first_name . ' ' . $user_row->last_name;
                        }
                        $qty_class = $row['trans_inventory'] >= 0 ? 'qty_positive' : 'qty_negative';
                        $qty_prefix = $row['trans_inventory'] >= 0 ? '+' : '';
                    ?>
                        <tr>
                            <td><?php echo $row['trans_date']; ?></td>
                            <td><?php echo $employee_name; ?></td>
                            <td style="text-align:right;" class="<?php echo $qty_class; ?>"><?php echo $qty_prefix . $row['trans_inventory']; ?></td>
                            <td><?php echo $row['trans_comment']; ?></td>
                        </tr>
                <?php
                    endforeach;
                endif;
                ?>
            </tbody>
        </table>
    </div>

</div>