<?php
$all_task_info = $this->db->where('project_id', $project_info->project_id)->order_by('task_id', 'DESC')->get('tbl_task')->result();
$all_expense_info = $this->db->where(array('project_id' => $project_info->project_id, 'type' => 'Expense'))->order_by('transactions_id', 'DESC')->get('tbl_transactions')->result();
$currency_info = $this->project_model->check_by(array('code' => config_item('default_currency')), 'tbl_currencies');
$billing_type = !empty($project_info->billing_type) ? $project_info->billing_type : 'fixed_rate';
$task_count = !empty($all_task_info) ? count($all_task_info) : 0;
$expense_count = !empty($all_expense_info) ? count($all_expense_info) : 0;
$default_option = in_array($billing_type, array('tasks_hours', 'tasks_and_project_hours'), true) ? 'task_per_item' : 'single_line';

$invoice_modes = array(
    array(
        'value' => 'single_line',
        'title' => lang('single_line'),
        'item_name' => 'Project name',
        'description' => 'Project Logged hours All tasks + total logged time per task',
        'disabled' => in_array($billing_type, array('tasks_hours', 'project_timer'), true),
    ),
    array(
        'value' => 'project_timer',
        'title' => 'Project Timesheet item',
        'item_name' => 'Project name',
        'description' => 'Project Logged hours + total logged time per Project',
        'disabled' => in_array($billing_type, array('tasks_hours', 'fixed_rate'), true),
    ),
    array(
        'value' => 'task_per_item',
        'title' => lang('task_per_item'),
        'item_name' => 'Project name + Task name',
        'description' => 'Task Total logged time',
        'disabled' => $billing_type === 'fixed_rate',
    ),
    array(
        'value' => 'all_timesheet_individually',
        'title' => lang('all_timesheet_individually'),
        'item_name' => 'Project name + Task name',
        'description' => 'Project and tasks Timesheet start time + end time + total logged time',
        'disabled' => $billing_type === 'fixed_rate',
    ),
);
?>

<form action="<?= base_url() ?>admin/projects/preview_invoice/<?php if (!empty($project_info->project_id)) {
    echo $project_info->project_id;
} ?>" method="post" id="project-invoice-modal-form" data-modal-native-submit="true">
    <div class="bg-white text-slate-950 dark:bg-[#0f1726] dark:text-white rounded-md">
        <div class="px-[17px] pb-5 pt-4">
              <h3 class="m-0 text-[16px] font-bold leading-1 tracking-[-0.02em] text-slate-950 dark:text-white mb-2"><?= lang('preview_invoice') ?></h3>
            <div class="flex flex-wrap gap-3">
                <div class="inline-flex h-[38px] items-center gap-[9px] rounded-[7px] border border-slate-200 bg-slate-50 px-4 dark:border-[#29384f] dark:bg-[#151f30]">
                    <i data-lucide="briefcase-business" class="h-4 w-4 text-slate-500 dark:text-[#8ca4c2]"></i>
                    <span class="text-[13px] font-medium text-slate-500 dark:text-[#8ca4c2]"><?= lang('project') ?>:</span>
                    <span class="max-w-[120px] truncate text-[13px] font-bold text-slate-950 dark:text-white"><?= html_escape($project_info->project_name) ?></span>
                </div>
                <div class="inline-flex h-[38px] items-center gap-[9px] rounded-[7px] border border-slate-200 bg-slate-50 px-4 dark:border-[#29384f] dark:bg-[#151f30]">
                    <i data-lucide="credit-card" class="h-4 w-4 text-slate-500 dark:text-[#8ca4c2]"></i>
                    <span class="text-[13px] font-medium text-slate-500 dark:text-[#8ca4c2]"><?= lang('billing_type') ?>:</span>
                    <span class="text-[13px] font-bold text-slate-950 dark:text-white"><?= lang($billing_type) ?></span>
                </div>
                <div class="inline-flex h-[38px] items-center gap-[9px] rounded-[7px] border border-slate-200 bg-slate-50 px-4 dark:border-[#29384f] dark:bg-[#151f30]">
                    <i data-lucide="square-check" class="h-4 w-4 text-slate-500 dark:text-[#8ca4c2]"></i>
                    <span class="text-[13px] font-medium text-slate-500 dark:text-[#8ca4c2]">Tasks:</span>
                    <span class="text-[13px] font-bold text-slate-950 dark:text-white"><?= $task_count ?></span>
                </div>
                <div class="inline-flex h-[38px] items-center gap-[9px] rounded-[7px] border border-slate-200 bg-slate-50 px-4 dark:border-[#29384f] dark:bg-[#151f30]">
                    <i data-lucide="badge-dollar-sign" class="h-4 w-4 text-slate-500 dark:text-[#8ca4c2]"></i>
                    <span class="text-[13px] font-medium text-slate-500 dark:text-[#8ca4c2]">Expenses:</span>
                    <span class="text-[13px] font-bold text-slate-950 dark:text-white"><?= $expense_count ?></span>
                </div>
            </div>
        </div>

        <div class="border-t border-slate-200 px-[17px] pt-4 dark:border-[#213047]">
            <section>
                <h4 class="m-0 text-[13px] font-extrabold uppercase tracking-[0.16em] text-slate-500 dark:text-[#99b8df]"><?= lang('invoice') ?> <?= lang('setup') ?></h4>
                <p class="mt-3 text-[17px] leading-7 text-slate-950 dark:text-white">Choose how project work should be transformed into invoice lines.</p>

                <div class="mt-[24px] grid gap-x-4 gap-y-4 md:grid-cols-2">
                    <?php foreach ($invoice_modes as $mode) {
                        $is_checked = $mode['value'] === $default_option;
                        $disabled = !empty($mode['disabled']);
                        ?>
                        <label class="block <?= $disabled ? 'cursor-not-allowed opacity-55' : 'cursor-pointer' ?>">
                            <input
                                type="radio"
                                name="items_name"
                                value="<?= $mode['value'] ?>"
                                class="peer sr-only"
                                <?= $is_checked ? 'checked' : '' ?>
                                <?= $disabled ? 'disabled' : '' ?>
                            >
                            <span class="relative block min-h-[144px] rounded-[11px] border border-slate-200 bg-white px-[21px] pb-[18px] pr-[42px] pt-6 shadow-sm peer-checked:border-[#7367ff] peer-checked:bg-indigo-50 dark:border-[#2c3b53] dark:bg-[#182235] dark:shadow-none dark:peer-checked:bg-[#191f3d]">
                                <span class="block text-[16px] font-bold leading-5 <?= $is_checked ? 'text-[#6d5dfc] dark:text-[#8ea2ff]' : 'text-slate-950 dark:text-white' ?>"><?= $mode['title'] ?></span>
                                <span class="mt-5 block text-[12px] font-bold uppercase tracking-[0.08em] text-slate-500 dark:text-[#7f95b2]">
                                    Item name:
                                    <span class="normal-case tracking-normal text-slate-950 dark:text-white"><?= $mode['item_name'] ?></span>
                                </span>
                                <span class="mt-3 block text-[12px] font-bold uppercase tracking-[0.08em] text-slate-500 dark:text-[#7f95b2]">
                                    Description:
                                    <span class="normal-case tracking-normal text-slate-600 dark:text-[#b6c9e5]"><?= $mode['description'] ?></span>
                                </span>
                                <span class="absolute right-[21px] top-[69px] inline-flex h-[22px] w-[22px] items-center justify-center rounded-full border-2 border-slate-300 bg-transparent text-transparent peer-checked:hidden dark:border-[#51637d]">
                                    <i data-lucide="check" class="h-3 w-3"></i>
                                </span>
                            </span>
                        </label>
                    <?php } ?>
                </div>
            </section>

            <div class="mt-10 border-t border-slate-200 pt-10 dark:border-[#213047]"></div>

            <div class="grid gap-8 xl:grid-cols-2">
                <section>
                    <div class="pb-4">
                        <h4 class="m-0 text-[15px] font-bold text-slate-950 dark:text-white"><?= lang('task') ?> <?= lang('selection') ?></h4>
                        <p class="mt-2 text-[14px] leading-5 text-slate-600 dark:text-[#9fb6d4]"><?= lang('see_task_on_invoice') ?></p>
                    </div>

                    <?php if (!empty($all_task_info)) { ?>
                        <div class="mb-4 flex items-center justify-between gap-3">
                            <label class="inline-flex items-center gap-3 text-sm font-medium text-slate-700 dark:text-[#b6c9e5]">
                                <input type="checkbox" id="select_all_tasks" class="h-4 w-4 rounded border-slate-300 bg-white text-[#5b45f2] focus:ring-[#5b45f2] dark:border-[#51637d] dark:bg-[#151f30]">
                                <span><?= lang('select_all') . ' ' . lang('task') ?></span>
                            </label>
                            <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-600 dark:bg-[#151f30] dark:text-[#9fb6d4]"><?= $task_count ?> <?= lang('items') ?></span>
                        </div>

                        <div id="tasks_who_will_be_billed" class="flex max-h-[320px] flex-col gap-3 overflow-y-auto pr-1">
                            <?php foreach ($all_task_info as $v_tasks) {
                                if ($v_tasks->task_status == 'completed') {
                                    $label_class = 'bg-emerald-500/10 text-emerald-300';
                                } elseif ($v_tasks->task_status == 'not_started') {
                                    $label_class = 'bg-sky-500/10 text-sky-300';
                                } elseif ($v_tasks->task_status == 'deferred') {
                                    $label_class = 'bg-rose-500/10 text-rose-300';
                                } else {
                                    $label_class = 'bg-amber-500/10 text-amber-300';
                                }
                                $time = $this->project_model->get_spent_time($this->project_model->task_spent_time_by_id($v_tasks->task_id), true);
                                ?>
                                <label class="flex cursor-pointer items-start gap-3 rounded-[11px] border border-slate-200 bg-white px-3 py-3 shadow-sm dark:border-[#2c3b53] dark:bg-[#182235] dark:shadow-none">
                                    <input value="<?= $v_tasks->task_id ?>" checked name="tasks[]" class="tasks_list mt-1 h-4 w-4 rounded border-slate-300 bg-white text-[#5b45f2] focus:ring-[#5b45f2] dark:border-[#51637d] dark:bg-[#151f30]" type="checkbox">
                                    <span class="min-w-0 flex-1">
                                        <span class="flex flex-wrap items-center justify-between gap-3">
                                            <span class="truncate text-sm font-semibold text-slate-950 dark:text-white"><?= html_escape($v_tasks->task_name) ?></span>
                                            <span class="inline-flex rounded-full px-2.5 py-1 text-[11px] font-semibold <?= $label_class ?>"><?= lang($v_tasks->task_status) ?></span>
                                        </span>
                                        <span class="mt-2 flex flex-wrap items-center gap-3 text-xs text-slate-600 dark:text-[#9fb6d4]">
                                            <?php if ($time != "0 : 0 : 0") { ?>
                                                <span class="inline-flex items-center gap-1">
                                                    <i data-lucide="clock-3" class="h-3.5 w-3.5"></i>
                                                    <?= $time ?>
                                                </span>
                                            <?php } else { ?>
                                                <span class="inline-flex items-center gap-1 text-rose-600 dark:text-[#ff626d]">
                                                    <i data-lucide="circle-alert" class="h-3.5 w-3.5"></i>
                                                    <?= lang('no_timer_for_task') ?>
                                                </span>
                                            <?php } ?>
                                        </span>
                                    </span>
                                </label>
                            <?php } ?>
                        </div>
                    <?php } else { ?>
                        <div class="flex min-h-[120px] items-center justify-center rounded-[11px] border border-dashed border-red-300 bg-red-50 text-center text-[14px] font-bold leading-6 text-rose-600 dark:border-red-500/45 dark:bg-[rgba(31,18,29,.9)] dark:text-[#ff626d]">
                            No tasks to bill. Feel free to add whatever<br>you want in the invoice items.
                        </div>
                    <?php } ?>
                </section>

                <section>
                    <div class="pb-4">
                        <h4 class="m-0 text-[15px] font-bold text-slate-950 dark:text-white"><?= lang('expense') ?> <?= lang('selection') ?></h4>
                        <p class="mt-2 text-[14px] leading-5 text-slate-600 dark:text-[#9fb6d4]"><?= lang('see_expense_on_invoice') ?></p>
                    </div>

                    <?php if (!empty($all_expense_info)) { ?>
                        <div class="mb-4 flex items-center justify-between gap-3">
                            <label class="inline-flex items-center gap-3 text-sm font-medium text-slate-700 dark:text-[#b6c9e5]">
                                <input type="checkbox" id="select_all_expense" class="h-4 w-4 rounded border-slate-300 bg-white text-[#5b45f2] focus:ring-[#5b45f2] dark:border-[#51637d] dark:bg-[#151f30]">
                                <span><?= lang('select_all') . ' ' . lang('expense') ?></span>
                            </label>
                            <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-600 dark:bg-[#151f30] dark:text-[#9fb6d4]"><?= $expense_count ?> <?= lang('items') ?></span>
                        </div>

                        <div id="expense_who_will_be_billed" class="flex max-h-[320px] flex-col gap-3 overflow-y-auto pr-1">
                            <?php foreach ($all_expense_info as $v_expense) {
                                $category_info = $this->db->where('expense_category_id', $v_expense->category_id)->get('tbl_expense_category')->row();
                                $category = !empty($category_info) ? $category_info->expense_category : 'Undefined Category';
                                ?>
                                <label class="flex cursor-pointer items-start gap-3 rounded-[11px] border border-slate-200 bg-white px-3 py-3 shadow-sm dark:border-[#2c3b53] dark:bg-[#182235] dark:shadow-none">
                                    <input name="expense[]" value="<?= $v_expense->transactions_id ?>" checked class="expense_list mt-1 h-4 w-4 rounded border-slate-300 bg-white text-[#5b45f2] focus:ring-[#5b45f2] dark:border-[#51637d] dark:bg-[#151f30]" type="checkbox">
                                    <span class="min-w-0 flex-1">
                                        <span class="flex flex-wrap items-center justify-between gap-3">
                                            <span class="truncate text-sm font-semibold text-slate-950 dark:text-white"><?= html_escape($category . ' [' . $v_expense->name . ']') ?></span>
                                            <span class="text-sm font-semibold text-slate-950 dark:text-white"><?= display_money($v_expense->amount, $currency_info->symbol) ?></span>
                                        </span>
                                        <span class="mt-2 inline-flex rounded-full bg-slate-100 px-2.5 py-1 text-[11px] font-semibold text-slate-600 dark:bg-[#111827] dark:text-[#9fb6d4]"><?= lang('expense') ?></span>
                                    </span>
                                </label>
                            <?php } ?>
                        </div>
                    <?php } else { ?>
                        <div class="flex min-h-[120px] items-center justify-center rounded-[11px] border border-dashed border-slate-300 bg-slate-50 text-[14px] font-semibold text-slate-500 dark:border-[#34445d] dark:bg-[#182235] dark:text-[#7f93b1]">
                            <?= lang('no_data_found') ?>
                        </div>
                    <?php } ?>
                </section>
            </div>

            <?php if (!empty($all_task_info)) { ?>
                <div class="mt-8 rounded-[11px] border border-indigo-200 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-700 dark:border-[#4f46e5]/30 dark:bg-[#4f46e5]/10 dark:text-[#c7d2fe]">
                    <?= lang('all_billed_tasks_marked'); ?>
                </div>
            <?php } ?>
        </div>

        <div class="mt-12 flex flex-col gap-3 border-t border-slate-200 px-[17px] py-[24px] sm:flex-row sm:items-center sm:justify-between dark:border-[#213047]">
            <p class="text-[13px] text-slate-600 dark:text-[#b6c9e5]">Review the selected billing structure before generating the final invoice draft.</p>
            <div class="flex flex-wrap items-center justify-end gap-3">
                <button type="button" class="inline-flex h-10 min-w-[84px] items-center justify-center rounded-lg border border-slate-300 bg-white px-5 text-sm font-semibold text-slate-800 transition hover:bg-slate-50 dark:border-[#33445e] dark:bg-transparent dark:text-white dark:hover:bg-[#151f30]" data-dismiss="modal">
                    <?= lang('close') ?>
                </button>
                <button type="submit" class="inline-flex h-10 min-w-[175px] items-center justify-center gap-3 rounded-lg bg-[#5b45f2] px-6 text-sm font-bold text-white shadow-sm transition hover:bg-[#6651ff]">
                    <?= lang('preview_invoice') ?>
                    <i data-lucide="arrow-right" class="h-4 w-4"></i>
                </button>
            </div>
        </div>
    </div>
</form>

<script>
    (function () {
        function initProjectInvoiceModal() {
            var selectAllTasks = document.getElementById('select_all_tasks');
            var selectAllExpense = document.getElementById('select_all_expense');

            if (selectAllTasks) {
                selectAllTasks.addEventListener('click', function () {
                    document.querySelectorAll('.tasks_list').forEach(function (checkbox) {
                        checkbox.checked = selectAllTasks.checked;
                    });
                });
            }

            if (selectAllExpense) {
                selectAllExpense.addEventListener('click', function () {
                    document.querySelectorAll('.expense_list').forEach(function (checkbox) {
                        checkbox.checked = selectAllExpense.checked;
                    });
                });
            }
        }

        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initProjectInvoiceModal);
        } else {
            initProjectInvoiceModal();
        }
    })();
</script>
