@extends('layouts.app')

@section('title', __('managementtools::lang.employee_tasks'))

@section('content')
@include('managementtools::layouts.nav')

@php
    $tabs = [
        'defined' => __('managementtools::lang.user_defined_tasks'),
        'pending' => __('managementtools::lang.pending_approval'),
        'unreported' => __('managementtools::lang.tasks_without_report'),
        'inability' => __('managementtools::lang.inability_tasks'),
        'incomplete' => __('managementtools::lang.incomplete_user_tasks'),
        'approved' => __('managementtools::lang.approved_tasks'),
        'all' => __('managementtools::lang.all_tasks'),
    ];
@endphp

<section class="content no-print mt-page mt-user-tasks-page">
    <div class="mt-page-header">
        <h1><i class="fas fa-tasks" style="color:#2563eb;margin-left:8px;"></i> @lang('managementtools::lang.employee_tasks')</h1>
        @if($can_manage)
        <button type="button" class="mt-btn-primary btn-modal"
            data-href="{{ action([\Modules\ManagementTools\Http\Controllers\EmployeeTaskController::class, 'create']) }}"
            data-container=".mt_task_modal">
            <i class="fa fa-plus"></i> @lang('managementtools::lang.add_system_task')
        </button>
        @endif
    </div>

    <div class="mt-card">
        <div class="mt-card-body" style="padding-top:0;">
            <ul class="nav nav-tabs mt-ut-tabs" role="tablist">
                @foreach($tabs as $tab_key => $tab_label)
                <li role="presentation" @if($active_tab === $tab_key) class="active" @endif>
                    <a href="#mt-ut-{{ $tab_key }}" role="tab" data-toggle="tab" data-tab="{{ $tab_key }}">
                        {{ $tab_label }}
                        <span class="badge mt-ut-tab-count" data-tab="{{ $tab_key }}">{{ $tab_counts[$tab_key] ?? 0 }}</span>
                    </a>
                </li>
                @endforeach
            </ul>

            <div class="tab-content mt-ut-tab-content">
                @foreach(array_keys($tabs) as $tab_key)
                <div role="tabpanel" class="tab-pane fade @if($active_tab === $tab_key) in active @endif"
                    id="mt-ut-{{ $tab_key }}" data-tab="{{ $tab_key }}">
                    <div class="mt-ut-tab-loading text-center" style="padding:40px;display:none;">
                        <i class="fa fa-spinner fa-spin fa-2x"></i>
                        <p style="margin-top:8px;color:#64748b;">@lang('managementtools::lang.loading')</p>
                    </div>
                    <div class="mt-ut-tab-body"></div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>

<div class="modal fade mt_task_modal" tabindex="-1" role="dialog"></div>
<div class="modal fade mt_user_tasks_modal" tabindex="-1" role="dialog"></div>
@endsection

@section('javascript')
<script type="text/javascript">
$(document).ready(function() {
    var tabUrlBase = @json(url('management-tools/daily-reports/UserTasks/tab'));
    var countsUrl = @json(action([\Modules\ManagementTools\Http\Controllers\EmployeeTaskController::class, 'tabCounts']));
    var activeTab = @json($active_tab);
    var loadedTabs = {};

    function tabContentUrl(tab) {
        return tabUrlBase + '/' + tab;
    }

    function updateBadge(tab, count) {
        $('.mt-ut-tab-count[data-tab="' + tab + '"]').text(count);
    }

    function refreshAllCounts() {
        $.getJSON(countsUrl, function(r) {
            if (r.success && r.counts) {
                $.each(r.counts, function(tab, count) {
                    updateBadge(tab, count);
                });
            }
        });
    }

    function initTabWidgets($container) {
        $container.find('.mt-ut-user-select').select2({
            allowClear: true,
            placeholder: '@lang("managementtools::lang.all_employees")'
        });
        if (typeof MtDate !== 'undefined') {
            MtDate.initDatepicker($container.find('.mt-datepicker'));
        }
    }

    function loadTab(tab, params, forceReload) {
        params = params || {};
        var cacheKey = tab + JSON.stringify(params);
        if (loadedTabs[cacheKey] && !forceReload) {
            return;
        }

        var $pane = $('#mt-ut-' + tab);
        var $body = $pane.find('.mt-ut-tab-body');
        var $loading = $pane.find('.mt-ut-tab-loading');

        $loading.show();
        $body.css('opacity', '0.4');

        $.ajax({
            method: 'GET',
            url: tabContentUrl(tab),
            data: params,
            dataType: 'json',
            success: function(r) {
                if (r.success) {
                    $body.html(r.html);
                    initTabWidgets($body);
                    updateBadge(tab, r.count);
                    loadedTabs[cacheKey] = true;
                } else {
                    toastr.error(LANG.something_went_wrong);
                }
            },
            error: function() {
                toastr.error(LANG.something_went_wrong);
            },
            complete: function() {
                $loading.hide();
                $body.css('opacity', '1');
            }
        });
    }

    function reloadCurrentTab(forceReload) {
        var $active = $('.mt-ut-tabs li.active a');
        if (!$active.length) return;
        var tab = $active.data('tab');
        var params = {};
        if (tab === 'approved') {
            var $form = $('#mt-ut-approved .mt-ut-approved-filter');
            if ($form.length) {
                params = {
                    filter_start: $form.find('[name=filter_start]').val(),
                    filter_end: $form.find('[name=filter_end]').val(),
                    filter_user_id: $form.find('[name=filter_user_id]').val()
                };
            }
        }
        var $catForm = $('#mt-ut-' + tab + ' .mt-ut-category-filter');
        if ($catForm.length) {
            params.filter_category_id = $catForm.find('[name=filter_category_id]').val();
        }
        var cacheKey = tab + JSON.stringify(params);
        delete loadedTabs[cacheKey];
        loadTab(tab, params, true);
    }

    $('a[data-toggle="tab"][data-tab]').on('shown.bs.tab', function(e) {
        loadTab($(e.target).data('tab'));
    });

    $(document).on('submit', '.mt-ut-approved-filter', function(e) {
        e.preventDefault();
        var tab = $(this).data('tab') || 'approved';
        var params = {
            filter_start: $(this).find('[name=filter_start]').val(),
            filter_end: $(this).find('[name=filter_end]').val(),
            filter_user_id: $(this).find('[name=filter_user_id]').val()
        };
        var $catForm = $('#mt-ut-' + tab + ' .mt-ut-category-filter');
        if ($catForm.length) {
            params.filter_category_id = $catForm.find('[name=filter_category_id]').val();
        }
        var cacheKey = tab + JSON.stringify(params);
        delete loadedTabs[cacheKey];
        loadTab(tab, params, true);
    });

    $(document).on('submit', '.mt-ut-category-filter', function(e) {
        e.preventDefault();
        var tab = $(this).data('tab') || $(this).closest('.tab-pane').data('tab');
        var params = { filter_category_id: $(this).find('[name=filter_category_id]').val() };
        if (tab === 'approved') {
            var $form = $('#mt-ut-approved .mt-ut-approved-filter');
            if ($form.length) {
                params.filter_start = $form.find('[name=filter_start]').val();
                params.filter_end = $form.find('[name=filter_end]').val();
                params.filter_user_id = $form.find('[name=filter_user_id]').val();
            }
        }
        delete loadedTabs[tab + JSON.stringify(params)];
        loadTab(tab, params, true);
    });

    $(document).on('click', '.mt-ut-tab-pagination a', function(e) {
        e.preventDefault();
        var href = $(this).attr('href');
        if (!href) return;
        var url = new URL(href, window.location.origin);
        var tab = url.searchParams.get('tab') || $(this).closest('.tab-pane').data('tab');
        var params = { page: url.searchParams.get('page') || 1 };
        ['filter_start', 'filter_end', 'filter_user_id', 'filter_category_id'].forEach(function(k) {
            if (url.searchParams.get(k)) params[k] = url.searchParams.get(k);
        });
        delete loadedTabs[tab + JSON.stringify(params)];
        loadTab(tab, params, true);
    });

    $(document).on('submit', 'form#mt_task_form', function(e) {
        e.preventDefault();
        var form = $(this);
        $.ajax({
            method: form.find('input[name="_method"]').val() === 'PUT' ? 'PUT' : 'POST',
            url: form.attr('action'),
            dataType: 'json',
            data: form.serialize(),
            success: function(result) {
                if (result.success) {
                    $('.mt_task_modal').modal('hide');
                    toastr.success(result.msg);
                    loadedTabs = {};
                    refreshAllCounts();
                    reloadCurrentTab(true);
                } else {
                    toastr.error(result.msg);
                }
            }
        });
    });

    function mtTaskAction(url, confirmMsg) {
        swal({ title: confirmMsg || LANG.sure, icon: 'warning', buttons: true }).then(function(ok) {
            if (!ok) return;
            $.ajax({
                method: 'POST',
                url: url,
                dataType: 'json',
                success: function(result) {
                    if (result.success) {
                        toastr.success(result.msg);
                        loadedTabs = {};
                        refreshAllCounts();
                        reloadCurrentTab(true);
                    } else {
                        toastr.error(result.msg);
                    }
                }
            });
        });
    }

    $(document).on('click', '.mt_approve_task', function() {
        mtTaskAction($(this).data('href'), '@lang("managementtools::lang.confirm_approve_task")');
    });

    $(document).on('click', '.mt_reject_task', function() {
        mtTaskAction($(this).data('href'), '@lang("managementtools::lang.confirm_reject_task")');
    });

    $(document).on('click', '.delete_mt_user_task', function() {
        var url = $(this).data('href');
        swal({ title: LANG.sure, icon: 'warning', buttons: true, dangerMode: true }).then(function(ok) {
            if (!ok) return;
            $.ajax({
                method: 'DELETE',
                url: url,
                dataType: 'json',
                success: function(r) {
                    if (r.success) {
                        toastr.success(r.msg);
                        loadedTabs = {};
                        refreshAllCounts();
                        reloadCurrentTab(true);
                    } else {
                        toastr.error(r.msg);
                    }
                }
            });
        });
    });

    loadTab(activeTab);
});
</script>
<style>
.mt-user-tasks-page .mt-ut-tabs { margin-bottom:0; border-bottom:1px solid #e5e7eb; flex-wrap:wrap; }
.mt-user-tasks-page .mt-ut-tabs > li > a { font-weight:600; border-radius:8px 8px 0 0; }
.mt-user-tasks-page .mt-ut-tabs .badge { background:#dc2626; margin-right:4px; }
.mt-user-tasks-page .mt-ut-tab-content { padding-top:16px; min-height:120px; }
.mt-user-tasks-page .mt-ut-tasks-table td,
.mt-user-tasks-page .mt-ut-tasks-table th { font-size:13px; vertical-align:middle !important; }
.mt-user-tasks-page .thead-dark th { background:#1f2937; color:#fff; border-color:#374151; }
</style>
@endsection