@extends('layouts.manager')

@section('title','Зарплата по кабінетах')
@section('page_title','Зарплата по кабінетах')

@push('head')
    <link rel="stylesheet" href="{{ mix('css/manager/cabinet-salary.css') }}">
@endpush

@section('content')

    {{-- Фільтр по місяцю --}}
    <div class="admin-card cab-salary-filter-card p-3 mb-3">
        <form method="GET" class="cab-salary-filter">
            <div class="cab-salary-filter-group">
                <span class="cab-salary-filter-label">Місяць</span>
                <input type="month"
                       name="month"
                       value="{{ $month }}"
                       class="form-control cab-salary-month-input">
            </div>

            <div class="cab-salary-filter-actions">
                <button class="btn btn-outline-secondary cab-salary-filter-btn">
                    Показати
                </button>
            </div>
        </form>

        {{-- Мін/норма/макс у вигляді чіпів --}}
        <div class="cab-salary-meta">
            <div class="cab-salary-chip">
                <span class="cab-salary-chip-label">Мінімум</span>
                <span class="cab-salary-chip-value">35%</span>
            </div>
            <div class="cab-salary-chip">
                <span class="cab-salary-chip-label">Норма</span>
                <span class="cab-salary-chip-value">40%</span>
            </div>
            <div class="cab-salary-chip">
                <span class="cab-salary-chip-label">Максимум</span>
                <span class="cab-salary-chip-value">45%</span>
            </div>
        </div>

        {{-- Норми за місяць --}}
        @if(!empty($monthTarget))
            <div class="cab-salary-targets">
                <div class="cab-salary-targets-title">
                    Норми за місяць:
                </div>
                <div class="cab-salary-targets-grid">
                    <div class="cab-salary-target-item">
                        <span class="cab-salary-target-label">New</span>
                        <span class="cab-salary-target-value">
                            {{ number_format($monthTarget->new_connection_target, 2) }}
                        </span>
                    </div>
                    <div class="cab-salary-target-item">
                        <span class="cab-salary-target-label">Young</span>
                        <span class="cab-salary-target-value">
                            {{ number_format($monthTarget->young_connection_target, 2) }}
                        </span>
                    </div>
                    <div class="cab-salary-target-item">
                        <span class="cab-salary-target-label">Old</span>
                        <span class="cab-salary-target-value">
                            {{ number_format($monthTarget->old_connection_target, 2) }}
                        </span>
                    </div>
                    <div class="cab-salary-target-item">
                        <span class="cab-salary-target-label">Spend Young</span>
                        <span class="cab-salary-target-value">
                            {{ number_format($monthTarget->spend_young_target, 2) }}
                        </span>
                    </div>
                    <div class="cab-salary-target-item">
                        <span class="cab-salary-target-label">Spend Old</span>
                        <span class="cab-salary-target-value">
                            {{ number_format($monthTarget->spend_old_target, 2) }}
                        </span>
                    </div>
                </div>
            </div>
        @endif



        {{-- ✅ КНОПКИ ПІД МІСЯЦЕМ --}}
        <div class="cab-salary-filter-bottom">
            <div class="cab-salary-filter-bottom-left">
                <div class="cab-salary-filter-bottom-hint">
                    Швидкі дії по цьому місяцю
                </div>
            </div>

            <div class="cab-salary-filter-bottom-actions">
                <a href="{{ route('manager.cabinet-stats.index', ['month' => $month]) }}"
                   class="cab-btn cab-btn-ghost">
                    📊 До статистики
                </a>

                <a href="{{ route('manager.salary-calc.index', ['month' => $month]) }}"
                   class="cab-btn cab-btn-primary">
                    🧮 Підрахунок ЗП
                </a>
            </div>
        </div>
    </div>

    <form method="POST" action="{{ route('manager.cabinet-salary.store') }}">
        @csrf
        <input type="hidden" name="month" value="{{ $month }}">

        <div class="admin-card cab-salary-table-card p-0">

            {{-- Хедер таблиці --}}
            <div class="cab-salary-table-header d-flex justify-content-between align-items-center px-3 py-2">
                <div class="cab-salary-table-title">
                    Кабінети та рекомендований %
                </div>
                <div class="cab-salary-table-hint">
                    Підбери % так, щоб середній був не вище 40%.
                </div>
            </div>

            {{-- Таблиця / мобільні картки --}}
            <div class="table-responsive cab-salary-table-wrapper">
                <table class="table table-bordered table-hover table-sm mb-0 align-middle cab-salary-table">
                    <thead>
                    <tr>
                        <th style="width:160px;">Кабінет</th>
                        <th class="text-center" width="90">Рейтинг</th>
                        <th class="text-center">New</th>
                        <th class="text-center">Young</th>
                        <th class="text-center">Old</th>
                        <th class="text-center">Spend Young</th>
                        <th class="text-center">Spend Old</th>
                        <th class="text-center" width="120">Рекомендовано</th>
                        <th class="text-center" width="120">Ваш %</th>
                    </tr>
                    </thead>
                    <tbody>

                    @foreach($items as $item)

                        @php
                            $rating = $item['avg_rating'];

                            if ($rating === null) {
                                $badgeClass = 'badge-secondary';
                            } elseif ($rating > 79) {
                                // 80..100 (включаючи 85+) — топ
                                $badgeClass = 'badge-success';
                            } elseif ($rating > 70) {
                                // 71..79 — добре
                                $badgeClass = 'badge-primary';
                            } elseif ($rating > 63) {
                                // 64..70 — середньо
                                $badgeClass = 'badge-warning';
                            } else {
                                // <=63 (в т.ч. до 59) — слабко
                                $badgeClass = 'badge-danger';
                            }
                        @endphp

                        <tr>
                            {{-- Кабінет --}}
                            <td data-label="Кабінет">
                                <b>{{ $item['cabinet']->name }}</b>
                            </td>

                            {{-- Рейтинг --}}
                            <td class="text-center" data-label="Рейтинг">
                                @if($rating !== null)
                                    <span class="badge badge-pill {{ $badgeClass }}">
                                        {{ number_format($rating, 1) }}
                                    </span>
                                @else
                                    <span class="badge badge-secondary">—</span>
                                @endif
                            </td>

                            {{-- New --}}
                            <td class="text-center" data-label="New">
                                {{ number_format($item['avg_new'],2) }}
                            </td>

                            {{-- Young --}}
                            <td class="text-center" data-label="Young">
                                {{ number_format($item['avg_young'],2) }}
                            </td>

                            {{-- Old --}}
                            <td class="text-center" data-label="Old">
                                {{ number_format($item['avg_old'],2) }}
                            </td>

                            {{-- Spend Young --}}
                            <td class="text-center" data-label="Spend Young">
                                {{ number_format($item['avg_spend_young'],2) }}
                            </td>

                            {{-- Spend Old --}}
                            <td class="text-center" data-label="Spend Old">
                                {{ number_format($item['avg_spend_old'],2) }}
                            </td>

                            {{-- Рекомендовано --}}
                            <td class="text-center cab-salary-recommended-cell"
                                data-label="Рекомендовано">
                                <b>{{ rtrim(rtrim(number_format($item['recommended_percent'],2,'.',''),'0'),'.') }}%</b>
                            </td>

                            {{-- Ваш % --}}
                            <td class="text-center" data-label="Ваш %">
                                <input type="number"
                                       name="items[{{ $item['cabinet_id'] }}][percent]"
                                       value="{{ $item['current_percent'] }}"
                                       min="35" max="45" step="0.1"
                                       class="form-control form-control-sm percent-input cab-salary-percent-input text-center">
                            </td>

                        </tr>

                    @endforeach

                    </tbody>
                </table>
            </div>

            {{-- Футер: середній відсоток + кнопка --}}
            <div class="cab-salary-footer p-3 border-top d-flex justify-content-between align-items-center">
                <div class="cab-salary-avg-box">
                    <div class="cab-salary-avg-label">
                        Середній % по всіх кабінетах:
                    </div>
                    <div class="cab-salary-avg-value-row">
                        <span id="avg-percent"
                              class="cab-salary-avg-value">
                            {{ number_format($avgPercent,2) }}
                        </span>
                        <span class="cab-salary-avg-unit">%</span>
                        <span class="cab-salary-avg-hint">
                            (рекомендовано ≤ 40%)
                        </span>
                    </div>
                    <div id="avg-warning"
                         class="cab-salary-avg-warning text-danger small"
                         style="display:none;">
                        Увага: середній відсоток вище 40%. Переглянь значення.
                    </div>
                </div>

                <button class="btn btn-primary cab-salary-save-btn">
                    Зберегти %
                </button>
            </div>

        </div>
    </form>

@endsection

@push('body')
    <script>
        function recalcAveragePercent() {
            let sum = 0;
            let count = 0;

            document.querySelectorAll('.percent-input').forEach(el => {
                let v = parseFloat((el.value || '').replace(',', '.'));
                if (!isNaN(v)) {
                    sum += v;
                    count++;
                }
            });

            let avg = count ? sum / count : 0;

            let avgSpan = document.getElementById('avg-percent');
            let warn = document.getElementById('avg-warning');

            if (avgSpan) {
                avgSpan.textContent = avg.toFixed(2);

                if (avg > 40) {
                    avgSpan.classList.add('text-danger');
                    if (warn) warn.style.display = 'block';
                } else {
                    avgSpan.classList.remove('text-danger');
                    if (warn) warn.style.display = 'none';
                }
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('.percent-input').forEach(el => {
                el.addEventListener('input', recalcAveragePercent);
                el.addEventListener('change', recalcAveragePercent);
            });

            recalcAveragePercent();
        });
    </script>
@endpush