@extends('components.main')
@section('title')-Signup @endsection

@section('custom-style')
<style>
    body {
        position: relative;
        min-height: 100vh;
        padding-bottom: 13%
    }

    footer {
        /* position: relative; */
        position: absolute;
        bottom: 0px;
        rigth: 0px;
        width: 100%;
    }
    @media screen and (max-width: 800px){
        footer{
            position: relative;
            bottom: -110px
        }
    }
    @media screen and (max-width: 1100px){
        footer{
            position: relative;
            bottom: -140px
        }
    }
</style>
@endsection
@section('content')
<section class="login">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <img src="{{ asset('main_site/img/character.png') }}" alt="">

                    </div>

                    <div class="col-md-6">
                        <div class="login-form">
                            <h1>@lang('buttons.sign_up')</h1>

                         
                            <form action="{{ route('signUp.post') }}" method="POST">

                      
                                @csrf
                                @isset($token)
                                    <input type="hidden" name="token" value="{{ $token }}">
                                    
                                    @endisset
                                    @isset($roles)
                                    @foreach ($roles as $index => $value)
                                    <input type="hidden" name="roles[]" value="{{ $roles[$index] }}">
                                        
                                    @endforeach
                                    @endisset
                                <div class="row">
                                    <div class="col-md-6" s>
                                        <input type="text" name="first_name" value="{{ old('first_name') }}" id=""
                                            placeholder="@lang('forms.first_name')" @if($errors->has('first_name'))
                                        style="border-color:red" @endif>
                                        @error('first_name')
                                        <p class="text-danger">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <input type="text" name="last_name" value="{{ old('last_name') }}" id=""
                                            placeholder="@lang('forms.last_name')" @if($errors->has('last_name'))
                                        style="border-color:red" @endif>
                                        @error('last_name')
                                        <p class="text-danger">{{ $message }}</p>
                                        @enderror
                                    </div>

                                    <div class="col-md-6">
                                        <select name="country_id" id="" @if($errors->has('country'))
                                            style="border-color:red"
                                            @endif>
                                            <option value="{{ null }}">@lang('forms.country')</option>
                                            @foreach ($countries as $country)

                                            <option value="{{ $country->id }}" @if(old('country_id')==$country->id)
                                                selected @endif>{{ $country->name }}
                                                (+{{ $country->phonecode }})</option>
                                            @endforeach

                                        </select>
                                        @error('country')
                                        <p class="text-danger">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <input type="tel" name="phone_number" value="{{ old('phone_number') }}" id=""
                                            placeholder="@lang('forms.phone')" @if($errors->has('phone_number'))
                                        style="border-color:red" @endif>
                                        @error('phone_number')
                                        <p class="text-danger">{{ $message }}</p>
                                        @enderror
                                    </div>

                                    <div class="col-md-12">
                                        <input type="email" name="email" value="@isset($email){{  $email }}@else {{ old('email')}}@endisset" id=""
                                            placeholder="@lang('forms.email')" @if($errors->has('email'))
                                        style="border-color:red" @endif>
                                        @error('email')
                                        <p class="text-danger">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <input type="password" name="password" id=""
                                            placeholder="@lang('forms.password')" @if($errors->has('password'))
                                        style="border-color:red" @endif>
                                        @error('password')
                                        <p class="text-danger">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <input type="password" name="password_confirmation" id=""
                                            placeholder="@lang('forms.confirm_password')">
                                    </div>
                                    <div class="col-md-12">

                                        @include('components.responses')
                                    </div>
                                    <div class="col-md-7">
                                        <button type="submit">@lang('buttons.sign_up')</button>
                                    </div>

                                    <div class="col-md-5">
                                        <a href="{{ route('login') }}" class="signup">@lang('buttons.login')</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection