@extends('layouts.app')

@section('title', __('accounts.employee_accounts.title'))

@push('styles')
<link href="{{ asset('css/stage-academy.css') }}" rel="stylesheet">
<link href="{{ asset('css/accounts.css') }}" rel="stylesheet">
<style>
    .ea-card {
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 16px;
        overflow: hidden;
        transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    }
    .ea-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 28px rgba(2, 6, 23, 0.12);
        border-color: rgba(6, 173, 235, 0.35);
    }
    body.dark-mode .ea-card {
        border-color: rgba(255, 255, 255, 0.12);
        background: #111827;
    }
    body.dark-mode .ea-card:hover {
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
        border-color: rgba(6, 173, 235, 0.4);
    }
    .ea-avatar {
        width: 46px;
        height: 46px;
        border-radius: 999px;
        object-fit: cover;
        border: 2px solid rgba(6, 173, 235, 0.55);
    }
    .ea-kv {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .ea-kv .label {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.55);
    }
    body.dark-mode .ea-kv .label {
        color: rgba(255, 255, 255, 0.6);
    }
    .ea-kv .value {
        font-weight: 800;
        color: rgba(0, 0, 0, 0.88);
    }
    body.dark-mode .ea-kv .value {
        color: rgba(255, 255, 255, 0.9);
    }
    .ea-kv .value.negative { color: #dc3545; }
    .ea-kv .value.positive { color: #198754; }
    body.dark-mode .ea-kv .value.negative { color: #ff6b6b; }
    body.dark-mode .ea-kv .value.positive { color: #3ddc97; }
    .ea-comm-wrap { margin-top: 14px; }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-start align-items-md-center mb-4 gap-2 flex-column flex-md-row">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">{{ __('dashboard') }}</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('accounts') }}">{{ __('accounts.title') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ __('accounts.employee_accounts.title') }}</li>
                </ol>
            </nav>
            <h4 class="fw-bold mb-0">{{ $title ?? __('accounts.employee_accounts.title') }}</h4>
            <div class="text-muted small">{{ $subtitle ?? __('accounts.employee_accounts.subtitle') }}</div>
            <div class="text-muted small mt-1">
                {{ __('accounts.employee_accounts.period') }}: {{ $period_from->toDateString() }} → {{ $period_to->toDateString() }}
            </div>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('accounts.monthly-settlement') }}" class="btn btn-outline-secondary">
                <i class="bi bi-calendar2-range"></i>
                {{ __('accounts.cards.monthly_settlement') }}
            </a>
            <a href="{{ route('accounts') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-{{ app()->getLocale() == 'ar' ? 'right' : 'left' }}"></i> {{ __('common.back') }}
            </a>
        </div>
    </div>

    <div class="row g-3">
        @forelse($rows as $row)
            @php($employee = $row['employee'])
            <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                <div class="card ea-card h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-start justify-content-between gap-2 mb-3">
                            <div class="d-flex align-items-center gap-2">
                                @if($employee->avatar_url)
                                    <img class="ea-avatar" src="{{ $employee->avatar_url }}" alt="">
                                @else
                                    <div class="ea-avatar d-flex align-items-center justify-content-center bg-light">
                                        <i class="bi bi-person fs-4"></i>
                                    </div>
                                @endif
                                <div class="min-w-0">
                                    <div class="fw-bold text-truncate">{{ $employee->full_name }}</div>
                                    <div class="text-muted small">
                                        {{ __('accounts.employee_accounts.general_percentage') }}: {{ (int) ($employee->general_percentage ?? 0) }}%
                                        · {{ __('accounts.employee_accounts.role_percentage') }}: {{ (int) ($employee->role_percentage ?? 0) }}%
                                    </div>
                                </div>
                            </div>
                            <a class="btn btn-sm btn-outline-secondary" href="{{ route('accounts.employee-accounts.print', $employee->id) }}" target="_blank" title="{{ __('common.print') }}">
                                <i class="bi bi-printer"></i>
                            </a>
                        </div>

                        <div class="ea-kv">
                            <div>
                                <div class="label">{{ __('accounts.employee_accounts.base_salary') }}</div>
                                <div class="value">{{ number_format((int) $row['base_salary']) }}</div>
                            </div>
                            <div>
                                <div class="label">{{ __('accounts.employee_accounts.commissions_total') }}</div>
                                <div class="value positive">{{ number_format((int) $row['commissions_total']) }}</div>
                            </div>
                            <div>
                                <div class="label">{{ __('accounts.employee_accounts.bonuses_total') }}</div>
                                <div class="value positive">{{ number_format((int) $row['bonuses_total']) }}</div>
                            </div>
                            <div>
                                <div class="label">{{ __('accounts.employee_accounts.penalties_total') }}</div>
                                <div class="value negative">{{ number_format((int) $row['penalties_total']) }}</div>
                            </div>
                            <div>
                                <div class="label">{{ __('accounts.employee_accounts.withdrawals_total') }}</div>
                                <div class="value negative">{{ number_format((int) ($row['withdrawals_total'] ?? 0)) }}</div>
                            </div>
                            <div>
                                <div class="label">{{ __('accounts.employee_accounts.absences_total') }}</div>
                                <div class="value negative">{{ number_format((int) ($row['absences_total'] ?? 0)) }}</div>
                            </div>
                            <div>
                                <div class="label">{{ __('accounts.employee_accounts.final_net_total') }}</div>
                                <div class="value fw-bold">{{ number_format((int) $row['net_total']) }}</div>
                            </div>
                        </div>

                        <div class="ea-comm-wrap">
                            <a class="btn btn-sm btn-outline-primary w-100" href="{{ route('accounts.employee-accounts.commissions', $employee->id) }}">
                                <i class="bi bi-list-check"></i>
                                {{ __('accounts.employee_accounts.commissions_details') }}
                                ({{ (int) ($row['commissions']?->count() ?? 0) }})
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12">
                <div class="text-muted small">{{ __('accounts.employee_accounts.empty') }}</div>
            </div>
        @endforelse
    </div>
</div>
@endsection
