<?php $this->load->view("partial/header"); ?>

<style>
    .items_page {
        padding: 24px;
        font-family: 'Segoe UI', Arial, sans-serif;
        background: #f0f4ff;
        min-height: calc(100vh - 120px);
    }

    .items_header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .items_title {
        font-size: 26px;
        font-weight: 700;
        color: #1a1a2e;
    }

    .header_buttons {
        display: flex;
        gap: 10px;
    }

    .new_btn {
        background: linear-gradient(135deg, #f47f20, #e05f00);
        color: white !important;
        border: none;
        border-radius: 10px;
        padding: 10px 20px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(244, 127, 32, 0.4);
        transition: all 0.2s;
        text-decoration: none !important;
        display: inline-block;
        font-family: 'Segoe UI', Arial, sans-serif;
    }

    .new_btn:hover {
        background: linear-gradient(135deg, #ff8f30, #f47f20);
        box-shadow: 0 6px 20px rgba(244, 127, 32, 0.5);
        transform: translateY(-1px);
        color: white !important;
        text-decoration: none !important;
    }

    .excel_btn {
        background: linear-gradient(135deg, #2e7d32, #1b5e20);
        color: white !important;
        border: none;
        border-radius: 10px;
        padding: 10px 20px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(46, 125, 50, 0.4);
        transition: all 0.2s;
        text-decoration: none !important;
        display: inline-block;
        font-family: 'Segoe UI', Arial, sans-serif;
    }

    .excel_btn:hover {
        background: linear-gradient(135deg, #388e3c, #2e7d32);
        box-shadow: 0 6px 20px rgba(46, 125, 50, 0.5);
        transform: translateY(-1px);
        color: white !important;
        text-decoration: none !important;
    }

    .filter_card {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.9);
        border-radius: 12px;
        padding: 12px 20px;
        margin-bottom: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    }

    .filter_toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 600;
        color: #555;
        cursor: pointer;
        text-decoration: none;
        font-family: 'Segoe UI', Arial, sans-serif;
    }

    .filter_toggle:hover {
        color: #f47f20;
        text-decoration: none;
    }

    .filter_options {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-top: 12px;
        flex-wrap: wrap;
    }

    .filter_item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: #555;
        font-family: 'Segoe UI', Arial, sans-serif;
        cursor: pointer;
    }

    .filter_item input[type=checkbox] {
        accent-color: #f47f20;
        width: 15px;
        height: 15px;
        cursor: pointer;
    }

    .action_bar {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.9);
        border-radius: 12px;
        padding: 12px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        flex-wrap: wrap;
        gap: 10px;
    }

    .action_left {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .action_right {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .danger_btn {
        background: linear-gradient(135deg, #dc3545, #c82333);
        color: white;
        border: none;
        border-radius: 8px;
        padding: 8px 16px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
        box-shadow: 0 3px 10px rgba(220, 53, 69, 0.3);
        transition: all 0.2s;
        font-family: 'Segoe UI', Arial, sans-serif;
    }

    .danger_btn:hover {
        transform: translateY(-1px);
        color: white;
        text-decoration: none;
    }

    .secondary_btn {
        background: rgba(15, 52, 96, 0.08);
        color: #0f3460;
        border: 1px solid rgba(15, 52, 96, 0.2);
        border-radius: 8px;
        padding: 8px 16px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
        transition: all 0.2s;
        font-family: 'Segoe UI', Arial, sans-serif;
    }

    .secondary_btn:hover {
        background: #0f3460;
        color: white;
        text-decoration: none;
        transform: translateY(-1px);
    }

    .search_input {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 8px 14px;
        font-size: 13px;
        outline: none;
        transition: all 0.2s;
        background: white;
        font-family: 'Segoe UI', Arial, sans-serif;
        min-width: 200px;
    }

    .search_input:focus {
        border-color: #f47f20;
        box-shadow: 0 0 0 3px rgba(244, 127, 32, 0.12);
    }

    .show_all_btn {
        background: rgba(244, 127, 32, 0.1);
        color: #f47f20;
        border: 1px solid rgba(244, 127, 32, 0.3);
        border-radius: 8px;
        padding: 8px 14px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        font-family: 'Segoe UI', Arial, sans-serif;
    }

    .show_all_btn:hover {
        background: #f47f20;
        color: white;
    }

    .table_card {
        background: rgba(255, 255, 255, 0.75);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.9);
        border-radius: 14px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
        overflow: hidden;
    }

    #sortable_table {
        width: 100% !important;
        border-collapse: collapse !important;
        font-family: 'Segoe UI', Arial, sans-serif !important;
        font-size: 13px !important;
    }

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

    #sortable_table thead th {
        color: rgba(255, 255, 255, 0.85) !important;
        padding: 13px 14px !important;
        text-align: left !important;
        font-weight: 600 !important;
        font-size: 12px !important;
        letter-spacing: 0.3px !important;
        border: none !important;
        white-space: nowrap !important;
    }

    #sortable_table thead th a {
        color: rgba(255, 255, 255, 0.85) !important;
        text-decoration: none !important;
    }

    #sortable_table tbody tr {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        transition: background 0.15s !important;
    }

    #sortable_table tbody tr:hover {
        background: rgba(244, 127, 32, 0.04) !important;
    }

    #sortable_table tbody td {
        padding: 11px 14px !important;
        color: #333 !important;
        border: none !important;
        font-size: 13px !important;
    }

    #sortable_table tbody td a {
        color: #f47f20 !important;
        text-decoration: none !important;
        font-weight: 600 !important;
    }

    #sortable_table tbody td a:hover {
        color: #e05f00 !important;
        text-decoration: underline !important;
    }

    #sortable_table input[type=checkbox] {
        accent-color: #f47f20 !important;
        width: 15px !important;
        height: 15px !important;
        cursor: pointer !important;
    }

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

        .items_page {
            padding: 12px;
        }

        .items_header {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 14px;
        }

        .items_title {
            font-size: 20px;
        }

        .header_buttons {
            display: flex;
            flex-direction: column;
            width: 100%;
            gap: 8px;
        }

        .new_btn,
        .excel_btn {
            width: 100%;
            text-align: center;
            padding: 10px;
        }

        .filter_card {
            padding: 10px 14px;
        }

        .filter_options {
            flex-direction: column;
            gap: 10px;
            margin-top: 10px;
        }

        .action_bar {
            flex-direction: column;
            align-items: stretch;
            padding: 12px;
            gap: 12px;
        }

        .action_left {
            flex-wrap: wrap;
            gap: 8px;
        }

        .action_right {
            flex-direction: column;
            align-items: stretch;
            gap: 8px;
        }

        .action_right form {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 100%;
        }

        .search_input {
            width: 100% !important;
            min-width: unset;
            box-sizing: border-box;
        }

        .show_all_btn {
            width: 100%;
        }

        .danger_btn,
        .secondary_btn {
            flex: 1;
            text-align: center;
            padding: 8px 10px;
            font-size: 12px;
        }

        /* Table horizontal scroll */
        .table_card {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        #sortable_table {
            min-width: 600px !important;
        }

        #sortable_table thead th {
            padding: 10px 10px !important;
            font-size: 11px !important;
        }

        #sortable_table tbody td {
            padding: 9px 10px !important;
            font-size: 12px !important;
        }
    }

    @media (max-width: 480px) {

        .items_page {
            padding: 8px;
        }

        .items_title {
            font-size: 18px;
        }

        .danger_btn,
        .secondary_btn {
            font-size: 11px;
            padding: 7px 8px;
        }
    }
</style>

<script type="text/javascript">
    $(document).ready(function() {
        init_table_sorting();
        enable_select_all();
        enable_checkboxes();
        enable_row_selection();
        enable_search('<?php echo site_url("$controller_name/suggest") ?>', '<?php echo $this->lang->line("common_confirm_search") ?>');
        enable_delete('<?php echo $this->lang->line($controller_name . "_confirm_delete") ?>', '<?php echo $this->lang->line($controller_name . "_none_selected") ?>');
        enable_bulk_edit('<?php echo $this->lang->line($controller_name . "_none_selected") ?>');

        $('#generate_barcodes').click(function() {
            var selected = get_selected_values();
            if (selected.length == 0) {
                alert('<?php echo $this->lang->line('items_must_select_item_for_barcode'); ?>');
                return false;
            }
            $(this).attr('href', 'index.php/items/generate_barcodes/' + selected.join(','));
        });

        $("#low_inventory").click(function() {
            $('#items_filter_form').submit();
        });
        $("#is_serialized").click(function() {
            $('#items_filter_form').submit();
        });
        $("#no_description").click(function() {
            $('#items_filter_form').submit();
        });

        $('#clear_search').click(function() {
            $('#search').val('');
            do_search(true, function() {});
        });
    });

    function init_table_sorting() {
        if ($('.tablesorter tbody tr').length > 1) {
            $("#sortable_table").tablesorter({
                sortList: [
                    [1, 0]
                ],
                headers: {
                    0: {
                        sorter: false
                    },
                    8: {
                        sorter: false
                    },
                    9: {
                        sorter: false
                    }
                }
            });
        }
    }

    function post_item_form_submit(response) {
        if (!response.success) {
            set_feedback(response.message, 'error_message', true);
        } else {
            if (jQuery.inArray(response.item_id, get_visible_checkbox_ids()) != -1) {
                update_row(response.item_id, '<?php echo site_url("$controller_name/get_row") ?>');
                set_feedback(response.message, 'success_message', false);
            } else {
                do_search(true, function() {
                    hightlight_row(response.item_id);
                    set_feedback(response.message, 'success_message', false);
                });
            }
        }
    }

    function post_bulk_form_submit(response) {
        if (!response.success) {
            set_feedback(response.message, 'error_message', true);
        } else {
            var selected_item_ids = get_selected_values();
            for (k = 0; k < selected_item_ids.length; k++) {
                update_row(selected_item_ids[k], '<?php echo site_url("$controller_name/get_row") ?>');
            }
            set_feedback(response.message, 'success_message', false);
        }
    }

    function show_hide_search_filter(search_filter_section, switchImgTag) {
        var ele = document.getElementById(search_filter_section);
        var imageEle = document.getElementById(switchImgTag);
        var elesearchstate = document.getElementById('search_section_state');
        if (ele.style.display == "block") {
            ele.style.display = "none";
            imageEle.innerHTML = '▶ Search Options';
            elesearchstate.value = "none";
        } else {
            ele.style.display = "block";
            imageEle.innerHTML = '▼ Search Options';
            elesearchstate.value = "block";
        }
    }
</script>

<div class="items_page">

    <!-- Header -->
    <div class="items_header">
        <div class="items_title">
            <?php echo $this->lang->line('common_list_of') . ' ' . $this->lang->line('module_' . $controller_name); ?>
        </div>
        <div class="header_buttons">
            <?php echo anchor(
                "$controller_name/view/-1/width:$form_width",
                '+ ' . $this->lang->line($controller_name . '_new'),
                array('class' => 'thickbox none new_btn', 'title' => $this->lang->line($controller_name . '_new'))
            ); ?>
            <?php echo anchor(
                "$controller_name/excel_import/width:$form_width",
                '📥 Excel Import',
                array('class' => 'thickbox none excel_btn', 'title' => 'Import Items from Excel')
            ); ?>
        </div>
    </div>

    <!-- Search Filter -->
    <div class="filter_card">
        <a id="imageDivLink" href="javascript:show_hide_search_filter('search_filter_section', 'imageDivLink');" class="filter_toggle">
            <?php echo isset($search_section_state) && $search_section_state ? '▼' : '▶'; ?> Search Options
        </a>
        <div id="search_filter_section" style="display:<?php echo isset($search_section_state) && $search_section_state ? 'block' : 'none'; ?>;">
            <?php echo form_open("$controller_name/refresh", array('id' => 'items_filter_form')); ?>
            <div class="filter_options">
                <label class="filter_item">
                    <?php echo form_checkbox(array('name' => 'low_inventory', 'id' => 'low_inventory', 'value' => 1, 'checked' => isset($low_inventory) && $low_inventory ? 1 : 0)); ?>
                    <?php echo $this->lang->line('items_low_inventory_items'); ?>
                </label>
                <label class="filter_item">
                    <?php echo form_checkbox(array('name' => 'is_serialized', 'id' => 'is_serialized', 'value' => 1, 'checked' => isset($is_serialized) && $is_serialized ? 1 : 0)); ?>
                    <?php echo $this->lang->line('items_serialized_items'); ?>
                </label>
                <label class="filter_item">
                    <?php echo form_checkbox(array('name' => 'no_description', 'id' => 'no_description', 'value' => 1, 'checked' => isset($no_description) && $no_description ? 1 : 0)); ?>
                    <?php echo $this->lang->line('items_no_description_items'); ?>
                </label>
                <input type="hidden" name="search_section_state" id="search_section_state" value="<?php echo isset($search_section_state) && $search_section_state ? 'block' : 'none'; ?>" />
            </div>
            </form>
        </div>
    </div>

    <!-- Action Bar -->
    <div class="action_bar">
        <div class="action_left">
            <img src='<?php echo base_url() ?>images/spinner_small.gif' alt='spinner' id='spinner' style="display:none;" />
            <?php echo anchor("$controller_name/delete", '🗑 ' . $this->lang->line("common_delete"), array('id' => 'delete', 'class' => 'danger_btn')); ?>
            <?php echo anchor("$controller_name/bulk_edit/width:$form_width", '✏ ' . $this->lang->line("items_bulk_edit"), array('id' => 'bulk_edit', 'class' => 'secondary_btn', 'title' => $this->lang->line('items_edit_multiple_items'))); ?>
            <?php echo anchor("$controller_name/generate_barcodes", '🏷 ' . $this->lang->line("items_generate_barcodes"), array('id' => 'generate_barcodes', 'class' => 'secondary_btn', 'target' => '_blank', 'title' => $this->lang->line('items_generate_barcodes'))); ?>
        </div>
        <div class="action_right">
            <?php echo form_open("$controller_name/search", array('id' => 'search_form')); ?>
            <input type="text" name='search' id='search' class="search_input" placeholder="Search items..." />
            <input type="button" id="clear_search" value="Show All" class="show_all_btn" />
            </form>
        </div>
    </div>

    <!-- Table -->
    <div class="table_card">
        <?php echo $manage_table; ?>
    </div>

</div>

<div id="feedback_bar"></div>
<?php $this->load->view("partial/footer"); ?>