@extends('layouts.app')
@section('content')
<main>
    <header class="alert alert-success">
        <h4 class="container">ユーザー情報確認 > シール再発行理由</h4>
    </header>
    @if ($errors->any())
    <div class="alert alert-danger text-center">
        @foreach ($errors->all() as $error)
        <div>{{ $error }}</div>
        @endforeach
    </div>
    @endif
    <section class="container mt30 mb50">
        <div class="col-12 col-md-8 offset-0 offset-md-2 mb30">
            <h2 class="text-center alert-success">再発行手続き</h2>
        </div>
        <form method="POST" action="{{ url('seal/reissue/complete/' . $contract_id) }}">
            @csrf
            <div class="col-12 col-md-8 offset-0 offset-md-2 mb30">
                <div class="mb-4">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="reason" id="reason1" value="自動車の買い換え">
                        <label class="form-check-label" for="reason1">自動車の買い換え</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="reason" id="reason2" value="汚損">
                        <label class="form-check-label" for="reason2">汚損</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="reason" id="reason3" value="盗難">
                        <label class="form-check-label" for="reason3">盗難</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="reason" id="reason4" value="その他">
                        <label class="form-check-label" for="reason4">その他</label>
                    </div>
                </div>
                <div class="mb-4" id="other-reason-area" style="display: none;">
                    <textarea class="form-control" name="other_reason" rows="4" maxlength="255"
                        placeholder="その他の場合、こちらへ理由をご入力ください" style="resize: none;"></textarea>
                    <div class="text-right small"><span id="char-count">0</span>/255</div>
                </div>
                <div class="mb-4">
                    【再発行に関する注意事項】<br>
                    2回以上の再発行には別途手続きが必要です。<br>
                    紛失にはご注意ください。
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-md-5 offset-md-1 mt10">
                    <a href="{{ url('seal/reissue/' . $contract_id) }}" class="btn btn-lg btn-block btn-outline-success">戻る</a>
                </div>
                <div class="col-12 col-md-5 mt10">
                    <button type="submit" class="btn btn-lg btn-block btn-success">進む</button>
                </div>
            </div>
        </form>
    </section>
</main>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // ラジオボタンの選択でテキストエリア表示切替
        const radios = document.querySelectorAll('input[name="reason"]');
        const otherArea = document.getElementById('other-reason-area');
        radios.forEach(radio => {
            radio.addEventListener('change', function() {
                if (this.value === 'その他') {
                    otherArea.style.display = '';
                } else {
                    otherArea.style.display = 'none';
                }
            });
        });

        // 文字数カウント
        const textarea = document.querySelector('textarea[name="other_reason"]');
        const charCount = document.getElementById('char-count');
        if (textarea) {
            textarea.addEventListener('input', function() {
                charCount.textContent = this.value.length;
            });
        }
    });
</script>
@endsection