@extends('layouts.app')

@section('title', 'DOCX 관리')

@push('styles')
<style>
    .docx { max-width: 1100px; margin: 0 auto; padding: 32px 20px 48px; }

    /* 헤더 */
    .docx-header { text-align: center; margin-bottom: 32px; }
    .docx-header h1 { font-size: 1.75rem; font-weight: 700; color: #1e293b; margin-bottom: 6px; }
    .docx-header p { color: #64748b; font-size: 0.95rem; }

    /* 통계 바 */
    .docx-stats { display: flex; gap: 16px; justify-content: center; margin-bottom: 28px; }
    .docx-stat { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 24px; display: flex; align-items: center; gap: 10px; }
    .docx-stat-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
    .docx-stat-icon svg { width: 20px; height: 20px; }
    .docx-stat-icon.count { background: #dbeafe; color: #2563eb; }
    .docx-stat-icon.size { background: #dcfce7; color: #16a34a; }
    .docx-stat-num { font-size: 1.3rem; font-weight: 700; color: #1e293b; }
    .docx-stat-label { font-size: 0.75rem; color: #94a3b8; }

    /* 검색 + 필터 바 */
    .docx-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 24px; }
    .docx-search { flex: 1; min-width: 200px; position: relative; }
    .docx-search input { width: 100%; padding: 10px 14px 10px 38px; border: 1px solid #e2e8f0; border-radius: 10px; font-size: 0.88rem; outline: none; transition: border-color 0.2s; background: #fff; }
    .docx-search input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
    .docx-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #94a3b8; }

    /* 필터 탭 */
    .docx-filters { display: flex; flex-wrap: wrap; gap: 6px; }
    .docx-filter-btn { padding: 6px 14px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; font-size: 0.8rem; color: #64748b; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
    .docx-filter-btn:hover { border-color: #3b82f6; color: #3b82f6; }
    .docx-filter-btn.active { background: #3b82f6; border-color: #3b82f6; color: #fff; }

    /* 파일 목록 */
    .docx-list { display: flex; flex-direction: column; gap: 10px; }
    .docx-item { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px 20px; display: flex; align-items: center; gap: 16px; transition: all 0.2s; }
    .docx-item:hover { border-color: #3b82f6; box-shadow: 0 4px 12px rgba(59,130,246,0.08); }

    /* 파일 아이콘 */
    .docx-icon { width: 44px; height: 44px; border-radius: 10px; background: #eff6ff; color: #2563eb; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .docx-icon svg { width: 22px; height: 22px; }

    /* 파일 정보 */
    .docx-info { flex: 1; min-width: 0; }
    .docx-name { font-size: 0.92rem; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .docx-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; align-items: center; }
    .docx-badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 500; }
    .docx-badge.cat { background: #dbeafe; color: #1d4ed8; }
    .docx-badge.src { background: #f1f5f9; color: #64748b; }
    .docx-meta-text { font-size: 0.75rem; color: #94a3b8; }
    .docx-meta-sep { color: #e2e8f0; font-size: 0.7rem; }

    /* 다운로드 버튼 */
    .docx-dl { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; font-size: 0.8rem; font-weight: 500; color: #334155; text-decoration: none; transition: all 0.2s; flex-shrink: 0; }
    .docx-dl:hover { background: #3b82f6; border-color: #3b82f6; color: #fff; }
    .docx-dl svg { width: 14px; height: 14px; }

    /* 빈 상태 */
    .docx-empty { text-align: center; padding: 60px 20px; color: #94a3b8; }
    .docx-empty svg { width: 48px; height: 48px; margin: 0 auto 12px; color: #cbd5e1; }
    .docx-empty p { font-size: 0.9rem; }

    @media (max-width: 768px) {
        .docx-stats { flex-direction: column; align-items: stretch; }
        .docx-item { flex-direction: column; align-items: flex-start; gap: 12px; }
        .docx-dl { align-self: flex-end; }
    }
</style>
@endpush

@section('content')
<div class="docx">
    {{-- 헤더 --}}
    <div class="docx-header">
        <h1>DOCX 관리</h1>
        <p>회사 문서 자료를 한 곳에서 관리합니다</p>
    </div>

    {{-- 통계 바 --}}
    <div class="docx-stats">
        <div class="docx-stat">
            <div class="docx-stat-icon count">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
            </div>
            <div>
                <div class="docx-stat-num">{{ $totalCount }}</div>
                <div class="docx-stat-label">전체 파일</div>
            </div>
        </div>
        <div class="docx-stat">
            <div class="docx-stat-icon size">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" /></svg>
            </div>
            <div>
                <div class="docx-stat-num">{{ $totalSize }}</div>
                <div class="docx-stat-label">총 크기</div>
            </div>
        </div>
    </div>

    {{-- 검색 + 필터 --}}
    <div class="docx-toolbar">
        <div class="docx-search">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
            <input type="text" id="docxSearch" placeholder="파일명 검색..." autocomplete="off">
        </div>
        <div class="docx-filters">
            <button class="docx-filter-btn active" data-category="all">전체</button>
            @foreach ($categories as $cat)
                <button class="docx-filter-btn" data-category="{{ $cat }}">{{ $cat }}</button>
            @endforeach
        </div>
    </div>

    {{-- 파일 목록 --}}
    <div class="docx-list" id="docxList">
        @forelse ($files as $file)
            <div class="docx-item" data-category="{{ $file['category'] }}" data-name="{{ mb_strtolower($file['name']) }}">
                <div class="docx-icon">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>
                </div>
                <div class="docx-info">
                    <div class="docx-name" title="{{ $file['name'] }}">{{ $file['name'] }}</div>
                    <div class="docx-meta">
                        <span class="docx-badge cat">{{ $file['category'] }}</span>
                        <span class="docx-badge src">{{ $file['source_dir'] }}</span>
                        <span class="docx-meta-sep">|</span>
                        <span class="docx-meta-text">{{ $file['size'] }}</span>
                        <span class="docx-meta-sep">|</span>
                        <span class="docx-meta-text">{{ $file['modified_date'] }}</span>
                    </div>
                </div>
                <a href="{{ route('additional.docx.download', ['file' => $file['path']]) }}" class="docx-dl">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
                    다운로드
                </a>
            </div>
        @empty
            <div class="docx-empty">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
                <p>DOCX 파일이 없습니다</p>
            </div>
        @endforelse
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const searchInput = document.getElementById('docxSearch');
    const filterBtns = document.querySelectorAll('.docx-filter-btn');
    const items = document.querySelectorAll('.docx-item');
    let activeCategory = 'all';

    function filterItems() {
        const query = searchInput.value.toLowerCase().trim();
        let visibleCount = 0;

        items.forEach(function (item) {
            const name = item.dataset.name;
            const category = item.dataset.category;
            const matchCategory = activeCategory === 'all' || category === activeCategory;
            const matchSearch = !query || name.includes(query);
            const visible = matchCategory && matchSearch;

            item.style.display = visible ? '' : 'none';
            if (visible) visibleCount++;
        });

        let emptyEl = document.getElementById('docxFilterEmpty');
        if (visibleCount === 0) {
            if (!emptyEl) {
                emptyEl = document.createElement('div');
                emptyEl.id = 'docxFilterEmpty';
                emptyEl.className = 'docx-empty';
                emptyEl.innerHTML = '<p>검색 결과가 없습니다</p>';
                document.getElementById('docxList').appendChild(emptyEl);
            }
            emptyEl.style.display = '';
        } else if (emptyEl) {
            emptyEl.style.display = 'none';
        }
    }

    filterBtns.forEach(function (btn) {
        btn.addEventListener('click', function () {
            filterBtns.forEach(function (b) { b.classList.remove('active'); });
            btn.classList.add('active');
            activeCategory = btn.dataset.category;
            filterItems();
        });
    });

    searchInput.addEventListener('input', filterItems);
});
</script>
@endpush