@extends('layouts.app')

@section('content')
<main>
    <header class="alert alert-success">
        <h4 class="container">ユーザー情報確認 > 退会する</h4>
    </header>
    <section class="container mt30 mb50">
        <div class="row">
            <div class="col-12 mb20">
                @if (!empty($error_message))
                <div class="alert alert-danger" style="font-size:1.1em;">
                    {{ $error_message }}
                </div>
                @endif
                <h3>退会しますか？</h3>
                <ul style="margin-bottom:32px;">
                    <li>退会されますと、マイページでご覧いただけるすべての情報が消去されます。</li>
                    <li>また再度入会をご希望の場合には、新規ユーザーとして登録をお願いいたします。</li>
                    <li>再度入会していただいても、過去の契約情報等ご確認いただくことはできなくなります。</li>
                    <li>空き待ち登録されている駐輪場はすべてキャンセル扱いとなります。</li>
                </ul>
            </div>
            <div class="col-12 col-md-5 offset-0 offset-md-1 mt10">
                <form method="POST" action="{{ url('/user/withdraw/confirm') }}" id="withdrawForm">
                    @csrf
                    <button type="button" class="btn btn-lg btn-block btn-success" onclick="showWithdrawModal()">退会する</button>
                </form>
                <!-- カスタム確認ダイアログ -->
                <div id="withdrawModal" style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.2);z-index:9999;">
                    <div style="background:#fff;padding:32px 24px;border-radius:8px;max-width:340px;margin:120px auto;box-shadow:0 2px 8px rgba(0,0,0,0.15);text-align:center;">
                        <div style="font-size:1.2em;margin-bottom:8px;">確認ダイアログ</div>
                        <div style="margin-bottom:24px;">本当に退会しますか。</div>
                        <button type="button" style="background:#2962ff;color:#fff;border:none;padding:8px 32px;border-radius:4px;margin-right:8px;font-weight:bold;" onclick="submitWithdraw()">はい</button>
                        <button type="button" style="background:#f5f5f5;color:#333;border:none;padding:8px 32px;border-radius:4px;font-weight:bold;" onclick="closeWithdrawModal()">いいえ</button>
                    </div>
                </div>
                <script>
                    function showWithdrawModal() {
                        document.getElementById('withdrawModal').style.display = 'block';
                    }

                    function closeWithdrawModal() {
                        document.getElementById('withdrawModal').style.display = 'none';
                    }

                    function submitWithdraw() {
                        document.getElementById('withdrawForm').submit();
                    }
                </script>
            </div>
            <div class="col-12 col-md-5 mt10">
                <a class="btn btn-lg btn-block btn-outline-success" href="{{ url('/user/info') }}">キャンセル</a>
            </div>
        </div>
    </section>
</main>
@endsection