@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | '.__('Appraisal cycles'))
@section('content')
    @php
        $openCreateModal = $errors->any() && old('_cycle_form') === 'create';
        $openEditModal = $errors->any() && old('_cycle_form') === 'edit';
    @endphp
    <style>
        .pac-wrap .card { border-radius: 14px; border: 1px solid #edf0f6; box-shadow: 0 2px 10px rgba(15,23,42,.04); }
        .pac-wrap .card-header { background: #fff; border-bottom: 1px solid #edf0f6; font-weight: 800; }
        .pac-wrap label { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgba(15,23,42,.55); }
        .pac-stat { background: #fff; border: 1px solid #edf0f6; border-radius: 10px; padding: 10px 14px; text-align: center; height: 100%; }
        .pac-stat .num { font-size: 1.2rem; font-weight: 800; line-height: 1.2; }
        .pac-stat .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; }
        .pac-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(15,23,42,.65); border-top: 0; white-space: nowrap; }
        .pac-table td { vertical-align: middle; }
        .pac-badge { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; }
        .pac-badge.active { background: rgba(34,197,94,.12); color: #166534; }
        .pac-badge.inactive { background: rgba(100,116,139,.12); color: #475569; }
        .pac-code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; background: #f1f5f9; padding: 2px 8px; border-radius: 6px; }
        .pac-modal .modal-content { border: 0; border-radius: 14px; box-shadow: 0 16px 40px rgba(15,23,42,.12); }
        .pac-modal .modal-header { border-bottom: 1px solid #edf0f6; }
        .pac-modal .modal-footer { border-top: 1px solid #edf0f6; }
        .pac-help { font-size: 12px; color: #64748b; margin-top: .25rem; }
    </style>

    <div class="container-fluid pac-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">{{ __('Appraisal cycles') }}</h4>
                    <p class="text-muted mb-0">{{ __('Define review periods such as probation, mid-year, and annual appraisals.') }}</p>
                </div>
                @can('PerformanceAppraisal-create')
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#cycleCreateModal">
                        <i class="fas fa-plus"></i> {{ __('New cycle') }}
                    </button>
                @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-3 mb-2">
                        <div class="pac-stat"><div class="num text-primary">{{ (int) ($stats->total ?? 0) }}</div><div class="lbl">{{ __('Total') }}</div></div>
                    </div>
                    <div class="col-4 col-md-3 mb-2">
                        <div class="pac-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-3 mb-2">
                        <div class="pac-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 py-3">
                        <span><i class="fas fa-sync-alt mr-1 text-muted"></i> {{ __('Cycle list') }}</span>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover pac-table mb-0">
                            <thead class="thead-light">
                            <tr>
                                <th>{{ __('Name') }}</th>
                                <th>{{ __('Slug') }}</th>
                                <th>{{ __('Duration') }}</th>
                                <th>{{ __('Trigger @ months') }}</th>
                                <th>{{ __('Order') }}</th>
                                <th>{{ __('Instances') }}</th>
                                <th>{{ __('Status') }}</th>
                                <th class="text-right">{{ __('Actions') }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($rows as $r)
                                <tr>
                                    <td><strong>{{ $r->name }}</strong></td>
                                    <td><span class="pac-code">{{ $r->slug }}</span></td>
                                    <td>{{ $r->duration_months }} {{ __('mo') }}</td>
                                    <td>{{ $r->trigger_at_months !== null ? $r->trigger_at_months : '—' }}</td>
                                    <td>{{ $r->sort_order }}</td>
                                    <td>{{ (int) $r->instances_count }}</td>
                                    <td>
                                        @if($r->is_active)
                                            <span class="pac-badge active">{{ __('Active') }}</span>
                                        @else
                                            <span class="pac-badge inactive">{{ __('Inactive') }}</span>
                                        @endif
                                    </td>
                                    <td class="text-right">
                                        @can('PerformanceAppraisal-edit')
                                            <button type="button"
                                                    class="btn btn-sm btn-outline-primary js-cycle-edit"
                                                    data-toggle="modal"
                                                    data-target="#cycleEditModal"
                                                    data-id="{{ $r->id }}"
                                                    data-name="{{ $r->name }}"
                                                    data-slug="{{ $r->slug }}"
                                                    data-duration="{{ $r->duration_months }}"
                                                    data-trigger="{{ $r->trigger_at_months }}"
                                                    data-sort="{{ $r->sort_order }}"
                                                    data-active="{{ $r->is_active ? '1' : '0' }}"
                                                    data-update-url="{{ route('pa.cycles.update', $r->id) }}">
                                                <i class="fas fa-pen"></i> {{ __('Edit') }}
                                            </button>
                                        @endcan
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center text-muted py-5">
                                        {{ __('No appraisal cycles yet.') }}
                                        @can('PerformanceAppraisal-create')
                                            <div class="mt-2">
                                                <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#cycleCreateModal">
                                                    <i class="fas fa-plus"></i> {{ __('Create first cycle') }}
                                                </button>
                                            </div>
                                        @endcan
                                    </td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                    @if($rows->hasPages())
                        <div class="card-footer">{{ $rows->links() }}</div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Create cycle modal --}}
    <div class="modal fade pac-modal" id="cycleCreateModal" tabindex="-1" role="dialog" aria-labelledby="cycleCreateModalLabel" aria-hidden="true">
        <form method="post" action="{{ route('pa.cycles.store') }}">
            @csrf
            <input type="hidden" name="_cycle_form" value="create">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="cycleCreateModalLabel">{{ __('New appraisal cycle') }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('Close') }}"><span aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        @if($openCreateModal)
                            <div class="alert alert-danger py-2">{{ __('Please fix the errors below.') }}</div>
                        @endif
                        @include('admin.performance_appraisal.partials.cycle_form_fields', [
                            'prefix' => 'create',
                            'values' => [
                                'name' => old('_cycle_form') === 'create' ? old('name') : '',
                                'slug' => old('_cycle_form') === 'create' ? old('slug') : '',
                                'duration_months' => old('_cycle_form') === 'create' ? old('duration_months', 12) : 12,
                                'trigger_at_months' => old('_cycle_form') === 'create' ? old('trigger_at_months') : '',
                                'sort_order' => old('_cycle_form') === 'create' ? old('sort_order', 0) : 0,
                                'is_active' => old('_cycle_form') === 'create' ? old('is_active', '1') : '1',
                            ],
                            'autoSlug' => true,
                        ])
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> {{ __('Create cycle') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    {{-- Edit cycle modal --}}
    <div class="modal fade pac-modal" id="cycleEditModal" tabindex="-1" role="dialog" aria-labelledby="cycleEditModalLabel" aria-hidden="true">
        <form method="post" id="cycleEditForm" action="{{ $openEditModal && old('id') ? route('pa.cycles.update', old('id')) : '#' }}">
            @csrf
            <input type="hidden" name="_cycle_form" value="edit">
            <input type="hidden" name="id" id="edit_cycle_id" value="{{ old('_cycle_form') === 'edit' ? old('id') : '' }}">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="cycleEditModalLabel">{{ __('Edit appraisal cycle') }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('Close') }}"><span aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        @if($openEditModal)
                            <div class="alert alert-danger py-2">{{ __('Please fix the errors below.') }}</div>
                        @endif
                        @include('admin.performance_appraisal.partials.cycle_form_fields', [
                            'prefix' => 'edit',
                            'values' => [
                                'name' => old('_cycle_form') === 'edit' ? old('name') : '',
                                'slug' => old('_cycle_form') === 'edit' ? old('slug') : '',
                                'duration_months' => old('_cycle_form') === 'edit' ? old('duration_months') : '',
                                'trigger_at_months' => old('_cycle_form') === 'edit' ? old('trigger_at_months') : '',
                                'sort_order' => old('_cycle_form') === 'edit' ? old('sort_order') : 0,
                                'is_active' => old('_cycle_form') === 'edit' ? old('is_active', '0') : '0',
                            ],
                            'autoSlug' => false,
                        ])
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> {{ __('Save changes') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('script')
    <script>
        (function () {
            function slugify(value) {
                return String(value || '')
                    .toLowerCase()
                    .trim()
                    .replace(/[^a-z0-9]+/g, '_')
                    .replace(/^_+|_+$/g, '')
                    .substring(0, 64);
            }

            var createName = document.getElementById('create_name');
            var createSlug = document.getElementById('create_slug');
            var createSlugTouched = false;

            if (createSlug) {
                createSlug.addEventListener('input', function () {
                    createSlugTouched = createSlug.value.trim() !== '';
                });
            }
            if (createName && createSlug) {
                createName.addEventListener('input', function () {
                    if (!createSlugTouched) {
                        createSlug.value = slugify(createName.value);
                    }
                });
            }

            document.querySelectorAll('.js-cycle-edit').forEach(function (btn) {
                btn.addEventListener('click', function () {
                    var form = document.getElementById('cycleEditForm');
                    form.action = btn.getAttribute('data-update-url');
                    document.getElementById('edit_cycle_id').value = btn.getAttribute('data-id') || '';
                    document.getElementById('edit_name').value = btn.getAttribute('data-name') || '';
                    document.getElementById('edit_slug').value = btn.getAttribute('data-slug') || '';
                    document.getElementById('edit_duration_months').value = btn.getAttribute('data-duration') || '';
                    document.getElementById('edit_trigger_at_months').value = btn.getAttribute('data-trigger') || '';
                    document.getElementById('edit_sort_order').value = btn.getAttribute('data-sort') || '0';
                    document.getElementById('edit_is_active').checked = btn.getAttribute('data-active') === '1';
                });
            });

            @if($openCreateModal)
            $('#cycleCreateModal').modal('show');
            @endif
            @if($openEditModal)
            $('#cycleEditModal').modal('show');
            @endif
        })();
    </script>
@endsection