@extends('layouts.auth')

@section('styles')
<style>
body {
    background: url('img/Auth/background_register.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: bottom center;
}
form {
    margin-right: 15em;
}
.card {
    margin-top: 25vh;
}
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row justify-content-end">
        <div class="col-md-6">
            <form method="POST" action="{{ route('register') }}">
                <div class="card">
                    <div class="card-header w-100 text-center" style="background:rgba(36,161,185,.8);"><u>註冊</u></div>
                    <div class="card-body">
                        @csrf

                        <div class="form-group row">
                            <label for="company" class="col-md-6 col-form-label">公司名</label>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-12">
                                <input id="company" type="text" class="form-control @error('company') is-invalid @enderror" name="company" value="{{ old('company') }}" required autocomplete="company">

                                @error('company')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                        </div>

                        <div class="form-group row">
                            <label for="represent" class="col-md-6 col-form-label">負責人姓名</label>
                            <label for="account"   class="col-md-6 col-form-label">帳號</label>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-6">
                                <input id="represent" type="text" class="form-control @error('represent') is-invalid @enderror" name="represent" value="{{ old('represent') }}" required autocomplete="represent">

                                @error('represent')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <input id="account" type="text" class="form-control @error('account') is-invalid @enderror" name="account" value="{{ old('account') }}" required autocomplete="account">

                                @error('account')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="email" class="col-md-6 col-form-label">Email</label>
                            <label for="password" class="col-md-6 col-form-label">密碼</label>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">

                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" value="{{ old('password') }}" required autocomplete="password">

                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                        </div>

                        <div class="form-group row">
                            <label for="phone" class="col-md-6 col-form-label">手機號碼</label>
                            <label for="password_confirmation" class="col-md-6 col-form-label">確認密碼</label>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-6">
                                <input id="phone" type="tel" class="form-control @error('phone') is-invalid @enderror" pattern="09\d{8}" placeholder=" 格式：09XXXXXXXX (共 10 位)" name="phone" value="{{ old('phone') }}" required autocomplete="phone">

                                @error('phone')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <input id="password_confirmation" type="password" class="form-control @error('password_confirmation') is-invalid @enderror" name="password_confirmation" value="{{ old('password_confirmation') }}" required autocomplete="email">

                                @error('password_confirmation')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-12 text-center">
                                <label><input type="checkbox">同意接受本站之<a href="">隱私權政策</a></label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 text-center">
                        <button type="submit" class='btn'>
                            <img src="{{ asset('img/Auth/button_register.svg') }}" width="160" height="50" />
                        </button>
                    </div>
                    <div class="col-md-12 text-center">
                        <small><span>已有帳號嗎? <a href="{{ route('login') }}" class='text-dark'>回登入頁</a></span></small>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection