@extends('layouts.app')
@section('title', '定期契約マスタ')

@section('content')
  <style>
    /* 画面全体のフォント／サイズを統一（やや小さめ） */
    .rc-page,
    .rc-page .card,
    .rc-page .form-control,
    .rc-page .btn,
    .rc-page table,
    .rc-page .breadcrumb {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    }

    /* フィルター：1行＝左ラベル／右入力、を縦に積む */
    .rc-filter .field {
    display: flex;
    align-items: center;
    margin-bottom: .6rem;
    }

    .rc-filter .label {
    flex: 0 0 180px;
    margin: 0;
    color: #333;
    font-weight: 600;
    white-space: nowrap;
    }

    .rc-filter .input {
    flex: 1 1 auto;
    min-width: 220px;
    }

    .rc-filter .form-control,
    .rc-filter .custom-select {
    height: calc(2.0rem + 2px);
    padding: .25rem .5rem;
    }

    .rc-filter .inline-range {
    display: flex;
    gap: .5rem;
    align-items: center;
    }

    .rc-filter .tilde {
    color: #666;
    }

    /* 一覧テーブル：斑馬（ゼブラ）無し、やや詰め気味 */
    .rc-table th,
    .rc-table td {
    padding: .35rem .5rem;
    font-size: 12px;
    }

    .rc-table thead th {
    white-space: nowrap;
    }

    /* ツールバー：左にボタン群、右にページャ */
    .rc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    }

    .rc-toolbar .btn+.btn {
    margin-left: .4rem;
    }

    /* 表頭＝薄いグレー、本文＝白 */
    .rc-page .rc-table thead th {
    background: #f2f2f2;
    color: #333;
    border-bottom-color: #ddd;
    }

    .rc-page .rc-table tbody td:not(.op-cell) {
    background: #fff;
    }

    /* 操作列（チェック＋編集） */
    .rc-page .rc-table tbody td.op-cell {
    background: #faebd7;
    }
  </style>

  <div class="rc-page">
    <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
      <div class="col-lg-6">
        <h1 class="m-0 text-dark">定期契約マスタ</h1>
      </div>
      <div class="col-lg-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>
      <p class="text-muted mb-0">※この画面のデータは通常変更する必要はありません。</p>
    </div>
    </div>

    <section class="content">
    <div class="container-fluid">

      {{-- 絞り込みフィルター（2カラム） --}}
      <div class="card rc-filter">
      <div class="card-header">
        <h3 class="card-title">絞り込みフィルター</h3>
      </div>
      <div class="card-body">
        <form action="{{ route('regularcontracts') }}" method="post" id="list-form">
        @csrf
        <input type="hidden" name="sort" id="sort" value="{{ $sort }}">
        <input type="hidden" name="sort_type" id="sort_type" value="{{ $sort_type }}">

        <div class="row">
          {{-- 左カラム --}}
          <div class="col-lg-6">
          <div class="field">
            <label class="label">利用者ID</label>
            <div class="input"><input type="text" class="form-control" name="user_id" value="{{ $user_id ?? '' }}"
              placeholder="123456"></div>
          </div>
          <div class="field">
            <label class="label">利用者分類</label>
            <div class="input"><input type="text" class="form-control" name="usertype_name"
              value="{{ $usertype_name ?? '' }}" placeholder="キーワード…"></div>
          </div>
          <div class="field">
            <label class="label">タグシリアル</label>
            <div class="input"><input type="text" class="form-control" name="user_tag_serial"
              value="{{ $user_tag_serial ?? '' }}" placeholder="キーワード…"></div>
          </div>
          <div class="field">
            <label class="label">フリガナ</label>
            <div class="input"><input type="text" class="form-control" name="user_phonetic"
              value="{{ $user_phonetic ?? '' }}" placeholder="キーワード…"></div>
          </div>
          <div class="field">
            <label class="label">電話番号</label>
            <div class="input"><input type="text" class="form-control" name="phone" value="{{ $phone ?? '' }}"
              placeholder="携帯／自宅いずれも可"></div>
          </div>
          <div class="field">
            <label class="label">メールアドレス</label>
            <div class="input"><input type="text" class="form-control" name="email" value="{{ $email ?? '' }}">
            </div>
          </div>
          <div class="field">
            <label class="label">ワークレコード</label>
            <div class="input">
            <select class="form-control" name="work_record">
              <option value="">ワークレコード非表示</option>
            </select>
            </div>
          </div>
          <div class="field">
            <label class="label">定期契約ID</label>
            <div class="input"><input type="text" class="form-control" name="contract_qr_id"
              value="{{ $contract_qr_id ?? '' }}"></div>
          </div>
          <div class="field">
            <label class="label">検索</label>
            <div class="input"><input type="text" class="form-control" name="zone_keyword"
              value="{{ $zone_keyword ?? '' }}" placeholder="ゾーンID, 車室番号, 旧会員番号"></div>
          </div>
          <div class="field">
            <label class="label">関連住所入力あり</label>
            <div class="input">
            <div class="form-check" style="padding-left:0;">
              <input type="checkbox" class="form-check-input" id="has_address" name="has_address" value="1" {{ !empty($has_address) ? 'checked' : '' }}>
            </div>
            </div>
          </div>
          </div>

          {{-- 右カラム --}}
          <div class="col-lg-6">
          <div class="field">
            <label class="label">駐輪場</label>
            <div class="input"><input type="text" class="form-control" name="park_name"
              value="{{ $park_name ?? '' }}" placeholder="キーワード…"></div>
          </div>
          <div class="field">
            <label class="label">予約日時</label>
            <div class="input inline-range">
            <input type="datetime-local" class="form-control" name="reserve_date_from"
              value="{{ $reserve_date_from ?? '' }}">
            <span class="tilde">～</span>
            <input type="datetime-local" class="form-control" name="reserve_date_to"
              value="{{ $reserve_date_to ?? '' }}">
            </div>
          </div>
          <div class="field">
            <label class="label">契約日時</label>
            <div class="input inline-range">
            <input type="datetime-local" class="form-control" name="contract_created_from"
              value="{{ $contract_created_from ?? '' }}">
            <span class="tilde">～</span>
            <input type="datetime-local" class="form-control" name="contract_created_to"
              value="{{ $contract_created_to ?? '' }}">
            </div>
          </div>
          <div class="field">
            <label class="label">解約日時</label>
            <div class="input inline-range">
            <input type="datetime-local" class="form-control" name="contract_canceled_from"
              value="{{ $contract_canceled_from ?? '' }}">
            <span class="tilde">～</span>
            <input type="datetime-local" class="form-control" name="contract_canceled_to"
              value="{{ $contract_canceled_to ?? '' }}">
            </div>
          </div>
          <div class="field">
            <label class="label">授受日時</label>
            <div class="input inline-range">
            <input type="datetime-local" class="form-control" name="receipt_delivery_from"
              value="{{ $receipt_delivery_from ?? '' }}">
            <span class="tilde">～</span>
            <input type="datetime-local" class="form-control" name="receipt_delivery_to"
              value="{{ $receipt_delivery_to ?? '' }}">
            </div>
          </div>
          <div class="field">
            <label class="label">定期有効月数</label>
            <div class="input"><input type="number" min="0" class="form-control" name="contract_valid_months"
              value="{{ $contract_valid_months ?? '' }}"></div>
          </div>
          <div class="field">
            <label class="label">定期契約継続</label>
            <div class="input">
            <select class="form-control" name="update_flag">
              <option value="">全て</option>
              <option value="1" {{ (isset($update_flag) && (string) $update_flag === '1') ? 'selected' : '' }}>ON
              </option>
              <option value="0" {{ (isset($update_flag) && (string) $update_flag === '0') ? 'selected' : '' }}>未更新
              </option>
            </select>
            </div>
          </div>
          <div class="field">
            <label class="label">名寄フリガナ</label>
            <div class="input"><input type="text" class="form-control" name="merge_phonetic"
              value="{{ $merge_phonetic ?? '' }}" placeholder="キーワード…"></div>
          </div>
          <div class="field">
            <label class="label">ゾーン名検索</label>
            <div class="input"><input type="text" class="form-control" name="zone_name"
              value="{{ $zone_name ?? '' }}" placeholder="キーワード…"></div>
          </div>
          <div class="field">
            <label class="label">タグ・QR</label>
            <div class="input">
            <select class="form-control" name="tag_qr_flag">
              <option value="">全て</option>
              <option value="0" {{ (isset($tag_qr_flag) && (string) $tag_qr_flag === '0') ? 'selected' : '' }}>タグ
              </option>
              <option value="1" {{ (isset($tag_qr_flag) && (string) $tag_qr_flag === '1') ? 'selected' : '' }}>QR
              </option>
            </select>
            </div>
          </div>
          </div>
        </div>

        {{-- フィルターボタン（見た目統一） --}}
        <div class="mt-2">
          <button type="submit" class="btn btn-default">絞り込み</button>
          <a href="{{ route('regularcontracts') }}" class="btn btn-default">解除</a>
        </div>
        </form>
      </div>
      </div>

      {{-- ツールバー：左＝ボタン群、右＝ページャ --}}
      <div class="rc-toolbar mb-2">
      <div class="left">
        <a href="{{ route('regularcontracts_add') }}" class="btn btn-sm btn-default">新規</a>
        <button type="button" class="btn btn-sm btn-default" data-toggle="modal"
        data-target="#importModal">インポート</button>

        {{-- 3種のエクスポートは共通の確認モーダルを使い、data-url に出力先URLを渡す --}}
        <button type="button" class="btn btn-sm btn-default" data-toggle="modal" data-target="#exportModal"
        data-url="{{ route('regularcontracts_export') }}">CSV出力</button>

        <button type="button" class="btn btn-sm btn-default" data-toggle="modal" data-target="#exportModal"
        data-url="{{ route('regularcontracts_export', [], false) }}?type=smbc">SMBC出力</button>

        <button type="button" class="btn btn-sm btn-default" data-toggle="modal" data-target="#exportModal"
        data-url="{{ route('regularcontracts_export', [], false) }}?type=city">役所提出用CSV出力</button>
      </div>
      <div class="right">
        {{ $list->appends(['sort' => $sort, 'sort_type' => $sort_type])->links('pagination') }}
      </div>
      </div>

      <iframe id="dlFrame" name="dlFrame" style="width:0;height:0;border:0;visibility:hidden;"></iframe>

      {{-- 一覧テーブル --}}
      <form action="{{ route('regularcontracts_delete') }}" method="post" id="form_delete">
      @csrf
      <div class="table-responsive">
        <table class="table table-bordered table-hover rc-table mb-0 text-nowrap">
        <thead>
          <tr>
          @php $next = ($sort === 'contract_id' && $sort_type === 'asc') ? 'desc' : 'asc'; @endphp
          <th class="text-right" style="white-space:nowrap;">
            <a title="contract_idで並び替え"
            href="{{ route('regularcontracts', array_merge(request()->except('page'), ['sort' => 'contract_id', 'sort_type' => $next])) }}">⇅</a>
          </th>

          {{-- 操作列（チェック＋編集。背景色を付与） --}}
          <th style="width:120px"></th>

          {{-- 表頭（要件に合わせて網羅） --}}
          <th>定期契約ID</th>
          <th>旧定期契約番号</th>
          <th>ゾーンID</th>
          <th>車室番号</th>
          <th>利用者ID</th>
          <th>利用者分類ID</th>
          <th>タグ・QR</th>
          <th>駐輪場ID</th>
          <th>有効期間S</th>
          <th>有効期間E</th>
          <th>駐輪場所ID</th>
          <th>防犯登録番号</th>
          <th>契約日時</th>
          <th>更新可能日</th>
          <th>解約日時</th>
          <th>減免措置</th>
          <th>定期有効月数</th>
          <th>シール印刷可能日</th>
          <th>請求金額</th>
          <th>車室割り当てフラグ</th>
          <th>授受日時</th>
          <th>授受金額</th>
          <th>授受フラグ</th>
          <th>決済トランザクションID</th>
          <th>シール発行数</th>
          <th>シール発行許可</th>
          <th>解約フラグ</th>
          <th>収納企業コード</th>
          <th>共有先収納企業コード</th>
          <th>受付番号</th>
          <th>（更新元）契約更新済フラグ</th>
          <th>車種区分ID</th>
          <th>チェック用_フリガナ</th>
          <th>チェック用_居住所郵便番号</th>
          <th>チェック用_携帯電話番号</th>
          <th>チェック用_自宅電話番号</th>
          <th>チェック用_旧会員番号</th>
          </tr>
        </thead>
        <tbody>
          @foreach($list as $item)
        <tr>
        {{-- 先頭の並び替え列（行の contract_id を表示） --}}
        <td class="text-right">{{ $item->contract_id }}</td>

        {{-- 操作列：チェック + 編集（背景色つき） --}}
        <td class="op-cell">
        <div class="d-flex align-items-center">
        <input type="checkbox" class="mr-2" name="ids[]" value="{{ $item->contract_id }}">
        <a href="{{ route('regularcontracts_edit', ['contract_id' => $item->contract_id]) }}"
          class="btn btn-sm btn-default">編集</a>
        </div>
        </td>

        {{-- データ列 --}}
        <td class="text-right">{{ $item->contract_qr_id }}</td>
        <td>{{ $item->old_contract_number ?? '' }}</td>
        <td>{{ $item->zone_id ?? '' }}</td>
        <td>{{ $item->room_number ?? '' }}</td>
        <td class="text-right">{{ $item->user_id }}</td>
        <td class="text-right">{{ $item->user_categoryid }}</td>
        <td>{{ $item->tag_qr_flag ? 'QR' : 'タグ' }}</td>
        <td class="text-right">{{ $item->park_id }}</td>
        <td>{{ $item->valid_from ?? '' }}</td>
        <td>{{ $item->valid_to ?? '' }}</td>
        <td class="text-right">{{ $item->price_arkplaceid ?? $item->price_parkplaceid ?? '' }}</td>
        <td>{{ $item->crime_prevention_registration_number ?? '' }}</td>
        <td>{{ $item->contract_created_at ?? '' }}</td>
        <td>{{ $item->renewable_date ?? '' }}</td>
        <td>{{ $item->contract_cancelday ?? '' }}</td>
        <td>{{ $item->reduction ?? '' }}</td>
        <td class="text-right">{{ $item->contract_valid_months ?? '' }}</td>
        <td>{{ $item->label_printable_date ?? '' }}</td>
        <td class="text-right">{{ $item->billing_amount ?? '' }}</td>
        <td>{{ ($item->assign_flag ?? null) === null ? '' : (($item->assign_flag) ? '割当済' : '未割当') }}</td>
        <td>{{ $item->receipt_delivery_date ?? '' }}</td>
        <td class="text-right">{{ $item->receipt_delivery_amount ?? '' }}</td>
        <td>
        {{ ($item->receipt_delivery_flag ?? null) === null ? '' : (($item->receipt_delivery_flag) ? '済' : '未') }}
        </td>
        <td>{{ $item->payment_transaction_id ?? '' }}</td>
        <td class="text-right">{{ $item->label_issue_count ?? '' }}</td>
        <td>{{ ($item->contract_permission ?? 0) ? '許可' : '未許可' }}</td>
        <td>{{ ($item->contract_cancel_flag ?? 0) ? 'キャンセル' : '－' }}</td>
        <td>{{ $item->company_code ?? '' }}</td>
        <td>{{ $item->shared_company_code ?? '' }}</td>
        <td>{{ $item->accept_number ?? '' }}</td>
        <td>{{ ($item->update_flag ?? 0) ? '更新済' : '未更新' }}</td>
        <td>{{ $item->vehicle_type_id ?? '' }}</td>
        <td>{{ $item->user_phonetic ?? '' }}</td>
        <td>{{ $item->user_regident_zip ?? '' }}</td>
        <td>{{ $item->user_mobile ?? '' }}</td>
        <td>{{ $item->user_homephone ?? '' }}</td>
        <td>{{ $item->old_member_number ?? '' }}</td>
        </tr>
      @endforeach
        </tbody>
        </table>
      </div>
      </form>

      {{-- 下側のページャ（右寄せ） --}}
      <div class="d-flex justify-content-end mt-2">
      {{ $list->appends(['sort' => $sort, 'sort_type' => $sort_type])->links('pagination') }}
      </div>
    </div>
    </section>
  </div>

  {{-- インポート用モーダル（ファイル選択） --}}
  <div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header py-2">
      <h5 class="modal-title" id="importModalLabel">確認</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
        aria-hidden="true">&times;</span></button>
      </div>
      <form method="post" action="{{ route('regularcontracts_import') }}" enctype="multipart/form-data">
      @csrf
      <div class="modal-body">
        <p class="mb-2 text-sm">
        データをインポートします。既存データを上書きする場合はテンプレートに従い識別列を設定してください。<br>
        新規追加のみの場合は識別列を空欄のままインポートしてください。
        </p>
        <div class="custom-file">
        <input type="file" name="file" id="importFile" class="custom-file-input" accept=".csv,.xlsx,.xls,.tsv,.txt"
          required>
        <label class="custom-file-label" for="importFile">ファイルの選択</label>
        </div>
      </div>
      <div class="modal-footer py-2">
        <button type="submit" class="btn btn-primary btn-sm">はい</button>
        <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">いいえ</button>
      </div>
      </form>
    </div>
    </div>
  </div>

  {{-- エクスポート用モーダル（確認のみ。リンク先でダウンロード） --}}
  <div class="modal fade" id="exportModal" tabindex="-1" role="dialog" aria-labelledby="exportModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header py-2">
      <h5 class="modal-title" id="exportModalLabel">確認</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
        aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body text-sm">CSVファイルを出力します。よろしいですか？</div>
      <div class="modal-footer py-2">
      <a id="exportGo" href="#" class="btn btn-primary btn-sm">はい</a>
      <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">いいえ</button>
      </div>
    </div>
    </div>
  </div>

  {{-- 画面内スクリプト：インポートのファイル名表示、エクスポートのURL差し替え --}}
  <script>
    // インポート：選択したファイル名をラベルに反映
    document.addEventListener('change', function (e) {
    if (e.target && e.target.id === 'importFile') {
      var label = e.target.nextElementSibling;
      if (label) label.textContent = e.target.files.length ? e.target.files[0].name : 'ファイルの選択';
    }
    });

    // エクスポート：モーダル表示時に押下ボタンの data-url を「はい」へセット
    (function () {
    var $ = window.jQuery;
    var $exportGo = $('#exportGo');
    var $exportModal = $('#exportModal');

    if ($ && $exportModal.length) {
      // モーダルが開く時に URL を保持（href と data-href の両方に入れておく）
      $exportModal.on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget);
      var url = button && button.data('url');
      $exportGo.attr('href', url || '#');
      $exportGo.attr('data-href', url || '#');
      });

      // 「はい」→ 既定遷移を止め、隠し iframe でダウンロード開始 → モーダル閉じる
      $exportGo.on('click', function (e) {
      e.preventDefault();
      var url = $(this).attr('data-href') || $(this).attr('href') || '#';
      if (url && url !== '#') {
        var iframe = document.getElementById('dlFrame');
        if (iframe) {
        iframe.src = url;            // ここでダウンロード開始（ページ遷移なし）
        } else {
        // 念のためのフォールバック
        window.location.href = url;
        }
      }
      $exportModal.modal('hide');
      });
    }
    })();
  </script>

@endsection