<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<?php
$edited = can_action('151', 'edited');
$supplier_id = !empty($supplier_info->supplier_id) ? (int) $supplier_info->supplier_id : 0;
$supplier_name = !empty($supplier_info->name) ? $supplier_info->name : lang('supplier');

$initials = '';
$parts = preg_split('/\s+/', trim((string) $supplier_name));
if (!empty($parts)) {
    foreach ($parts as $part) {
        if ($part !== '') {
            $initials .= strtoupper(substr($part, 0, 1));
        }
        if (strlen($initials) >= 2) {
            break;
        }
    }
}
if ($initials === '') {
    $initials = 'SP';
}

$supplier_code = 'SUP-' . date('Y') . '-' . str_pad((string) ($supplier_id ?: 1), 4, '0', STR_PAD_LEFT);
$currency_symbol = !empty($currency->symbol) ? $currency->symbol : default_currency();

$supplier_purchase_count = isset($supplier_purchase_count) ? (int) $supplier_purchase_count : 0;
$supplier_return_count = isset($supplier_return_count) ? (int) $supplier_return_count : 0;
$supplier_paid_total = isset($supplier_paid_total) ? (float) $supplier_paid_total : 0;
$supplier_total_amount = isset($supplier_total_amount) ? (float) $supplier_total_amount : 0;
$supplier_total_due = isset($supplier_total_due) ? (float) $supplier_total_due : 0;
$supplier_active_tab = !empty($supplier_active_tab) ? $supplier_active_tab : 'overview';
$purchase_history = !empty($purchase_history) ? $purchase_history : array();
$return_history = !empty($return_history) ? $return_history : array();
$purchase_history_page = !empty($purchase_history_page) ? (int) $purchase_history_page : 1;
$purchase_history_pages = !empty($purchase_history_pages) ? (int) $purchase_history_pages : 1;
$return_history_page = !empty($return_history_page) ? (int) $return_history_page : 1;
$return_history_pages = !empty($return_history_pages) ? (int) $return_history_pages : 1;

$partner_since_raw = null;
if (!empty($supplier_info->created_date)) {
    $partner_since_raw = $supplier_info->created_date;
} elseif (!empty($supplier_info->created_at)) {
    $partner_since_raw = $supplier_info->created_at;
} elseif (!empty($supplier_info->date)) {
    $partner_since_raw = $supplier_info->date;
} elseif (!empty($purchases[0]->purchase_date)) {
    $partner_since_raw = $purchases[0]->purchase_date;
}
$partner_since = !empty($partner_since_raw) ? display_date($partner_since_raw) : '-';

$timeline = array();
$timeline[] = array(
    'title' => 'Profile Created',
    'meta' => $partner_since !== '-' ? $partner_since : date('M d, Y'),
    'icon' => 'layout-grid',
);
if (!empty($purchases)) {
    foreach (array_slice($purchases, 0, 4) as $purchase_row) {
        $timeline[] = array(
            'title' => lang('purchase') . ' #' . $purchase_row->reference_no,
            'meta' => !empty($purchase_row->purchase_date) ? display_date($purchase_row->purchase_date) : '-',
            'icon' => 'shopping-cart',
            'link' => base_url('admin/purchase/purchase_details/' . $purchase_row->purchase_id),
        );
    }
}

$custom_fields = custom_form_table(19, $supplier_id ?: null);

$supplier_tab_link = function ($tab, $extra = array()) {
    $params = array_merge($_GET, $extra, array('tab' => $tab));
    foreach ($params as $key => $value) {
        if ($value === null || $value === '') {
            unset($params[$key]);
        }
    }
    $query = http_build_query($params);
    return current_url() . (!empty($query) ? '?' . $query : '');
};
?>

<div id="supplier-detail-workspace" class="space-y-6">
    <div class="grid gap-6 xl:grid-cols-[380px_minmax(0,1fr)]">
        <aside class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-900">
            <div class="border-b border-slate-200 px-6 py-6 dark:border-slate-700">
                <div class="mx-auto mb-4 flex h-24 w-24 items-center justify-center rounded-2xl bg-slate-900 text-4xl font-bold text-white shadow-lg dark:bg-slate-100 dark:text-slate-900">
                    <?= html_escape($initials) ?>
                </div>
                <h2 class="text-center text-[2.05rem] font-semibold tracking-tight text-slate-900 dark:text-slate-100"><?= html_escape($supplier_name) ?></h2>
                <div class="mt-4 flex items-center justify-center gap-3">
                    <span class="rounded-md bg-slate-100 px-2 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-slate-600 dark:bg-slate-800 dark:text-slate-300"><?= lang('supplier') ?></span>
                    <span class="text-xs font-semibold tracking-wide text-slate-400 dark:text-slate-500"><?= html_escape($supplier_code) ?></span>
                </div>
            </div>

            <div class="px-6 py-6">
                <p class="mb-4 text-xs font-bold uppercase tracking-[0.24em] text-slate-500">CONTACT INFO</p>
                <div class="space-y-4">
                    <div class="border-t border-slate-200 pt-4 dark:border-slate-700">
                        <p class="text-xs font-bold uppercase tracking-[0.2em] text-slate-500 ">EMAIL ADDRESS</p>
                        <p class="mt-1 text-3xl font-semibold text-slate-900 dark:text-slate-100"><?= !empty($supplier_info->email) ? html_escape($supplier_info->email) : '-' ?></p>
                    </div>
                    <div class="border-t border-slate-200 pt-4 dark:border-slate-700">
                        <p class="text-xs font-bold uppercase tracking-[0.2em] text-slate-500 ">PRIMARY PHONE</p>
                        <p class="mt-1 text-3xl font-semibold text-slate-900 dark:text-slate-100"><?= !empty($supplier_info->phone) ? html_escape($supplier_info->phone) : '-' ?></p>
                    </div>
                    <div class="border-t border-slate-200 pt-4 dark:border-slate-700">
                        <p class="text-xs font-bold uppercase tracking-[0.2em] text-slate-500">MOBILE PHONE</p>
                        <p class="mt-1 text-3xl font-semibold text-slate-900 dark:text-slate-100"><?= !empty($supplier_info->mobile) ? html_escape($supplier_info->mobile) : '-' ?></p>
                    </div>
                </div>

                <p class="mb-4 mt-8 text-xs font-bold uppercase tracking-[0.24em] text-slate-500">BUSINESS DETAILS</p>
                <div class="space-y-4">
                    <div class="border-t border-slate-200 pt-4 dark:border-slate-700">
                        <p class="text-xs font-bold uppercase tracking-[0.2em] text-slate-500">BILLING ADDRESS</p>
                        <p class="mt-1 text-3xl font-semibold text-slate-900 dark:text-slate-100"><?= !empty($supplier_info->address) ? nl2br(html_escape($supplier_info->address)) : '-' ?></p>
                    </div>
                    <div class="border-t border-slate-200 pt-4 dark:border-slate-700">
                        <p class="text-xs font-bold uppercase tracking-[0.2em] text-slate-500">VAT NUMBER</p>
                        <p class="mt-1 text-3xl font-semibold text-slate-900 dark:text-slate-100"><?= !empty($supplier_info->vat) ? html_escape($supplier_info->vat) : '-' ?></p>
                    </div>
                    <div class="border-t border-slate-200 pt-4 dark:border-slate-700">
                        <p class="text-xs font-bold uppercase tracking-[0.2em] text-slate-500">PARTNER SINCE</p>
                        <p class="mt-1 text-3xl font-semibold text-slate-900 dark:text-slate-100"><?= html_escape($partner_since) ?></p>
                    </div>
                    <?php if (!empty($custom_fields)) { ?>
                        <?php foreach ($custom_fields as $label => $value) { ?>
                            <?php if (!empty($label)) { ?>
                                <div class="border-t border-slate-200 pt-4 dark:border-slate-700">
                                    <p class="text-xs font-bold uppercase tracking-[0.2em] text-slate-500"><?= html_escape($label) ?></p>
                                    <div class="mt-1 text-2xl font-semibold text-slate-900 dark:text-slate-100"><?= $value ?></div>
                                </div>
                            <?php } ?>
                        <?php } ?>
                    <?php } ?>
                </div>
            </div>
        </aside>

        <section class="space-y-4">
            <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 pb-3 dark:border-slate-700">
                <div class="flex flex-wrap items-center gap-2">
                    <?php
                    $supplier_tabs = array(
                        'overview' => array('label' => 'Overview', 'count' => null, 'icon' => 'layout-grid'),
                        'purchases' => array('label' => 'Purchases', 'count' => $supplier_purchase_count, 'icon' => 'shopping-cart'),
                        'returns' => array('label' => 'Returns', 'count' => $supplier_return_count, 'icon' => 'rotate-ccw'),
                    );
                    foreach ($supplier_tabs as $tab_key => $tab_meta) {
                        $is_active = $supplier_active_tab === $tab_key;
                        ?>
                        <a href="<?= $supplier_tab_link($tab_key, $tab_key === 'purchases' ? array('purchase_page' => 1) : ($tab_key === 'returns' ? array('return_page' => 1) : array())) ?>"
                           class="inline-flex items-center gap-2 rounded-xl border px-4 py-1.5 text-sm font-semibold transition <?= $is_active ? 'border-slate-900 bg-slate-900 text-white shadow-sm dark:border-slate-100 dark:bg-slate-100 dark:text-slate-900' : 'border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:text-slate-900 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:border-slate-600 dark:hover:text-slate-100' ?>">
                            <i data-lucide="<?= html_escape($tab_meta['icon']) ?>" class="h-4 w-4"></i>
                            <span><?= html_escape($tab_meta['label']) ?></span>
                            <?php if ($tab_meta['count'] !== null) { ?>
                                <span class="inline-flex min-w-[1.5rem] items-center justify-center rounded-full px-2 py-0.5 text-[11px] font-bold <?= $is_active ? 'bg-white/20 text-white dark:bg-slate-900/10 dark:text-slate-900' : 'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-200' ?>">
                                    <?= (int) $tab_meta['count'] ?>
                                </span>
                            <?php } ?>
                        </a>
                    <?php } ?>
                </div>
            </div>

            <?php if ($supplier_active_tab === 'overview') { ?>
            <div class="space-y-5">
                <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
                    <article class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-700 dark:bg-slate-900">
                        <div class="mb-3 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-blue-50 text-blue-600 dark:bg-blue-950/30 dark:text-blue-300">
                            <i data-lucide="shopping-cart" class="h-5 w-5"></i>
                        </div>
                        <p class="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500">TOTAL PURCHASE</p>
                        <p class="mt-2  font-semibold tracking-tight text-slate-900 dark:text-slate-100"><?= display_money($supplier_total_amount, $currency_symbol) ?></p>
                        <p class="mt-1 text-sm text-slate-500 dark:text-slate-400"><?= $supplier_purchase_count ?> lifetime orders</p>
                    </article>

                    <article class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-700 dark:bg-slate-900">
                        <div class="mb-3 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600 dark:bg-emerald-950/30 dark:text-emerald-300">
                            <i data-lucide="wallet" class="h-5 w-5"></i>
                        </div>
                        <p class="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500">PAID AMOUNT</p>
                        <p class="mt-2  font-semibold tracking-tight text-slate-900 dark:text-slate-100"><?= display_money($supplier_paid_total, $currency_symbol) ?></p>
                        <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Successfully cleared</p>
                    </article>

                    <article class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-700 dark:bg-slate-900">
                        <div class="mb-3 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-amber-50 text-amber-600 dark:bg-amber-950/30 dark:text-amber-300">
                            <i data-lucide="credit-card" class="h-5 w-5"></i>
                        </div>
                        <p class="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500">OUTSTANDING</p>
                        <p class="mt-2  font-semibold tracking-tight text-slate-900 dark:text-slate-100"><?= display_money($supplier_total_due, $currency_symbol) ?></p>
                        <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Pending balances</p>
                    </article>

                    <article class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-700 dark:bg-slate-900">
                        <div class="mb-3 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-rose-50 text-rose-600 dark:bg-rose-950/30 dark:text-rose-300">
                            <i data-lucide="rotate-ccw" class="h-5 w-5"></i>
                        </div>
                        <p class="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500">RETURN STOCK</p>
                        <p class="mt-2  font-semibold tracking-tight text-slate-900 dark:text-slate-100"><?= (int) $supplier_return_count ?></p>
                        <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Items sent back</p>
                    </article>
                </div>

                <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-900">
                    <div class="flex items-center justify-between border-b border-slate-200 px-6 py-4 dark:border-slate-700">
                        <h3 class="font-semibold text-sm text-slate-900 dark:text-slate-100">Recent Transactions</h3>
                        <a href="<?= base_url('admin/purchase') ?>" class="text-xs font-bold uppercase tracking-[0.2em] text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-200">VIEW ALL</a>
                    </div>

                    <div class="px-6 py-4">
                        <div class="space-y-4">
                            <?php foreach ($timeline as $item) { ?>
                                <div class="flex items-start gap-3 text-sm text-slate-700 dark:text-slate-300">
                                    <div class="mt-1 inline-flex h-10 w-10 items-center justify-center rounded-full bg-slate-100 text-slate-500 dark:bg-slate-800 dark:text-slate-300">
                                        <i data-lucide="<?= html_escape($item['icon']) ?>" class="h-4 w-4"></i>
                                    </div>
                                    <div>
                                        <?php if (!empty($item['link'])) { ?>
                                            <a href="<?= $item['link'] ?>" class="font-semibold text-slate-900 hover:text-primary dark:text-slate-100"><?= html_escape($item['title']) ?></a>
                                        <?php } else { ?>
                                            <p class="font-semibold text-slate-900 dark:text-slate-100"><?= html_escape($item['title']) ?></p>
                                        <?php } ?>
                                        <p class="text-sm text-slate-500 dark:text-slate-400"><?= html_escape($item['meta']) ?></p>
                                    </div>
                                </div>
                            <?php } ?>
                        </div>
                    </div>

                    <?php if (empty($purchases)) { ?>
                        <div class="border-t border-slate-200 px-6 py-12 text-center dark:border-slate-700">
                            <div class="mx-auto mb-4 inline-flex h-14 w-14 items-center justify-center rounded-full border border-slate-300 text-slate-400 dark:border-slate-600 dark:text-slate-500">
                                <i data-lucide="shopping-cart" class="h-6 w-6"></i>
                            </div>
                            <h4 class="text-[2rem] font-semibold text-slate-900 dark:text-slate-100">No purchases yet</h4>
                            <p class="mx-auto mt-2 max-w-xl text-base text-slate-500 dark:text-slate-400">Create your first purchase order to start tracking transactions.</p>
                            <a href="<?= base_url('admin/purchase/new_purchase?module=supplier&module_id=' . $supplier_id) ?>" class="mt-5 inline-flex h-11 items-center gap-2 rounded-lg border border-slate-300 bg-white px-5 text-base font-semibold text-slate-700 hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800">
                                <i data-lucide="plus" class="h-4 w-4"></i>
                                Create Purchase
                            </a>
                        </div>
                    <?php } ?>
                </div>
            </div>
            <?php } ?>

            <?php if ($supplier_active_tab === 'purchases') { ?>
            <div>
                <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-900">
                    <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 px-6 py-4 dark:border-slate-700">
                        <div>
                            <h3 class="text-md font-semibold text-slate-900 dark:text-slate-100"><?= lang('purchases') ?></h3>
                            <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Track supplier orders with due dates, payment status, and total value.</p>
                        </div>
                        <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600 dark:bg-slate-800 dark:text-slate-200"><?= (int) $supplier_purchase_count ?> records</span>
                    </div>
                    <div class="table-responsive p-4">
                        <table class="table table-striped w-full text-left text-sm">
                            <thead>
                                <tr>
                                    <th><?= lang('reference_no') ?></th>
                                    <th><?= lang('purchase_date') ?></th>
                                    <th><?= lang('due_date') ?></th>
                                    <th><?= lang('status') ?></th>
                                    <th class="text-right"><?= lang('amount') ?></th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php if (!empty($purchase_history)) { ?>
                                    <?php foreach ($purchase_history as $purchase) {
                                        $purchase_total = $this->purchase_model->get_purchase_total_amount($purchase->purchase_id);
                                        $purchase_status = $this->purchase_model->get_payment_status($purchase->purchase_id);
                                        $status_class = 'bg-rose-100 text-rose-700 dark:bg-rose-950/30 dark:text-rose-300';
                                        if ($purchase_status == 'fully_paid') {
                                            $status_class = 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-300';
                                        } elseif ($purchase_status == 'partially_paid') {
                                            $status_class = 'bg-amber-100 text-amber-700 dark:bg-amber-950/30 dark:text-amber-300';
                                        } elseif ($purchase_status == 'cancelled') {
                                            $status_class = 'bg-slate-200 text-slate-700 dark:bg-slate-800 dark:text-slate-300';
                                        }
                                    ?>
                                        <tr>
                                            <td><a class="font-semibold text-primary hover:underline" href="<?= base_url('admin/purchase/purchase_details/' . $purchase->purchase_id) ?>"><?= html_escape($purchase->reference_no) ?></a></td>
                                            <td><?= !empty($purchase->purchase_date) ? display_date($purchase->purchase_date) : '-' ?></td>
                                            <td><?= !empty($purchase->due_date) ? display_date($purchase->due_date) : '-' ?></td>
                                            <td><span class="inline-flex rounded-md px-2 py-1 text-xs font-semibold <?= $status_class ?>"><?= lang($purchase_status) ?></span></td>
                                            <td class="text-right font-semibold"><?= display_money($purchase_total, $currency_symbol) ?></td>
                                        </tr>
                                    <?php } ?>
                                <?php } else { ?>
                                    <tr>
                                        <td colspan="5" class="py-8 text-center text-sm text-muted-foreground"><?= lang('nothing_to_display') ?></td>
                                    </tr>
                                <?php } ?>
                            </tbody>
                        </table>
                    </div>
                    <div class="flex flex-wrap items-center justify-between gap-3 border-t border-slate-200 px-6 py-4 text-sm text-slate-500 dark:border-slate-700 dark:text-slate-400">
                        <span>Page <?= $purchase_history_page ?> of <?= max(1, $purchase_history_pages) ?></span>
                        <div class="flex items-center gap-2">
                            <a href="<?= $supplier_tab_link('purchases', array('purchase_page' => max(1, $purchase_history_page - 1))) ?>"
                               class="inline-flex h-9 items-center justify-center rounded-lg border border-slate-200 px-3 font-semibold transition <?= $purchase_history_page <= 1 ? 'pointer-events-none opacity-40' : 'hover:bg-slate-50 dark:hover:bg-slate-800' ?> dark:border-slate-700">
                                <?= lang('previous') ?>
                            </a>
                            <a href="<?= $supplier_tab_link('purchases', array('purchase_page' => min($purchase_history_pages, $purchase_history_page + 1))) ?>"
                               class="inline-flex h-9 items-center justify-center rounded-lg border border-slate-200 px-3 font-semibold transition <?= $purchase_history_page >= $purchase_history_pages ? 'pointer-events-none opacity-40' : 'hover:bg-slate-50 dark:hover:bg-slate-800' ?> dark:border-slate-700">
                                <?= lang('next') ?>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <?php } ?>

            <?php if ($supplier_active_tab === 'returns') { ?>
            <div>
                <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-900">
                    <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 px-6 py-4 dark:border-slate-700">
                        <div>
                            <h3 class="font-semibold text-slate-900 dark:text-slate-100"><?= lang('return_stock') ?></h3>
                            <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Review supplier return references, current settlement status, and outstanding due.</p>
                        </div>
                        <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600 dark:bg-slate-800 dark:text-slate-200"><?= (int) $supplier_return_count ?> records</span>
                    </div>
                    <div class="table-responsive p-4">
                        <table class="table table-striped w-full text-left text-sm">
                            <thead>
                                <tr>
                                    <th><?= lang('reference_no') ?></th>
                                    <th><?= lang('return_stock_date') ?></th>
                                    <th><?= lang('status') ?></th>
                                    <th class="text-right"><?= lang('due') ?></th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php if (!empty($return_history)) { ?>
                                    <?php foreach ($return_history as $return_stock) {
                                        $return_status = $this->return_stock_model->get_payment_status($return_stock->return_stock_id);
                                        $due_amount = $this->return_stock_model->calculate_to('return_stock_due', $return_stock->return_stock_id);
                                        $return_class = 'bg-rose-100 text-rose-700 dark:bg-rose-950/30 dark:text-rose-300';
                                        if ($return_status == 'fully_paid') {
                                            $return_class = 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-300';
                                        } elseif ($return_status == 'partially_paid') {
                                            $return_class = 'bg-amber-100 text-amber-700 dark:bg-amber-950/30 dark:text-amber-300';
                                        } elseif ($return_status == 'cancelled') {
                                            $return_class = 'bg-slate-200 text-slate-700 dark:bg-slate-800 dark:text-slate-300';
                                        }
                                    ?>
                                        <tr>
                                            <td><a class="font-semibold text-primary hover:underline" href="<?= base_url('admin/return_stock/return_stock_details/' . $return_stock->return_stock_id) ?>"><?= html_escape($return_stock->reference_no) ?></a></td>
                                            <td><?= !empty($return_stock->return_stock_date) ? display_date($return_stock->return_stock_date) : '-' ?></td>
                                            <td><span class="inline-flex rounded-md px-2 py-1 text-xs font-semibold <?= $return_class ?>"><?= lang($return_status) ?></span></td>
                                            <td class="text-right font-semibold"><?= display_money($due_amount, $currency_symbol) ?></td>
                                        </tr>
                                    <?php } ?>
                                <?php } else { ?>
                                    <tr>
                                        <td colspan="4" class="py-8 text-center text-sm text-muted-foreground"><?= lang('nothing_to_display') ?></td>
                                    </tr>
                                <?php } ?>
                            </tbody>
                        </table>
                    </div>
                    <div class="flex flex-wrap items-center justify-between gap-3 border-t border-slate-200 px-6 py-4 text-sm text-slate-500 dark:border-slate-700 dark:text-slate-400">
                        <span>Page <?= $return_history_page ?> of <?= max(1, $return_history_pages) ?></span>
                        <div class="flex items-center gap-2">
                            <a href="<?= $supplier_tab_link('returns', array('return_page' => max(1, $return_history_page - 1))) ?>"
                               class="inline-flex h-9 items-center justify-center rounded-lg border border-slate-200 px-3 font-semibold transition <?= $return_history_page <= 1 ? 'pointer-events-none opacity-40' : 'hover:bg-slate-50 dark:hover:bg-slate-800' ?> dark:border-slate-700">
                                <?= lang('previous') ?>
                            </a>
                            <a href="<?= $supplier_tab_link('returns', array('return_page' => min($return_history_pages, $return_history_page + 1))) ?>"
                               class="inline-flex h-9 items-center justify-center rounded-lg border border-slate-200 px-3 font-semibold transition <?= $return_history_page >= $return_history_pages ? 'pointer-events-none opacity-40' : 'hover:bg-slate-50 dark:hover:bg-slate-800' ?> dark:border-slate-700">
                                <?= lang('next') ?>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <?php } ?>
        </section>
    </div>
</div>

<style>
#supplier-detail-workspace {
    --sd-radius: 12px;
}

#supplier-detail-workspace > .grid {
    gap: 0.75rem;
}

#supplier-detail-workspace .rounded-2xl {
    border-radius: var(--sd-radius) !important;
}

#supplier-detail-workspace aside > .border-b,
#supplier-detail-workspace aside > .px-6.py-6 {
    padding: 0.82rem 0.92rem !important;
}

#supplier-detail-workspace aside .h-24.w-24 {
    height: 3.2rem;
    width: 3.2rem;
    margin-bottom: 0.5rem;
    border-radius: 0.7rem;
    font-size: 1rem;
}

#supplier-detail-workspace aside h2 {
    font-size: 1.02rem !important;
    line-height: 1.35rem;
}

#supplier-detail-workspace aside .text-3xl {
    font-size: 0.86rem !important;
    line-height: 1.25rem;
}

#supplier-detail-workspace aside .text-2xl {
    font-size: 0.84rem !important;
    line-height: 1.2rem;
}

#supplier-detail-workspace aside .mt-8 {
    margin-top: 0.9rem !important;
}

#supplier-detail-workspace aside .space-y-4 > * + * {
    margin-top: 0.52rem;
}

#supplier-detail-workspace section > .flex.flex-wrap.items-center.justify-between {
    padding-bottom: 0.28rem;
}

#supplier-detail-workspace .supplier-tab-btn {
    border-bottom: 2px solid transparent;
    font-size: 0.8rem !important;
    line-height: 1.1rem;
    padding-bottom: 0.34rem !important;
}

#supplier-detail-workspace section .inline-flex.h-11 {
    height: 1.95rem !important;
    padding-left: 0.62rem !important;
    padding-right: 0.62rem !important;
    font-size: 0.72rem !important;
    border-radius: 0.42rem !important;
}

#supplier-detail-workspace [data-tab-panel="supplier-overview"] .grid {
    gap: 0.55rem;
}

#supplier-detail-workspace [data-tab-panel="supplier-overview"] article {
    padding: 0.62rem !important;
}

#supplier-detail-workspace [data-tab-panel="supplier-overview"] article .mb-3 {
    margin-bottom: 0.34rem !important;
}

#supplier-detail-workspace [data-tab-panel="supplier-overview"] article .h-10.w-10 {
    height: 1.55rem;
    width: 1.55rem;
    border-radius: 0.42rem;
}

#supplier-detail-workspace [data-tab-panel="supplier-overview"] article .text-\[2\.1rem\] {
    font-size: 0.95rem !important;
    line-height: 1.25rem;
    margin-top: 0.14rem !important;
}

#supplier-detail-workspace [data-tab-panel="supplier-overview"] .overflow-hidden.rounded-2xl > .flex {
    padding: 0.66rem 0.8rem !important;
}

#supplier-detail-workspace [data-tab-panel="supplier-overview"] .overflow-hidden.rounded-2xl > .flex h3 {
    font-size: 0.9rem !important;
    line-height: 1.2rem;
}

#supplier-detail-workspace [data-tab-panel="supplier-overview"] .px-6.py-4 {
    padding: 0.62rem 0.8rem !important;
}

#supplier-detail-workspace [data-tab-panel="supplier-overview"] .space-y-4 > * + * {
    margin-top: 0.5rem;
}

#supplier-detail-workspace [data-tab-panel="supplier-overview"] .h-10.w-10.rounded-full {
    height: 1.55rem;
    width: 1.55rem;
}

#supplier-detail-workspace [data-tab-panel="supplier-overview"] .text-lg {
    font-size: 0.82rem !important;
    line-height: 1.14rem;
}

#supplier-detail-workspace [data-tab-panel="supplier-overview"] .text-\[2rem\] {
    font-size: 1rem !important;
    line-height: 1.32rem;
}

#supplier-detail-workspace [data-tab-panel="supplier-overview"] .py-12 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
}

#supplier-detail-workspace [data-tab-panel="supplier-overview"] .h-14.w-14 {
    height: 1.95rem;
    width: 1.95rem;
}

#supplier-detail-workspace .table-responsive {
    padding: 0.5rem !important;
}

#supplier-detail-workspace .table > thead > tr > th {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7b8190;
    border-bottom-color: #e2e8f0;
}

#supplier-detail-workspace .table > tbody > tr > td {
    border-top-color: #edf1f5;
    vertical-align: middle;
    font-size: 0.74rem;
}

.dark #supplier-detail-workspace .table > thead > tr > th {
    color: #94a3b8;
    border-bottom-color: #334155;
}

.dark #supplier-detail-workspace .table > tbody > tr > td {
    border-top-color: #1e293b;
}

#supplier-detail-workspace i[data-lucide] {
    width: 0.76rem;
    height: 0.76rem;
}

@media (max-width: 1279px) {
    #supplier-detail-workspace > .grid {
        gap: 0.65rem;
    }

    #supplier-detail-workspace aside .text-3xl {
        font-size: 0.82rem !important;
        line-height: 1.2rem;
    }

    #supplier-detail-workspace .supplier-tab-btn {
        font-size: 0.76rem !important;
    }
}
</style>
