@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8 main-area">

            <h1 style="text-align: center;">活動站</h1>
            <h3 style="text-align: center;"><hr style="width:2em; display: inline-block"></h3>
            <h2 style="text-align: center;">快問快答抽獎登記</h2>
            
            <form method="POST" action="?" style="font-size: 1.4em;">
                @csrf
                @if ($errors->any())
                    <div class="text-left mt-3 alert alert-block alert-dismissible alert-danger">
                        <span type="button" class="close" data-bs-dismiss="alert">×</span>
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                @if ($message = Session::get('success'))
                    <div class="text-left mt-3 alert alert-block alert-dismissible alert-success ">
                        <span type="button" class="close" data-bs-dismiss="alert">×</span>    
                        <strong>{{ $message }}</strong>
                    </div>
                @endif
                <div class="card" style="display:none;">
                    <div class="card-body">
                        
                        <div class="mb-3">
                            <label for="regName" class="form-label">姓名</label>
                            <input type="text" class="form-control" id="regName" name="name" required value="{{ old('name') }}">
                        </div>
                        <div class="mb-3">
                            <label for="regIdNumber" class="form-label">身份證字號</label>
                            <input type="text" class="form-control" id="regIdNumber" name="id_number" required value="{{ old('id_number') }}">
                        </div>
                        <div class="mb-3">
                            <label for="regEmail" class="form-label">電子信箱</label>
                            <input type="email" class="form-control" id="regEmail" name="email" required value="{{ old('email') }}">
                        </div>
                        <div class="mb-3">
                            <label for="regPhone" class="form-label">手機</label>
                            <input type="text" class="form-control" id="regPhone" name="phone" required value="{{ old('phone') }}" placeholder="範例：09xxxxxxxx">
                        </div>
                        <div class="mb-3">
                            <label for="county_box" class="form-label">戶籍地(限設籍高雄市民參與)</label>
                            
                            <div class="dropdown">
                                <select name="address" id="county_box1" class="form-select" required>
                                    <option value="" selected disabled>選擇縣市</option>
                                    <option value="高雄市">高雄市</option>
                                </select>
                                <select name="district" id="district_box" style="visibility:hidden;">
                                    <option value="">選擇鄉鎮市區</option>
                                </select>
                                <input type="text" id="zipcode_box" placeholder="郵遞區號" style="visibility:hidden;">
                            </div>
                        </div>

                        <div class="mb-3">
                            &nbsp;
                        </div>
                        <div class="mb-3">
                            <input type="checkbox" class="form-check-input" id="regAgree" required>
                            <label class="form-check-label" for="regAgree">我同意 &nbsp; <a href="/gdpr">個資法同意書</a></label>
                        </div>
                        <button type="submit" class="btn btn-primary">登記</button>
                    </div>
                </div>
            </form>

            <p>&nbsp;</p>

        </div>
    </div>
</div>

@endsection