@extends('layouts.admin')

@section('title', '勞工總表')

@push('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('workers.index') }}">工人檔案</a></li>
    <li class="breadcrumb-item active" aria-current="page">勞工總表</li>
@endpush

@push('styles')
<link rel="stylesheet" href="{{ asset('css/pages/workers.css') }}">
<style>
    .master-scroll-top {
        overflow-x: auto;
        margin-bottom: -0.25rem;
        padding-top: 0.25rem;
    }
    .master-scroll-top::-webkit-scrollbar { height: 10px; }
    .master-scroll-top::-webkit-scrollbar-track { background: #f1f3f6; border-radius: 6px; }
    .master-scroll-top::-webkit-scrollbar-thumb { background: #b9c2d0; border-radius: 6px; }
    .master-scroll-top::-webkit-scrollbar-thumb:hover { background: #98a4b5; }
    .master-scroll-inner { height: 1px; }
</style>
@endpush

@section('content')
<!-- Page Header -->
<div class="page-header">
    <div class="row align-items-center">
        <div class="col-12">
            <h1><i class="bi bi-table me-3"></i>勞工總表</h1>
            <p class="mb-0 mt-2 opacity-75">所有工人資料合併成原版「康德美勞工總覽」44 欄版式，用於定期保存。可匯出 Excel（與匯入模板一致，可直接再匯入）。</p>
            <form method="GET" action="{{ route('workers_master.index') }}" class="d-flex gap-2 mt-3 search-inline">
                <input type="text"
                       name="keyword"
                       class="form-control search-input-wide"
                       placeholder="模糊搜尋：姓名、電話、身份證、公司、店鋪、地址（空格分隔多關鍵字）..."
                       value="{{ old('keyword', $keyword) }}">
                <button type="submit" class="btn btn-light text-nowrap">
                    <i class="bi bi-search me-1"></i>搜尋
                </button>
                <a href="{{ route('workers_master.export', array_filter(['keyword' => $keyword])) }}"
                   class="btn btn-light text-nowrap" title="依目前搜尋條件匯出 Excel">
                    <i class="bi bi-file-earmark-spreadsheet me-1"></i>匯出 Excel
                </a>
                @if($keyword)
                    <a href="{{ route('workers_master.index') }}" class="btn btn-outline-light text-nowrap">
                        <i class="bi bi-x-circle"></i>
                    </a>
                @endif
            </form>
        </div>
    </div>
</div>

<!-- Master Table -->
<div class="worker-table">
    <div class="master-scroll-top">
        <div class="master-scroll-inner"></div>
    </div>
    <div class="table-responsive">
        <table class="table table-hover table-sm mb-0" id="masterTable" style="font-size: 0.8rem;">
            <thead>
                <tr class="table-light">
                    @foreach($header as $title)
                        <th class="text-nowrap">{{ $title }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @forelse($rows as $row)
                    <tr>
                        @foreach($row as $value)
                            <td class="text-nowrap">{{ $value ?? '' }}</td>
                        @endforeach
                    </tr>
                @empty
                    <tr>
                        <td colspan="{{ max(count($header), 1) }}">
                            <div class="empty-state">
                                <i class="bi bi-inbox"></i>
                                <h4 class="text-muted">沒有符合的工人資料</h4>
                                <p class="text-muted">請調整搜尋條件或先匯入工人</p>
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="pagination-wrapper">
        <div class="d-flex justify-content-between align-items-center">
            <div class="pagination-stats">
                <i class="bi bi-list-ul me-2"></i>
                @if($rows->total() > 0)
                    顯示 {{ $rows->firstItem() }} 到 {{ $rows->lastItem() }} 筆，共 {{ $rows->total() }} 筆（44 欄完整版式）
                @else
                    共 0 筆（44 欄完整版式）
                @endif
            </div>
            @if($rows->hasPages())
                {{ $rows->withQueryString()->links('pagination::bootstrap-5') }}
            @endif
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var table = document.querySelector('#masterTable');
    var tableWrap = document.querySelector('.table-responsive');
    var scrollTop = document.querySelector('.master-scroll-top');
    var scrollInner = document.querySelector('.master-scroll-inner');

    if (!table || !tableWrap || !scrollTop || !scrollInner) return;

    // 上方捲動條寬度與表格同步
    function syncWidth() {
        scrollInner.style.width = table.scrollWidth + 'px';
    }
    syncWidth();
    window.addEventListener('resize', syncWidth);

    // 雙向同步捲動
    scrollTop.addEventListener('scroll', function () { tableWrap.scrollLeft = scrollTop.scrollLeft; });
    tableWrap.addEventListener('scroll', function () { scrollTop.scrollLeft = tableWrap.scrollLeft; });
});
</script>
@endpush