@extends('layouts.teamlead')

@section('title', 'Штрафи')
@section('page_title', 'Штрафи')

@push('head')
    {{-- ✅ Окремий CSS через Mix --}}
    <link rel="stylesheet" href="{{ mix('css/teamlead/penalties.css') }}">
@endpush

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

        {{-- Верх: фільтри + підсумки --}}
        <div class="pen-card pen-topline p-3 p-md-4 mb-3">
            <div class="pen-card-head">
                <div>
                    <h5 class="pen-card-title mb-1">Підсумок</h5>
                    <div class="pen-card-sub">За вибраний період</div>

                    <div class="pen-pills">
                        <span class="pen-pill">
                            <i class="fa-solid fa-list-check"></i>
                            К-сть: <strong>{{ $totalCount }}</strong>
                        </span>
                        <span class="pen-pill">
                            <i class="fa-solid fa-dollar-sign"></i>
                            Сума: <strong>{{ number_format($totalAmount, 2, '.', ' ') }}</strong>
                        </span>
                    </div>

                    {{-- ✅ тулбар фільтрів --}}
                    <form method="GET" class="pen-toolbar">
                        <div class="pen-toolbar-left">
                            <div class="pen-toolbar-item">
                                <span class="pen-toolbar-label"><i class="fa-regular fa-calendar-days"></i> Місяць</span>
                                <input type="month" name="month" value="{{ $month }}" class="form-control pen-ctl">
                            </div>

                            <div class="pen-toolbar-item">
                                <span class="pen-toolbar-label"><i class="fa-solid fa-door-open"></i> Кабінет</span>
                                <select name="cabinet_id" class="form-control pen-ctl">
                                    <option value="">Всі кабінети</option>
                                    @foreach($cabinets as $cab)
                                        @php
                                            $num = null;
                                            if (!empty($cab->slug) && preg_match('/(\d+)/', $cab->slug, $m)) $num = (int)$m[1];
                                            elseif (!empty($cab->name) && preg_match('/(\d+)/', $cab->name, $m2)) $num = (int)$m2[1];

                                            $cabLabel = $num ? ($num.' кабінет') : ($cab->slug ?? $cab->name);
                                        @endphp
                                        <option value="{{ $cab->id }}" {{ (string)$cabinetId === (string)$cab->id ? 'selected' : '' }}>
                                            {{ $cabLabel }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="pen-toolbar-item">
                                <span class="pen-toolbar-label"><i class="fa-solid fa-clock"></i> Зміна</span>
                                <select name="shift" class="form-control pen-ctl">
                                    <option value="">Всі зміни</option>
                                    <option value="day" {{ $shift === 'day' ? 'selected' : '' }}>День</option>
                                    <option value="evening" {{ $shift === 'evening' ? 'selected' : '' }}>Вечір</option>
                                    <option value="night" {{ $shift === 'night' ? 'selected' : '' }}>Ніч</option>
                                </select>
                            </div>
                        </div>

                        <div class="pen-toolbar-right">
                            <button class="btn btn-primary pen-btn-filter" type="submit">
                                <i class="fa-solid fa-filter"></i> Фільтр
                            </button>

                            <a class="btn btn-outline-secondary pen-btn-reset"
                               href="{{ route('teamlead.penalties.index') }}"
                               title="Скинути фільтри">
                                <i class="fa-solid fa-rotate-left"></i>
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Додати штраф --}}
        <div class="pen-card pen-shimmer p-3 p-md-4 mb-3">
            <h5 class="pen-card-title mb-1">Додати штраф</h5>
            <div class="pen-card-sub mb-3">Оператор підтягується автоматично з кабінету по вибраній зміні.</div>

            <form method="POST" action="{{ route('teamlead.penalties.store') }}" id="penaltyForm" class="pen-form">
                @csrf

                <div class="form-row">
                    <div class="form-group col-md-4">
                        <label>Кабінет</label>
                        <select name="cabinet_id" class="form-control" required id="cabinetSelect">
                            <option value="" disabled selected>Обрати...</option>
                            @foreach($cabinets as $cab)
                                @php
                                    $num = null;
                                    if (!empty($cab->slug) && preg_match('/(\d+)/', $cab->slug, $m)) $num = (int)$m[1];
                                    elseif (!empty($cab->name) && preg_match('/(\d+)/', $cab->name, $m2)) $num = (int)$m2[1];

                                    $cabLabel = $num ? ($num.' кабінет') : ($cab->slug ?? $cab->name);
                                @endphp

                                <option value="{{ $cab->id }}"
                                        data-day-name="{{ $cab->day_operator }}"
                                        data-day-tg="{{ $cab->day_tg_username }}"
                                        data-evening-name="{{ $cab->evening_operator }}"
                                        data-evening-tg="{{ $cab->evening_tg_username }}"
                                        data-night-name="{{ $cab->night_operator }}"
                                        data-night-tg="{{ $cab->night_tg_username }}">
                                    {{ $cabLabel }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group col-md-3">
                        <label>Зміна</label>
                        <select name="shift" class="form-control" required id="shiftSelect">
                            <option value="all">Всі зміни (кабінет)</option>
                            <option value="day">День</option>
                            <option value="evening">Вечір</option>
                            <option value="night">Ніч</option>
                        </select>
                    </div>

                    <div class="form-group col-md-2">
                        <label>Дата</label>
                        <input type="date" name="penalty_date" class="form-control" value="{{ now()->toDateString() }}" required>
                    </div>

                    <div class="form-group col-md-2">
                        <label>Сума ($)</label>
                        <input type="number" step="0.01" min="0" name="amount" class="form-control" required>
                    </div>

                    <div class="form-group col-md-1">
                        <label class="d-none d-md-block">&nbsp;</label>
                        <button class="btn btn-danger btn-block pen-btn-add" type="submit" id="submitBtn" title="Додати штраф">
                            <i class="fa-solid fa-gavel"></i>
                            <span class="d-md-none ml-2">Додати</span>
                        </button>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group col-md-12">
                        <label>Причина</label>
                        <input type="text" name="reason" class="form-control" maxlength="255"
                               placeholder="Напр: запізнення / якість / порушення правил">
                    </div>
                </div>
            </form>

            {{-- ✅ Підказка --}}
            <div id="opHint" class="pen-hint"></div>
        </div>

        {{-- Список штрафів --}}
        <div class="pen-card p-0">
            <div class="table-responsive pen-table-wrap">
                <table class="table table-sm table-bordered pen-table">
                    <thead>
                    <tr>
                        <th style="width:120px;">Дата</th>
                        <th style="width:140px;">Кабінет</th>
                        <th style="width:140px;">Зміна</th>
                        <th>Оператор</th>
                        <th style="width:140px;">Сума</th>
                        <th>Причина</th>
                        <th style="width:110px;">Дії</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($penalties as $p)
                        @php
                            $shiftLabel = $p->shift === 'day' ? 'День' : ($p->shift === 'evening' ? 'Вечір' : 'Ніч');
                            $shiftClass = $p->shift === 'day' ? 'pen-shift-day' : ($p->shift === 'evening' ? 'pen-shift-evening' : 'pen-shift-night');

                            $cabTxt = $p->cabinet->slug ?? $p->cabinet->name ?? '';
                            $num = null;
                            if ($cabTxt && preg_match('/(\d+)/', $cabTxt, $m)) $num = (int)$m[1];
                            $cabLabel = $num ? ($num.' кабінет') : ($cabTxt ?: '—');
                        @endphp

                        <tr class="pen-row">
                            <td class="align-middle" data-label="Дата">
                                {{ optional($p->penalty_date)->format('d.m.Y') }}
                            </td>

                            <td class="align-middle" data-label="Кабінет">
                                {{ $cabLabel }}
                            </td>

                            <td class="align-middle" data-label="Зміна">
                                <span class="pen-shift-badge {{ $shiftClass }}">{{ $shiftLabel }}</span>
                            </td>

                            <td class="align-middle" data-label="Оператор">
                                @if($p->operator_name)
                                    <div class="font-weight-bold">{{ $p->operator_name }}</div>
                                    @if($p->operator_tg_username)
                                        <div class="pen-muted">{{ '@'.$p->operator_tg_username }}</div>
                                    @endif
                                @else
                                    <span class="pen-scope-badge">
                                        <i class="fa-solid fa-users"></i> Весь кабінет
                                    </span>
                                @endif
                            </td>

                            <td class="align-middle" data-label="Сума">
                                <strong>{{ number_format($p->amount, 2, '.', ' ') }}</strong>
                            </td>

                            <td class="align-middle" data-label="Причина">
                                {{ $p->reason ?: '—' }}
                            </td>

                            <td class="align-middle text-center" data-label="Дії">
                                <form method="POST"
                                      action="{{ route('teamlead.penalties.destroy', $p) }}"
                                      class="pen-delete-form"
                                      id="penDeleteForm-{{ $p->id }}">
                                    @csrf
                                    @method('DELETE')

                                    {{-- ✅ без alert: відкриваємо модалку --}}
                                    <button class="btn btn-sm pen-btn-icon pen-btn-danger pen-btn-delete"
                                            type="button"
                                            data-form-id="penDeleteForm-{{ $p->id }}"
                                            title="Видалити">
                                        <i class="fa-solid fa-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center text-muted p-4">Штрафів поки немає.</td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>

            <div class="pen-footer">
                {{ $penalties->links() }}
            </div>
        </div>

        {{-- ✅ МОДАЛКА ПІДТВЕРДЖЕННЯ ВИДАЛЕННЯ --}}
        <div class="pen-modal" id="penDeleteModal" aria-hidden="true">
            <div class="pen-modal-backdrop" data-pen-modal-close></div>

            <div class="pen-modal-dialog" role="dialog" aria-modal="true" aria-labelledby="penDeleteTitle">
                <div class="pen-modal-card">
                    <div class="pen-modal-head">
                        <div class="pen-modal-icon">
                            <i class="fa-solid fa-triangle-exclamation"></i>
                        </div>
                        <div>
                            <div class="pen-modal-title" id="penDeleteTitle">Видалити штраф?</div>
                            <div class="pen-modal-sub">Дію не можна буде скасувати.</div>
                        </div>

                        <button type="button" class="pen-modal-x" data-pen-modal-close aria-label="Close">
                            <i class="fa-solid fa-xmark"></i>
                        </button>
                    </div>

                    <div class="pen-modal-actions">
                        <button type="button" class="btn btn-light pen-modal-btn" data-pen-modal-close>
                            Скасувати
                        </button>
                        <button type="button" class="btn btn-danger pen-modal-btn pen-modal-confirm" id="penDeleteConfirm">
                            <i class="fa-solid fa-trash"></i> Видалити
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('body')
    <script>
        (function () {
            const cabinetSelect = document.getElementById('cabinetSelect');
            const shiftSelect   = document.getElementById('shiftSelect');
            const opHintEl      = document.getElementById('opHint');
            const submitBtn     = document.getElementById('submitBtn');

            const shiftLabelsUA = {
                all: 'Всі зміни (кабінет)',
                day: 'День',
                evening: 'Вечір',
                night: 'Ніч',
            };

            function updateShiftLabels(opt) {
                if (!opt || !shiftSelect) return;

                ['day','evening','night'].forEach(shift => {
                    const name = (opt.getAttribute(`data-${shift}-name`) || '').trim();
                    const optionEl = shiftSelect.querySelector(`option[value="${shift}"]`);
                    if (!optionEl) return;

                    const base = shiftLabelsUA[shift] || shift;
                    optionEl.textContent = name ? `${base} (${name})` : `${base} (—)`;
                });
            }

            function refresh() {
                const shift = shiftSelect?.value || 'all';

                // ✅ Поки реально не обрано кабінет — нічого не показуємо
                if (!cabinetSelect || !cabinetSelect.value) {
                    if (submitBtn) submitBtn.disabled = true;
                    if (opHintEl) opHintEl.classList.remove('show');
                    return;
                }

                const opt = cabinetSelect?.options[cabinetSelect.selectedIndex];
                if (submitBtn) submitBtn.disabled = false;

                updateShiftLabels(opt);

                if (!opHintEl || !opt) return;

                if (shift === 'all') {
                    opHintEl.innerHTML =
                        `<i class="fa-solid fa-layer-group"></i> ` +
                        `Штраф буде створено <strong>одразу для 3 змін</strong>: День + Вечір + Ніч (для цього кабінету).`;
                    opHintEl.classList.add('show');
                    return;
                }

                const name = (opt.getAttribute(`data-${shift}-name`) || '').trim();
                const tg   = (opt.getAttribute(`data-${shift}-tg`) || '').trim();
                const ok = !!(name && tg);

                if (ok) {
                    opHintEl.classList.remove('show');
                } else {
                    opHintEl.innerHTML =
                        `<i class="fa-solid fa-circle-exclamation"></i> ` +
                        `У цьому кабінеті/зміні не задано оператора або Telegram — штраф буде записаний як <strong>“Весь кабінет”</strong>.`;
                    opHintEl.classList.add('show');
                }
            }

            cabinetSelect?.addEventListener('change', refresh);
            shiftSelect?.addEventListener('change', refresh);
            refresh();

            // ✅ МОДАЛКА ВИДАЛЕННЯ (без alert)
            const modal = document.getElementById('penDeleteModal');
            const confirmBtn = document.getElementById('penDeleteConfirm');
            let pendingForm = null;

            function openModal(form) {
                pendingForm = form;
                if (!modal) return;
                modal.classList.add('show');
                modal.setAttribute('aria-hidden', 'false');
                document.documentElement.classList.add('pen-modal-open');
            }

            function closeModal() {
                pendingForm = null;
                if (!modal) return;
                modal.classList.remove('show');
                modal.setAttribute('aria-hidden', 'true');
                document.documentElement.classList.remove('pen-modal-open');
            }

            document.addEventListener('click', function (e) {
                const delBtn = e.target.closest('.pen-btn-delete');
                if (delBtn) {
                    const formId = delBtn.getAttribute('data-form-id');
                    const form = formId ? document.getElementById(formId) : null;
                    if (form) openModal(form);
                    return;
                }

                if (e.target.closest('[data-pen-modal-close]')) {
                    closeModal();
                }
            });

            confirmBtn?.addEventListener('click', function () {
                if (pendingForm) pendingForm.submit();
            });

            document.addEventListener('keydown', function (e) {
                if (e.key === 'Escape' && modal?.classList.contains('show')) closeModal();
            });
        })();
    </script>
@endpush