@extends('layout.layout')

@section('content')
    @include('components.alert')

    @php
        $indexQuery = array_filter(['search' => request('search'),'per_page' => request('per_page')], fn($value) => filled($value));
        $targetTypes = [
            'number' => 'Number',
            'percentage' => 'Percentage',
        ];
        $isHrDepartmentName = fn ($name) => str_contains(strtolower((string) $name), 'hr')
            || str_contains(strtolower((string) $name), 'human resource')
            || str_contains(strtolower((string) $name), 'human resources');
        $isSalesDepartment = fn ($department) => in_array(strtolower((string) ($department?->slug ?? '')), ['sales', 'slaes'], true)
            || str_contains(strtolower((string) ($department?->name ?? '')), 'sales');
        $hasActiveFilters = request()->hasAny(['filter_type','filter_department_id','filter_job_title_id','filter_target_job_title_id','filter_target_type','filter_target_from','filter_target_to','filter_percentage']);
    @endphp

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="d-flex flex-column gap-4">
                <x-page-title title="Staff Target Configurations" description="Manage staff target ranges and percentages setup." >
                    @can('retention_staff_target_configurations_create')
                        <a href="{{ route('staff-target-configurations.create', $indexQuery) }}" class="asset-btn asset-btn--primary">
                            Add Target Configuration
                        </a>
                    @endcan
                </x-page-title>

                <div class="row g-4">
                    <div class="col-12">
                        <div class="ui-card ui-card--table">
                            <div class="ui-card__header">
                                <div class="d-flex align-items-center gap-3 flex-wrap">
                                    <div style="margin-right: auto;">
                                        <div class="mb-0 ui-title">Staff Target Configurations</div>
                                        <p class="mb-0 ui-muted">Browse, search, and manage configured target ranges.</p>
                                    </div>

                                    <x-table-controls :action="route('staff-target-configurations.index')" searchPlaceholder="Search target configurations" />
                                </div>
                            </div>

                            {{-- Filter Row --}}
                            <div class="px-3 pt-3 pb-1">
                                <form method="GET" action="{{ route('staff-target-configurations.index') }}" id="filterForm">
                                    @if(request('search')) <input type="hidden" name="search" value="{{ request('search') }}"> @endif
                                    @if(request('per_page')) <input type="hidden" name="per_page" value="{{ request('per_page') }}"> @endif

                                    <div class="row g-2 align-items-end">
                                        <div class="col-md-2">
                                            <select name="filter_department_id" id="filter_department_id" class="form-select form-select-sm">
                                                <option value="">All Departments</option>
                                                @foreach($departments as $dept)
                                                    <option value="{{ $dept->id }}" @selected(request('filter_department_id') == $dept->id)>
                                                        {{ $dept->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-2">
                                            <select name="filter_job_title_id" id="filter_job_title_id" class="form-select form-select-sm">
                                                <option value="">All Responsible Titles</option>
                                                @foreach($filterJobTitles as $jt)
                                                    <option value="{{ $jt->id }}" @selected(request('filter_job_title_id') == $jt->id)>
                                                        {{ $jt->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-2">
                                            <select name="filter_target_job_title_id" class="form-select form-select-sm">
                                                <option value="">All Target Titles</option>
                                                @foreach($allJobTitles as $jt)
                                                    <option value="{{ $jt->id }}" @selected(request('filter_target_job_title_id') == $jt->id)>
                                                        {{ $jt->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-2">
                                            <select name="filter_target_type" class="form-select form-select-sm">
                                                <option value="">All Target Types</option>
                                                @foreach($targetTypes as $val => $label)
                                                    <option value="{{ $val }}" @selected(request('filter_target_type') == $val)>
                                                        {{ $label }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                            
                                        @if($hasActiveFilters)
                                            <div class="col-auto">
                                                <a href="{{ route('staff-target-configurations.index', array_filter(['search' => request('search'), 'per_page' => request('per_page')])) }}"
                                                   class="btn btn-sm btn-outline-secondary px-2" title="Clear Filters">
                                                    <i class="ti ti-x"></i>
                                                </a>
                                            </div>
                                        @endif
                                    </div>
                                </form>
                            </div>

                            <x-table
                                :headers="['S.L', 'Group', 'Type', 'Department', 'Responsible Job Title', 'Target Job Title', 'Target Type', 'Target Range', 'Percentage', 'Conv% Min', 'Bonus Conv%', 'Bonus %', 'Quarter', 'Quarter Target', 'Quarter Days', 'Daily Target', 'Created By', 'Actions']"
                                :paginator="$staff_target_configurations"
                                emptyMessage="No staff target configurations found."
                            >
                                @foreach ($staff_target_configurations->getCollection()->groupBy(fn ($item) => $item->group_id ?? $item->id) as $groupKey => $groupItems)
                                    @php
                                        $firstItem = $groupItems->first();
                                        $rowspan = $groupItems->count();
                                    @endphp

                                    @foreach ($groupItems as $ruleIndex => $item)
                                        @php
                                            $isSalesRow = $isSalesDepartment($firstItem->department);
                                        @endphp
                                        <tr>
                                            @if($ruleIndex === 0)
                                                <td class="ui-id text-center align-middle" rowspan="{{ $rowspan }}">{{ $loop->parent->iteration }}</td>
                                                <td class="text-center align-middle" rowspan="{{ $rowspan }}">#{{ $groupKey }}</td>
                                                <td class="ui-title text-center align-middle" rowspan="{{ $rowspan }}">{{ $firstItem->type }}</td>
                                                <td class="text-center align-middle" rowspan="{{ $rowspan }}">{{ $firstItem->department?->name ?? '-' }}</td>
                                                <td class="text-center align-middle" rowspan="{{ $rowspan }}">{{ $firstItem->jobTitle?->name ?? '-' }}</td>
                                            @endif

                                            <td class="text-center">{{ $isSalesRow ? '-' : ($item->targetJobTitle?->name ?? '-') }}</td>
                                            <td class="text-center">{{ $isSalesRow ? '-' : ($targetTypes[$item->target_type] ?? '-') }}</td>
                                            <td class="text-center">
                                                @if($isSalesRow)
                                                    -
                                                @else
                                                    {{ $item->target_from }} - {{ $item->target_to }}{{ $item->target_type === 'percentage' ? '%' : '' }}
                                                @endif
                                            </td>

                                            @if($ruleIndex === 0)
                                                <td class="text-center align-middle" rowspan="{{ $rowspan }}">{{ $isSalesRow ? '-' : number_format($firstItem->percentage, 2).'%' }}</td>
                                                <td class="text-center align-middle" rowspan="{{ $rowspan }}">{{ $isSalesRow ? number_format($firstItem->conv_min_percentage ?? 0, 2).'%' : '-' }}</td>
                                                <td class="text-center align-middle" rowspan="{{ $rowspan }}">{{ $isSalesRow ? number_format($firstItem->bonus_conv_percentage ?? 0, 2).'%' : '-' }}</td>
                                                <td class="text-center align-middle" rowspan="{{ $rowspan }}">{{ $isSalesRow ? number_format($firstItem->bonus_percentage ?? 0, 2).'%' : '-' }}</td>
                                                <td class="text-center align-middle" rowspan="{{ $rowspan }}">{{ $isSalesRow && $firstItem->quarter_target ? 'Q'.$firstItem->quarter_target : '-' }}</td>
                                                <td class="text-center align-middle" rowspan="{{ $rowspan }}">{{ $isSalesRow ? ($firstItem->quarter_total_target ?? '-') : '-' }}</td>
                                                <td class="text-center align-middle" rowspan="{{ $rowspan }}">{{ $isSalesRow ? ($firstItem->quarter_days ?? '-') : '-' }}</td>
                                                <td class="text-center align-middle" rowspan="{{ $rowspan }}">{{ $isSalesRow && $firstItem->daily_target !== null ? number_format($firstItem->daily_target, 2) : '-' }}</td>
                                                <td class="text-center align-middle" rowspan="{{ $rowspan }}">{{ $firstItem->createdBy?->full_name ?? '-' }}</td>
                                                <td class="text-center align-middle" rowspan="{{ $rowspan }}" onclick="event.stopPropagation()">
                                                    <div class="ui-actions justify-content-center">
                                                        @can('retention_staff_target_configurations_update')
                                                            <x-table-action type="edit" :url="route('staff-target-configurations.edit', array_merge(['staff_target_configuration' => $firstItem->id], $indexQuery))" title="Edit Staff Target Configuration" />
                                                        @endcan

                                                        @can('retention_staff_target_configurations_destroy')
                                                            <x-table-action type="delete" :target="'#deleteModal' . $firstItem->id" title="Delete Staff Target Configuration" />
                                                        @endcan
                                                    </div>
                                                </td>
                                            @endif
                                        </tr>
                                    @endforeach
                                @endforeach
                            </x-table>
                        </div>
                    </div>
                </div>
            </div>

            @foreach ($staff_target_configurations as $item)
                @can('retention_staff_target_configurations_destroy')
                    @include('dashboard.academics.staff_target_configurations._delete_modal', ['item' => $item])
                @endcan
            @endforeach
        </div>
    </div>
@endsection

@push('scripts')
<script>
    $(function () {
        const jobTitlesUrl = "{{ route('job-titles-by-department') }}";
        // Filter: department to job title (AJAX) then auto-submit
        $('#filter_department_id').on('change', function () {
            const departmentId = $(this).val();
            const $filterJobTitle = $('#filter_job_title_id');

            $filterJobTitle.empty().append('<option value="">All Job Titles</option>');

            if (!departmentId) {
                $('#filterForm').submit();
                return;
            }

            $.getJSON(jobTitlesUrl, { department_id: departmentId }, function (data) {
                $.each(data, function (i, item) {
                    $filterJobTitle.append($('<option>', { value: item.id, text: item.name }));
                });
                // auto-submit after populating job titles
                $('#filterForm').submit();
            });
        });

        // selects: submit immediately on change
        $('#filterForm select:not(#filter_department_id)').on('change', function () {
            $('#filterForm').submit();
        });

        // text/number inputs: submit after 500ms debounce
        let filterDebounce;
        $('#filterForm input[type="text"], #filterForm input[type="number"]').on('input', function () {
            clearTimeout(filterDebounce);
            filterDebounce = setTimeout(function () {
                $('#filterForm').submit();
            }, 500);
        });
    });
</script>
@endpush