@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>
    /* 總表模式 */
    .table-scroll-top { overflow-x: auto; }
    .table-scroll-top::-webkit-scrollbar { height: 12px; }
    .table-scroll-top::-webkit-scrollbar-track { background: #f1f3f6; border-radius: 8px; }
    .table-scroll-top::-webkit-scrollbar-thumb { background: #b9c2d0; border-radius: 8px; }
    .table-scroll-top::-webkit-scrollbar-thumb:hover { background: #98a4b5; }
    .steps-table { min-width: 1900px; }
    .steps-table td, .steps-table th { vertical-align: middle; }
    .steps-table .cell-wrap { white-space: normal; word-break: break-word; min-width: 110px; }
    .steps-table .badge-company { white-space: normal; word-break: break-word; display: inline-block; }
    .steps-table tbody tr { cursor: pointer; }

    /* 精簡卡片模式 */
    .step-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
    @media (max-width: 1199px) { .step-cards { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 575px) { .step-cards { grid-template-columns: 1fr; } }

    .step-card {
        background: white; border-radius: 0.85rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06);
        padding: 1rem 1.2rem; cursor: pointer;
        transition: all 0.2s; border-left: 4px solid #1cc88a;
    }
    .step-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.12); transform: translateY(-2px); }
    .step-card .step-name { font-weight: 700; font-size: 1.3rem; color: #212529; }
    .step-card .step-company { font-size: 0.85rem; color: #6c757d; margin-top: 0.1rem; }
    .step-card .step-details { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; font-size: 0.82rem; color: #495057; margin-top: 0.5rem; }
    .step-card .step-details i { width: 15px; text-align: center; margin-right: 0.25rem; color: #6c757d; }

    /* 切換按鈕 */
    .view-toggle .btn { min-width: 62px; }
    .view-scroll-wrap { display: none; }
    .view-compact-wrap { display: none; }
    body.view-scroll .view-scroll-wrap { display: block; }
    body.view-compact .view-compact-wrap { display: block; }

    /* 手機版 */
    .pagination-wrapper .pagination-stats { white-space: normal; }
    .pagination-wrapper .pagination { flex-wrap: wrap; margin-bottom: 0; }
    @media (max-width: 575.98px) {
        .view-toggle .btn .btn-label { display: none; }
        .view-toggle .btn { min-width: 36px; padding: 0.35rem 0.55rem; }
        .d-flex.justify-content-end .btn { padding: 0.35rem 0.55rem; min-width: 36px; font-size: 0.9rem; }
    }
</style>
@endpush

@section('content')
<!-- Page Header -->
<div class="page-header">
    <div class="row align-items-center">
        <div class="col-md-6">
            <h1><i class="bi bi-clipboard-check me-3"></i>勞工申請進度</h1>
        </div>
        <div class="col-md-6">
            <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="btnCompact" title="精簡">
                        <i class="bi bi-grid-3x3-gap"></i><span class="btn-label ms-1">精簡</span>
                    </button>
                    <button type="button" class="btn btn-outline-light" id="btnScroll" title="總表">
                        <i class="bi bi-list-ul"></i><span class="btn-label ms-1">總表</span>
                    </button>
                </div>
                <a href="{{ route('labor_application_steps.create') }}" class="btn btn-success" title="新增進度">
                    <i class="bi bi-plus-lg"></i><span class="d-none d-sm-inline ms-1">新增進度</span>
                </a>
            </div>
            <form action="{{ route('labor_application_steps.index') }}" method="GET" class="search-box">
                <div class="d-flex align-items-center gap-2">
                    <select name="company_id" class="form-select" style="max-width: 220px;">
                        <option value="">全部公司</option>
                        @foreach($companies as $company)
                            <option value="{{ $company->id }}" @selected(request('company_id') == $company->id)>{{ $company->name }}</option>
                        @endforeach
                    </select>
                    <input type="text"
                           name="keyword"
                           class="form-control flex-grow-1"
                           placeholder="搜尋姓名..."
                           value="{{ request('keyword') }}">
                    <button type="submit" class="btn btn-primary text-nowrap">
                        <i class="bi bi-search me-1"></i>搜尋
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 精簡模式 — 卡片 -->
<div class="view-compact-wrap">
    <div class="step-cards mb-3">
        @forelse ($steps as $step)
            <a href="{{ route('labor_application_steps.edit', $step) }}" class="text-decoration-none">
                <div class="step-card">
                    <div class="step-name">{{ $step->zh_name }}</div>
                    <div class="step-company">{{ $step->company?->name ?? '未分配公司' }}</div>
                    <div class="step-details">
                        @if($step->submit_imm_date)
                            <span><i class="bi bi-airplane"></i>交出入境 {{ $step->submit_imm_date->format('Y-m-d') }}</span>
                        @endif
                        @if($step->est_permit_date)
                            <span><i class="bi bi-calendar-event"></i>預出許可證 {{ $step->est_permit_date->format('Y-m-d') }}</span>
                        @endif
                        @if($step->actual_permit_date)
                            <span><i class="bi bi-calendar-check"></i>實際出證 {{ $step->actual_permit_date->format('Y-m-d') }}</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>
                    <a href="{{ route('labor_application_steps.create') }}" class="btn btn-primary btn-lg mt-2">
                        <i class="bi bi-plus-lg me-2"></i>新增第一筆
                    </a>
                </div>
            </div>
        @endforelse
    </div>
</div>

<!-- 總表模式 -->
<div class="view-scroll-wrap">
    <div class="worker-table mb-3">
        <div class="table-scroll-top" aria-hidden="true"><div style="height: 1px; min-width: 1900px;"></div></div>
        <div class="table-responsive">
            <table class="table table-hover mb-0 steps-table" id="stepsTable">
                <thead>
                    <tr>
                        <th class="text-nowrap">公司名稱</th>
                        <th class="text-nowrap">姓名</th>
                        <th class="text-nowrap">收資料時間（大陸）</th>
                        <th class="text-nowrap">收資料（香港）</th>
                        <th class="text-nowrap">簽名</th>
                        <th class="text-nowrap">交出入境</th>
                        <th class="text-nowrap">預出許可證日期</th>
                        <th class="text-nowrap">實際出證日期</th>
                        <th class="text-nowrap">VISA</th>
                        <th class="text-nowrap">辦逗留簽</th>
                        <th class="text-nowrap">簡介會時間</th>
                        <th class="text-nowrap">簡介會地點</th>
                        <th class="text-nowrap">具體位置</th>
                        <th class="text-nowrap">申請身份證時間</th>
                        <th class="text-nowrap">身份證辦理地址</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($steps as $step)
                        <tr data-href="{{ route('labor_application_steps.edit', $step) }}">
                            <td>
                                @if($step->company)
                                    <span class="badge-company cell-wrap">{{ $step->company->name }}</span>
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                            </td>
                            <td class="worker-name text-nowrap">{{ $step->zh_name }}</td>
                            <td>{{ $step->collect_cn_date?->format('Y-m-d') ?? '—' }}</td>
                            <td>{{ $step->collect_hk_date?->format('Y-m-d') ?? '—' }}</td>
                            <td>{{ $step->signature_date?->format('Y-m-d') ?? '—' }}</td>
                            <td>{{ $step->submit_imm_date?->format('Y-m-d') ?? '—' }}</td>
                            <td>{{ $step->est_permit_date?->format('Y-m-d') ?? '—' }}</td>
                            <td>{{ $step->actual_permit_date?->format('Y-m-d') ?? '—' }}</td>
                            <td>{{ $step->visa_date?->format('Y-m-d') ?? '—' }}</td>
                            <td>{{ $step->stay_permit_date?->format('Y-m-d') ?? '—' }}</td>
                            <td class="cell-wrap">{{ $step->briefing_date?->format('Y-m-d H:i') ?? '—' }}</td>
                            <td class="cell-wrap">{{ $step->briefingLocation?->name ?? '—' }}</td>
                            <td class="cell-wrap">{{ $step->briefing_address ?? '—' }}</td>
                            <td class="cell-wrap">{{ $step->id_apply_date?->format('Y-m-d H:i') ?? '—' }}</td>
                            <td class="cell-wrap">{{ $step->id_apply_address ?? '—' }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="15">
                                <div class="empty-state">
                                    <i class="bi bi-inbox"></i>
                                    <h4 class="text-muted">目前沒有勞工申請進度資料</h4>
                                    <a href="{{ route('labor_application_steps.create') }}" class="btn btn-primary btn-lg mt-2">
                                        <i class="bi bi-plus-lg me-2"></i>新增第一筆
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@if($steps->hasPages())
<div class="pagination-wrapper">
    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
        <div class="pagination-stats">
            <i class="bi bi-list-ul me-2"></i>
            顯示 {{ $steps->firstItem() }} 到 {{ $steps->lastItem() }} 筆，共 {{ $steps->total() }} 筆資料
        </div>
        <div class="ms-md-auto">
            {{ $steps->links('pagination::bootstrap-5') }}
        </div>
    </div>
</div>
@endif
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var btnCompact = document.getElementById('btnCompact');
    var btnScroll  = document.getElementById('btnScroll');
    var KEY = 'labor_steps_view_mode';

    function setView(mode) {
        document.body.classList.remove('view-compact', 'view-scroll');
        document.body.classList.add('view-' + mode);
        btnCompact.classList.toggle('active', mode === 'compact');
        btnScroll.classList.toggle('active', mode === 'scroll');
        try { localStorage.setItem(KEY, mode); } catch(e) {}
    }

    var saved = 'compact';
    try { saved = localStorage.getItem(KEY) || 'compact'; } catch(e) {}
    setView(saved);

    btnCompact.addEventListener('click', function () { setView('compact'); });
    btnScroll.addEventListener('click', function () { setView('scroll'); });

    // 總表模式：上方同步捲動軸
    var top = document.querySelector('.table-scroll-top');
    var table = document.querySelector('.view-scroll-wrap .table-responsive');
    if (top && table) {
        top.addEventListener('scroll', function () { table.scrollLeft = top.scrollLeft; });
        table.addEventListener('scroll', function () { top.scrollLeft = table.scrollLeft; });
    }

    // 總表模式：點列進入編輯（操作欄除外）
    document.querySelectorAll('#stepsTable tbody tr[data-href]').forEach(function (row) {
        row.addEventListener('click', function (e) {
            if (e.target.closest('a') || e.target.closest('button') || e.target.closest('form')) return;
            if (e.target.closest('.action-buttons')) return;
            window.location.href = row.dataset.href;
        });
    });
});
</script>
@endpush