@extends('layouts.app')
@section('title', '常時表示インフォメーション')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-2">
        <div class="col-lg-6">
            <h3 class="m-0 text-dark">{{__('常時表示インフォメーション')}}</h3>
        </div>
        <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">
            <h5 class="mb-3">絞り込み</h5>
            <!-- 1行目：表示期間フィルター -->
            <div class="row mb-2">
                <div class="col-md-12 font-weight-bold mb-1">表示期間フィルター</div>
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-3 mb-2">
                            <a href="{{ route('information', ['period' => 'month']) }}"
                               class="btn btn-sm filter-btn {{ (request('period', $period ?? 'month') == 'month') ? 'btn-warning' : 'btn-outline-secondary' }}"
                               style="width:120px;height:32px;"
                               data-group="period" data-value="month">
                               最新1ヵ月
                            </a>
                        </div>
                        <div class="col-md-3 mb-2"></div>
                        <div class="col-md-3 mb-2"></div>
                        <div class="col-md-3 mb-2">
                            <a href="{{ route('information', ['period' => 'all']) }}"
                               class="btn btn-sm filter-btn {{ (request('period', $period ?? 'month') == 'all') ? 'btn-warning' : 'btn-outline-secondary' }}"
                               style="width:120px;height:32px;"
                               data-group="period" data-value="all">
                               全期間表示
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 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">
                        <div class="col-md-3 mb-2">
                            <a href="#"
                               class="btn btn-sm filter-btn {{ (request('type', $type ?? 'all') == 'month') ? 'btn-warning' : 'btn-outline-secondary' }}"
                               style="width:120px;height:32px;"
                               data-group="type" data-value="month">
                               最新1ヵ月
                            </a>
                        </div>
                        <div class="col-md-3 mb-2">
                            <a href="#"
                               class="btn btn-sm filter-btn {{ (request('type', $type ?? 'all') == 'hard') ? 'btn-warning' : 'btn-outline-secondary' }}"
                               style="width:120px;height:32px;"
                               data-group="type" data-value="hard">
                               ハード異常
                            </a>
                        </div>
                        <div class="col-md-3 mb-2"></div>
                        <div class="col-md-3 mb-2">
                            <a href="#"
                               class="btn btn-sm filter-btn {{ (request('type', $type ?? 'all') == 'all') ? 'btn-warning' : 'btn-outline-secondary' }}"
                               style="width:120px;height:32px;"
                               data-group="type" data-value="all">
                               全種別表示
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 3行目：ステータスフィルター -->
            <div class="row mb-2">
                <div class="col-md-12 font-weight-bold mb-1">ステータスフィルター</div>
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-3 mb-2">
                            <a href="#"
                               class="btn btn-sm filter-btn {{ (request('status', $status ?? 'untreated') == 'untreated') ? 'btn-warning' : 'btn-outline-secondary' }}"
                               style="width:120px;height:32px;"
                               data-group="status" data-value="untreated">
                               未対応表示
                            </a>
                        </div>
                        <div class="col-md-3 mb-2">
                            <a href="#"
                               class="btn btn-sm filter-btn {{ (request('status', $status ?? '') == 'inprogress') ? 'btn-warning' : 'btn-outline-secondary' }}"
                               style="width:120px;height:32px;"
                               data-group="status" data-value="inprogress">
                               着手を表示
                            </a>
                        </div>
                        <div class="col-md-3 mb-2">
                            <a href="#"
                               class="btn btn-sm filter-btn {{ (request('status', $status ?? '') == 'done') ? 'btn-warning' : 'btn-outline-secondary' }}"
                               style="width:120px;height:32px;"
                               data-group="status" data-value="done">
                               対応完了を表示
                            </a>
                        </div>
                        <div class="col-md-3 mb-2">
                            <a href="#"
                               class="btn btn-sm filter-btn {{ (request('status', $status ?? '') == 'all') ? 'btn-warning' : 'btn-outline-secondary' }}"
                               style="width:120px;height:32px;"
                               data-group="status" data-value="all">
                               全ステータス表示
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 4行目：ステータス変更 -->
            <div class="row mb-2">
                <div class="col-md-12 font-weight-bold mb-1">ステータス変更</div>
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-3 mb-2">
                            <a href="#"
                               class="btn btn-sm filter-btn {{ (request('change', $change ?? '') == 'inprogress') ? 'btn-warning' : 'btn-outline-secondary' }}"
                               style="width:120px;height:32px;"
                               data-group="change" data-value="inprogress">
                               着手
                            </a>
                        </div>
                        <div class="col-md-3 mb-2">
                            <a href="#"
                               class="btn btn-sm filter-btn {{ (request('change', $change ?? '') == 'done') ? 'btn-warning' : 'btn-outline-secondary' }}"
                               style="width:120px;height:32px;"
                               data-group="change" data-value="done">
                               対応完了
                            </a>
                        </div>
                        <div class="col-md-3 mb-2"></div>
                        <div class="col-md-3 mb-2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- データテーブル -->
    <div class="table-responsive">
        <table class="table table-bordered table-hover table-sm">
            <thead class="thead-light">
                <tr>
                    <th style="width:30px;"><input type="checkbox"></th>
                    <th>キューID</th>
                    <th>キュー種別</th>
                    <th>利用者</th>
                    <th>定期契約ID</th>
                    <th>駐輪場</th>
                    <th>キューコメント</th>
                    <th>キューステータス</th>
                    <th>コメント</th>
                    <th>登録日時</th>
                    <th>更新日時</th>
                    <th>更新オペレータ</th>
                    <th>リンク</th>
                </tr>
            </thead>
            <tbody>
                @foreach($jobs as $job)
                <tr>
                    <td style="background-color:#faebd7;"><input type="checkbox"></td>
                    <td>{{ $job->job_log_id }}</td>
                    <td>{{ $job->process_name }}</td>
                    <td>{{ $job->job_name }}</td>
                    <td>{{ $job->device_id }}</td>
                    <td>{{ $job->park_id }}</td>
                    <td>{{ $job->status_comment }}</td>
                    <td>{{ $job->status }}</td>
                    <td>{{ $job->comment }}</td>
                    <td>{{ $job->created_at }}</td>
                    <td>{{ $job->updated_at }}</td>
                    <td>-</td>
                    <td><a href="#">詳細</a></td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

@push('scripts')
<script>
    // ページロード時にデフォルト選択（初回アクセス時のみperiod, type, statusを自動選択）
    window.addEventListener('DOMContentLoaded', function() {
        // URLにperiod/type/statusパラメータがなければ初期選択
        const url = new URL(window.location.href);
        const hasPeriod = url.searchParams.has('period');
        const hasType = url.searchParams.has('type');
        const hasStatus = url.searchParams.has('status');

        if (!hasPeriod) {
            document.querySelector('.filter-btn[data-group="period"][data-value="month"]')?.classList.replace('btn-outline-secondary', 'btn-warning');
        }
        if (!hasType) {
            document.querySelector('.filter-btn[data-group="type"][data-value="all"]')?.classList.replace('btn-outline-secondary', 'btn-warning');
        }
        if (!hasStatus) {
            document.querySelector('.filter-btn[data-group="status"][data-value="untreated"]')?.classList.replace('btn-outline-secondary', 'btn-warning');
        }
    });

    // フィルターボタンの選択状態切替
    document.querySelectorAll('.filter-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var group = btn.getAttribute('data-group');
            document.querySelectorAll('.filter-btn[data-group="' + group + '"]').forEach(function(b) {
                b.classList.remove('btn-warning');
                b.classList.add('btn-outline-secondary');
            });
            btn.classList.remove('btn-outline-secondary');
            btn.classList.add('btn-warning');
        });
    });
</script>
@endpush
@endsection