@extends('layouts.app')

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

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

  {{-- Step 1：申請模式 --}}
  <p class="text-muted mb-2 fw-bold">步驟一：選擇申請類型</p>
  <div class="row g-3 mb-4">
    <div class="col-md-4">
      <div class="card h-100 border-2 mode-card" data-mode="self" role="button" style="cursor:pointer;">
        <div class="card-body text-center py-4">
          <div class="mb-2"><i class="bi bi-person-check 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 mode-card" data-mode="other" role="button" style="cursor:pointer;">
        <div class="card-body text-center py-4">
          <div class="mb-2"><i class="bi bi-people fs-1 text-success"></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 mode-card" data-mode="deactivate" role="button" style="cursor:pointer;">
        <div class="card-body text-center py-4">
          <div class="mb-2"><i class="bi bi-person-x fs-1 text-danger"></i></div>
          <h6 class="fw-bold">申請停用</h6>
          <small class="text-muted">申請停用主機或信箱帳號</small>
        </div>
      </div>
    </div>
  </div>

  {{-- Step 2：帳號類型（本人 / 協助 時顯示） --}}
  <div id="typeStep" style="display:none;">
    <p class="text-muted mb-2 fw-bold">步驟二：選擇帳號類型</p>
    <div class="row g-3 mb-4">
      <div class="col-md-6">
        <div class="card h-100 border-2 type-card" data-type="host_account" role="button" style="cursor:pointer;">
          <div class="card-body text-center py-4">
            <div class="mb-2"><i class="bi bi-hdd-network fs-1 text-primary"></i></div>
            <h6 class="fw-bold">主機連線帳號</h6>
            <small class="text-muted">SSH / RDP 主機連線</small>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card h-100 border-2 type-card" data-type="email_account" role="button" style="cursor:pointer;">
          <div class="card-body text-center py-4">
            <div class="mb-2"><i class="bi bi-envelope-at fs-1 text-success"></i></div>
            <h6 class="fw-bold">信箱申請</h6>
            <small class="text-muted">公司信箱帳號</small>
          </div>
        </div>
      </div>
    </div>
  </div>

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

        {{-- 協助申請：被申請人姓名 --}}
        <div id="otherNameRow" style="display:none;" class="mb-3">
          <label class="form-label fw-bold">被申請人中文姓名 <span class="text-danger">*</span></label>
          <input type="text" name="chinese_name" id="chineseNameOther" class="form-control" style="max-width:300px;"
            value="{{ old('chinese_name') }}" placeholder="例如：王小明">
        </div>

        {{-- 主機連線帳號欄位 --}}
        <div id="fields_host" style="display:none;">
          <div class="row mb-3">
            <div class="col-md-6">
              <label class="form-label fw-bold">主機名稱 / IP <span class="text-danger">*</span></label>
              <input type="text" name="host_info" id="hostInfo" class="form-control"
                value="{{ old('host_info') }}" placeholder="例如：192.168.1.100 或 server01.steps.com.tw">
            </div>
            <div class="col-md-6">
              <label class="form-label fw-bold">申請帳號名稱 <span class="text-danger">*</span></label>
              <input type="text" name="username" id="usernameHost" class="form-control"
                value="{{ old('username') }}" placeholder="例如：john 或 deploy">
            </div>
          </div>
        </div>

        {{-- 信箱申請欄位 --}}
        <div id="fields_email" style="display:none;">
          <div class="row mb-3">
            <div class="col-md-5">
              <label class="form-label fw-bold">中文姓名 <span class="text-danger">*</span></label>
              <input type="text" name="chinese_name" id="chineseNameSelf" class="form-control"
                value="{{ old('chinese_name') }}" placeholder="例如：王小明">
              <div class="form-text">用於建立信箱顯示名稱。</div>
            </div>
            <div class="col-md-7">
              <label class="form-label fw-bold">申請信箱帳號 <span class="text-danger">*</span></label>
              <div class="input-group">
                <input type="text" name="username" id="usernameEmail" class="form-control"
                  value="{{ old('username') }}" placeholder="例如：john.doe">
                <span class="input-group-text text-muted">@steps.com.tw</span>
              </div>
            </div>
          </div>
        </div>

        {{-- 申請停用欄位 --}}
        <div id="fields_deactivate" style="display:none;">
          <div class="row mb-3">
            <div class="col-md-4">
              <label class="form-label fw-bold">帳號類型 <span class="text-danger">*</span></label>
              <select name="deactivate_type" id="deactivateType" class="form-select">
                <option value="">-- 請選擇 --</option>
                <option value="host"  @selected(old('deactivate_type') === 'host')>主機帳號</option>
                <option value="email" @selected(old('deactivate_type') === 'email')>信箱帳號</option>
              </select>
            </div>
            <div class="col-md-4">
              <label class="form-label fw-bold">帳號名稱 <span class="text-danger">*</span></label>
              <input type="text" name="username" id="usernameDeactivate" class="form-control"
                value="{{ old('username') }}" placeholder="要停用的帳號">
            </div>
            <div class="col-md-4" id="deactivateHostRow" style="display:none;">
              <label class="form-label fw-bold">主機名稱 / IP</label>
              <input type="text" name="host_info" id="hostInfoDeactivate" class="form-control"
                value="{{ old('host_info') }}" placeholder="選填">
            </div>
          </div>
        </div>

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

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

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  const modeCards   = document.querySelectorAll('.mode-card');
  const typeStep    = document.getElementById('typeStep');
  const typeCards   = document.querySelectorAll('.type-card');
  const formCard    = document.getElementById('formCard');
  const formTitle   = document.getElementById('formTitle');
  const requestType = document.getElementById('requestType');
  const applyFor    = document.getElementById('applyFor');

  let currentMode = '';
  let currentType = '';

  function setModeActive(mode) {
    modeCards.forEach(c => {
      const on = c.dataset.mode === mode;
      c.classList.toggle('border-primary', on);
      c.classList.toggle('bg-primary',     on);
      c.classList.toggle('bg-opacity-10',  on);
    });
  }

  function setTypeActive(type) {
    typeCards.forEach(c => {
      const on = c.dataset.type === type;
      c.classList.toggle('border-success', on);
      c.classList.toggle('bg-success',     on);
      c.classList.toggle('bg-opacity-10',  on);
    });
  }

  function showFields(mode, type) {
    // 隱藏所有欄位區塊
    ['fields_host', 'fields_email', 'fields_deactivate', 'otherNameRow'].forEach(id => {
      const el = document.getElementById(id);
      if (el) el.style.display = 'none';
    });
    // 清除所有 username/chinese_name disabled 狀態
    document.querySelectorAll('input[name="username"], input[name="chinese_name"]').forEach(el => {
      el.disabled = true;
      el.required = false;
    });

    if (mode === 'deactivate') {
      document.getElementById('fields_deactivate').style.display = '';
      document.getElementById('usernameDeactivate').disabled = false;
      document.getElementById('usernameDeactivate').required = true;
      requestType.value = 'deactivate';
      applyFor.value    = '';
      formTitle.textContent = '申請停用';
      formCard.style.display = '';
      return;
    }

    if (!type) return;

    applyFor.value    = mode;
    requestType.value = type;

    if (mode === 'other') {
      document.getElementById('otherNameRow').style.display = '';
      document.getElementById('chineseNameOther').disabled = false;
      document.getElementById('chineseNameOther').required = true;
    }

    if (type === 'host_account') {
      document.getElementById('fields_host').style.display = '';
      document.getElementById('usernameHost').disabled = false;
      document.getElementById('usernameHost').required = true;
      document.getElementById('hostInfo').required = true;
    } else {
      document.getElementById('fields_email').style.display = '';
      if (mode === 'self') {
        document.getElementById('chineseNameSelf').disabled = false;
        document.getElementById('chineseNameSelf').required = true;
      }
      document.getElementById('usernameEmail').disabled = false;
      document.getElementById('usernameEmail').required = true;
    }

    const modeLabel = mode === 'self' ? '本人申請' : '協助申請';
    const typeLabel = type === 'host_account' ? '主機連線帳號' : '信箱';
    formTitle.textContent = `${modeLabel} — ${typeLabel}`;
    formCard.style.display = '';
  }

  modeCards.forEach(c => c.addEventListener('click', function () {
    currentMode = this.dataset.mode;
    setModeActive(currentMode);

    if (currentMode === 'deactivate') {
      typeStep.style.display = 'none';
      currentType = '';
      showFields('deactivate', '');
    } else {
      typeStep.style.display = '';
      formCard.style.display = 'none';
      currentType = '';
      setTypeActive('');
    }
  }));

  typeCards.forEach(c => c.addEventListener('click', function () {
    currentType = this.dataset.type;
    setTypeActive(currentType);
    showFields(currentMode, currentType);
  }));

  // 停用帳號類型切換 - 顯示/隱藏主機欄位
  const deactivateType = document.getElementById('deactivateType');
  if (deactivateType) {
    deactivateType.addEventListener('change', function () {
      const hostRow = document.getElementById('deactivateHostRow');
      hostRow.style.display = this.value === 'host' ? '' : 'none';
    });
  }

  // 還原 old() 狀態
  const oldMode = '{{ old("apply_for") ? (old("request_type") === "deactivate" ? "deactivate" : old("apply_for")) : "" }}';
  const oldType = '{{ old("request_type", "") }}';
  if (oldMode) {
    currentMode = oldMode === 'deactivate' ? 'deactivate' : oldMode;
    setModeActive(currentMode);
    if (oldType && oldType !== 'deactivate') {
      typeStep.style.display = '';
      currentType = oldType;
      setTypeActive(currentType);
    }
    showFields(currentMode, currentMode === 'deactivate' ? '' : oldType);
  }
});
</script>
@endpush