<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>

<?= message_box('success'); ?>
<?= message_box('error'); ?>

<?php
$type = $this->uri->segment(4);
if (!empty($type) && !is_numeric($type)) {
    $ex = explode('_', $type);
    if ($ex[0] == 'c') {
        $type = '_' . date('Y');
    }
}
if (empty($type)) {
    $type = '';
}

$active_filter = $type;

$period_options = array(
    '' => lang('all'),
    'last_month' => lang('last_month'),
    'this_months' => lang('this_months'),
);

$selected_period = array_key_exists($active_filter, $period_options) ? $active_filter : '';
?>

<div id="client-estimates-page" class="space-y-4">
    <div class="rounded-2xl border border-border bg-card shadow-sm">
        <div class="p-4">
            <div class="table-responsive overflow-x-auto">
                <table class="table table-striped DataTables min-w-[760px] md:min-w-full" id="DataTables" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th><?= lang('estimate') ?> #</th>
                            <th><?= lang('estimate') . ' ' . lang('date') ?></th>
                            <th><?= lang('expire') . ' ' . lang('date') ?></th>
                            <th><?= lang('amount') ?></th>
                            <th><?= lang('status') ?></th>
                            <th><?= lang('action') ?></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<style>
    #client-estimates-page .dataTables_wrapper .dt-left-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        width: 100%;
    }

    #client-estimates-page .dataTables_wrapper .dt-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    #client-estimates-page .dataTables_wrapper .dt-right {
        width: 100%;
    }

    #client-estimates-page .dt-search-box {
        width: 100%;
    }

    #client-estimates-page .dt-search-input {
        width: 100%;
        min-width: 0;
    }

    #client-estimates-page .dataTables_wrapper .dataTables_paginate {
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }

    @media (min-width: 1024px) {
        #client-estimates-page .dataTables_wrapper .dt-right {
            width: auto;
        }

        #client-estimates-page .dt-search-box {
            width: auto;
        }

        #client-estimates-page .dt-search-input {
            width: 16rem;
        }
    }
</style>

<script>
    list = base_url + "client/estimates/estimatesList";

    function reloadEstimates(filter) {
        var url = list;
        if (filter) {
            url += "/" + filter;
        }
        if (typeof table_url !== "undefined") {
            table_url(url);
        } else if (typeof fire_datatable === "function") {
            fire_datatable(url);
        }
    }

    $(function() {
        var periodSelect = document.getElementById('estimate_period_filter');
        if (periodSelect) {
            periodSelect.addEventListener('change', function() {
                reloadEstimates(periodSelect.value);
            });
        }
    });
</script>
