@extends('layouts.default')
@section('content')
<script>
    $(document).ready(function(){
        $('#get_info_cb').click(function() {
            getThem = '0';
            if($('#get_info_cb').is(":checked")) { getThem = '1'; }
            $("#get_info").val(getThem);
        });
        $("#reset-bn").click(function(){
            $('#data-form').reset();
        });
        $("#save-bn").click(function(){
            $('#data-form').submit();
        });
    });
</script>
<section class="section">
    <form method="POST" id="data-form" action="/persons">
    @csrf
        <div class="container">
            <div class="level">
                <div class="level-left">
                    <figure class="image is-64x64 is-pulled-left">
                        <img src="/img/gender-u.png">
                    </figure>
                    <div class="container is-pulled-left" style="margin-left: 30px;">
                        <h1 class="title is-capitalized	logis-red">{{ trans('labels.members') }}</h1>
                        <h2 class="subtitle logis-red">add new</h2>
                    </div>
                </div>
                <div class="level-right">
                    <div class="buttons">
                        <a id="reset-bn"  class="button is-danger is-outlined">
                            <span>Clear</span>
                        </a>
                        <a href="/persons" class="button is-outlined is-primary">Cancel</a>
                        <a id="save-bn"  class="button is-primary">
                            <span>Save</span>
                            <span class="icon is-small">
                                <i class="fas fa-save"></i>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
            <hr/>
            <input type="hidden" name="get_info" id="get_info" value="0">
            <div class="field">
                <label class="label">{{ mb_strtoupper(trans('labels.name'), 'UTF-8') }}</label>
                <div class="field-body">
                    <div class="field is-grouped">
                        <p class="control">
                            <input  type="text"
                                    class="input"
                                    name="person_name"
                                    value="{{ old('person_name') }}"
                                    placeholder="{!! trans('labels.name') !!}"
                            >
                        </p>
                        <p class="control">
                            <input  type="text"
                                    class="input"
                                    name="person_surname"
                                    value="{{ old('person_surname') }}"
                                    placeholder="{!! trans('labels.surname') !!}"
                            >
                        </p>
                    </div>
                </div>
            </div>
            <div class="field">
                <label class="label">{{ mb_strtoupper(trans('labels.phone'), 'UTF-8') }}</label>
                <div class="field-body">
                    <div class="field is-grouped">
                        <p class="control has-icons-left">
                            <input  type="tel"
                                    class="input"
                                    name="person_phone_1"
                                    value="{{ old('person_phone_1') }}"
                                    placeholder="{!! trans('labels.phone') !!} 1"
                            >
                            <span class="icon is-small is-left">
                                <i class="fas fa-mobile"></i>
                            </span>
                        </p>
                        <p class="control has-icons-left">
                            <input  type="tel"
                                    class="input"
                                    name="person_phone_2"
                                    value="{{ old('person_phone_2') }}"
                                    placeholder="{!! trans('labels.phone') !!} 2"
                            >
                            <span class="icon is-small is-left">
                                <i class="fas fa-phone"></i>
                            </span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="field">
                <label class="label">{{ mb_strtoupper(trans('labels.email'), 'UTF-8') }}</label>
                <div class="field-body">
                    <div class="field">
                        <p class="control has-icons-left">
                            <input  type="email"
                                    class="input"
                                    name="person_email"
                                    value="{{ old('person_email') }}"
                                    placeholder="{!! trans('labels.email') !!}"
                            >
                            <span class="icon is-small is-left">
                                <i class="fas fa-envelope"></i>
                            </span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="field">
                <label class="label">{{ mb_strtoupper(trans('labels.language'), 'UTF-8') }}</label>
                <div class="field-body">
                    <div class="field is-grouped">
                        <p class="control">
                            <label class="radio">
                                <input type="radio" name="person_language" value="EN" >
                                <img src="/img/en.gif"  title="prefered language">
                            </label>
                            <label class="radio">
                                <input type="radio" name="person_language" value="FR" >
                                <img src="/img/fr.gif"  title="prefered language">
                            </label>
                        </p>
                    </div>
                </div>
            </div>

            <div class="field ">
                <label class="label">NOTIFICATIONS</label>
                <div class="field-body">
                    <div class="field is-grouped">
                        <p class="control">
                            <input type="checkbox" id="get_info_cb" name="get_info_cb" >
                        </p>
                    </div>
                </div>
            </div>

        </div>
    </form>
</section>
@endsection