@extends('layouts.manager')

@section('title','Кабінети')
@section('page_title','Кабінети')

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

@section('content')

    @php
        /** @var \Illuminate\Support\Collection|\Illuminate\Database\Eloquent\Collection $cabinets */

        $totalCabinets = $cabinets->count();
        $withTeamleads = $cabinets->filter(fn($cab) => $cab->teamLeads && $cab->teamLeads->count())->count();

        $withDay   = $cabinets->whereNotNull('day_operator')->count();
        $withEven  = $cabinets->whereNotNull('evening_operator')->count();
        $withNight = $cabinets->whereNotNull('night_operator')->count();

        $pct = fn($a,$b) => $b > 0 ? round(($a / $b) * 100) : 0;
        $pctDay   = $pct($withDay, $totalCabinets);
        $pctEven  = $pct($withEven, $totalCabinets);
        $pctNight = $pct($withNight, $totalCabinets);
    @endphp

    <div class="cabs">

        {{-- HERO / HEADER --}}
        <div class="cabs-hero admin-card p-0 mb-4" data-anim="fade">
            <div class="cabs-hero-bg" aria-hidden="true">
                <span class="cabs-blob cabs-blob-1"></span>
                <span class="cabs-blob cabs-blob-2"></span>
                <span class="cabs-grid"></span>
            </div>

            <div class="cabs-hero-inner">
                <div class="cabs-hero-head">
                    <div class="cabs-hero-left">
                        <div class="cabs-kicker">Модуль</div>
                        <div class="cabs-title">
                            Кабінети <span class="cabs-title-accent">TLOD</span>
                        </div>
                        <div class="cabs-subtitle">
                            Тут можна швидко перевірити тімлідів і операторів по змінах (день / вечір / ніч),
                            та перейти до редагування.
                        </div>

                        <div class="cabs-pill-row">
                            <span class="cabs-pill">
                                <span class="cabs-pill-dot"></span>
                                Всього: <strong>{{ $totalCabinets }}</strong>
                            </span>
                            <span class="cabs-pill cabs-pill-soft">
                                З тімлідами: <strong>{{ $withTeamleads }}</strong>
                            </span>
                            <span class="cabs-pill cabs-pill-soft">
                                {{ \Carbon\Carbon::now(config('app.timezone','Europe/Kyiv'))->translatedFormat('d F Y') }}
                            </span>
                        </div>
                    </div>

                    <div class="cabs-hero-right">
                        <div class="cabs-mini" data-anim="up">
                            <div class="cabs-mini-row">
                                <span class="cabs-mini-label">День заповнено</span>
                                <span class="cabs-mini-value">{{ $withDay }} / {{ $totalCabinets }}</span>
                            </div>
                            <div class="cabs-mini-bar">
                                <span style="width: {{ $pctDay }}%"></span>
                            </div>

                            <div class="cabs-mini-row">
                                <span class="cabs-mini-label">Вечір заповнено</span>
                                <span class="cabs-mini-value">{{ $withEven }} / {{ $totalCabinets }}</span>
                            </div>
                            <div class="cabs-mini-bar">
                                <span style="width: {{ $pctEven }}%"></span>
                            </div>

                            <div class="cabs-mini-row">
                                <span class="cabs-mini-label">Ніч заповнено</span>
                                <span class="cabs-mini-value">{{ $withNight }} / {{ $totalCabinets }}</span>
                            </div>
                            <div class="cabs-mini-bar">
                                <span style="width: {{ $pctNight }}%"></span>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- QUICK STATS GRID --}}
                <div class="cabs-metrics">
                    <div class="cabs-metric" data-anim="up">
                        <div class="cabs-metric-top">
                            <div class="cabs-metric-icon">🏢</div>
                            <div class="cabs-metric-name">Кабінети</div>
                        </div>
                        <div class="cabs-metric-value">{{ $totalCabinets }}</div>
                        <div class="cabs-metric-hint">Загальна кількість</div>
                    </div>

                    <div class="cabs-metric" data-anim="up">
                        <div class="cabs-metric-top">
                            <div class="cabs-metric-icon">👥</div>
                            <div class="cabs-metric-name">Тімліди</div>
                        </div>
                        <div class="cabs-metric-value">{{ $withTeamleads }}</div>
                        <div class="cabs-metric-hint">Кабінети з тімлідами</div>
                    </div>

                    <div class="cabs-metric" data-anim="up">
                        <div class="cabs-metric-top">
                            <div class="cabs-metric-icon">🌞</div>
                            <div class="cabs-metric-name">День</div>
                        </div>
                        <div class="cabs-metric-value">{{ $pctDay }}%</div>
                        <div class="cabs-metric-hint">{{ $withDay }} / {{ $totalCabinets }}</div>
                    </div>
                    <div class="cabs-metric" data-anim="up">
                        <div class="cabs-metric-top">
                            <div class="cabs-metric-icon">🌆</div>
                            <div class="cabs-metric-name">Вечір</div>
                        </div>
                        <div class="cabs-metric-value">{{ $pctEven }}%</div>
                        <div class="cabs-metric-hint">{{ $withEven }} / {{ $totalCabinets }}</div>
                    </div>
                    <div class="cabs-metric" data-anim="up">
                        <div class="cabs-metric-top">
                            <div class="cabs-metric-icon">🌙</div>
                            <div class="cabs-metric-name">Ніч</div>
                        </div>
                        <div class="cabs-metric-value">{{ $pctNight }}%</div>
                        <div class="cabs-metric-hint">{{ $withNight }} / {{ $totalCabinets }}</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- TABLE CARD --}}
        <div class="admin-card p-0 cabs-table-card" data-anim="fade">
            <div class="cabs-table-head px-3 py-3">
                <div>
                    <div class="cabs-table-title">Список кабінетів</div>
                    <div class="cabs-table-sub">
                        Наведи на тімліда, щоб побачити email. На мобільному — картки.
                    </div>
                </div>

                <div class="cabs-table-actions">
                    <a href="{{ route('manager.cabinets.create') }}" class="cabs-head-btn">
                        <span class="cabs-head-btn-ic">➕</span>
                        Створити
                    </a>
                </div>
            </div>

            <div class="cabs-table-wrap table-responsive">
                <table class="table table-sm mb-0 cabs-table">
                    <thead>
                    <tr>
                        <th>Кабінет</th>
                        <th>Тімлід</th>
                        <th>День</th>
                        <th>Вечір</th>
                        <th>Ніч</th>
                        <th style="width: 170px;">Дії</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($cabinets as $cab)
                        <tr class="cabs-row">
                            <td class="align-middle">
                                <div class="cabs-name">
                                    <div class="cabs-name-main">{{ $cab->name }}</div>
                                    @if(!empty($cab->slug))
                                        <div class="cabs-name-slug">{{ $cab->slug }}</div>
                                    @endif
                                </div>
                            </td>

                            <td class="align-middle">
                                @if($cab->teamLeads && $cab->teamLeads->count())
                                    <div class="cabs-leads">
                                        @foreach($cab->teamLeads as $lead)
                                            <span class="badge cabs-lead-badge"
                                                  data-toggle="tooltip"
                                                  data-placement="top"
                                                  title="{{ $lead->email }}">
                                                {{ $lead->name }}
                                            </span>
                                        @endforeach
                                    </div>
                                @else
                                    <span class="cabs-muted">—</span>
                                @endif
                            </td>

                            <td class="align-middle">
                                <div class="cabs-shift {{ $cab->day_operator ? 'is-ok' : 'is-empty' }}">
                                    <span class="cabs-shift-dot" aria-hidden="true"></span>
                                    <div class="cabs-shift-body">
                                        @if($cab->day_operator)
                                            <div class="cabs-op">{{ $cab->day_operator }}</div>
                                            @if($cab->day_tg_username)
                                                <div class="cabs-tag">{{ $cab->day_tg_username }}</div>
                                            @endif
                                        @else
                                            <div class="cabs-empty">Немає</div>
                                        @endif
                                    </div>
                                </div>
                            </td>

                            <td class="align-middle">
                                <div class="cabs-shift {{ $cab->evening_operator ? 'is-ok' : 'is-empty' }}">
                                    <span class="cabs-shift-dot" aria-hidden="true"></span>
                                    <div class="cabs-shift-body">
                                        @if($cab->evening_operator)
                                            <div class="cabs-op">{{ $cab->evening_operator }}</div>
                                            @if($cab->evening_tg_username)
                                                <div class="cabs-tag">{{ $cab->evening_tg_username }}</div>
                                            @endif
                                        @else
                                            <div class="cabs-empty">Немає</div>
                                        @endif
                                    </div>
                                </div>
                            </td>

                            <td class="align-middle">
                                <div class="cabs-shift {{ $cab->night_operator ? 'is-ok' : 'is-empty' }}">
                                    <span class="cabs-shift-dot" aria-hidden="true"></span>
                                    <div class="cabs-shift-body">
                                        @if($cab->night_operator)
                                            <div class="cabs-op">{{ $cab->night_operator }}</div>
                                            @if($cab->night_tg_username)
                                                <div class="cabs-tag">{{ $cab->night_tg_username }}</div>
                                            @endif
                                        @else
                                            <div class="cabs-empty">Немає</div>
                                        @endif
                                    </div>
                                </div>
                            </td>

                            <td class="align-middle">
                                <div class="cabs-actions">
                                    <a href="{{ route('manager.cabinets.edit', $cab) }}" class="cabs-btn cabs-btn-edit">
                                        Редагувати
                                    </a>

                                    <form method="POST"
                                          action="{{ route('manager.cabinets.destroy', $cab) }}"
                                          class="d-inline-block cabs-del-form"
                                          data-cab-name="{{ $cab->name }}">
                                        @csrf
                                        @method('DELETE')
                                        <button type="button" class="cabs-btn cabs-btn-del js-open-del">
                                            Видалити
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center p-5">
                                <div class="cabs-empty-state">
                                    <div class="cabs-empty-ic">🏢</div>
                                    <div class="cabs-empty-title">Немає кабінетів</div>
                                    <div class="cabs-empty-sub">Створи перший кабінет, щоб почати роботу.</div>
                                    <a href="{{ route('manager.cabinets.create') }}" class="cabs-empty-cta">
                                        ➕ Створити кабінет
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- MOBILE CARDS --}}
        <div class="cabs-mobile">
            @forelse($cabinets as $cab)
                <div class="admin-card cabs-m-card" data-anim="up">
                    <div class="cabs-m-head">
                        <div>
                            <div class="cabs-m-title">
                                <span class="cabs-name-main">{{ $cab->name }}</span>
                                @if(!empty($cab->slug))
                                    <span class="cabs-name-slug">{{ $cab->slug }}</span>
                                @endif
                            </div>

                            @if($cab->teamLeads && $cab->teamLeads->count())
                                <div class="cabs-leads mt-2">
                                    @foreach($cab->teamLeads as $lead)
                                        <span class="badge cabs-lead-badge"
                                              data-toggle="tooltip"
                                              data-placement="top"
                                              title="{{ $lead->email }}">
                                            {{ $lead->name }}
                                        </span>
                                    @endforeach
                                </div>
                            @else
                                <div class="cabs-muted mt-2">Тімлід не призначений</div>
                            @endif
                        </div>

                        <a href="{{ route('manager.cabinets.edit', $cab) }}" class="cabs-m-edit">Редагувати →</a>
                    </div>

                    <div class="cabs-m-body">
                        <div class="cabs-m-row">
                            <div class="cabs-m-lbl">День</div>
                            <div class="cabs-m-val {{ $cab->day_operator ? 'is-ok' : 'is-empty' }}">
                                @if($cab->day_operator)
                                    <div class="cabs-op">{{ $cab->day_operator }}</div>
                                    @if($cab->day_tg_username)
                                        <div class="cabs-tag">{{ $cab->day_tg_username }}</div>
                                    @endif
                                @else
                                    <div class="cabs-empty">Немає</div>
                                @endif
                            </div>
                        </div>

                        <div class="cabs-m-row">
                            <div class="cabs-m-lbl">Вечір</div>
                            <div class="cabs-m-val {{ $cab->evening_operator ? 'is-ok' : 'is-empty' }}">
                                @if($cab->evening_operator)
                                    <div class="cabs-op">{{ $cab->evening_operator }}</div>
                                    @if($cab->evening_tg_username)
                                        <div class="cabs-tag">{{ $cab->evening_tg_username }}</div>
                                    @endif
                                @else
                                    <div class="cabs-empty">Немає</div>
                                @endif
                            </div>
                        </div>

                        <div class="cabs-m-row">
                            <div class="cabs-m-lbl">Ніч</div>
                            <div class="cabs-m-val {{ $cab->night_operator ? 'is-ok' : 'is-empty' }}">
                                @if($cab->night_operator)
                                    <div class="cabs-op">{{ $cab->night_operator }}</div>
                                    @if($cab->night_tg_username)
                                        <div class="cabs-tag">{{ $cab->night_tg_username }}</div>
                                    @endif
                                @else
                                    <div class="cabs-empty">Немає</div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="cabs-m-foot">
                        <form method="POST"
                              action="{{ route('manager.cabinets.destroy', $cab) }}"
                              class="cabs-del-form"
                              data-cab-name="{{ $cab->name }}">
                            @csrf
                            @method('DELETE')
                            <button type="button" class="cabs-m-del js-open-del">
                                Видалити кабінет
                            </button>
                        </form>
                    </div>
                </div>
            @empty
                <div class="text-center text-muted p-4">Немає кабінетів.</div>
            @endforelse
        </div>

        {{-- DELETE MODAL (custom, no alert) --}}
        <div class="cabs-modal" id="cabsDeleteModal" aria-hidden="true">
            <div class="cabs-modal-backdrop js-close-del"></div>

            <div class="cabs-modal-card" role="dialog" aria-modal="true" aria-labelledby="cabsDeleteTitle">
                <div class="cabs-modal-ic">🗑️</div>

                <div class="cabs-modal-title" id="cabsDeleteTitle">Підтвердити видалення</div>
                <div class="cabs-modal-text">
                    Точно видалити кабінет <span class="cabs-modal-name" id="cabsDeleteName">—</span>?
                    Цю дію не можна відмінити.
                </div>

                <div class="cabs-modal-actions">
                    <button type="button" class="cabs-modal-btn cabs-modal-btn-ghost js-close-del">
                        Скасувати
                    </button>
                    <button type="button" class="cabs-modal-btn cabs-modal-btn-danger" id="cabsDeleteConfirm">
                        Видалити
                    </button>
                </div>
            </div>
        </div>

    </div>

@endsection

@push('scripts')
    <script>
        (function () {
            // Tooltips (Bootstrap)
            document.addEventListener('DOMContentLoaded', function () {
                if (window.$) {
                    $('[data-toggle="tooltip"]').tooltip();
                }
            });

            // Soft appear animation
            (function () {
                const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
                if (reduce) return;

                const els = document.querySelectorAll('[data-anim]');
                const io = new IntersectionObserver((entries) => {
                    entries.forEach(e => {
                        if (e.isIntersecting) {
                            e.target.classList.add('is-in');
                            io.unobserve(e.target);
                        }
                    });
                }, {threshold: 0.12});

                els.forEach(el => io.observe(el));
            })();

            // Delete modal logic
            const modal = document.getElementById('cabsDeleteModal');
            const nameEl = document.getElementById('cabsDeleteName');
            const btnConfirm = document.getElementById('cabsDeleteConfirm');

            if (!modal || !nameEl || !btnConfirm) return;

            let currentForm = null;

            function openModal(form) {
                currentForm = form;
                const cabName = form.getAttribute('data-cab-name') || '—';
                nameEl.textContent = cabName;

                modal.classList.add('is-open');
                modal.setAttribute('aria-hidden', 'false');
                document.body.classList.add('cabs-modal-open');
            }

            function closeModal() {
                modal.classList.remove('is-open');
                modal.setAttribute('aria-hidden', 'true');
                document.body.classList.remove('cabs-modal-open');
                currentForm = null;
            }

            document.addEventListener('click', function (e) {
                const openBtn = e.target.closest('.js-open-del');
                if (openBtn) {
                    const form = openBtn.closest('form.cabs-del-form');
                    if (form) openModal(form);
                }

                if (e.target.closest('.js-close-del')) {
                    closeModal();
                }
            });

            document.addEventListener('keydown', function (e) {
                if (e.key === 'Escape' && modal.classList.contains('is-open')) {
                    closeModal();
                }
            });

            btnConfirm.addEventListener('click', function () {
                if (!currentForm) return;

                // disable button to prevent double click
                btnConfirm.disabled = true;
                btnConfirm.textContent = 'Видаляю...';

                currentForm.submit();
            });

            // reset confirm button state when modal closes
            const obs = new MutationObserver(() => {
                if (!modal.classList.contains('is-open')) {
                    btnConfirm.disabled = false;
                    btnConfirm.textContent = 'Видалити';
                }
            });
            obs.observe(modal, {attributes: true, attributeFilter: ['class']});
        })();
    </script>
@endpush