@extends('layouts.app')

@section('title', '工人管理')

@section('content')
<div class="page-hero p-4 p-lg-4 mb-3">
    <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
        <div>
            <div class="page-title mb-1">工人管理</div>
            <div class="page-subtitle">建立、搜尋、修改與刪除工人資料，保持名單乾淨好查找。</div>
        </div>
        <a href="{{ route('workers.create') }}" class="btn btn-success"><i class="fa-solid fa-user-plus me-1"></i>新增工人</a>
    </div>
</div>

<div class="card card-soft mb-3">
    <div class="card-body">
        <form method="get" class="row g-3 align-items-end">
            <div class="col-md-4">
                <label class="form-label">搜尋</label>
                <input type="text" name="search" value="{{ $filters['search'] ?? '' }}" class="form-control" placeholder="工號 / 姓名 / 國籍 / 電話">
            </div>
            <div class="col-md-3">
                <label class="form-label">狀態</label>
                <select name="active" class="form-select">
                    <option value="">全部</option>
                    <option value="1" @selected(($filters['active'] ?? '') === '1')>在職</option>
                    <option value="0" @selected(($filters['active'] ?? '') === '0')>離職</option>
                </select>
            </div>
            <div class="col-md-5 d-flex gap-2">
                <button class="btn btn-primary">搜尋</button>
                <a href="{{ route('workers.index') }}" class="btn btn-outline-secondary">清除</a>
            </div>
        </form>
    </div>
</div>

<div class="card card-soft">
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0" id="workersTable">
            <thead class="table-light">
                <tr>
                    <th>工號</th>
                    <th>姓名</th>
                    <th>國籍</th>
                    <th>性別</th>
                    <th>時薪</th>
                    <th>電話</th>
                    <th>在職</th>
                    <th class="text-end">操作</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($workers as $worker)
                    <tr>
                        <td>{{ $worker->no }}</td>
                        <td>{{ $worker->name }}</td>
                        <td>{{ $worker->country }}</td>
                        <td>{{ $worker->gender }}</td>
                        <td>NT$ {{ number_format($worker->hour_salary) }}</td>
                        <td>{{ $worker->phone ?: '-' }}</td>
                        <td>{!! $worker->active ? '<span class="badge text-bg-success">在職</span>' : '<span class="badge text-bg-secondary">離職</span>' !!}</td>
                        <td class="text-end">
                            <div class="d-inline-flex gap-2 justify-content-end flex-wrap">
                                <a href="{{ route('workers.show', $worker->id) }}" class="btn btn-outline-secondary">查看</a>
                                <a href="{{ route('workers.edit', $worker->id) }}" class="btn btn-outline-primary">修改</a>
                                <form method="post" action="{{ route('workers.destroy', $worker->id) }}" onsubmit="return confirm('確定刪除這位工人嗎？');">
                                    @csrf
                                    @method('delete')
                                    <button type="submit" class="btn btn-outline-danger">刪除</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<div class="mt-3 d-flex justify-content-end">{{ $workers->links() }}</div>
@endsection

@push('scripts')
<script>
    $('#workersTable').DataTable({
        paging: false,
        info: false,
        ordering: true,
        searching: true,
        language: { url: 'https://cdn.datatables.net/plug-ins/1.13.8/i18n/zh-HANT.json' }
    });
</script>
@endpush