@extends('layouts.app')

@section('title', '定期利用・契約状況')

@section('content')
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6"><h1 class="m-0 text-dark">定期利用・契約状況</h1></div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right text-sm">
          <li class="breadcrumb-item"><a href="{{ route('home') }}">ホーム</a></li>
          <li class="breadcrumb-item active">定期利用・契約状況</li>
        </ol>
      </div>
    </div>
  </div>
</div>

<section class="content">
  <div class="container-fluid">
    <div class="card card-body mb-3">
      <form class="form-inline" onsubmit="return false;">
        <label class="mr-2 mb-0">駐輪場：</label>
        <select name="park_id" id="park_id" class="form-control mr-3">
          <option value="">全て</option>
          @foreach ($parks as $p)
            <option value="{{ $p->park_id }}" {{ (string)$selectedParkId === (string)$p->park_id ? 'selected' : '' }}>
              {{ $p->park_name }}
            </option>
          @endforeach
        </select>
      </form>
      <small class="text-muted d-block mt-2">
        以下に記載以外の期間情報を参照したい場合は、マスタ管理＞定期期間マスタのCSV出力を利用してください。
      </small>
    </div>

    <div id="stats-sections" style="display:none;">
      <div class="card mb-3">
        <div class="card-header p-2">契約状況</div>
        <div class="card-body p-2">
          <table class="table table-bordered mb-0 text-center">
            <thead>
              <tr>
                <th rowspan="2" class="align-middle">契約状況</th>
                <th rowspan="2" class="align-middle">一般</th>
                <th rowspan="2" class="align-middle">学生</th>
                <th rowspan="2" class="align-middle">利用計</th>
                <th rowspan="2" class="align-middle">空き</th>
                <th rowspan="2" class="align-middle">合計</th>
                <th colspan="2">直近契約</th>
              </tr>
              <tr>
                <th>予約日</th>
                <th>契約日</th>
              </tr>
            </thead>
            <tbody id="tbl-contract-summary"></tbody>
          </table>
        </div>
      </div>

      <div class="card mb-3">
        <div class="card-header p-2">空き待ち状況</div>
        <div class="card-body p-2">
          <table class="table table-bordered mb-0 text-center">
            <thead>
              <tr>
                <th rowspan="2" class="align-middle">空き待ち状況</th>
                <th colspan="2">一般</th>
                <th colspan="2">学生</th>
                <th rowspan="2" class="align-middle">合計</th>
              </tr>
              <tr>
                <th>件数</th>
                <th>先頭日</th>
                <th>件数</th>
                <th>先頭日</th>
              </tr>
            </thead>
            <tbody id="tbl-waiting-summary"></tbody>
          </table>
        </div>
      </div>

      <div class="card">
        <div class="card-header p-2">更新状況</div>
        <div class="card-body p-2">
          <table class="table table-bordered mb-0 text-center">
            <thead>
              <tr>
                <th rowspan="2" class="align-middle" style="min-width:70px">月</th>
                <th rowspan="2" class="align-middle" style="min-width:60px">更新状況</th>
                <th colspan="3">自転車</th>
                <th colspan="3">原付</th>
                <th colspan="3">その他</th>
              </tr>
              <tr>
                <th>一般</th><th>学生</th><th>計</th>
                <th>一般</th><th>学生</th><th>計</th>
                <th>一般</th><th>学生</th><th>計</th>
              </tr>
            </thead>
            <tbody id="tbl-renewal-summary"></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>
@endsection

@push('scripts')
<script>
(function() {
  function $(sel){return document.querySelector(sel)}
  function $tb(id){return document.getElementById(id)}
  function escapeHtml(s){const d=document.createElement('div');d.textContent=(s??'');return d.innerHTML}
  function numberOrDash(v){const n=Number(v);return Number.isFinite(n)?n.toString():'-'}
  function formatDate(d){return d && d !== 'null' ? d : '-'}
  function formatMonth(m){
    if(!m || m === 'null') return '-';
    // YYYY-MM 形式を MM月 形式に変換
    const parts = m.split('-');
    if(parts.length === 2) {
      const monthNum = parseInt(parts[1], 10);
      return `${monthNum}月`;
    }
    return m.replace('-', '/');
  }

  const park = $('#park_id');
  const stats = $('#stats-sections');

  park.addEventListener('change', loadStats);
  loadStats();

  function loadStats(){
    const id = park.value;
    if(!id){ stats.style.display='none'; clearTables(); return; }
    
    fetch("{{ route('periodical.listData') }}?park_id="+encodeURIComponent(id), {headers:{'Accept':'application/json'}})
      .then(r => r.ok ? r.json() : Promise.reject(r))
      .then(res => {
        stats.style.display='block';
        
        // デバッグ情報があれば表示
        if(res.debug_info) {
          console.log('Debug info:', res.debug_info);
        }
        
        renderContractSummary(res.contract_summary||[]);
        renderWaitingSummary(res.waiting_summary||[]);
        renderRenewalSummary(res.renewal_summary||[]);
      })
      .catch(err => { 
        stats.style.display='none'; 
        clearTables(); 
      });
  }
  function clearTables(){
    ['tbl-contract-summary','tbl-waiting-summary','tbl-renewal-summary'].forEach(id => $tb(id).innerHTML='');
  }

    // 契約状況
  function renderContractSummary(list){
    const tb = $tb('tbl-contract-summary'); tb.innerHTML='';
    if(!Array.isArray(list)||!list.length){ 
      tb.innerHTML = noDataRow(8); 
      return; 
    }
    list.forEach(row=>{
      const rowClass = row.type === '計' ? ' class="font-weight-bold"' : '';
      tb.insertAdjacentHTML('beforeend', `
        <tr${rowClass}>
          <td>${escapeHtml(row.type)}</td>
          <td>${formatPair(row.general_count, row.general_extra)}</td>
          <td>${formatPair(row.student_count, row.student_extra)}</td>
          <td>${numberOrDash(row.use_total)}</td>
          <td>${numberOrDash(row.vacancy)}</td>
          <td>${numberOrDash(row.total)}</td>
          <td>${formatDate(row?.last?.reserve_date)}</td>
          <td>${formatDate(row?.last?.contract_date)}</td>
        </tr>`);
    });
  }
  function formatPair(c,e){
    const n = Number.isFinite(Number(c))?Number(c):0;
    const m = Number.isFinite(Number(e))?Number(e):0;
    return `${n}（${m}）`;
  }

  // 空き待ち
  function renderWaitingSummary(list){
    const tb = $tb('tbl-waiting-summary'); tb.innerHTML='';
    if(!Array.isArray(list)||!list.length){ tb.innerHTML = noDataRow(6); return; }
    list.forEach(r=>{
      const rowClass = r.type === '計' ? ' class="font-weight-bold"' : '';
      tb.insertAdjacentHTML('beforeend', `
        <tr${rowClass}>
          <td>${escapeHtml(r.type)}</td>
          <td>${numberOrDash(r.general_count)}</td>
          <td>${formatDate(r.general_first)}</td>
          <td>${numberOrDash(r.student_count)}</td>
          <td>${formatDate(r.student_first)}</td>
          <td>${numberOrDash(r.total)}</td>
        </tr>`);
    });
  }

  // 更新状況（月ブロック形式）
  function renderRenewalSummary(blocks){
    const tb = $tb('tbl-renewal-summary'); tb.innerHTML='';
    if(!Array.isArray(blocks)||!blocks.length){ tb.innerHTML = noDataRow(11); return; }
    
    // 新形式: [{month:'YYYY-MM', rows:[{label,...}]}]
    blocks.forEach(b=>{
      const rows = Array.isArray(b.rows)?b.rows:[];
      if(rows.length === 0) return;
      
      rows.forEach((r,idx)=>{
        const monthCell = idx===0 ? `<td rowspan="${rows.length}" class="align-middle">${formatMonth(b.month)}</td>` : '';
        const rowClass = r.label === '計' ? ' class="font-weight-bold"' : '';
        tb.insertAdjacentHTML('beforeend', `
          <tr${rowClass}>
            ${monthCell}
            <td>${escapeHtml(r.label)}</td>
            <td>${numberOrDash(r.bicycle_general)}</td>
            <td>${numberOrDash(r.bicycle_student)}</td>
            <td>${numberOrDash(r.bicycle_total)}</td>
            <td>${numberOrDash(r.moped_general)}</td>
            <td>${numberOrDash(r.moped_student)}</td>
            <td>${numberOrDash(r.moped_total)}</td>
            <td>${numberOrDash(r.other_general)}</td>
            <td>${numberOrDash(r.other_student)}</td>
            <td>${numberOrDash(r.other_total)}</td>
          </tr>`);
      });
    });
  }

  function noDataRow(colspan){ return `<tr><td colspan="${colspan}">データがありません</td></tr>`; }
})();
</script>
@endpush