@extends('layouts.admin')

@section('title', '工人檔案')

@push('breadcrumb')
    <li class="breadcrumb-item active" aria-current="page">工人檔案</li>
@endpush

@push('styles')
<link rel="stylesheet" href="{{ asset('css/pages/workers.css') }}">
<style>
    /* ===== 卡片模式 ===== */
    .worker-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
    @media (max-width: 1199px) { .worker-cards { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 575px) { .worker-cards { grid-template-columns: 1fr; } }

    .worker-card {
        background: white; border-radius: 0.85rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06);
        padding: 1.15rem 1.25rem; cursor: pointer;
        transition: all 0.2s; border-left: 4px solid #4e73df; position: relative;
    }
    .worker-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.12); transform: translateY(-2px); }
    .worker-card.gender-male   { border-left-color: #4e73df; }
    .worker-card.gender-female { border-left-color: #e83e8c; }
    .worker-card.resigned      { border-left-color: #adb5bd; background: #f6f7f9; }

    .worker-card .initial-circle {
        width: 42px; height: 42px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-weight: 700; font-size: 1.15rem; color: white; flex-shrink: 0;
    }
    .worker-card.gender-male .initial-circle   { background: #4e73df; }
    .worker-card.gender-female .initial-circle { background: #e83e8c; }
    .worker-card.resigned .initial-circle      { background: #adb5bd; }

    .worker-card .card-top { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.55rem; }
    .worker-card .card-name { font-weight: 700; font-size: 1.35rem; color: #212529; line-height: 1.3; }
    .worker-card .card-en   { font-size: 0.95rem; color: #6c757d; margin-top: 0.05rem; }
    .worker-card .card-info { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; font-size: 0.82rem; color: #495057; }

    .worker-card .status-dot {
        position: absolute; top: 0.75rem; right: 0.85rem;
        font-size: 0.68rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 1rem;
    }
    .worker-card .status-active { background: #d1fae5; color: #065f46; }
    .worker-card .status-resigned { background: #e9ecef; color: #6c757d; }

    /* ===== 總表模式 ===== */
    .view-toggle .btn { min-width: 80px; }

    /* ===== 模式切換隱藏 ===== */
    .view-cards-wrap { display: none; }
    .view-table-wrap { display: none; }
    body.view-cards .view-cards-wrap { display: block; }
    body.view-table .view-table-wrap { display: block; }

    /* ===== 手機按鈕統一寬度 ===== */
    @media (max-width: 575.98px) {
        .d-flex.justify-content-end .btn,
        .d-flex.justify-content-end .btn-group .btn {
            padding: 0.35rem 0.55rem;
            min-width: 36px;
            font-size: 0.9rem;
        }
        .view-toggle .btn .btn-label { display: none; }
    }
</style>
@endpush

@section('content')
<!-- Page Header -->
<div class="page-header">
    <div class="row align-items-center">
        <div class="col-md-5">
            <h1><i class="bi bi-people-fill me-3"></i>工人檔案</h1>
        </div>
        <div class="col-md-7">
            <div class="d-flex justify-content-end mb-3 gap-2">
                <div class="view-toggle btn-group btn-group-sm" role="group" aria-label="顯示模式">
                    <button type="button" class="btn btn-outline-light active" id="btnCardView" title="精簡卡片">
                        <i class="bi bi-grid-3x3-gap"></i><span class="d-none d-sm-inline ms-1">精簡</span>
                    </button>
                    <button type="button" class="btn btn-outline-light" id="btnTableView" title="總表列表">
                        <i class="bi bi-list-ul"></i><span class="d-none d-sm-inline ms-1">總表</span>
                    </button>
                </div>
                <a href="{{ route('workers_master.index') }}" class="btn btn-outline-light" title="查看 44 欄完整版式總表">
                    <i class="bi bi-table"></i><span class="d-none d-sm-inline ms-1">勞工總表</span>
                </a>
                <a href="{{ route('workers.exportExcel', array_filter(['keyword' => request('keyword'), 'status' => request('status')])) }}" class="btn btn-outline-light" title="將目前篩選結果匯出成 Excel">
                    <i class="bi bi-file-earmark-spreadsheet"></i><span class="d-none d-sm-inline ms-1">匯出 Excel</span>
                </a>
                <a href="{{ route('workers.create') }}" class="btn btn-success" title="新增工人">
                    <i class="bi bi-person-plus-fill"></i><span class="d-none d-sm-inline ms-1">新增工人</span>
                </a>
            </div>
            <form action="{{ route('workers.index') }}" method="GET" class="search-box">
                <div class="d-flex align-items-center flex-wrap gap-2">
                    <input type="text"
                           name="keyword"
                           class="flex-grow-1"
                           placeholder="搜尋姓名、英文名、電話、身份證..."
                           value="{{ request('keyword') }}">
                    <select name="status" class="form-select w-auto" onchange="this.form.submit()" title="篩選在職狀態">
                        <option value="">全部狀態</option>
                        <option value="在職" @selected(request('status') === '在職')>在職</option>
                        <option value="離職" @selected(request('status') === '離職')>離職</option>
                    </select>
                    <select name="sort" class="form-select w-auto" onchange="this.form.submit()" title="排序方式">
                        <option value="name" @selected(request('sort', 'name') === 'name')>中文姓氏排序</option>
                        <option value="en_name" @selected(request('sort') === 'en_name')>英文姓氏排序</option>
                        <option value="gender" @selected(request('sort') === 'gender')>性別排序</option>
                    </select>
                    <button type="submit" class="btn btn-primary me-2">
                        <i class="bi bi-search me-1"></i>搜尋
                    </button>
                    @if(request('keyword') || request('status') || request('sort'))
                        <a href="{{ route('workers.index') }}" class="btn btn-outline-light">
                            <i class="bi bi-x-circle me-1"></i>清除
                        </a>
                    @endif
                </div>
            </form>
        </div>
    </div>
</div>

@php
    $sort = request('sort', 'name');
    $initial = function ($worker) use ($sort) {
        if ($sort === 'en_name') {
            $en = strtoupper(trim($worker->en_name ?? ''));
            return $en !== '' ? $en[0] : '?';
        }
        $zh = mb_substr($worker->zh_name ?? '', 0, 1);
        if ($zh && preg_match('/^\p{Han}/u', $zh)) return $zh;
        $en = strtoupper(trim($worker->en_name ?? ''));
        return $en !== '' ? $en[0] : '?';
    };
@endphp

<!-- 精簡卡片模式 -->
<div class="view-cards-wrap">
    <div class="worker-cards mb-3">
        @forelse ($workers as $worker)
            @php
                $isResigned = ($worker->employment_status ?? '在職') === '離職';
                $genderClass = $worker->gender == '女' ? 'gender-female' : 'gender-male';
                $cardClass = $isResigned ? 'resigned' : $genderClass;
            @endphp
            <a href="{{ route('workers.edit', $worker->id) }}" class="text-decoration-none">
                <div class="worker-card {{ $cardClass }}">
                    <span class="status-dot {{ $isResigned ? 'status-resigned' : 'status-active' }}">
                        {{ $worker->employment_status ?? '在職' }}
                    </span>
                    <div class="card-top">
                        <div class="initial-circle">{{ $initial($worker) }}</div>
                        <div>
                            <div class="card-name">{{ $worker->zh_name }}@if($worker->en_name) <span class="card-en">{{ $worker->en_name }}</span>@endif</div>
                        </div>
                    </div>
                    <div class="card-info">
                        @if($worker->phone_number)
                            <span><i class="bi bi-telephone me-1"></i>電話 {{ $worker->phone_number }}</span>
                        @endif
                        @if($worker->id_card)
                            <span><i class="bi bi-credit-card me-1"></i>身份證 {{ $worker->id_card }}</span>
                        @endif
                        @if($worker->mainland_id)
                            <span><i class="bi bi-credit-card-2-front me-1"></i>大陸證 {{ $worker->mainland_id }}</span>
                        @endif
                    </div>
                </div>
            </a>
        @empty
            <div style="grid-column: 1 / -1;">
                <div class="empty-state">
                    <i class="bi bi-inbox"></i>
                    <h4 class="text-muted">目前沒有工人資料</h4>
                    <p class="text-muted">請從 Excel 匯入或新增工人</p>
                    @can('performAdminAction')
                    <a href="{{ route('import.page') }}" class="btn btn-primary btn-lg">
                        <i class="bi bi-file-earmark-excel me-2"></i>Excel 匯入
                    </a>
                    @endcan
                </div>
            </div>
        @endforelse
    </div>
</div>

<!-- 總表列表模式 -->
<div class="view-table-wrap">
    <div class="worker-table mb-3">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th class="text-nowrap">中文姓名</th>
                        <th class="text-nowrap d-none d-md-table-cell">英文姓名</th>
                        <th class="text-nowrap d-none d-md-table-cell">性別</th>
                        <th class="text-nowrap d-none d-lg-table-cell">身份證號碼</th>
                        <th class="text-nowrap d-none d-lg-table-cell">電話號碼</th>
                        <th class="text-nowrap d-none d-lg-table-cell">在職狀態</th>
                        <th class="text-nowrap">所屬公司 / 店鋪</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($workers as $worker)
                        <tr style="cursor: pointer;" onclick="window.location='{{ route('workers.edit', $worker->id) }}'">
                            <td class="fw-semibold">{{ $worker->zh_name }}</td>
                            <td class="d-none d-md-table-cell text-muted">{{ $worker->en_name ?? '—' }}</td>
                            <td class="d-none d-md-table-cell">
                                <span class="gender-text {{ $worker->gender == '女' ? 'gender-female' : 'gender-male' }}">
                                    <i class="bi bi-gender-{{ $worker->gender == '女' ? 'female' : 'male' }} me-1"></i>{{ $worker->gender }}
                                </span>
                            </td>
                            <td class="d-none d-lg-table-cell">{{ $worker->id_card ?? '—' }}</td>
                            <td class="d-none d-lg-table-cell">{{ $worker->phone_number ?? '—' }}</td>
                            <td class="d-none d-lg-table-cell">
                                <span class="badge {{ ($worker->employment_status ?? '在職') === '離職' ? 'bg-secondary' : 'bg-success' }}">
                                    {{ $worker->employment_status ?? '在職' }}
                                </span>
                            </td>
                            <td>
                                @if($worker->branch)
                                    <span class="badge-company">{{ $worker->branch->company->name ?? '無公司' }}</span>
                                    <span class="badge-shop ms-1"><i class="bi bi-shop me-1"></i>{{ $worker->branch->name }}</span>
                                @else
                                    <span class="text-muted">未分配</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7">
                                <div class="empty-state">
                                    <i class="bi bi-inbox"></i>
                                    <h4 class="text-muted">目前沒有工人資料</h4>
                                    <p class="text-muted">請從 Excel 匯入或新增工人</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@if($workers->hasPages())
<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>
            顯示 {{ $workers->firstItem() }} 到 {{ $workers->lastItem() }} 筆，共 {{ $workers->total() }} 筆資料
        </div>
        <div>
            {{ $workers->links('pagination::bootstrap-5') }}
        </div>
    </div>
</div>
@endif
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var btnCard  = document.getElementById('btnCardView');
    var btnTable = document.getElementById('btnTableView');
    var KEY = 'workers_view_mode';

    function setView(mode) {
        document.body.classList.remove('view-cards', 'view-table');
        document.body.classList.add('view-' + mode);
        btnCard.classList.toggle('active', mode === 'cards');
        btnTable.classList.toggle('active', mode === 'table');
        try { localStorage.setItem(KEY, mode); } catch(e) {}
    }

    // 還原上次選擇，預設卡片
    var saved = 'cards';
    try { saved = localStorage.getItem(KEY) || 'cards'; } catch(e) {}
    setView(saved);

    btnCard.addEventListener('click',  function () { setView('cards'); });
    btnTable.addEventListener('click', function () { setView('table'); });
});
</script>
@endpush