@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | '.__('KPI library'))
@section('content')
    <style>
        .kpi-wrap .card { border-radius: 14px; border: 1px solid #edf0f6; box-shadow: 0 2px 10px rgba(15,23,42,.04); }
        .kpi-wrap .card-header { background: #fff; border-bottom: 1px solid #edf0f6; font-weight: 800; }
        .kpi-wrap label { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgba(15,23,42,.55); }
        .kpi-filters { background: #f8fafc; border-bottom: 1px solid #edf0f6; padding: 14px 16px; }
        .kpi-stat { background: #fff; border: 1px solid #edf0f6; border-radius: 10px; padding: 10px 14px; text-align: center; height: 100%; }
        .kpi-stat .num { font-size: 1.2rem; font-weight: 800; line-height: 1.2; }
        .kpi-stat .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; }
        .kpi-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(15,23,42,.65); border-top: 0; white-space: nowrap; }
        .kpi-table td { vertical-align: middle; }
        .kpi-badge { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; }
        .kpi-badge.active { background: rgba(34,197,94,.12); color: #166534; }
        .kpi-badge.inactive { background: rgba(100,116,139,.12); color: #475569; }
        .kpi-badge.in-use { background: rgba(245,158,11,.12); color: #b45309; }
        .kpi-code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; background: #f1f5f9; padding: 2px 8px; border-radius: 6px; }
        .kpi-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid #edf0f6; background: #f8fafc; }
        .kpi-bulk-bar .kpi-selected-count { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .06em; }
        .kpi-row-actions .dropdown-toggle::after { display: none; }
        .kpi-row-actions .btn-action-toggle { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
        .kpi-row-actions .dropdown-menu { min-width: 10rem; border-radius: 10px; border: 1px solid #edf0f6; box-shadow: 0 8px 24px rgba(15,23,42,.08); }
        .kpi-row-actions .dropdown-item { font-size: 13px; font-weight: 600; padding: .45rem 1rem; }
        .kpi-row-actions .dropdown-item i { width: 18px; margin-right: .35rem; }
    </style>

    <div class="container-fluid kpi-wrap">
        <div class="row mt-3">
            <div class="col-12 d-flex flex-wrap justify-content-between align-items-center mb-3">
                <div>
                    <h4 class="page-title mb-0">{{ __('KPI indicators') }}</h4>
                    <p class="text-muted mb-0">{{ __('Manage reusable KPI definitions for evaluation forms.') }}</p>
                </div>
                @can('PerformanceAppraisal-create')
                    <a href="{{ route('pa.kpis.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> {{ __('Add KPI') }}
                    </a>
                @endcan
            </div>

            @if (session()->has('message'))
                <div class="col-12"><div class="alert alert-success">{{ session('message') }}</div></div>
            @endif
            @if (session()->has('error'))
                <div class="col-12"><div class="alert alert-danger">{{ session('error') }}</div></div>
            @endif

            <div class="col-12 mb-3">
                <div class="form-row">
                    <div class="col-4 col-md-2 mb-2">
                        <div class="kpi-stat"><div class="num text-primary">{{ (int) ($stats->total ?? 0) }}</div><div class="lbl">{{ __('Total') }}</div></div>
                    </div>
                    <div class="col-4 col-md-2 mb-2">
                        <div class="kpi-stat"><div class="num text-success">{{ (int) ($stats->active_count ?? 0) }}</div><div class="lbl">{{ __('Active') }}</div></div>
                    </div>
                    <div class="col-4 col-md-2 mb-2">
                        <div class="kpi-stat"><div class="num text-muted">{{ (int) ($stats->inactive_count ?? 0) }}</div><div class="lbl">{{ __('Inactive') }}</div></div>
                    </div>
                </div>
            </div>

            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex flex-wrap justify-content-between align-items-center">
                        <span>{{ __('KPI library') }}</span>
                        <a href="{{ route('pa.kpis.index') }}" class="btn btn-sm btn-outline-secondary">{{ __('Clear filters') }}</a>
                    </div>
                    <form method="get">
                        <div class="kpi-filters">
                            <div class="form-row align-items-end">
                                <div class="form-group col-md-5 col-lg-4 mb-md-0">
                                    <label>{{ __('Search') }}</label>
                                    <input type="search" name="search" class="form-control" value="{{ request('search') }}"
                                           placeholder="{{ __('Code, title, Bengali title, description...') }}">
                                </div>
                                <div class="form-group col-md-4 col-lg-3 mb-md-0">
                                    <label>{{ __('Status') }}</label>
                                    <select name="status" class="form-control">
                                        <option value="">{{ __('All') }}</option>
                                        <option value="active" @selected(request('status') === 'active')>{{ __('Active') }}</option>
                                        <option value="inactive" @selected(request('status') === 'inactive')>{{ __('Inactive') }}</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-3 col-lg-2 mb-0">
                                    <label>&nbsp;</label>
                                    <button type="submit" class="btn btn-primary btn-block">{{ __('Apply') }}</button>
                                </div>
                            </div>
                        </div>
                    </form>

                    @can('PerformanceAppraisal-delete')
                        <div class="kpi-bulk-bar">
                            <span class="kpi-selected-count"><span id="kpi_selected_count">0</span> {{ __('selected') }}</span>
                            <button type="button" class="btn btn-sm btn-danger" id="kpi_bulk_delete_btn" disabled>
                                <i class="fas fa-trash"></i> {{ __('Bulk Delete') }}
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-secondary ml-auto" id="kpi_clear_selection" disabled>{{ __('Clear') }}</button>
                        </div>
                        <form id="kpi_bulk_delete_form" action="{{ route('pa.kpis.bulk_delete') }}" method="POST" class="d-none">@csrf</form>
                    @endcan

                    <div class="table-responsive">
                        <table class="table table-hover kpi-table mb-0">
                            <thead class="thead-light">
                            <tr>
                                @can('PerformanceAppraisal-delete')
                                    <th style="width:40px;">
                                        <div class="custom-control custom-checkbox mb-0">
                                            <input type="checkbox" class="custom-control-input" id="kpi_check_all">
                                            <label class="custom-control-label" for="kpi_check_all"></label>
                                        </div>
                                    </th>
                                @endcan
                                <th>{{ __('Code') }}</th>
                                <th>{{ __('Title') }}</th>
                                <th>{{ __('Default %') }}</th>
                                <th>{{ __('Status') }}</th>
                                <th>{{ __('Usage') }}</th>
                                <th class="text-right">{{ __('Actions') }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($rows as $r)
                                @php $inUse = (int) $r->evaluation_forms_count > 0; @endphp
                                <tr>
                                    @can('PerformanceAppraisal-delete')
                                        <td>
                                            @if(! $inUse)
                                                <div class="custom-control custom-checkbox mb-0">
                                                    <input type="checkbox" value="{{ $r->id }}"
                                                           class="custom-control-input kpi-row-check"
                                                           id="kpi-check-{{ $r->id }}">
                                                    <label class="custom-control-label" for="kpi-check-{{ $r->id }}"></label>
                                                </div>
                                            @endif
                                        </td>
                                    @endcan
                                    <td>
                                        @if($r->code)
                                            <span class="kpi-code">{{ $r->code }}</span>
                                        @else
                                            <span class="text-muted">—</span>
                                        @endif
                                    </td>
                                    <td>
                                        <strong>{{ $r->title }}</strong>
                                        @if($r->title_bn)
                                            <small class="d-block text-muted">{{ $r->title_bn }}</small>
                                        @endif
                                        @include('partials.kpi_description_hint', ['indicator' => $r])
                                    </td>
                                    <td>
                                        @if($r->default_weightage !== null)
                                            <span class="font-weight-bold">{{ number_format((float) $r->default_weightage, 2) }}%</span>
                                        @else
                                            <span class="text-muted">—</span>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="kpi-badge {{ $r->is_active ? 'active' : 'inactive' }}">
                                            {{ $r->is_active ? __('Active') : __('Inactive') }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($inUse)
                                            <span class="kpi-badge in-use">{{ __('In use') }} ({{ $r->evaluation_forms_count }})</span>
                                        @else
                                            <span class="text-muted small">{{ __('Unused') }}</span>
                                        @endif
                                    </td>
                                    <td class="text-right">
                                        <div class="dropdown kpi-row-actions d-inline-block">
                                            <button type="button" class="btn btn-sm btn-light btn-action-toggle dropdown-toggle"
                                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="fas fa-ellipsis-v"></i>
                                            </button>
                                            <div class="dropdown-menu dropdown-menu-right">
                                                @can('PerformanceAppraisal-edit')
                                                    <a class="dropdown-item" href="{{ route('pa.kpis.edit', $r->id) }}">
                                                        <i class="fas fa-edit text-muted"></i> {{ __('Edit') }}
                                                    </a>
                                                @endcan
                                                @can('PerformanceAppraisal-delete')
                                                    @if($inUse)
                                                        <span class="dropdown-item text-muted disabled">
                                                            <i class="fas fa-trash"></i> {{ __('Delete') }}
                                                        </span>
                                                    @else
                                                        <form action="{{ route('pa.kpis.destroy', $r->id) }}" method="post" id="kpi-delete-{{ $r->id }}">@csrf @method('DELETE')</form>
                                                        <button type="submit" form="kpi-delete-{{ $r->id }}" class="dropdown-item text-danger"
                                                                onclick="return confirm(@json(__('Delete this KPI?')));">
                                                            <i class="fas fa-trash"></i> {{ __('Delete') }}
                                                        </button>
                                                    @endif
                                                @endcan
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="{{ auth()->user()->can('PerformanceAppraisal-delete') ? 7 : 6 }}" class="text-center text-muted py-4">
                                        {{ __('No KPI indicators found.') }}
                                    </td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                    @if($rows->hasPages())
                        <div class="card-footer">{{ $rows->links() }}</div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    @can('PerformanceAppraisal-delete')
        <script>
            (function () {
                function selectedIds() {
                    var ids = [];
                    $('.kpi-row-check:checked').each(function () { ids.push($(this).val()); });
                    return ids;
                }

                function syncBulkBar() {
                    var count = selectedIds().length;
                    $('#kpi_selected_count').text(count);
                    $('#kpi_bulk_delete_btn, #kpi_clear_selection').prop('disabled', count === 0);

                    var checks = $('.kpi-row-check');
                    var checked = checks.filter(':checked').length;
                    $('#kpi_check_all').prop('checked', checks.length > 0 && checked === checks.length);
                }

                $(document).on('change', '.kpi-row-check', syncBulkBar);

                $('#kpi_check_all').on('change', function () {
                    var checked = this.checked;
                    $('.kpi-row-check').prop('checked', checked);
                    syncBulkBar();
                });

                $('#kpi_clear_selection').on('click', function () {
                    $('.kpi-row-check, #kpi_check_all').prop('checked', false);
                    syncBulkBar();
                });

                $('#kpi_bulk_delete_btn').on('click', function () {
                    var ids = selectedIds();
                    if (!ids.length) return;
                    if (!confirm(@json(__('Delete selected KPIs? Items linked to evaluation forms will be skipped.')))) return;

                    var $form = $('#kpi_bulk_delete_form');
                    $form.find('input[name="ids[]"]').remove();
                    ids.forEach(function (id) {
                        $('<input>', { type: 'hidden', name: 'ids[]', value: id }).appendTo($form);
                    });
                    $form.trigger('submit');
                });

                syncBulkBar();
            })();
        </script>
    @endcan
@endsection