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

<div class="rounded-2xl border border-border bg-card shadow-sm">
    <div class="flex flex-col gap-4 border-b border-border px-5 py-4 md:flex-row md:items-center md:justify-between">
        <div class="space-y-1">
            <h4 class="text-sm font-semibold text-foreground"><?= lang('shift_details') ?></h4>
            <p class="text-xs text-muted-foreground"><?= lang('monthly') ?> <?= lang('shift_details') ?> <?= lang('for') ?> <?= html_escape($profile_info->fullname ?? '') ?></p>
        </div>
        <div class="inline-flex items-center gap-2 rounded-xl border border-border bg-muted/40 p-1.5 text-sm text-muted-foreground">
            <button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border bg-background text-foreground transition hover:bg-muted" id="previousMonth">
                <span data-lucide="chevron-left" class="h-4 w-4"></span>
            </button>
            <div class="min-w-[128px] px-2 text-center">
                <span class="block text-[10px] font-medium uppercase tracking-[0.18em] text-muted-foreground"><?= lang('month') ?></span>
                <span id="month" data-date="<?= date('Y-m') ?>" class="block font-semibold text-foreground"><?= date('F Y') ?></span>
            </div>
            <button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border bg-background text-foreground transition hover:bg-muted" id="NextMonth">
                <span data-lucide="chevron-right" class="h-4 w-4"></span>
            </button>
        </div>
    </div>

    <div class="p-5">
        <div id="shift_details" class="overflow-hidden rounded-xl border border-border bg-background">
            <div class="px-4 py-6 text-sm text-muted-foreground"><?= lang('loading') ?>...</div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        var userId = <?= (int) $id ?>;

        function formatMonthLabel(date) {
            return date.toLocaleString('default', { month: 'long', year: 'numeric' });
        }

        function updateMonth(date) {
            var monthValue = date.getFullYear() + '-' + String(date.getMonth() + 1).padStart(2, '0');
            $('#month').data('date', monthValue).text(formatMonthLabel(date));
            return monthValue;
        }

        function getShiftDetails(userId, date) {
            $('#shift_details').html('<div class="px-4 py-6 text-sm text-muted-foreground"><?= lang('loading') ?>...</div>');

            $.ajax({
                url: '<?= base_url('admin/user/get_shift_details') ?>',
                type: 'POST',
                dataType: 'json',
                data: {
                    user_id: userId,
                    month: date
                },
                success: function (data) {
                    if (!data.shift_details) {
                        $('#shift_details').html('<div class="px-4 py-6 text-sm text-muted-foreground"><?= lang('no_data_found') ?></div>');
                    } else {
                        $('#shift_details').html(data.shift_details);
                    }
                }
            });
        }

        $('#previousMonth').on('click', function () {
            var current = new Date($('#month').data('date') + '-01');
            current.setMonth(current.getMonth() - 1);
            getShiftDetails(userId, updateMonth(current));
        });

        $('#NextMonth').on('click', function () {
            var current = new Date($('#month').data('date') + '-01');
            current.setMonth(current.getMonth() + 1);
            getShiftDetails(userId, updateMonth(current));
        });

        getShiftDetails(userId, $('#month').data('date'));
    });
</script>
