@extends('layouts.app')

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

@section('content')
<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>
    </div>
</div>

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

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

        {{-- 契約状況 --}}
        <div class="card mb-4">
            <div class="card-header bg-light">
                <strong>契約状況</strong>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <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>
                                <th rowspan="2" class="align-middle">空き</th>
                                <th rowspan="2" class="align-middle">合計</th>
                                <th colspan="2">直近契約</th>
                            </tr>
                            <tr>
                                <th>件数</th>
                                <th><!-- 予備 --></th>
                                <th>件数</th>
                                <th><!-- 予備 --></th>
                                <th>予約日</th>
                                <th>契約日</th>
                            </tr>
                        </thead>
                        <tbody id="tbl-contract-summary"></tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- 空き待ち状況 --}}
        <div class="card mb-4">
            <div class="card-header bg-light">
                <strong>空き待ち状況</strong>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <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>

        {{-- 更新状況 --}}
        <div class="card mb-4">
            <div class="card-header bg-light">
                <strong>更新状況</strong>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered mb-0 text-center">
                        <thead>
                            <tr>
                                <th rowspan="2" class="align-middle" style="min-width:70px">月</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>

@push('scripts')
<script>
$(function () {
    loadStats();

    $('#park_id').on('change', function () {
        loadStats();
    });

    function loadStats() {
        $.ajax({
            url: "{{ route('periodical.listData') }}",
            type: 'GET',
            data: { park_id: $('#park_id').val() },
            success: function (res) {
                renderContractSummary(res.contract_summary || []);
                renderWaitingSummary(res.waiting_summary || []);
                renderRenewalSummary(res.renewal_summary || []);
            },
            error: function (xhr) {
                console.error(xhr.responseText || xhr.statusText);
            }
        });
    }

    function nz(v) { return (v === null || v === undefined || v === '') ? '' : v; }

    function renderContractSummary(rows) {
        const $tb = $('#tbl-contract-summary').empty();
        rows.forEach(r => {
            $tb.append(`
            <tr>
                <td class="text-left">${r.type}</td>
                <td>${nz(r.general_count)}</td>
                <td>${nz(r.general_extra)}</td>
                <td>${nz(r.student_count)}</td>
                <td>${nz(r.student_extra)}</td>
                <td>${nz(r.use_total)}</td>
                <td>${nz(r.vacancy)}</td>
                <td>${nz(r.total)}</td>
                <td>${r.last && r.last.reserve_date ? r.last.reserve_date : ''}</td>
                <td>${r.last && r.last.contract_date ? r.last.contract_date : ''}</td>
            </tr>
            `);
        });
    }

    function renderWaitingSummary(rows) {
        const $tb = $('#tbl-waiting-summary').empty();
        rows.forEach(r => {
            $tb.append(`
            <tr>
                <td class="text-left">${r.type}</td>
                <td>${nz(r.general_count)}</td>
                <td>${nz(r.general_head)}</td>
                <td>${nz(r.student_count)}</td>
                <td>${nz(r.student_head)}</td>
                <td>${nz(r.total)}</td>
            </tr>
            `);
        });
    }

    function renderRenewalSummary(rows) {
        const $tb = $('#tbl-renewal-summary').empty();
        rows.forEach(r => {
            $tb.append(`
            <tr>
                <td class="text-left">${r.month}</td>
                <td>${nz(r.bicycle_general)}</td>
                <td>${nz(r.bicycle_student)}</td>
                <td>${nz(r.bicycle_total)}</td>
                <td>${nz(r.moped_general)}</td>
                <td>${nz(r.moped_student)}</td>
                <td>${nz(r.moped_total)}</td>
                <td>${nz(r.others_general)}</td>
                <td>${nz(r.others_student)}</td>
                <td>${nz(r.others_total)}</td>
            </tr>
            `);
        });
    }
});

</script>
@endpush
@endsection