@extends('layouts.app')

@section('content')
  @php
    $today = now()->toDateString();
    $maxDate = now()->addDays(30)->toDateString();
  @endphp

  <div class="container my-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h1>Redmine 服務申請</h1>
      <a href="{{ route('redmine-requests.index') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left"></i> 返回列表
      </a>
    </div>

    @if (session('success'))
      <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if ($errors->any())
      <div class="alert alert-danger">
        <ul class="mb-0">
          @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
    @endif

    {{-- 申請類型選擇卡片 --}}
    <div class="row g-3 mb-4">
      <div class="col-md-4">
        <div class="card h-100 border-2 type-card" data-type="new_account" role="button"
             style="cursor:pointer;">
          <div class="card-body text-center py-4">
            <div class="mb-2"><i class="bi bi-person-plus fs-1 text-success"></i></div>
            <h6 class="fw-bold">新增帳號</h6>
            <small class="text-muted">申請全新的 Redmine 帳號</small>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card h-100 border-2 type-card" data-type="join_project" role="button"
             style="cursor:pointer;">
          <div class="card-body text-center py-4">
            <div class="mb-2"><i class="bi bi-folder-plus fs-1 text-primary"></i></div>
            <h6 class="fw-bold">加入專案</h6>
            <small class="text-muted">已有帳號，申請加入特定專案</small>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card h-100 border-2 type-card" data-type="new_project" role="button"
             style="cursor:pointer;">
          <div class="card-body text-center py-4">
            <div class="mb-2"><i class="bi bi-kanban fs-1 text-warning"></i></div>
            <h6 class="fw-bold">新增專案</h6>
            <small class="text-muted">申請在 Redmine 建立新專案</small>
          </div>
        </div>
      </div>
    </div>

    {{-- 申請表單 --}}
    <div class="card" id="formCard" style="display:none;">
      <div class="card-header bg-success text-white">
        <i class="bi bi-pencil-square"></i> <span id="formTitle">填寫申請資訊</span>
      </div>
      <div class="card-body">
        <form action="{{ route('redmine-requests.store') }}" method="POST">
          @csrf
          <input type="hidden" name="request_type" id="requestType" value="{{ old('request_type', 'new_account') }}">

          {{-- ===== 新增帳號專用欄位 ===== --}}
          <div class="type-fields" data-for="new_account">
            <div class="row mb-3">
              <div class="col-md-6">
                <label for="username" class="form-label fw-bold">申請帳號 <span class="text-danger">*</span></label>
                <input type="text" id="username" name="username" class="form-control"
                  value="{{ old('username') }}" placeholder="Redmine 登入帳號">
              </div>
              <div class="col-md-6">
                <label for="redmine_email" class="form-label fw-bold">電子郵件 <span class="text-danger">*</span></label>
                <input type="email" id="redmine_email" name="email" class="form-control"
                  value="{{ old('email', auth()->user()->email) }}" placeholder="Redmine 帳號綁定的 Email">
                <div class="form-text">預設帶入您的 Email，若為新員工申請可修改。</div>
              </div>
            </div>
            <div class="row mb-3">
              <div class="col-md-6">
                <label for="password" class="form-label fw-bold">密碼 <span class="text-danger">*</span></label>
                <input type="password" id="password" name="password" class="form-control">
                <div class="form-text text-danger">密碼至少 8 碼，建議包含大小寫英文、數字、特殊符號。</div>
              </div>
              <div class="col-md-6">
                <label for="expire_date" class="form-label fw-bold">到期日 <span class="text-danger">*</span></label>
                <input type="date" id="expire_date" name="expire_date" class="form-control"
                  value="{{ old('expire_date', $today) }}" min="{{ $today }}" max="{{ $maxDate }}">
                <div class="form-text text-muted">可選擇 {{ $today }} ~ {{ $maxDate }}。</div>
              </div>
            </div>
            <div class="mb-3">
              <label for="project_id" class="form-label fw-bold">指派專案</label>
              <select id="project_id" name="project_id" class="form-select">
                <option value="">-- 不指定專案 --</option>
                @foreach ($projects as $p)
                  <option value="{{ $p['id'] }}" @selected(old('project_id') == $p['id'])>
                    {{ $p['name'] }}（{{ $p['identifier'] }}）
                  </option>
                @endforeach
              </select>
              <div class="form-text">選填，核准後會自動將帳號加入該專案。</div>
            </div>
          </div>

          {{-- ===== 加入專案專用欄位 ===== --}}
          <div class="type-fields" data-for="join_project" style="display:none;">
            <div class="row mb-3">
              <div class="col-md-6">
                <label for="redmine_login" class="form-label fw-bold">您的 Redmine 帳號 <span class="text-danger">*</span></label>
                <input type="text" id="redmine_login" name="redmine_login" class="form-control"
                  value="{{ old('redmine_login') }}" placeholder="已有的 Redmine 登入帳號">
              </div>
              <div class="col-md-6">
                <label for="join_project_id" class="form-label fw-bold">要加入的專案 <span class="text-danger">*</span></label>
                <select id="join_project_id" name="join_project_id" class="form-select">
                  <option value="">-- 請選擇專案 --</option>
                  @foreach ($projects as $p)
                    <option value="{{ $p['id'] }}" @selected(old('join_project_id') == $p['id'])>
                      {{ $p['name'] }}（{{ $p['identifier'] }}）
                    </option>
                  @endforeach
                </select>
              </div>
            </div>
          </div>

          {{-- ===== 新增專案專用欄位 ===== --}}
          <div class="type-fields" data-for="new_project" style="display:none;">
            <div class="row mb-3">
              <div class="col-md-6">
                <label for="project_name" class="form-label fw-bold">專案名稱 <span class="text-danger">*</span></label>
                <input type="text" id="project_name" name="project_name" class="form-control"
                  value="{{ old('project_name') }}" placeholder="例如：智新官網改版">
              </div>
              <div class="col-md-6">
                <label for="project_identifier" class="form-label fw-bold">專案 Identifier <span class="text-danger">*</span></label>
                <input type="text" id="project_identifier" name="project_identifier" class="form-control"
                  value="{{ old('project_identifier') }}" placeholder="例如：steps-web（小寫英數、連字號）"
                  pattern="[a-z0-9\-_]+">
                <div class="form-text">唯一識別碼，僅限小寫英文、數字、連字號。</div>
              </div>
            </div>
            <div class="mb-3">
              <label for="project_description" class="form-label fw-bold">專案描述</label>
              <textarea id="project_description" name="project_description" class="form-control" rows="2"
                placeholder="選填，專案說明">{{ old('project_description') }}</textarea>
            </div>
          </div>

          {{-- ===== 共用欄位 ===== --}}
          <div class="mb-3">
            <label for="reason" class="form-label fw-bold">申請原因 <span class="text-danger">*</span></label>
            <textarea id="reason" name="reason" class="form-control" rows="3" required
              placeholder="請說明申請原因">{{ old('reason') }}</textarea>
          </div>

          <hr>
          <div class="d-flex justify-content-end gap-2">
            <a href="{{ route('redmine-requests.index') }}" class="btn btn-secondary">
              <i class="bi bi-x-lg"></i> 取消
            </a>
            <button type="submit" class="btn btn-success">
              <i class="bi bi-send"></i> 送出申請
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  const cards = document.querySelectorAll('.type-card');
  const formCard = document.getElementById('formCard');
  const typeInput = document.getElementById('requestType');
  const formTitle = document.getElementById('formTitle');
  const titles = {
    new_account: '新增帳號申請',
    join_project: '加入專案申請',
    new_project: '新增專案申請',
  };

  function selectType(type) {
    // 卡片 active 狀態
    cards.forEach(c => {
      c.classList.toggle('border-success', c.dataset.type === type);
      c.classList.toggle('bg-success', c.dataset.type === type);
      c.classList.toggle('bg-opacity-10', c.dataset.type === type);
    });

    // 切換欄位顯示
    document.querySelectorAll('.type-fields').forEach(f => {
      const show = f.dataset.for === type;
      f.style.display = show ? '' : 'none';
      // 隱藏的欄位移除 required
      f.querySelectorAll('input, select, textarea').forEach(el => {
        if (show) {
          if (el.dataset.wasRequired) el.required = true;
        } else {
          el.dataset.wasRequired = el.required;
          el.required = false;
        }
      });
    });

    typeInput.value = type;
    formTitle.textContent = titles[type] || '填寫申請資訊';
    formCard.style.display = '';
  }

  cards.forEach(c => c.addEventListener('click', () => selectType(c.dataset.type)));

  // 如果有 old() 值，自動選擇
  const oldType = '{{ old("request_type", "") }}';
  if (oldType) selectType(oldType);
});
</script>
@endpush