@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; }
    .progress-table { min-width: 1780px; }
    .progress-table td, .progress-table th { vertical-align: middle; }
    .progress-table .cell-wrap { white-space: normal; word-break: break-word; min-width: 90px; }
    .progress-table .badge-company { white-space: normal; word-break: break-word; display: inline-block; }
    .progress-table .col-issue { min-width: 220px; }
    .progress-table .col-date { min-width: 106px; white-space: nowrap; }
    .progress-table tbody tr { cursor: pointer; }

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

    .prog-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 #667eea;
    }
    .prog-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.12); transform: translateY(-2px); }
    .prog-card .prog-no { font-weight: 700; font-size: 1.15rem; color: #212529; }
    .prog-card .prog-company { font-size: 0.85rem; color: #6c757d; margin-top: 0.1rem; }
    .prog-card .prog-details { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; font-size: 0.82rem; color: #495057; margin-top: 0.5rem; }
    .prog-card .prog-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; }

    /* 手機只顯示 icon */
    @media (max-width: 575.98px) {
        .view-toggle .btn .btn-label { display: none; }
        .view-toggle .btn { min-width: 36px; padding: 0.35rem 0.55rem; }
    }
</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-list-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('application_progresses.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('application_progresses.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="prog-cards mb-3">
        @forelse ($progresses as $progress)
            <a href="{{ route('application_progresses.edit', $progress) }}" class="text-decoration-none">
                <div class="prog-card">
                    <div class="prog-no">{{ $progress->labor_dept_no ?? '—' }}</div>
                    <div class="prog-company">{{ $progress->company?->name ?? '未分配公司' }}</div>
                    <div class="prog-details">
                        @if($progress->position)
                            <span><i class="bi bi-briefcase"></i>職位 {{ $progress->position }}</span>
                        @endif
                        <span><i class="bi bi-calendar-event"></i>批文日期 {{ $progress->approval_date?->format('Y-m-d') ?? '—' }}</span>
                        <span><i class="bi bi-calendar-check"></i>結束日期 {{ $progress->approval_end_date?->format('Y-m-d') ?? '—' }}</span>
                    </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('application_progresses.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: 1780px;"></div></div>
        <div class="table-responsive">
            <table class="table table-hover mb-0 progress-table" id="progressTable">
                <thead>
                    <tr>
                        <th class="text-nowrap">勞工處檔案編號</th>
                        <th class="text-nowrap">公司名稱</th>
                        <th class="text-nowrap">職位名稱</th>
                        <th class="text-nowrap">職位編號</th>
                        <th class="col-date text-nowrap">批文日期</th>
                        <th class="col-date text-nowrap">批文結束日期</th>
                        <th class="text-nowrap">批文人工</th>
                        <th class="text-nowrap">工作時間</th>
                        <th class="text-nowrap">公司聯絡人</th>
                        <th class="col-date text-nowrap">申請日期</th>
                        <th class="text-nowrap">勞工主任</th>
                        <th class="text-nowrap">電話號碼</th>
                        <th class="col-date text-nowrap">刊登報紙</th>
                        <th class="col-date text-nowrap">交勞固會</th>
                        <th class="col-issue">問題進度</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($progresses as $progress)
                        <tr data-href="{{ route('application_progresses.edit', $progress) }}">
                            <td>
                                @if($progress->labor_dept_no)
                                    <span class="labor-dept-no">{{ $progress->labor_dept_no }}</span>
                                @else
                                    <span class="text-muted">未填寫</span>
                                @endif
                            </td>
                            <td>
                                @if($progress->company)
                                    <span class="badge-company cell-wrap">{{ $progress->company->name }}</span>
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                            </td>
                            <td class="cell-wrap">{{ $progress->position ?? '—' }}</td>
                            <td>{{ $progress->pos_code ?? '—' }}</td>
                            <td class="col-date">{{ $progress->approval_date?->format('Y-m-d') ?? '—' }}</td>
                            <td class="col-date">{{ $progress->approval_end_date?->format('Y-m-d') ?? '—' }}</td>
                            <td>{{ $progress->salary_approval ? number_format((float) $progress->salary_approval) : '—' }}</td>
                            <td>{{ $progress->work_hours ?? '—' }}</td>
                            <td class="cell-wrap">{{ $progress->company_contact ?? '—' }}</td>
                            <td class="col-date">{{ $progress->apply_date?->format('Y-m-d') ?? '—' }}</td>
                            <td class="cell-wrap">{{ $progress->officer_name ?? '—' }}</td>
                            <td>{{ $progress->officer_phone ?? '—' }}</td>
                            <td class="col-date">{{ $progress->publish_ad_date?->format('Y-m-d') ?? '—' }}</td>
                            <td class="col-date">{{ $progress->submit_labour_date?->format('Y-m-d') ?? '—' }}</td>
                            <td class="col-issue cell-wrap">
                                @if($progress->issue_progress)
                                    <span title="{{ $progress->issue_progress }}">{{ $progress->issue_progress }}</span>
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                            </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('application_progresses.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($progresses->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>
            顯示 {{ $progresses->firstItem() }} 到 {{ $progresses->lastItem() }} 筆，共 {{ $progresses->total() }} 筆資料
        </div>
        <div>
            {{ $progresses->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 = 'app_progress_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('#progressTable 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