@extends('layouts.admin')

@section('title', '履歷查看')

@push('breadcrumb')
    <li class="breadcrumb-item active" aria-current="page">履歷查看</li>
@endpush

@section('content')
@php
    $ageOptions = range(18, 60);
    $sortParams = array_filter([
        'keyword' => request('keyword'),
        'gender' => request('gender'),
        'job_type_id' => request('job_type_id'),
        'age' => request('age'),
        'age_min' => request('age_min'),
        'age_max' => request('age_max'),
        'sort' => request('sort'),
        'direction' => request('direction'),
    ]);
    $toggleDir = fn (string $col) => request('sort') === $col && request('direction') === 'asc' ? 'desc' : 'asc';
@endphp
<div class="page-header">
    <h1><i class="bi bi-file-earmark-person me-3"></i>履歷查看</h1>
</div>

<div class="row">
    {{-- 左：上載 + 工種管理 --}}
    <div class="col-lg-4 mb-4">
        <div class="card mb-3" style="border-radius: 1rem; border: none; box-shadow: 0 4px 15px rgba(0,0,0,0.08);">
            <div class="card-header" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); color: white; font-weight: 600; border: none;">
                <i class="bi bi-cloud-arrow-up me-2"></i>上載履歷
            </div>
            <div class="card-body p-4">
                <form action="{{ route('resumes.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="file" name="file" class="form-control"
                           accept="application/pdf,.pdf" required>
                    <div class="form-text mb-3">每次上載一份 PDF（≤10MB），一份 PDF 內可包含多份履歷。上載後會彈出視窗補填資料，填完一位按「新增資料」可繼續輸入下一位。</div>
                    <button type="submit" class="btn btn-success w-100">
                        <i class="bi bi-upload me-2"></i>上載履歷
                    </button>
                </form>
            </div>
        </div>

        <div class="card" style="border-radius: 1rem; border: none; box-shadow: 0 4px 15px rgba(0,0,0,0.08);">
            <div class="card-header" style="background: #f8f9ff; color: #667eea; font-weight: 600; border: none;">
                <i class="bi bi-briefcase me-2"></i>應聘工種管理
            </div>
            <div class="card-body text-center">
                <button type="button" class="btn btn-outline-primary w-100" data-bs-toggle="modal" data-bs-target="#jobTypeModal">
                    <i class="bi bi-list-check me-1"></i>管理工種（{{ $jobTypes->count() }} 個）
                </button>
                <div class="form-text mt-2">所有使用者可新增工種；刪除僅限管理員，且被履歷使用的工種無法刪除。</div>
            </div>
        </div>
    </div>

    {{-- 右：清單 --}}
    <div class="col-lg-8 mb-4">
        {{-- 篩選 --}}
        <div class="card mb-3" style="border-radius: 1rem; border: none; box-shadow: 0 4px 15px rgba(0,0,0,0.08);">
            <div class="card-body">
                <form method="GET" class="row g-2 align-items-end">
                    <div class="col-md-3">
                        <label class="form-label small mb-1">姓名</label>
                        <input type="text" name="keyword" value="{{ request('keyword') }}" class="form-control form-control-sm" placeholder="搜尋姓名...">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small mb-1">應聘工種</label>
                        <select name="job_type_id" class="form-select form-select-sm">
                            <option value="">不限</option>
                            @foreach($jobTypes as $type)
                                <option value="{{ $type->id }}" @selected(request('job_type_id') == $type->id)>{{ $type->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small mb-1">性別</label>
                        <div class="btn-group btn-group-sm w-100" role="group" aria-label="性別篩選">
                            <input type="radio" class="btn-check" name="gender" id="genderAll" value="全" @checked(request('gender', '全') === '全' || request('gender') === '')>
                            <label class="btn btn-outline-secondary" for="genderAll">全</label>
                            <input type="radio" class="btn-check" name="gender" id="genderMale" value="男" @checked(request('gender') === '男')>
                            <label class="btn btn-outline-secondary" for="genderMale">男</label>
                            <input type="radio" class="btn-check" name="gender" id="genderFemale" value="女" @checked(request('gender') === '女')>
                            <label class="btn btn-outline-secondary" for="genderFemale">女</label>
                        </div>
                    </div>
                    @php
                        $useAgeRange = request()->filled('age_min') || request()->filled('age_max');
                    @endphp
                    <div class="col-md-2">
                        <label class="form-label small mb-1">年齡</label>
                        <select name="age" id="ageSelect" class="form-select form-select-sm" @disabled($useAgeRange)>
                            <option value="">不限</option>
                            @foreach($ageOptions as $age)
                                <option value="{{ $age }}" @selected(! $useAgeRange && request('age') == $age)>{{ $age }}</option>
                            @endforeach
                            <option value="range" @selected($useAgeRange)>自訂範圍</option>
                        </select>
                        <div class="d-flex gap-1 @if(! $useAgeRange) d-none @endif" id="ageRangeInputs">
                            <input type="number" name="age_min" value="{{ request('age_min') }}" min="18" max="60"
                                   class="form-control form-control-sm" placeholder="由" @disabled(! $useAgeRange)>
                            <input type="number" name="age_max" value="{{ request('age_max') }}" min="18" max="60"
                                   class="form-control form-control-sm" placeholder="至" @disabled(! $useAgeRange)>
                        </div>
                    </div>
                    <div class="col-md-2 d-flex gap-1">
                        <button type="submit" class="btn btn-primary btn-sm flex-fill"><i class="bi bi-search"></i></button>
                        <a href="{{ route('resumes.index') }}" class="btn btn-outline-secondary btn-sm" title="清除篩選"><i class="bi bi-x-lg"></i></a>
                    </div>
                </form>
            </div>
        </div>

        {{-- 清單 --}}
        <div class="card" style="border-radius: 1rem; border: none; box-shadow: 0 4px 15px rgba(0,0,0,0.08);">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>
                                <a class="text-decoration-none text-dark" href="{{ route('resumes.index', array_merge($sortParams, ['sort' => 'name', 'direction' => $toggleDir('name')])) }}">
                                    姓名 <i class="bi bi-arrow-down-up small"></i>
                                </a>
                            </th>
                            <th>
                                <a class="text-decoration-none text-dark" href="{{ route('resumes.index', array_merge($sortParams, ['sort' => 'gender', 'direction' => $toggleDir('gender')])) }}">
                                    性別 <i class="bi bi-arrow-down-up small"></i>
                                </a>
                            </th>
                            <th>
                                <a class="text-decoration-none text-dark" href="{{ route('resumes.index', array_merge($sortParams, ['sort' => 'age', 'direction' => $toggleDir('age')])) }}">
                                    年齡 <i class="bi bi-arrow-down-up small"></i>
                                </a>
                            </th>
                            <th>
                                <a class="text-decoration-none text-dark" href="{{ route('resumes.index', array_merge($sortParams, ['sort' => 'job_type', 'direction' => $toggleDir('job_type')])) }}">
                                    應聘工種 <i class="bi bi-arrow-down-up small"></i>
                                </a>
                            </th>
                            <th>檔案</th>
                            <th>上載</th>
                            <th class="text-nowrap">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($resumes as $resume)
                            @php
                                $pending = $resume->isPending();
                                $canEdit = $resume->canBeEditedBy(auth()->user());
                                $canDelete = $resume->canBeDeletedBy(auth()->user());
                            @endphp
                            <tr class="{{ $pending ? 'table-warning' : '' }}">
                                <td>
                                    @if($pending)
                                        <span class="badge bg-warning text-dark">待填資料</span>
                                    @else
                                        <strong>{{ $resume->name }}</strong>
                                    @endif
                                </td>
                                <td>{{ $resume->gender ?? '—' }}</td>
                                <td>{{ $resume->age ?? '—' }}</td>
                                <td>{{ $resume->jobType?->name ?? '—' }}</td>
                                <td class="small text-truncate" style="max-width: 160px;">
                                    <a href="{{ route('resumes.view', $resume) }}" target="_blank" title="開新視窗查看">
                                        <i class="bi bi-file-earmark-pdf text-danger me-1"></i>{{ $resume->original_filename }}
                                    </a>
                                </td>
                                <td class="small text-nowrap">
                                    {{ $resume->created_at->format('Y-m-d') }}
                                    @if($resume->uploader)<div class="text-muted">{{ $resume->uploader->name }}</div>@endif
                                </td>
                                <td>
                                    <div class="d-flex gap-1 align-items-center">
                                        @if($canEdit)
                                            <button type="button" class="btn btn-sm btn-outline-primary py-0 px-2" title="編輯"
                                                    data-bs-toggle="modal" data-bs-target="#resumeEditModal"
                                                    data-resume-id="{{ $resume->id }}"
                                                    data-url="{{ route('resumes.update', $resume) }}"
                                                    data-name="{{ $resume->name }}"
                                                    data-gender="{{ $resume->gender }}"
                                                    data-age="{{ $resume->age }}"
                                                    data-job-type-id="{{ $resume->job_type_id }}"
                                                    data-filename="{{ $resume->original_filename }}"
                                                    data-pending="{{ $pending ? '1' : '0' }}">
                                                ✏️
                                            </button>
                                        @endif
                                        @if($canDelete)
                                            <form action="{{ route('resumes.destroy', $resume) }}" method="POST"
                                                  onsubmit="return confirm('確定刪除此履歷？');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-outline-danger py-0 px-2" title="刪除"><i class="bi bi-trash"></i></button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center text-muted py-5">
                                    <i class="bi bi-file-earmark-person fs-1 d-block mb-2"></i>
                                    沒有符合的履歷
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($resumes->hasPages())
                <div class="card-footer bg-white">
                    {{ $resumes->links() }}
                </div>
            @endif
        </div>

        <div class="small text-muted mt-2">
            <i class="bi bi-info-circle me-1"></i>
            刪除權限：上載者當日可刪除；之後僅管理員可刪除。資料編輯限上載者或管理員。
        </div>
    </div>
</div>
{{-- 編輯履歷浮動視窗（全頁共用一個） --}}
<div class="modal fade" id="resumeEditModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="resumeEditForm" method="POST">
                @csrf
                @method('PUT')
                <input type="hidden" name="add_another" id="addAnotherFlag" value="0">
                <div class="modal-header py-2">
                    <h6 class="modal-title"><i class="bi bi-pencil-square me-2"></i>履歷資料</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="關閉"></button>
                </div>
                <div class="modal-body">
                    <div class="small text-muted mb-2" id="editFileInfo"></div>
                    <div class="mb-3">
                        <label class="form-label small mb-1 fw-semibold">姓名 *</label>
                        <input type="text" name="name" id="editName" class="form-control form-control-sm" required maxlength="255">
                    </div>
                    <div class="row g-2">
                        <div class="col-4">
                            <label class="form-label small mb-1 fw-semibold">性別</label>
                            <div class="d-flex gap-3 pt-1">
                                <div class="form-check mb-0">
                                    <input class="form-check-input" type="radio" name="gender" id="editGenderMale" value="男">
                                    <label class="form-check-label" for="editGenderMale">男</label>
                                </div>
                                <div class="form-check mb-0">
                                    <input class="form-check-input" type="radio" name="gender" id="editGenderFemale" value="女">
                                    <label class="form-check-label" for="editGenderFemale">女</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-4">
                            <label class="form-label small mb-1 fw-semibold">年齡</label>
                            <select name="age" id="editAge" class="form-select form-select-sm">
                                <option value="">—</option>
                                @foreach($ageOptions as $age)
                                    <option value="{{ $age }}">{{ $age }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-4">
                            <label class="form-label small mb-1 fw-semibold">工種</label>
                            <select name="job_type_id" id="editJobType" class="form-select form-select-sm">
                                <option value="">—</option>
                                @foreach($jobTypes as $type)
                                    <option value="{{ $type->id }}">{{ $type->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer py-2">
                    <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-sm btn-success" id="addAnotherBtn"
                            title="儲存後為同一份 PDF 再建立下一份履歷資料">
                        <i class="bi bi-plus-lg me-1"></i>新增資料
                    </button>
                    <button type="submit" class="btn btn-sm btn-primary">儲存</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- 應聘工種管理彈窗 --}}
<div class="modal fade" id="jobTypeModal" tabindex="-1" aria-labelledby="jobTypeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h5 class="modal-title fs-6" id="jobTypeModalLabel">
                    <i class="bi bi-briefcase me-1"></i>應聘工種管理（{{ $jobTypes->count() }} 個）
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="關閉"></button>
            </div>
            <div class="modal-body">
                <form action="{{ route('job_types.store') }}" method="POST" class="d-flex gap-2 mb-3">
                    @csrf
                    <input type="text" name="name" class="form-control form-control-sm" placeholder="新增工種名稱" required maxlength="100">
                    <button type="submit" class="btn btn-sm btn-primary text-nowrap"><i class="bi bi-plus-lg"></i> 新增</button>
                </form>
                <div class="d-flex flex-wrap gap-1">
                    @forelse($jobTypes as $type)
                        <span class="badge bg-light text-dark border d-inline-flex align-items-center gap-1">
                            {{ $type->name }}
                            @can('performAdminAction')
                            <form action="{{ route('job_types.destroy', $type) }}" method="POST" class="d-inline"
                                  onsubmit="return confirm('確定刪除工種「{{ $type->name }}」？');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-link btn-sm p-0 text-danger" title="刪除" style="line-height:1;">×</button>
                            </form>
                            @endcan
                        </span>
                    @empty
                        <span class="text-muted small">尚無工種</span>
                    @endforelse
                </div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">關閉</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('resumeEditModal')?.addEventListener('show.bs.modal', function (event) {
    const btn = event.relatedTarget;
    if (!btn) return;
    const form = document.getElementById('resumeEditForm');
    form.action = btn.dataset.url;
    document.getElementById('addAnotherFlag').value = '0';
    document.getElementById('editName').value = btn.dataset.name ?? '';
    document.querySelectorAll('#resumeEditForm input[name="gender"]').forEach(function (radio) {
        radio.checked = radio.value === (btn.dataset.gender ?? '');
    });
    document.getElementById('editAge').value = btn.dataset.age ?? '';
    document.getElementById('editJobType').value = btn.dataset.jobTypeId ?? '';
    const info = document.getElementById('editFileInfo');
    let text = btn.dataset.filename ? '檔案：' + btn.dataset.filename : '';
    if (btn.dataset.pending === '1') {
        text += '（同一份 PDF 內可能有多份履歷：填完一位按「新增資料」繼續輸入下一位）';
    }
    info.textContent = text;
});

// 年齡篩選：指定年齡 ↔ 自訂範圍切換
(function () {
    const ageSelect = document.getElementById('ageSelect');
    const ageRange = document.getElementById('ageRangeInputs');
    if (!ageSelect || !ageRange) return;

    ageSelect.addEventListener('change', function () {
        const isRange = this.value === 'range';
        this.disabled = isRange;               // 範圍模式時不送出 age
        ageRange.classList.toggle('d-none', !isRange);
        ageRange.querySelectorAll('input').forEach(function (input) {
            input.disabled = !isRange;
        });
    });
})();

// 按「新增資料」時打開標記，讓後端為同一份 PDF 建立下一筆待填記錄
document.getElementById('addAnotherBtn')?.addEventListener('click', function () {
    document.getElementById('addAnotherFlag').value = '1';
});

// 上載後帶 ?edit=<id> 回來，自動彈出該筆的補填視窗
window.addEventListener('DOMContentLoaded', function () {
    const editId = new URLSearchParams(window.location.search).get('edit');
    if (editId) {
        document.querySelector('button[data-resume-id="' + editId + '"]')?.click();
    }
});
</script>
@endpush