@extends('layouts.app1')
@section('title', '申請公司設備攜出')

@section('content')
  <style>
    .card-blue {
      border-color: #0d6efd;
    }

    .card-green {
      border-color: #198754;
    }

    .card-orange {
      border-color: #fd7e14;
    }
  </style>

  <div class="container py-4">
    <div class="d-flex align-items-center justify-content-between mb-4">
      <h3 class="mb-0">📤 申請公司設備攜出</h3>
      <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')

    <form id="outForm" action="{{ route('device-requests.out.store') }}" method="POST" class="needs-validation" novalidate>
      @csrf
      <input type="hidden" name="supervisor_id" value="{{ $defaultSupervisor->id ?? '' }}">

      {{-- ========== 區塊 1：基本資料 ========== --}}
      <div class="card mb-4 card-blue">
        <div class="card-header bg-primary text-white py-2">① 基本資料</div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label fw-bold">設備名稱 *</label>
              <select name="asset_id" id="asset_id" class="form-select" required>
                <option value="">請選擇設備</option>
                @foreach ($assets as $a)
                  <option value="{{ $a->id }}" data-sn="{{ $a->asset_sn }}">{{ $a->asset_name }}</option>
                @endforeach
              </select>
              <div class="invalid-feedback">必填</div>
            </div>

            <div class="col-md-6">
              <label class="form-label" for="bring_date">設備序號 (SN)</label>
              <input name="asset_sn" id="asset_sn" class="form-control" readonly>
            </div>
            <div class="col-md-6">
              <label class="form-label fw-bold">攜出日期 *</label>
              <input type="date" name="bring_date" class="form-control" required id="bring_date">
              <div class="invalid-feedback">必填</div>
            </div>
            <div class="col-md-6">
              <label class="form-label" for="return_date">預計攜回</label>
              <input type="date" name="return_date" class="form-control" id="return_date">
            </div>
          </div>
        </div>
      </div>

      {{-- ========== 區塊 2：攜出方式 ========== --}}
      <div class="card mb-4 card-green">
        <div class="card-header bg-success text-white py-2">② 攜出方式</div>
        <div class="card-body">
          <div class="form-check mb-2">
            <input class="form-check-input out-way" type="radio" id="way1" name="out_way" value="self" required>
            <label class="form-check-label" for="way1">自行攜進/出</label>
          </div>

          <div class="form-check mb-1">
            <input class="form-check-input out-way" type="radio" id="way2" name="out_way" value="freight" required>
            <label class="form-check-label" for="way2">貨運代送</label>
          </div>
          <div id="freight-block" class="ms-4 mb-2 d-none">
            <div class="row g-2">
              <div class="col-md-6">
                公司名稱 / 電話：
                <input name="freight_company" class="form-control form-control-sm">
              </div>
              <div class="col-md-6">
                貨運編號：
                <input name="freight_no" class="form-control form-control-sm">
              </div>
            </div>
          </div>

          <div class="form-check mb-1">
            <input class="form-check-input out-way" type="radio" id="way3" name="out_way" value="other" required>
            <label class="form-check-label" for="way3">其他　請說明：</label>
            <input id="other-way-txt" name="out_way_other"
              class="form-control form-control-sm d-inline-block w-50 ms-1 d-none">
          </div>

          <div class="invalid-feedback d-block" id="out-way-error" style="display:none;">
            請選擇攜出方式。
          </div>
        </div>
      </div>

      {{-- ========== 區塊 3：攜出原因 ========== --}}
      <div class="card mb-4 card-orange">
        <div class="card-header bg-warning text-dark py-2">③ 攜出說明（可複選）</div>
        <div class="card-body">
          <div class="form-check mb-2">
            <input class="form-check-input reason-cb" type="checkbox" id="r1" name="reasons[]"
              value="backup_offsite">
            <label class="form-check-label" for="r1">備份媒體異地儲存</label>
          </div>

          <div class="form-check mb-2">
            <input class="form-check-input reason-cb" type="checkbox" id="r2" name="reasons[]"
              value="backup_return">
            <label class="form-check-label" for="r2">異地儲存之備份媒體送回</label>
          </div>

          <div class="form-check mb-2">
            <input class="form-check-input reason-cb" type="checkbox" id="r3" name="reasons[]"
              value="new_device">
            <label class="form-check-label" for="r3">新增設備</label>
          </div>

          <div class="form-check mb-2">
            <input class="form-check-input reason-cb" type="checkbox" id="r4" name="reasons[]" value="repair">
            <label class="form-check-label" for="r4">
              設備送修（預計修復完成：
              <input type="date" name="repair_due" class="form-control form-control-sm d-inline-block w-auto ms-1"
                disabled id="repair-date">）
            </label>
          </div>

          <div class="form-check mb-2">
            <input class="form-check-input reason-cb" type="checkbox" id="r5" name="reasons[]"
              value="transfer">
            <label class="form-check-label" for="r5">
              <select name="transfer_type" class="form-select form-select-sm w-auto d-inline-block ms-1" disabled
                id="transfer-type">
                <option value="調">調</option>
                <option value="借">借</option>
                <option value="還">還</option>
              </select>
              單位：
              <input name="transfer_unit" id="transfer-unit" class="form-control form-control-sm d-inline-block w-25"
                disabled>
              聯絡人：
              <input name="transfer_contact" id="transfer-contact"
                class="form-control form-control-sm d-inline-block w-25" disabled>
              電話：
              <input name="transfer_tel" id="transfer-tel" class="form-control form-control-sm d-inline-block w-25"
                disabled>
              （預計歸還：
              <input type="date" name="transfer_due" class="form-control form-control-sm d-inline-block w-auto"
                disabled id="transfer-date">）
            </label>
          </div>

          <div class="form-check mb-2">
            <input class="form-check-input reason-cb" type="checkbox" id="r6" name="reasons[]" value="other">
            <label class="form-check-label" for="r6">
              其他　請說明：
              <input name="other_reason" id="other-reason" class="form-control form-control-sm d-inline-block w-50"
                disabled>
            </label>
          </div>

          <div id="reason-error" class="text-danger mt-1" style="display:none;">
            請至少勾選一項攜出原因。
          </div>
        </div>
      </div>

      {{-- ========== 備註 & 送出 ========== --}}
      <div class="mb-3">
        <label class="form-label" for="note">備註</label>
        <textarea name="note" rows="3" class="form-control" id="note"></textarea>
      </div>
      <input type="hidden" name="purpose" value="設備攜出">

      <div class="text-end">
        <button class="btn btn-primary">送出申請</button>
      </div>
    </form>
  </div>

  @push('scripts')
    <script>
      (() => {
        const form = document.getElementById('outForm');

        form.addEventListener('submit', e => {
          if (!form.checkValidity()) {
            e.preventDefault();
            e.stopPropagation();
          }

          const hasWay = [...document.querySelectorAll('.out-way')].some(r => r.checked);
          document.getElementById('out-way-error').style.display = hasWay ? 'none' : 'block';
          if (!hasWay) {
            e.preventDefault();
            e.stopPropagation();
          }

          const hasReason = [...document.querySelectorAll('.reason-cb')].some(c => c.checked);
          document.getElementById('reason-error').style.display = hasReason ? 'none' : 'block';
          if (!hasReason) {
            e.preventDefault();
            e.stopPropagation();
          }

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

        const freightBlock = document.getElementById('freight-block');
        const otherWayTxt = document.getElementById('other-way-txt');

        const clearInputs = selector => {
          document.querySelectorAll(selector).forEach(el => {
            el.value = '';
            el.disabled = true;
          });
        };

        document.getElementById('way1').addEventListener('change', e => {
          freightBlock.classList.add('d-none');
          otherWayTxt.classList.add('d-none');
          clearInputs('#freight-block input');
          otherWayTxt.value = '';
          otherWayTxt.disabled = true;
        });

        document.getElementById('way2').addEventListener('change', e => {
          freightBlock.classList.remove('d-none');
          otherWayTxt.classList.add('d-none');
          otherWayTxt.value = '';
          otherWayTxt.disabled = true;
          [...freightBlock.querySelectorAll('input')].forEach(el => el.disabled = false);
        });

        document.getElementById('way3').addEventListener('change', e => {
          otherWayTxt.classList.remove('d-none');
          otherWayTxt.disabled = false;
          freightBlock.classList.add('d-none');
          clearInputs('#freight-block input');
        });

        const enable = (cb, ids) => {
          ids.forEach(id => {
            const el = document.getElementById(id);
            el.disabled = !cb.checked;
            if (!cb.checked) {
              if (el.tagName === 'SELECT') el.selectedIndex = 0;
              else el.value = '';
            }
          });
        };

        document.getElementById('r4').addEventListener('change', e => enable(e.target, ['repair-date']));
        document.getElementById('r5').addEventListener('change', e => enable(e.target, ['transfer-type', 'transfer-unit',
          'transfer-contact', 'transfer-tel', 'transfer-date'
        ]));
        document.getElementById('r6').addEventListener('change', e => enable(e.target, ['other-reason']));
      })();
      document.getElementById('asset_id').addEventListener('change', function() {
        const selected = this.options[this.selectedIndex];
        const sn = selected.getAttribute('data-sn') || '';
        document.getElementById('asset_sn').value = sn;
      });
    </script>
  @endpush
@endsection