@extends('layouts.app1')

@section('content')
  <div class="container py-4">
    <div class="d-flex align-items-center justify-content-between mb-4">
      <h1 class="mb-0">電腦設備攜入申請</h1>
      <a href="{{ route('device-requests.index') }}" class="btn btn-sm btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i>返回清單
      </a>
    </div>

    @include('partials.alert')

    {{-- ===== 申請表單（預設隱藏） ===== --}}
    <div id="form-section" class="d-none">
      <form id="deviceForm" action="{{ route('device-requests.in.store') }}" method="POST" novalidate>
        @csrf
        <input type="hidden" name="supervisor_id" value="{{ $defaultSupervisor->id }}">

        {{-- 使用場地 --}}
        <div class="mb-3">
          <label class="form-label fw-bold">使用場地 <span class="text-danger">*</span></label><br>
          @foreach (['meeting_room' => '會議室', 'office' => '辦公室', 'server_room' => '機房', 'other' => '其他'] as $k => $txt)
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="place" id="place-{{ $k }}"
                value="{{ $k }}" {{ old('place', 'office') === $k ? 'checked' : '' }} required>
              <label class="form-check-label" for="place-{{ $k }}">{{ $txt }}</label>
            </div>
          @endforeach
          <input id="place-other-text" name="place_other_text"
            class="form-control form-control-sm w-auto d-inline-block ms-2 mt-2 d-none" placeholder="請輸入其它場地"
            value="{{ old('place_other_text') }}">
          <div class="invalid-feedback">請選擇使用場地或填寫「其他場地」。</div>
        </div>

        {{-- 攜入設備類別 --}}
        <div class="mb-3">
          <label class="form-label fw-bold">攜入設備類別 <span class="text-danger">*</span></label><br>
          @php $oldTypes = old('device_type', []); @endphp
          @foreach (['nb' => '筆記型電腦', 'media' => '可攜式儲存媒體', 'other' => '其它'] as $val => $lbl)
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" name="device_type[]" id="cb-{{ $val }}"
                value="{{ $val }}" {{ in_array($val, $oldTypes) ? 'checked' : '' }}>
              <label class="form-check-label" for="cb-{{ $val }}">{{ $lbl }}</label>
            </div>
          @endforeach
          <div id="device-type-error" class="text-danger mt-1" style="display:none;">
            請至少勾選一種攜入設備類別。
          </div>
        </div>

        {{-- 筆電詳細 --}}
        <div id="nb-section" class="border rounded p-3 mb-3 bg-light d-none">
          <h6 class="fw-bold mb-3">（1）筆記型電腦</h6>
          <div class="row g-3">
            <div class="col-md-4">
              <div class="form-floating">
                <input name="model" class="form-control" value="{{ old('model') }}">
                <label>型式</label>
                <div class="invalid-feedback">請填寫型式。</div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-floating">
                <input name="brand" class="form-control" value="{{ old('brand') }}">
                <label>廠牌</label>
                <div class="invalid-feedback">請填寫廠牌。</div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-floating">
                <input name="nb_av" class="form-control" value="{{ old('nb_av') }}">
                <label>防毒軟體</label>
                <div class="invalid-feedback">請填寫防毒軟體。</div>
              </div>
            </div>
            <div class="col-12 mt-2">
              <label class="form-label">病毒碼是否已更新最新狀態 <span class="text-danger">*</span></label><br>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="av_updated" value="1"
                  {{ old('av_updated') == '1' ? 'checked' : '' }} required>
                <label class="form-check-label">是</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="av_updated" value="0"
                  {{ old('av_updated', '0') === '0' ? 'checked' : '' }} required>
                <label class="form-check-label">否</label>
              </div>
              <div class="invalid-feedback d-block">請選擇是否已更新病毒碼。</div>
            </div>
          </div>
        </div>
        {{-- 儲存媒體詳細 --}}
        <div id="media-section" class="border rounded p-3 mb-3 bg-light d-none">
          <h6 class="fw-bold mb-3">（2）可攜式儲存媒體</h6>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" name="item_usb" value="1"
              {{ old('item_usb') ? 'checked' : '' }}>
            <label class="form-check-label">隨身碟</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" name="item_hdd" value="1"
              {{ old('item_hdd') ? 'checked' : '' }}>
            <label class="form-check-label">抽取式硬碟</label>
          </div>
        </div>

        {{-- 其它詳細 --}}
        <div id="other-section" class="border rounded p-3 mb-3 bg-light d-none">
          <h6 class="fw-bold mb-3">（3）其它</h6>
          <input name="item_other_name" class="form-control" placeholder="請輸入其它項目" value="{{ old('item_other_name') }}">
        </div>

        {{-- 使用目的 --}}
        <div class="form-floating mb-3">
          <textarea name="purpose" class="form-control" style="height:90px" required>{{ old('purpose') }}</textarea>
          <label>使用目的 *</label>
          <div class="invalid-feedback">請填寫使用目的。</div>
        </div>

        {{-- 攜入／攜出日期 --}}
        <div class="row g-3 mb-3">
          <div class="col-md-6">
            <div class="form-floating">
              <input type="date" name="bring_date" id="bring_date" class="form-control"
                value="{{ old('bring_date') }}" required>
              <label>攜入日期 *</label>
              <div class="invalid-feedback">請填寫攜入日期。</div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-floating">
              <input type="date" name="return_date" id="return_date" class="form-control"
                value="{{ old('return_date') }}">
              <label>預計攜出</label>
              <div class="invalid-feedback d-block" id="return-date-feedback" style="display:none;">
                攜出日期不得超過攜入日期 30 天。
              </div>
            </div>
          </div>
        </div>

        {{-- 備註 --}}
        <div class="form-floating mb-4">
          <textarea name="note" class="form-control" style="height:80px">{{ old('note') }}</textarea>
          <label>備註</label>
        </div>

        {{-- 送出按鈕 --}}
        <div class="text-end">
          <button class="btn btn-primary">送出申請</button>
        </div>
      </form>
    </div>
  </div>
@endsection

{{-- ===== Modal：切結注意事項 ===== --}}
@push('bottom')
  <div class="modal fade" id="termsModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">設備攜入切結注意事項</h5>
        </div>
        <div class="modal-body">
          <ol>
            <li>因作業需要使用可攜式設備，茲切結遵守貴公司資訊安全相關規定，並負資訊保密責任。</li>
            <li>如需使用可攜式設備存取本公司設施時，請填寫本切結送請審查後方可使用。</li>
            <li>臨時維修時請逐次填寫，以利管控。</li>
            <li>本切結紀錄表由資訊單位妥善保管，以供核對與必要時之追溯使用。</li>
          </ol>
          <div class="form-check mt-3">
            <input class="form-check-input" type="checkbox" id="modalAgreeCheckbox">
            <label class="form-check-label" for="modalAgreeCheckbox">
              我已閱讀並同意上述注意事項
            </label>
          </div>
          <div id="modalAgreeError" class="text-danger mt-1" style="display:none;">
            請先勾選同意切結注意事項才能繼續申請。
          </div>
        </div>
        <div class="modal-footer">
          <button id="modalAgreeBtn" class="btn btn-primary" disabled>我同意並繼續</button>
        </div>
      </div>
    </div>
  </div>
@endpush

{{-- ===== Modal：切結注意事項 ===== --}}
@push('bottom')
  <div class="modal fade" id="termsModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">切結注意事項</h5>
        </div>
        <div class="modal-body">
          <ol>
            <li>因作業需要使用可攜式設備，茲切結遵守貴公司資訊安全相關規定，並負資訊保密責任。</li>
            <li>如需使用可攜式設備存取本公司設施時，請填寫本切結送請審查後方可使用。</li>
            <li>臨時維修時請逐次填寫，以利管控。</li>
            <li>本切結紀錄表由資訊單位妥善保管，以供核對與必要時之追溯使用。</li>
          </ol>
          <div class="form-check mt-3">
            <input class="form-check-input" type="checkbox" id="modalAgreeCheckbox">
            <label class="form-check-label" for="modalAgreeCheckbox">
              我已閱讀並同意上述注意事項
            </label>
          </div>
          <div id="modalAgreeError" class="text-danger mt-1" style="display:none;">
            請先勾選同意切結注意事項才能繼續申請。
          </div>
        </div>
        <div class="modal-footer">
          <button id="modalAgreeBtn" class="btn btn-primary" disabled>我同意並繼續</button>
        </div>
      </div>
    </div>
  </div>
@endpush

@push('scripts')
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      // 1. 彈出 Modal
      const termsModal = new bootstrap.Modal(document.getElementById('termsModal'));
      termsModal.show();

      // 2. 同意才能顯示表單
      const cb = document.getElementById('modalAgreeCheckbox');
      const btn = document.getElementById('modalAgreeBtn');
      cb.addEventListener('change', () => {
        btn.disabled = !cb.checked;
        document.getElementById('modalAgreeError').style.display = cb.checked ? 'none' : 'block';
      });
      btn.addEventListener('click', () => {
        if (cb.checked) {
          termsModal.hide();
          document.getElementById('form-section').classList.remove('d-none');
        }
      });
      // 3. Bootstrap5 驗證
      const form = document.getElementById('deviceForm');
      form.addEventListener('submit', function(e) {
        if (!form.checkValidity()) {
          e.preventDefault();
          e.stopPropagation();
        }

        // 設備類別必選
        const types = document.getElementsByName('device_type[]');
        const ok = Array.from(types).some(c => c.checked);
        document.getElementById('device-type-error').style.display = ok ? 'none' : 'block';
        if (!ok) {
          e.preventDefault();
          e.stopPropagation();
        }

        form.classList.add('was-validated');
      });

      // 4. 子區塊顯示
      const map = {
        'cb-nb': 'nb-section',
        'cb-media': 'media-section',
        'cb-other': 'other-section'
      };
      Object.keys(map).forEach(id => {
        document.getElementById(id).addEventListener('change', () => {
          document.getElementById(map[id])
            .classList.toggle('d-none', !document.getElementById(id).checked);
        });
      });

      // 5. 場地其他輸入
      document.querySelectorAll('input[name="place"]').forEach(r => r.addEventListener('change', () => {
        document.getElementById('place-other-text')
          .classList.toggle('d-none',
            document.querySelector('input[name="place"]:checked').value !== 'other');
      }));

      // 6. 攜出日期限制
      const bring = document.getElementById('bring_date');
      const ret = document.getElementById('return_date');
      const retFb = document.getElementById('return-date-feedback');

      function updateReturn() {
        const b = new Date(bring.value);
        if (!isNaN(b)) {
          const m = new Date(b);
          m.setDate(b.getDate() + 30);
          ret.min = bring.value;
          ret.max = m.toISOString().slice(0, 10);
          const r = new Date(ret.value);
          if (ret.value && r > m) {
            ret.classList.add('is-invalid');
            retFb.style.display = 'block';
          } else {
            ret.classList.remove('is-invalid');
            retFb.style.display = 'none';
          }
        }
      }
      bring.addEventListener('change', updateReturn);
      ret.addEventListener('input', updateReturn);
      updateReturn();
    });
  </script>
@endpush