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

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

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

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

    .new_btn {
        background: linear-gradient(135deg, #f47f20, #e05f00);
        color: white !important;
        border: none;
        border-radius: 10px;
        padding: 11px 24px;
        font-size: 14px;
        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;
    }

    .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;
    }

    .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 18px;
        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);
        box-shadow: 0 5px 14px rgba(220, 53, 69, 0.45);
        color: white;
        text-decoration: none;
    }

    .email_btn {
        background: linear-gradient(135deg, #0f3460, #16213e);
        color: white;
        border: none;
        border-radius: 8px;
        padding: 8px 18px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
        box-shadow: 0 3px 10px rgba(15, 52, 96, 0.3);
        transition: all 0.2s;
        font-family: 'Segoe UI', Arial, sans-serif;
    }

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

    .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: 14px !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: 14px 16px !important;
        text-align: left !important;
        font-weight: 600 !important;
        font-size: 13px !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.05) !important;
    }

    #sortable_table tbody td {
        padding: 12px 16px !important;
        color: #333 !important;
        border: none !important;
        font-size: 14px !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) {

        .people_page {
            padding: 12px;
        }

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

        .people_title {
            font-size: 20px;
        }

        .new_btn {
            width: 100%;
            text-align: center;
            padding: 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,
        .email_btn {
            flex: 1;
            text-align: center;
        }

        .table_card {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

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

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

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

    @media (max-width: 480px) {

        .people_page {
            padding: 8px;
        }

        .people_title {
            font-size: 18px;
        }

        .danger_btn,
        .email_btn {
            padding: 8px 12px;
            font-size: 12px;
        }
    }
</style>

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

        $('#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
                    },
                    6: {
                        sorter: false
                    }
                }
            });
        }
    }

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

<div class="people_page">

    <div class="people_header">
        <div class="people_title">
            <?php echo $this->lang->line('common_list_of') . ' ' . $this->lang->line('module_' . $controller_name); ?>
        </div>
        <?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'))
        ); ?>
    </div>

    <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')); ?>
            <a href="#" id="email" class="email_btn">✉ <?php echo $this->lang->line("common_email"); ?></a>
        </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..." />
            <input type="button" id="clear_search" value="Show All" class="show_all_btn" />
            </form>
        </div>
    </div>

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

</div>

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