@extends('layouts.app')

@section('content')

<nav class="breadcrumb-container" aria-label="breadcrumb">
    <div class="container-fluid">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('home') }}">@lang('site.home_page')</a></li>
            <li class="breadcrumb-item active" aria-current="page">@lang('main.register')</li>
        </ol>
    </div>
</nav>

<div class="row m-0">
    <div class="col-lg-8 mx-auto">
        <div class="d-flex flex-column align-items-center justify-content-center h-100">
            <p class="text-end fs-rg fw-light w-100 mb-5">
                @lang('site.have_account') 
                <a href="{{ route('login') }}" class="text-primary-color">@lang('main.login')</a> 
            </p>

            <div class="text-center w-100" x-data="{'type': '{{ $type_from_url }}'}">
                <h4 class="fw-medium text-capitalize mb-2">@lang('main.register')</h4>
                <p class="text-brown fw-light fs-rg mb-5">@lang('site.register_message')</p>

                <form action="{{ route('register') }}" method="post" class="form1 mb-25">
                    @csrf
                    
                    <div class="mb-3">
                        <div class="form-check form-check-inline text-start fs-rg">
                            <input class="form-check-input @error('type') is-invalid @enderror" 
                                type="radio" 
                                name="type" 
                                x-model="type"
                                value="customer"
                                id="type-customer" 
                                required {{ $type_from_url === 'customer' ? 'checked' : '' }} />

                            <label class="form-check-label" for="type-customer">
                                @lang('main.customer')
                            </label>
                        </div>
                        
                        <div class="form-check form-check-inline text-start fs-rg">
                            <input class="form-check-input @error('type') is-invalid @enderror" 
                                type="radio" 
                                name="type" 
                                x-model="type"
                                value="company"
                                id="type-company" 
                                required {{ $type_from_url === 'company' ? 'checked' : '' }}/>

                            <label class="form-check-label" for="type-company">
                                @lang('main.company')
                            </label>
                        </div>
                    </div>

                    <div class="mb-3">
                        <input type="text" name="name" id="name" class="form-control form-control-md form-control-gray fs-sm @error('name') is-invalid @enderror" placeholder="@lang('main.name')" value="{{ old('name') }}" required autofocus>
    
                        @error('name')
                            <div class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </div>
                        @enderror
                    </div>

                    <div class="mb-3" x-show="type == 'company'">
                        <input type="text" name="business_name" id="business_name" class="form-control form-control-md form-control-gray fs-sm @error('business_name') is-invalid @enderror" placeholder="@lang('main.business_name')" value="{{ old('business_name') }}">
    
                        @error('business_name')
                            <div class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <input type="email" name="email" id="email" class="form-control form-control-md form-control-gray fs-sm @error('email') is-invalid @enderror" placeholder="@lang('main.email')" value="{{ old('email') }}" required>

                        @error('email')
                            <div class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </div>
                        @enderror
                    </div>
                    
                    <div class="mb-3">
                        <input type="text" name="phone" id="phone" class="form-control form-control-md form-control-gray fs-sm @error('phone') is-invalid @enderror" placeholder="@lang('main.phone')" value="{{ old('phone') }}" required>
    
                        @error('phone')
                            <div class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </div>
                        @enderror
                    </div>
                    
                    <div class="mb-3">
                        <input type="password" name="password" class="form-control form-control-md form-control-gray fs-sm @error('password') is-invalid @enderror" id="password" placeholder="@lang('main.password')" required>
    
                        @error('password')
                            <div class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <input type="password" name="password_confirmation" class="form-control form-control-md form-control-gray fs-sm @error('password_confirmation') is-invalid @enderror" id="password_confirmation" placeholder="@lang('main.password_confirmation')" required>
    
                        @error('password_confirmation')
                            <div class="invalid-feedback d-block" role="alert">
                                <strong>{{ $message }}</strong>
                            </div>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <div class="form-check text-start fs-rg">
                            <input class="form-check-input @error('accept_privacy') is-invalid @enderror" type="checkbox" name="accept_privacy" id="flexCheckChecked" required checked/>
                            <label class="form-check-label" for="flexCheckChecked">
                                @lang('site.accept_our_privacy_policy')
                                <br> <a href="{{ route('privacy_policy') }}" class="text-brown text-decoration-underline">@lang('site.privacy_policy')</a>
                            </label>

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

                    <div class="d-flex align-items-center mb-5">
                        <div class="mx-auto">
                            <button type="submit" class="btn btn-md btn-primary-color">@lang('main.register')</button>
                        </div>
                    </div>

                </form>
            </div>

        </div>
    </div>
</div>
@endsection