@extends('layouts.app')
@section('content')
<main>
    <header class="alert alert-success">
        <h4 class="container">新規定期契約 > 利用可能な車種の確認</h4>
    </header>
    <section id="section" class="container mt30 mb50">
        <form class="row form" action="/regular-contract/insertRegulation" method="POST">
            @csrf
            <input type="hidden" name="park_id" value="{{ $park_id }}">
            <input type="hidden" name="psection_id" value="{{ $psection_id }}">
            <input type="hidden" name="ptype_id" value="{{ $ptype_id }}">
            <div class="col-12">
                <h5>駐輪場名：{{ $park_name }}
                </h5>
                <p>
                <h5>車両区分：{{ $psection_subject }}</h5>
                </p>
                <p>
                <h5>駐輪分類：{{ $ptype_subject }}</h5>
                </p>
                <p>
                    <br>{{ $regulations_text }}
                </p>
                <div class="d-flex justify-content-center align-items-center mt-3"
                    style="margin-top: 1rem; margin-bottom: 1rem;">
                    <input type="checkbox" id="agreeCheck" style="width: 1.5rem; height: 1.5rem;">
                    <label for="agreeCheck" style="font-size: 1.5rem; margin-left: 0.5rem;">利用可能なサイズと重量を確認しました</label>
                </div>
            </div>

            <div class="col-12 col-md-5 offset-0 offset-md-1 mt10">
                <input type="submit" class="btn btn-lg btn-block btn-success" value="契約情報の入力へ" id="submitBtn" disabled />
            </div>
            <div class="col-12 col-md-5 mt10">
                <a href="{{ url('mypage') }}" class="btn btn-lg btn-block btn-outline-success" id="menuBtn" disabled>メニューへ戻る</a>
            </div>
        </form>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                var agreeCheck = document.getElementById('agreeCheck');
                var submitBtn = document.getElementById('submitBtn');
                var menuBtn = document.getElementById('menuBtn');
                agreeCheck.addEventListener('change', function() {
                    var enabled = agreeCheck.checked;
                    submitBtn.disabled = !enabled;
                    if (enabled) {
                        menuBtn.classList.remove('disabled');
                        menuBtn.removeAttribute('disabled');
                    } else {
                        menuBtn.classList.add('disabled');
                        menuBtn.setAttribute('disabled', 'disabled');
                    }
                });
                // 初期状態でメニューも非活性
                menuBtn.classList.add('disabled');
                menuBtn.setAttribute('disabled', 'disabled');
            });
        </script>
    </section>
</main>
@endsection