@extends('site.layouts.app')

@section('content')

<div class="page-wrapper content-wrapper page-register">
    <section class="register">
        <div class="container">

            <div class="register__box">
                <div class="register__title">
                    <h2>Cadastre-se</h2>
                    <p>Preencha as informações.</p>
                </div>

                @if(session('success'))
                    <div class="message-box success">
                        {{ session('success') }}
                    </div>
                @endif

                @if(session('error'))
                    <div class="message-box danger">
                        {{ session('error') }}
                    </div>
                @endif

                @if($errors->any())
                    <div class="message-box danger">
                        <ul>
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="register__form">
                    <form action="{{ route('site.sailor.store') }}" enctype="multipart/form-data" method="POST">
                        @csrf
                        <div class="field">
                            <label for="name">Nome<span>*</span></label>
                            <input type="text" name="name" id="name">
                        </div>

                        <div class="columns">
                            <div class="field">
                                <label for="cpf">CPF<span>*</span></label>
                                <input type="text" name="cpf" id="cpf">
                            </div>
                            <div class="field">
                                <label for="email">E-mail<span>*</span></label>
                                <input type="email" name="email" id="email">
                            </div>
                        </div>

                        <div class="columns">
                            <div class="field">
                                <label for="phone">Telefone / Contato<span>*</span></label>
                                <input type="text" name="phone" id="phone">
                            </div>
                            <div class="field">
                                <label for="club">Clube<span>*</span></label>
                                <input type="text" name="club" id="club">
                            </div>
                        </div>

                        <div class="columns">
                            <div class="field">
                                <label for="city">Cidade<span>*</span></label>
                                <input type="text" name="city" id="city">
                            </div>
                            <div class="field">
                                <label for="state">Estado<span>*</span></label>
                                <input type="text" name="state" id="state">
                            </div>
                        </div>

                        <div class="columns">
                            <div class="field">
                                <label for="id-ws">ID (World Sailing)</label>
                                <input type="text" name="id-ws" id="id-ws">
                            </div>
                            <div class="field">
                                <label for="id-cb">ID (CB Vela)</label>
                                <input type="text" name="id-cb" id="id-cb">
                            </div>
                        </div>

                        <div class="field">
                            <label for="photo">Enviar foto para carteirinha<span>*</span></label>
                            <div class="field-input">
                                <p>Anexar imagem (Tamanho máximo de 5mb)</p>
                                <input type="file" name="photo" id="photo">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 14.9971C5.19891 14.9971 5.38968 15.0761 5.53033 15.2167C5.67098 15.3574 5.75 15.5482 5.75 15.7471V18.0001C5.75 18.1381 5.862 18.2501 6 18.2501H18C18.0663 18.2501 18.1299 18.2237 18.1768 18.1768C18.2237 18.13 18.25 18.0664 18.25 18.0001V15.7471C18.25 15.5482 18.329 15.3574 18.4697 15.2167C18.6103 15.0761 18.8011 14.9971 19 14.9971C19.1989 14.9971 19.3897 15.0761 19.5303 15.2167C19.671 15.3574 19.75 15.5482 19.75 15.7471V18.0001C19.75 18.4642 19.5656 18.9093 19.2374 19.2375C18.9092 19.5657 18.4641 19.7501 18 19.7501H6C5.53587 19.7501 5.09075 19.5657 4.76256 19.2375C4.43437 18.9093 4.25 18.4642 4.25 18.0001V15.7471C4.25 15.5482 4.32902 15.3574 4.46967 15.2167C4.61032 15.0761 4.80109 14.9971 5 14.9971Z" fill="#666A6E"/>
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.2012 5.58008C12.4001 5.58008 12.5909 5.6591 12.7315 5.79975C12.8722 5.9404 12.9512 6.13117 12.9512 6.33008V14.4161C12.9512 14.615 12.8722 14.8058 12.7315 14.9464C12.5909 15.0871 12.4001 15.1661 12.2012 15.1661C12.0023 15.1661 11.8115 15.0871 11.6708 14.9464C11.5302 14.8058 11.4512 14.615 11.4512 14.4161V6.33108C11.4512 6.13217 11.5302 5.9414 11.6708 5.80075C11.8115 5.6601 12.0023 5.58008 12.2012 5.58008Z" fill="#666A6E"/>
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.6784 4.46403C11.8185 4.3272 12.0066 4.25061 12.2024 4.25061C12.3982 4.25061 12.5863 4.3272 12.7264 4.46403L16.0704 7.73003C16.2098 7.86964 16.2885 8.05853 16.2896 8.25578C16.2906 8.45303 16.2139 8.64276 16.0761 8.78387C15.9383 8.92499 15.7504 9.00612 15.5532 9.00971C15.356 9.01329 15.1653 8.93904 15.0224 8.80303L12.2024 6.04902L9.38241 8.80303C9.31227 8.87331 9.22887 8.92896 9.13704 8.96676C9.04522 9.00456 8.94681 9.02374 8.84751 9.02321C8.74822 9.02267 8.65001 9.00242 8.55861 8.96364C8.4672 8.92485 8.3844 8.8683 8.31502 8.79726C8.24564 8.72622 8.19105 8.64212 8.15443 8.54982C8.11781 8.45752 8.09988 8.35887 8.10169 8.25959C8.10349 8.16031 8.12499 8.06237 8.16494 7.97147C8.20489 7.88056 8.2625 7.79849 8.33441 7.73003L11.6784 4.46403Z" fill="#666A6E"/>
                                </svg>
                            </div>
                        </div>

                        <div class="field field--terms">
                            <input type="checkbox" name="terms" id="terms">
                            <label for="terms">Li e aceito os <strong><a href="#">Termos de uso</a></strong></label>
                        </div>

                        <input type="submit" value="Cadastrar">
                    </form>
                </div>
            </div>
        </div>
    </section>
</div>

@endsection