@extends('layouts.app')
@section('title', 'タグ発行キュー処理、履歴表示')

@section('content')
    <div class="container-fluid">
        @if(session('success'))
            <div class="alert alert-success" style="margin-top:10px;">
                {{ session('success') }}
            </div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger" style="margin-top:10px;">
                {{ session('error') }}
            </div>
        @endif
        <div class="d-flex justify-content-between align-items-center mb-2">
            <h3 class="m-0 text-dark">タグ発行キュー処理、履歴表示</h3>
            <nav aria-label="breadcrumb" class="mb-0" style="background: transparent;">
                <ol class="breadcrumb px-2 py-2 mb-0" style="background: transparent;">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">ホーム</a></li>
                    <li class="breadcrumb-item active" aria-current="page">タグ発行キュー処理、履歴表示</li>
                </ol>
            </nav>
        </div>

        <!-- 絞り込みヘッダー -->
        <div class="card mb-3">
            <div class="card-body py-2">

                {{-- 印刷処理 --}}
                <div class="row mb-2">
                    <div class="col-md-12 font-weight-bold mb-1">印刷処理</div>
                    <div class="col-md-12">
                        <div class="row g-1">
                            <div class="col-md-2 mb-1">
                                <button type="button" class="btn btn-outline-secondary btn-xs w-100 py-1 px-2"
                                    style="font-size:0.85rem;" onclick="handlePrintLabels()">タグ発送宛名印刷</button>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- 種別フィルター --}}
                <div class="row mb-2">
                    <div class="col-md-12 font-weight-bold mb-1">種別フィルター</div>
                    <div class="col-md-12">
                        <div class="row g-1">
                            <div class="col-md-2 mb-1">
                                <form method="GET">
                                    @if(request('filter_type') == 'unissued_toggle')
                                        <button type="submit" class="btn btn-warning btn-xs w-100 py-1 px-2"
                                            style="font-size:0.85rem;">タグ未発送解除</button>
                                    @else
                                        <input type="hidden" name="filter_type" value="unissued_toggle">
                                        <button type="submit" class="btn btn-outline-secondary btn-xs w-100 py-1 px-2"
                                            style="font-size:0.85rem;">タグ発送未発送</button>
                                    @endif
                                </form>
                            </div>
                            <div class="col-md-2 mb-1">
                                <form method="GET">
                                    @if(request('filter_type') == 'issued_toggle')
                                        <button type="submit" class="btn btn-warning btn-xs w-100 py-1 px-2"
                                            style="font-size:0.85rem;">タグ発送済み解除</button>
                                    @else
                                        <input type="hidden" name="filter_type" value="issued_toggle">
                                        <button type="submit" class="btn btn-outline-secondary btn-xs w-100 py-1 px-2"
                                            style="font-size:0.85rem;">タグ発送済み</button>
                                    @endif
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- タグシリアルフィルター --}}
                <div class="row mb-2">
                    <div class="col-md-12 font-weight-bold mb-1">タグシリアルフィルター</div>
                    <div class="col-md-12">
                        <form method="GET" class="mb-0">
                            <div class="row align-items-center g-1">
                                <div class="col-auto font-weight-bold" style="padding-right:4px;">タグシリアル</div>
                                <div class="col-auto" style="min-width:140px;">
                                    <input type="text" name="tag_serial" value="{{ request('tag_serial') }}"
                                        class="form-control form-control-sm" style="font-size:0.85rem; padding:2px 6px;"
                                        placeholder="キーワード…">
                                </div>
                                <div class="col-auto font-weight-bold" style="padding-right:4px; padding-left:8px;">
                                    タグシリアル64進</div>
                                <div class="col-auto" style="min-width:140px;">
                                    <input type="text" name="tag_serial_64" value="{{ request('tag_serial_64') }}"
                                        class="form-control form-control-sm" style="font-size:0.85rem; padding:2px 6px;"
                                        placeholder="キーワード…">
                                </div>
                                <div class="col-auto text-end" style="padding-left:8px;">
                                    <button type="submit" class="btn btn-default btn-xs py-1 px-2 me-1"
                                        style="font-size:0.85rem; min-width:60px;">絞り込み</button>
                                    <a href="{{ route('tagissue') }}" class="btn btn-default btn-xs py-1 px-2"
                                        style="font-size:0.85rem; min-width:60px;">全表示</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                {{-- タグ発送ステータス変更 --}}
                <div class="row mb-2">
                    <div class="col-md-12 font-weight-bold mb-1">タグ発送ステータス変更</div>
                    <div class="col-md-12">
                        {{-- form はテーブル外に置く（hidden だけ持つ） --}}
                        <form id="statusForm" method="POST" action="{{ route('tagissue.status') }}">
                            @csrf
                            <input type="hidden" name="action" id="statusAction" value="">
                        </form>

                        <div class="row g-1 mb-2">
                            <div class="col-md-2 mb-1">
                                <button type="button" class="btn btn-outline-secondary btn-xs w-100 py-1 px-2"
                                    style="font-size:0.85rem;" onclick="handleStatusChange('to_issued')">タグ発送済み</button>
                            </div>
                            <div class="col-md-2 mb-1">
                                <button type="button" class="btn btn-outline-secondary btn-xs w-100 py-1 px-2"
                                    style="font-size:0.85rem;" onclick="handleStatusChange('to_unissued')">タグ未発送</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        {{-- 表格区域 --}}
        <div class="mt-2">
            <div class="d-flex justify-content-end mb-2">
                <div class="ms-auto">
                    {{ $users->appends(request()->except('page'))->links('pagination') }}
                </div>
            </div>

            <div style="overflow-x: auto;">
                {{-- ★ テーブルにIDを付与：JSセレクタのスコープを限定 --}}
                <table id="user-table" class="table table-bordered dataTable text-nowrap">
                    <thead class="thead-light">
                        <tr>
                            <th style="width:40px;">
                                <input type="checkbox"
                                    onclick="document.querySelectorAll('#user-table input[name=\'ids[]\'][type=\'checkbox\']').forEach(cb => cb.checked = this.checked);">
                            </th>
                            <th sort="que_id">キューID</th>
                            <th sort="user_tag_serial">タグシリアル</th>
                            <th sort="user_tag_serial_64">タグシリアル64進</th>
                            <th sort="user_tag_issue">タグ発送ステータス</th>
                            <th sort="user_name">利用者名</th>
                            <th>携帯電話番号</th>
                            <th>自宅電話番号</th>
                            <th>居住所：郵便番号</th>
                            <th>居住所：都道府県</th>
                            <th>居住所：市区群</th>
                            <th>居住所：住所</th>
                            <th>関連住所：郵便番号</th>
                            <th>関連住所：都道府県</th>
                            <th>関連住所：市区群</th>
                            <th>関連住所：住所</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($users as $user)
                            <tr>
                                <td style="background-color:#faebd7;">
                                    {{-- ★ data-que-status をJOIN結果から出力（未発送=1, 発送済=3 など） --}}
                                    <input type="checkbox"
                                           name="ids[]"
                                           value="{{ $user->user_id }}"
                                           data-que-status="{{ $user->que_status ?? '' }}">
                                </td>
                                {{-- ★ 逐行のDB取得は不要。JOIN結果をそのまま使う --}}
                                <td>{{ $user->que_id }}</td>
                                <td>{{ $user->user_tag_serial }}</td>
                                <td>{{ $user->user_tag_serial_64 }}</td>
                                <td>{{ $user->user_tag_issue }}</td>
                                <td>
                                    @if(!empty($user->user_seq))
                                        <a href="{{ route('users_edit', ['seq' => $user->user_seq]) }}" target="_blank">
                                            {{ $user->user_id }}: {{ $user->user_name }}
                                        </a>
                                    @else
                                        {{ $user->user_id }}: {{ $user->user_name }}
                                    @endif
                                </td>
                                <td>{{ $user->user_mobile }}</td>
                                <td>{{ $user->user_homephone }}</td>
                                <td>{{ $user->user_regident_zip }}</td>
                                <td>{{ $user->user_regident_pre }}</td>
                                <td>{{ $user->user_regident_city }}</td>
                                <td>{{ $user->user_regident_add }}</td>
                                <td>{{ $user->user_relate_zip }}</td>
                                <td>{{ $user->user_relate_pre }}</td>
                                <td>{{ $user->user_relate_city }}</td>
                                <td>{{ $user->user_relate_add }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

{{-- 印刷処理用 JS --}}
<script>
    // タグ発送宛名印刷
    // 仕様：
    // ① 一覧内に「タグ未発送（que_status=1）」が存在するか確認
    // ② 存在しなければ「発送対象がありません。」
    // ③ 存在するが未選択なら「1件以上選択してください。」
    // ④ それ以外は確認ダイアログ→送信
    function handlePrintLabels() {
        var table = document.getElementById('user-table');
        var allCbs = table.querySelectorAll('input[name="ids[]"][type="checkbox"]');
        var checkedCbs = table.querySelectorAll('input[name="ids[]"][type="checkbox"]:checked');

        // 一覧内に未発送(que_status=1)が1件でもあるか？
        var hasUnissued = Array.from(allCbs).some(function (cb) {
            var v = cb.dataset && cb.dataset.queStatus;
            return v != null && String(v).trim() === '1';
        });

        if (!hasUnissued) {
            $.alert({
                title: '選択エラー',
                content: '発送対象がありません。'
            });
            return;
        }

        if (checkedCbs.length === 0) {
            $.alert({
                title: '選択エラー',
                content: '1件以上選択してください。'
            });
            return;
        }

        $.confirm({
            title: '確認',
            content: 'タグ発送用宛名を印刷してよろしいですか？',
            buttons: {
                はい: {
                    btnClass: 'btn-primary',
                    action: function () {
                        var form = document.createElement('form');
                        form.method = 'POST';
                        form.action = '/tagissue/print-unissued-labels';
                        form.target = '_blank';

                        var csrf = document.createElement('input');
                        csrf.type = 'hidden';
                        csrf.name = '_token';
                        csrf.value = '{{ csrf_token() }}';
                        form.appendChild(csrf);

                        checkedCbs.forEach(function (cb) {
                            var input = document.createElement('input');
                            input.type = 'hidden';
                            input.name = 'ids[]';
                            input.value = cb.value;
                            form.appendChild(input);
                        });

                        document.body.appendChild(form);
                        form.submit();
                        document.body.removeChild(form);
                    }
                },
                いいえ: function () {}
            }
        });
    }

    // ステータス変更処理
    function handleStatusChange(actionType) {
        var checkboxes = document.querySelectorAll('input[name="ids[]"]:checked');
        if (checkboxes.length === 0) {
            $.alert({
                title: '選択エラー',
                content: '1件以上選択してください。'
            });
            return;
        }

        var ids = Array.from(checkboxes).map(cb => cb.value);
        var ajaxType = (actionType === 'to_issued') ? 'issued' : 'unissued';

        fetch('/tagissue/check-status', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ ids: ids, type: ajaxType })
        })
        .then(response => response.json())
        .then(data => {
            if (ajaxType === 'issued' && data.alreadyIssued.length > 0) {
                $.alert({
                    title: '確認エラー',
                    content: '以下のユーザーはすでにタグ発送済みです:<br>' + data.alreadyIssued.join('<br>')
                });
                return;
            }
            if (ajaxType === 'unissued' && data.alreadyUnissued && data.alreadyUnissued.length > 0) {
                $.alert({
                    title: '確認エラー',
                    content: '以下のユーザーはすでにタグ未発送です:<br>' + data.alreadyUnissued.join('<br>')
                });
                return;
            }

            var confirmMsg = (ajaxType === 'issued')
                ? 'ステータスをタグ発送済に変更してよろしいですか？'
                : 'ステータスをタグ未発送に変更してよろしいですか？';

            $.confirm({
                title: '確認ダイアログ',
                content: confirmMsg,
                buttons: {
                    はい: {
                        text: 'はい',
                        btnClass: 'btn-primary',
                        keys: ['enter'],
                        action: function () {
                            var form = document.getElementById('statusForm');
                            form.querySelectorAll('input[name="ids[]"]').forEach(e => e.remove());
                            ids.forEach(id => {
                                var input = document.createElement('input');
                                input.type = 'hidden';
                                input.name = 'ids[]';
                                input.value = id;
                                form.appendChild(input);
                            });
                            document.getElementById('statusAction').value = actionType;
                            form.submit();
                        }
                    },
                    いいえ: function () { }
                }
            });
        })
        .catch(() => {
            $.alert({
                title: '通信エラー',
                content: 'ステータス確認に失敗しました。'
            });
        });
    }

    // ソート挙動
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('th[sort]').forEach(function (th) {
            th.addEventListener('click', function () {
                var sort = th.getAttribute('sort');
                var params = new URLSearchParams(window.location.search);
                var currentSort = params.get('sort');
                var currentType = params.get('sort_type');
                var nextType = (currentSort === sort && currentType === 'asc') ? 'desc' : 'asc';
                params.set('sort', sort);
                params.set('sort_type', nextType);
                window.location.search = params.toString();
            });
        });
    });
</script>
@endsection
