@extends('layouts.admin')

@section('title','Нотатки тімлідів')
@section('page_title','Нотатки тімлідів')

@push('head')
    <link rel="stylesheet" href="{{ asset('css/admin/notes-index.css') }}">
@endpush

@section('content')

    @php
        /** @var \Illuminate\Pagination\LengthAwarePaginator $notes */
        $totalNotes = $notes->total();
    @endphp

    {{-- ФІЛЬТР --}}
    <div class="admin-card notes-filter-card mb-3">
        <div class="notes-filter-header">
            <div>
                <h5 class="notes-filter-title mb-1">Фільтр нотаток тімлідів</h5>
                <p class="notes-filter-subtitle mb-0">
                    Обери тімліда, діапазон дат та слова в заголовку / змісті, щоб знайти потрібну зміну.
                </p>
            </div>
        </div>

        <form method="GET" id="filterForm" class="notes-filter-form">
            {{-- Тімлід --}}
            <div class="notes-filter-group">
                <label class="notes-filter-label">Тімлід</label>
                <select name="teamlead_id"
                        class="form-control"
                        id="teamleadSelect">
                    <option value="">— всі —</option>
                    @foreach($teamleads as $u)
                        <option value="{{ $u->id }}" {{ (string)$teamleadId === (string)$u->id ? 'selected' : '' }}>
                            {{ $u->name }} ({{ $u->email }})
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- З дати --}}
            <div class="notes-filter-group notes-filter-group--date">
                <label class="notes-filter-label">З дати</label>
                <input type="date"
                       name="from"
                       value="{{ $dateFrom }}"
                       class="form-control">
            </div>

            {{-- По дату --}}
            <div class="notes-filter-group notes-filter-group--date">
                <label class="notes-filter-label">По дату</label>
                <input type="date"
                       name="to"
                       value="{{ $dateTo }}"
                       class="form-control">
            </div>

            {{-- Пошук по тексту --}}
            <div class="notes-filter-group notes-filter-group--search">
                <label class="notes-filter-label">Пошук по тексту</label>
                <input type="text"
                       name="q"
                       value="{{ $q }}"
                       class="form-control"
                       placeholder="слова у заголовку або змісті...">
            </div>

            {{-- Кнопки --}}
            <div class="notes-filter-actions">
                <button class="btn btn-outline-secondary">
                    Фільтрувати
                </button>

                <a href="{{ route('admin.reports.notes.index') }}"
                   class="btn btn-link btn-sm notes-filter-reset">
                    Скинути
                </a>
            </div>
        </form>

        {{-- Summary по фільтру --}}
        <div class="notes-summary-line text-muted small mt-2">
            Нотаток у вибірці: <strong>{{ $totalNotes }}</strong>
            @if($q)
                · Пошук: <strong>"{{ $q }}"</strong>
            @endif
        </div>
    </div>

    {{-- ДЕСКТОП / ПЛАНШЕТ: ТАБЛИЦЯ --}}
    <div class="admin-card p-0 notes-table-card">
        <div class="d-flex justify-content-between align-items-center px-3 py-2 notes-table-header">
            <div class="font-weight-semibold">
                Нотатки за зміну
            </div>
            <div class="text-muted small">
                Нотатка = один день / зміна від конкретного тімліда.
            </div>
        </div>

        <div class="table-responsive notes-table-wrapper">
            <table class="table table-sm table-bordered mb-0 notes-table">
                <thead class="thead-light">
                <tr>
                    <th style="min-width:110px;">Дата</th>
                    <th style="min-width:160px;">Тімлід</th>
                    <th style="min-width:180px;">Заголовок</th>
                    <th class="notes-content-head">Зміст</th>
                </tr>
                </thead>
                <tbody>
                @forelse($notes as $n)
                    <tr>
                        <td class="align-middle" data-label="Дата">
                            {{ $n->note_date->format('Y-m-d') }}
                        </td>

                        <td class="align-middle" data-label="Тімлід">
                            <div class="notes-tl-name">{{ $n->user?->name }}</div>
                            <div class="notes-tl-email">{{ $n->user?->email }}</div>
                        </td>

                        <td class="align-middle" data-label="Заголовок">
                            {{ $n->title ?: '—' }}
                        </td>

                        <td class="notes-content-cell" data-label="Зміст">
                            <div class="notes-content-text">{{ trim($n->content) }}</div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="text-center text-muted py-4">
                            Даних немає
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>

        <div class="notes-pagination p-2">
            {{ $notes->links() }}
        </div>
    </div>

    {{-- МОБІЛЬНИЙ ВИГЛЯД: КАРТКИ НОТАТОК --}}
    <div class="notes-mobile-list">
        @forelse($notes as $n)
            <div class="admin-card notes-mobile-card">
                <div class="notes-mobile-head">
                    <div class="notes-mobile-date">
                        {{ $n->note_date->format('Y-m-d') }}
                    </div>
                    <div class="notes-mobile-tl">
                        <div class="notes-mobile-tl-name">{{ $n->user?->name }}</div>
                        <div class="notes-mobile-tl-email">{{ $n->user?->email }}</div>
                    </div>
                </div>

                @if($n->title)
                    <div class="notes-mobile-title">
                        {{ $n->title }}
                    </div>
                @endif

                <div class="notes-mobile-content">
                    {{ trim($n->content) }}
                </div>
            </div>
        @empty
            <div class="text-center text-muted p-3">
                Даних немає
            </div>
        @endforelse

        <div class="notes-mobile-pagination">
            {{ $notes->links() }}
        </div>
    </div>
@endsection

@push('body')
    <script>
        // Автофільтр при зміні тімліда
        document.getElementById('teamleadSelect')?.addEventListener('change', function () {
            document.getElementById('filterForm')?.submit();
        });
    </script>
@endpush