@extends('layouts.app')
@section('title', auth()->user()->isEmployee() ? 'My Performance Goals' : 'Performance Goals')
@section('page-title','Performance')

@section('content')
<div class="page-header">
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
        <div>
            <h1>{{ auth()->user()->isEmployee() ? 'My Performance Goals' : 'Performance Goals' }}</h1>
            <nav aria-label="breadcrumb"><ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('performance.index') }}">Performance</a></li>
                <li class="breadcrumb-item active">Goals</li>
            </ol></nav>
        </div>
        <a href="{{ route('export.performance.goals', request()->only(['status','employee_id'])) }}" class="btn btn-sm btn-outline-success"><i class="bi bi-file-earmark-excel me-1"></i>Export</a>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addGoalModal">
            <i class="bi bi-plus-lg me-1"></i>
            {{ auth()->user()->isEmployee() ? 'Add My Goal' : 'Add Goal' }}
        </button>
    </div>
</div>

@if(auth()->user()->isEmployee())
<div class="alert d-flex align-items-start gap-3 mb-4"
     style="background:#e0f2fe;border:1.5px solid #bae6fd;border-radius:12px;">
    <i class="bi bi-info-circle-fill mt-1" style="color:#0284c7;font-size:1.2rem;flex-shrink:0;"></i>
    <div style="font-size:.88rem;">
        <div class="fw-bold" style="color:#0E2A47;">How Goals Work</div>
        <div style="color:#475569;margin-top:2px;">
            Set your performance goals here at the start of each evaluation period.
            <strong>Draft</strong> goals are private to you. Set status to <strong>Active</strong> to share them with your manager and HR.
            When your evaluation is created, your active goals are automatically attached as the basis for your review.
            After receiving your evaluation, add a <strong>self-assessment</strong> to each goal to record your perspective.
        </div>
    </div>
</div>
@endif

{{-- Filters --}}
<div class="card mb-3">
    <div class="card-body py-3">
        <form method="GET" class="row g-2 align-items-end">
            @if(!auth()->user()->isEmployee())
            <div class="col-12 col-sm-4">
                <select name="employee_id" class="form-select">
                    <option value="">All Employees</option>
                    @foreach($employees as $e)
                    <option value="{{ $e->id }}" {{ request('employee_id')==$e->id?'selected':'' }}>
                        {{ $e->full_name }}
                    </option>
                    @endforeach
                </select>
            </div>
            @endif
            <div class="col-6 col-sm-2">
                <select name="status" class="form-select">
                    <option value="">All Statuses</option>
                    @foreach(['draft'=>'Draft','active'=>'Active','achieved'=>'Achieved','partially_met'=>'Partially Met','not_met'=>'Not Met','cancelled'=>'Cancelled'] as $k=>$v)
                    <option value="{{ $k }}" {{ request('status')===$k?'selected':'' }}>{{ $v }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-sm-2">
                <select name="priority" class="form-select">
                    <option value="">All Priorities</option>
                    <option value="high"   {{ request('priority')==='high'?'selected':'' }}>High</option>
                    <option value="medium" {{ request('priority')==='medium'?'selected':'' }}>Medium</option>
                    <option value="low"    {{ request('priority')==='low'?'selected':'' }}>Low</option>
                </select>
            </div>
            <div class="col-6 col-sm-2 d-flex gap-2">
                <button type="submit" class="btn btn-primary flex-fill"><i class="bi bi-search me-1"></i>Filter</button>
                <a href="{{ route('goals.index') }}" class="btn btn-outline-secondary"><i class="bi bi-x-lg"></i></a>
            </div>
        </form>
    </div>
</div>

{{-- Goal cards --}}
@forelse($goals as $goal)
<div class="card mb-3">
    <div class="card-body">
        <div class="row g-3 align-items-start">
            <div class="flex-grow-1" style="min-width:0;">

                {{-- Header row --}}
                <div class="d-flex align-items-start justify-content-between gap-2 flex-wrap mb-2">
                    <div class="flex-grow-1">
                        @if(!auth()->user()->isEmployee())
                        <div style="font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);margin-bottom:.2rem;">
                            {{ $goal->employee->full_name }}
                            @if($goal->employee->department) · {{ $goal->employee->department->name }}@endif
                        </div>
                        @endif
                        <div class="fw-bold" style="font-size:1rem;color:var(--text-1);">{{ $goal->title }}</div>
                        @if($goal->criterion)
                        <div style="font-size:.75rem;color:#1D9080;margin-top:2px;">
                            <i class="bi bi-link-45deg me-1"></i>Linked to: {{ $goal->criterion->name }}
                        </div>
                        @endif
                    </div>
                    <div class="d-flex gap-2 flex-shrink-0 align-items-center">
                        <span class="badge bg-{{ $goal->priority_badge }}">
                            {{ ucfirst($goal->priority) }}
                        </span>
                        <span class="badge bg-{{ $goal->status_badge }}">
                            {{ $goal->status_label }}
                        </span>
                        @if($goal->isOverdue())
                        <span class="badge bg-danger">Overdue</span>
                        @endif
                    </div>
                </div>

                {{-- Description --}}
                @if($goal->description)
                <div style="font-size:.88rem;color:var(--text-2);margin-bottom:.6rem;line-height:1.6;">
                    {{ $goal->description }}
                </div>
                @endif

                {{-- Meta --}}
                <div class="d-flex flex-wrap gap-3" style="font-size:.79rem;color:var(--text-3);">
                    @if($goal->target_metric)
                    <span><i class="bi bi-bullseye me-1"></i>Target: <strong style="color:var(--text-2);">{{ $goal->target_metric }}</strong></span>
                    @endif
                    @if($goal->target_date)
                    <span>
                        <i class="bi bi-calendar3 me-1"></i>Due: <strong style="color:{{ $goal->isOverdue() ? '#dc2626' : 'var(--text-2)' }};">
                            {{ $goal->target_date->format('d M Y') }}
                        </strong>
                    </span>
                    @endif
                    @if($goal->reviewed_at)
                    <span><i class="bi bi-check-circle me-1" style="color:#059669;"></i>Reviewed {{ $goal->reviewed_at->diffForHumans() }}</span>
                    @endif
                </div>

                {{-- Self-assessment --}}
                @if($goal->self_rating || $goal->self_comments)
                <div class="mt-3 p-3 rounded-3" style="background:#f0f4f8;font-size:.83rem;">
                    <div class="fw-semibold mb-1" style="color:var(--text-1);">
                        <i class="bi bi-person-check me-1" style="color:#1D9080;"></i>
                        My Self-Assessment
                        @if($goal->self_rating)
                        <span class="ms-2">
                            @for($s=1; $s<=5; $s++)
                            <i class="bi bi-star{{ $s <= $goal->self_rating ? '-fill' : '' }}"
                               style="color:#f59e0b;font-size:.8rem;"></i>
                            @endfor
                            <span style="font-size:.75rem;color:var(--text-2);">({{ $goal->self_rating }}/5)</span>
                        </span>
                        @endif
                    </div>
                    @if($goal->self_comments)
                    <div style="color:var(--text-2);">{{ $goal->self_comments }}</div>
                    @endif
                </div>
                @endif

                {{-- Evaluator feedback --}}
                @if($goal->evaluator_comments)
                <div class="mt-2 p-3 rounded-3" style="background:#f0faf4;border-left:3px solid #059669;font-size:.83rem;">
                    <div class="fw-semibold mb-1" style="color:#065f46;">
                        <i class="bi bi-chat-quote me-1"></i>Manager / HR Feedback
                    </div>
                    <div style="color:var(--text-2);">{{ $goal->evaluator_comments }}</div>
                </div>
                @endif

            </div>
        </div>

        {{-- Actions --}}
        <div class="d-flex gap-2 mt-3 pt-3" style="border-top:1px solid var(--card-border);">

            {{-- Employee: edit, self-assess, delete --}}
            @if(auth()->user()->isEmployee() && $goal->isEditable())
            <a href="{{ route('goals.edit', $goal) }}" class="btn btn-sm btn-outline-primary">
                <i class="bi bi-pencil me-1"></i>Edit
            </a>
            @endif

            @if(auth()->user()->isEmployee())
            <button type="button" class="btn btn-sm btn-outline-success"
                    data-bs-toggle="modal" data-bs-target="#selfModal{{ $goal->id }}">
                <i class="bi bi-star me-1"></i>
                {{ $goal->self_rating ? 'Update Self-Assessment' : 'Add Self-Assessment' }}
            </button>
            @endif

            @if(auth()->user()->isEmployee() && $goal->isEditable() && !$goal->evaluations()->exists())
            <form method="POST" action="{{ route('goals.destroy', $goal) }}" class="ms-auto"
                  onsubmit="return confirm('Remove this goal?')">
                @csrf @method('DELETE')
                <button type="submit" class="btn btn-sm btn-outline-danger">
                    <i class="bi bi-trash"></i>
                </button>
            </form>
            @endif

            {{-- HR / Manager: review --}}
            @if(!auth()->user()->isEmployee())
            <button type="button" class="btn btn-sm btn-outline-primary"
                    data-bs-toggle="modal" data-bs-target="#reviewModal{{ $goal->id }}">
                <i class="bi bi-check2-square me-1"></i>Review
            </button>
            @if($goal->employee && !auth()->user()->isEmployee())
            <a href="{{ route('performance.create') }}?employee_id={{ $goal->employee_id }}"
               class="btn btn-sm btn-outline-secondary ms-auto">
                <i class="bi bi-clipboard-plus me-1"></i>Create Evaluation
            </a>
            @endif
            @endif

        </div>
    </div>
</div>

{{-- Self-Assessment Modal --}}
@if(auth()->user()->isEmployee())
<div class="modal fade" id="selfModal{{ $goal->id }}" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-star me-2"></i>Self-Assessment</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('goals.self_assess', $goal) }}">
                @csrf
                <div class="modal-body row g-3">
                    <div class="col-12">
                        <div class="fw-semibold mb-1" style="font-size:.88rem;">Goal: {{ $goal->title }}</div>
                        @if($goal->target_metric)
                        <div style="font-size:.78rem;color:var(--text-3);">Target: {{ $goal->target_metric }}</div>
                        @endif
                    </div>
                    <div class="col-12">
                        <label class="form-label">How well did you achieve this goal? *</label>
                        <div class="d-flex gap-2">
                            @foreach([1=>'Poor',2=>'Fair',3=>'Good',4=>'Very Good',5=>'Excellent'] as $v=>$l)
                            <label class="text-center flex-fill" style="cursor:pointer;">
                                <input type="radio" name="self_rating" value="{{ $v }}"
                                       style="display:none;" class="star-radio"
                                       {{ $goal->self_rating == $v ? 'checked' : '' }}>
                                <div class="star-card p-2 rounded-3"
                                     style="border:2px solid var(--card-border);transition:all .12s;
                                            background:{{ $goal->self_rating == $v ? '#fef3c7' : '' }};
                                            border-color:{{ $goal->self_rating == $v ? '#f59e0b' : 'var(--card-border)' }}">
                                    <div style="font-size:1.3rem;">{{ ['⭐','⭐⭐','⭐⭐⭐','⭐⭐⭐⭐','🌟'][$v-1] }}</div>
                                    <div style="font-size:.65rem;color:var(--text-2);">{{ $l }}</div>
                                </div>
                            </label>
                            @endforeach
                        </div>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Mark goal as *</label>
                        <select name="status" class="form-select">
                            <option value="active"   {{ $goal->status==='active'?'selected':'' }}>Still in Progress</option>
                            <option value="achieved" {{ $goal->status==='achieved'?'selected':'' }}>Achieved</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Your comments *</label>
                        <textarea name="self_comments" class="form-control" rows="4" required
                                  minlength="20"
                                  placeholder="Describe what you did to achieve this goal, any challenges faced, and what you learned…">{{ $goal->self_comments }}</textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">
                        <i class="bi bi-check-lg me-2"></i>Save Self-Assessment
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

{{-- HR/Manager Review Modal --}}
@if(!auth()->user()->isEmployee())
<div class="modal fade" id="reviewModal{{ $goal->id }}" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-check2-square me-2"></i>Review Goal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('goals.review', $goal) }}">
                @csrf
                <div class="modal-body row g-3">
                    <div class="col-12">
                        <div class="fw-semibold">{{ $goal->employee->full_name }}</div>
                        <div style="font-size:.85rem;color:var(--text-2);">{{ $goal->title }}</div>
                        @if($goal->self_rating)
                        <div class="mt-2 p-2 rounded-3" style="background:var(--body-bg);font-size:.82rem;">
                            <strong>Self-rating:</strong>
                            @for($s=1;$s<=5;$s++)<i class="bi bi-star{{ $s<=$goal->self_rating?'-fill':'' }}" style="color:#f59e0b;"></i>@endfor
                            @if($goal->self_comments)
                            <div class="mt-1 text-muted">{{ $goal->self_comments }}</div>
                            @endif
                        </div>
                        @endif
                    </div>
                    <div class="col-12">
                        <label class="form-label">Outcome *</label>
                        <select name="status" class="form-select" required>
                            <option value="active"        {{ $goal->status==='active'?'selected':'' }}>Still Active / In Progress</option>
                            <option value="achieved"      {{ $goal->status==='achieved'?'selected':'' }}>Achieved ✓</option>
                            <option value="partially_met" {{ $goal->status==='partially_met'?'selected':'' }}>Partially Met</option>
                            <option value="not_met"       {{ $goal->status==='not_met'?'selected':'' }}>Not Met</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Your Feedback</label>
                        <textarea name="evaluator_comments" class="form-control" rows="4"
                                  placeholder="Comment on the employee's achievement of this goal…">{{ $goal->evaluator_comments }}</textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-lg me-2"></i>Save Review
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

@empty
<div class="card">
    <div class="card-body text-center py-5" style="color:var(--text-3);">
        <i class="bi bi-trophy d-block mb-2" style="font-size:2.5rem;opacity:.3;"></i>
        <div class="fw-semibold mb-1">
            {{ auth()->user()->isEmployee() ? 'You have not set any performance goals yet' : 'No goals found' }}
        </div>
        <div style="font-size:.84rem;">
            {{ auth()->user()->isEmployee()
                ? 'Click "Add My Goal" to set your first goal for this evaluation period.'
                : 'No goals match the current filters.' }}
        </div>
        @if(auth()->user()->isEmployee())
        <button class="btn btn-primary mt-3" data-bs-toggle="modal" data-bs-target="#addGoalModal">
            <i class="bi bi-plus-lg me-1"></i>Add My First Goal
        </button>
        @endif
    </div>
</div>
@endforelse

{{ $goals->links('pagination::bootstrap-5') }}

{{-- Add Goal Modal --}}
<div class="modal fade" id="addGoalModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-trophy me-2"></i>
                    {{ auth()->user()->isEmployee() ? 'Add Performance Goal' : 'Add Goal for Employee' }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('goals.store') }}">
                @csrf
                <div class="modal-body row g-3">

                    @if(!auth()->user()->isEmployee())
                    <div class="col-12">
                        <label class="form-label">Employee *</label>
                        <select name="employee_id" class="form-select" required>
                            <option value="">Select employee…</option>
                            @foreach($employees as $e)
                            <option value="{{ $e->id }}">{{ $e->full_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    @endif

                    <div class="col-12">
                        <label class="form-label">Goal Title *</label>
                        <input type="text" name="title" class="form-control" required
                               placeholder="e.g. Complete AWS Cloud Practitioner Certification">
                    </div>

                    <div class="col-12">
                        <label class="form-label">Description</label>
                        <textarea name="description" class="form-control" rows="3"
                                  placeholder="What do you want to achieve and why is it important?"></textarea>
                    </div>

                    <div class="col-12 col-md-8">
                        <label class="form-label">Measurable Target</label>
                        <input type="text" name="target_metric" class="form-control"
                               placeholder="e.g. Complete 3 modules per month, Reduce errors by 20%">
                        <div class="form-text">A specific, measurable description of success for this goal.</div>
                    </div>

                    <div class="col-12 col-md-4">
                        <label class="form-label">Target Date</label>
                        <input type="date" name="target_date" class="form-control"
                               min="{{ now()->addDay()->toDateString() }}">
                    </div>

                    <div class="col-6 col-md-4">
                        <label class="form-label">Priority *</label>
                        <select name="priority" class="form-select" required>
                            <option value="high">🔴 High</option>
                            <option value="medium" selected>🟡 Medium</option>
                            <option value="low">🟢 Low</option>
                        </select>
                    </div>

                    <div class="col-6 col-md-4">
                        <label class="form-label">Linked Evaluation Criterion</label>
                        <select name="criterion_id" class="form-select">
                            <option value="">None</option>
                            @foreach($criteria as $crit)
                            <option value="{{ $crit->id }}">{{ $crit->name }}</option>
                            @endforeach
                        </select>
                        <div class="form-text">If linked, this goal will contribute to your score for that criterion.</div>
                    </div>

                    <div class="col-6 col-md-4">
                        <label class="form-label">Visibility *</label>
                        <select name="status" class="form-select">
                            <option value="draft">Draft (private)</option>
                            <option value="active">Active (shared with manager)</option>
                        </select>
                    </div>

                    <div class="col-12 p-3 rounded-3" style="background:var(--body-bg);font-size:.82rem;color:var(--text-2);">
                        <i class="bi bi-lightbulb me-2" style="color:#f59e0b;"></i>
                        <strong>Tip:</strong> Set goals as <strong>Active</strong> so your manager and HR can see them.
                        Draft goals are only visible to you. Once your evaluation period begins, your active goals
                        are automatically attached to your performance evaluation.
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-lg me-2"></i>Save Goal
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
// Star rating visual selection in self-assess modals
document.querySelectorAll('.star-radio').forEach(function(radio) {
    radio.addEventListener('change', function() {
        const group = this.closest('.d-flex');
        group.querySelectorAll('.star-card').forEach(function(card) {
            card.style.background   = '';
            card.style.borderColor  = 'var(--card-border)';
        });
        const sel = this.closest('label').querySelector('.star-card');
        sel.style.background   = '#fef3c7';
        sel.style.borderColor  = '#f59e0b';
    });
});
</script>
@endpush