@extends('layouts.manager')

@section('title','New Weekly Report')

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

@section('content')
    <div class="mwr-page">

        <div class="mwr-topbar">
            <a class="mwr-back" href="{{ route('manager.weekly-reports.index') }}">
                <i class="fa-solid fa-arrow-left"></i>
                До списку
            </a>

            <div class="mwr-topbar__right">
                <span class="mwr-chip">
                    <i class="fa-solid fa-user-tie"></i>
                    {{ $role === 'head_manager' ? 'Head Manager' : 'Manager' }}
                </span>

                <span class="mwr-chip mwr-chip--glow">
                    <i class="fa-solid fa-calendar-week"></i>
                    {{ $year }} • W{{ str_pad($week, 2, '0', STR_PAD_LEFT) }}
                </span>
            </div>
        </div>

        <div class="mwr-card mwr-form-card">
            <div class="mwr-card__head">
                <div class="mwr-card__title">
                    <i class="fa-solid fa-pen-to-square"></i>
                    Новий звіт
                </div>
                <div class="mwr-card__meta">
                    <span class="mwr-chip mwr-chip--soft">
                        <i class="fa-solid fa-sparkles"></i>
                        3 блоки • чітко • по суті
                    </span>
                </div>
            </div>

            <form method="POST" action="{{ route('manager.weekly-reports.store') }}" class="mwr-form js-mwr-form">
                @csrf

                <div class="mwr-grid">
                    <div class="mwr-field">
                        <label class="mwr-label">
                            <span class="mwr-label__icon"><i class="fa-solid fa-check"></i></span>
                            Що зроблено цього тижня
                            <span class="mwr-req">*</span>
                        </label>

                        <div class="mwr-control">
                            <textarea name="done_this_week"
                                      class="mwr-textarea js-autosize @error('done_this_week') is-invalid @enderror"
                                      placeholder="• Закрив ключові задачі...
• Узгодив рішення...
• Довів до результату..."
                                      rows="7">{{ old('done_this_week') }}</textarea>
                            <div class="mwr-control__hint">Фокус: результат, цифри, вплив на команду/проєкт.</div>
                        </div>
                    </div>

                    <div class="mwr-field">
                        <label class="mwr-label">
                            <span class="mwr-label__icon"><i class="fa-solid fa-triangle-exclamation"></i></span>
                            Проблеми / блокери
                        </label>

                        <div class="mwr-control">
                            <textarea name="issues"
                                      class="mwr-textarea js-autosize @error('issues') is-invalid @enderror"
                                      placeholder="• Блокер: ...
• Ризик: ...
• Потрібне рішення/допомога: ..."
                                      rows="6">{{ old('issues') }}</textarea>
                            <div class="mwr-control__hint">Якщо проблем немає — напиши “Немає”.</div>
                        </div>
                    </div>

                    <div class="mwr-field mwr-field--full">
                        <label class="mwr-label">
                            <span class="mwr-label__icon"><i class="fa-solid fa-forward"></i></span>
                            План на наступний тиждень
                            <span class="mwr-req">*</span>
                        </label>

                        <div class="mwr-control">
                            <textarea name="plan_next_week"
                                      class="mwr-textarea js-autosize @error('plan_next_week') is-invalid @enderror"
                                      placeholder="• Планую...
• Зроблю рев’ю/контроль...
• Очікую результат..."
                                      rows="7">{{ old('plan_next_week') }}</textarea>
                            <div class="mwr-control__hint">Пиши так, щоб по тексту було видно відповідальність і пріоритети.</div>
                        </div>
                    </div>
                </div>

                <div class="mwr-form__footer">
                    <div class="mwr-mini">
                        <i class="fa-solid fa-shield-heart"></i>
                        Після відправки звіт отримає статус <b>“Подано”</b>.
                    </div>

                    <div class="mwr-form__actions">
                        <a href="{{ route('manager.weekly-reports.index') }}" class="mwr-btn mwr-btn--ghost">
                            <span class="mwr-btn__icon"><i class="fa-solid fa-xmark"></i></span>
                            <span>Скасувати</span>
                        </a>

                        <button type="submit" class="mwr-btn mwr-btn--primary mwr-btn--shine">
                            <span class="mwr-btn__icon"><i class="fa-solid fa-paper-plane"></i></span>
                            <span>Відправити звіт</span>
                        </button>
                    </div>
                </div>
            </form>
        </div>

    </div>

    @push('scripts')
        <script>
            (function(){
                function autoGrow(el){
                    el.style.height = 'auto';
                    el.style.height = Math.min(el.scrollHeight, 520) + 'px';
                }
                document.querySelectorAll('.js-autosize').forEach(function(el){
                    autoGrow(el);
                    el.addEventListener('input', function(){ autoGrow(el); });
                });

                var form = document.querySelector('.js-mwr-form');
                if(form){
                    form.addEventListener('submit', function(){
                        var btn = form.querySelector('button[type="submit"]');
                        if(btn){
                            btn.disabled = true;
                            btn.classList.add('is-loading');
                            btn.querySelector('span:last-child').textContent = 'Відправляю...';
                        }
                    });
                }
            })();
        </script>
    @endpush
@endsection