@extends('frontend.layouts.web.app')

@section('content')
    <section class="pt-4 mb-4">
        <div class="container text-center">
            <div class="row">
                <div class="col-lg-6 text-center text-lg-left">
                    <h1 class="fw-600 h4">{{ translate('Register your shop')}}</h1>
                </div>
                <div class="col-lg-6">
                    <ul class="breadcrumb bg-transparent p-0 justify-content-center justify-content-lg-end">
                        <li class="breadcrumb-item opacity-50">
                            <a class="text-reset" href="{{ route('home') }}">{{ translate('Home')}}</a>
                        </li>
                        <li class="text-dark fw-600 breadcrumb-item">
                            <a class="text-reset"
                               href="{{ route('shops.create') }}">"{{ translate('Register your shop')}}"</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <section class="pt-4 mb-4">
        <div class="container">
            <div class="row">
                <div class="col-xxl-5 col-xl-6 col-md-8 mx-auto">
                    <form id="shop" class="" action="{{ route('shops.store') }}" method="POST"
                          enctype="multipart/form-data">
                        @csrf
                        @if(Auth::check())
                            <div class="bg-white rounded shadow-sm mb-4">
                                <div class="fs-15 fw-600 p-3 border-bottom ">
                                    {{ translate('Basic Info')}}

                                </div>
                                <div class="p-3">
                                    <div class="form-group">
                                        <label>{{ translate('Shop Name')}} <span class="text-primary">*</span></label>
                                        <input type="text" class="form-control"
                                               placeholder="{{ translate('Shop Name')}}" value="{{old('my_text')}}"
                                               name="shop_name" required>
                                    </div>
                                    <div class="form-group">
                                        <label>{{ translate('Address')}} <span class="text-primary">*</span></label>
                                        <input type="text" class="form-control mb-3"
                                               placeholder="{{ translate('Address')}}" name="address" required>
                                    </div>
                                    <div class="form-group">
                                        <label>{{ translate('Seller Type')}} <span class="text-primary">*</span></label>
                                        <select class="form-control" name="seller_type" id="seller_type">
                                            <option>{{trans('Select seller type')}}</option>
                                            <option value="seller">{{trans('Seller')}}</option>
                                            <option value="influence">{{trans('influence')}}</option>
                                        </select>
                                    </div>

                                </div>
                            </div>

                        @else (!Auth::check())
                            <div class="bg-white rounded shadow-sm mb-4">
                                <div class="fs-15 fw-600 p-3 border-bottom ">
                                    {{ translate('Basic Info')}}

                                </div>
                                <div class="p-3">
                                    <div class="form-group">
                                        <label>{{ translate('Your Name')}} <span class="text-primary">*</span></label>
                                        <input type="text"
                                               class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}"
                                               value="{{ old('name') }}" placeholder="{{  translate('Name') }}"
                                               name="name">
                                        @error('name')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                        @enderror

                                    </div>
                                    <div class="form-group">
                                        <label>{{ translate('Your Email')}} <span class="text-primary">*</span></label>
                                        <input type="email"
                                               class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}"
                                               value="{{ old('email') }}"
                                               placeholder="{{  translate('Email') }}"
                                               name="email">
                                        @error('email')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <label>{{ translate('Your Password')}} <span
                                                class="text-primary">*</span></label>
                                        <input type="password"
                                               class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}"
                                               placeholder="{{  translate('Password') }}" name="password">
                                        @error('password')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <label>{{ translate('Repeat Password')}} <span
                                                class="text-primary">*</span></label>
                                        <input type="password"
                                               class="form-control {{ $errors->has('password_confirmation') ? ' is-invalid' : '' }}"
                                               placeholder="{{  translate('Confirm Password') }}"
                                               name="password_confirmation">
                                        @error('password_confirmation')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label>{{ translate('Shop Name')}} <span class="text-primary">*</span></label>
                                        <input type="text"
                                               class="form-control {{ $errors->has('shop_name') ? ' is-invalid' : '' }}"
                                               value="{{ old('shop_name') }}"
                                               placeholder="{{ translate('Shop Name')}}" name="shop_name" required>
                                        @error('shop_name')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <label>{{ translate('Address')}} <span class="text-primary">*</span></label>
                                        <input type="text"
                                               value="{{ old('address') }}"
                                               class="form-control mb-3 {{ $errors->has('address') ? ' is-invalid' : '' }}"
                                               placeholder="{{ translate('Address')}}" name="address" required>
                                        @error('address')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <label>{{ translate('Seller Type')}} <span class="text-primary">*</span></label>
                                        <select
                                            class="form-control {{ $errors->has('seller_type') ? ' is-invalid' : '' }}"
                                            name="seller_type" id="seller_type"
                                        >
                                            <option>{{trans('Select seller type')}}</option>
                                            <option
                                                value="seller" {{old('seller_type') == 'seller'?'selected':''}}>{{trans('Seller')}}</option>
                                            <option
                                                value="influence" {{old('seller_type') == 'influence'?'selected':''}}>{{trans('influence')}}</option>
                                        </select>
                                        @error('seller_type')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                        @enderror
                                    </div>

                                </div>
                            </div>
                            <div class="bg-white rounded shadow-sm mb-3 verification_form" style="display: none"
                                 id="seller_form">
                                <div
                                    class="fs-15 fw-600 p-3 border-bottom d-flex justify-content-sm-between align-items-center">
                                    {{ translate('Personal Info')}}
                                    @if(get_setting('seller_contract'))
                                        <a href="{{url(get_setting('seller_contract'))}}"
                                           class="btn btn-primary text-white"
                                           download><i class="las la-download"></i> Contract Template</a>
                                    @endif
                                </div>
                                <div class="p-3">
                                    @if(!empty(get_setting('verification_form')))
                                        @foreach (json_decode(get_setting('verification_form')) as $key => $element)
                                            <div class="form-group">
                                                <label>{{ translate($element->label)}}

                                                    @if($element->required)
                                                        <span class="text-primary">*</span>
                                                    @endif
                                                </label>
                                                <input type="{{$element->type}}"
                                                       class="form-control{{ $errors->has($element->name) ? ' is-invalid' : '' }}"
                                                       value="{{ old($element->name) }}"
                                                       placeholder="{{  translate($element->name) }}"
                                                       name="{{$element->name}}">
                                                @error($element->name)
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                            <div class="bg-white rounded shadow-sm mb-3 verification_form" style="display: none"
                                 id="influence_form">
                                <div
                                    class="fs-15 fw-600 p-3 border-bottom d-flex justify-content-sm-between align-items-center">
                                    {{ translate('Personal Info')}}
                                    @if(get_setting('influence_contract'))
                                        <a href="{{url(get_setting('influence_contract'))}}" class="btn btn-primary"
                                           download><i class="las la-download"></i> Contract Template</a>
                                    @endif
                                </div>
                                <div class="p-3">
                                    @if(!empty(get_setting('influence_verification_form')))
                                        @foreach (json_decode(get_setting('influence_verification_form')) as $key => $element)
                                            <div class="form-group">
                                                <label>{{ translate($element->label)}} <span
                                                        class="text-primary">*</span></label>
                                                <input type="{{$element->type}}"
                                                       class="form-control{{ $errors->has($element->name) ? ' is-invalid' : '' }}"
                                                       value="{{ old($element->name) }}"
                                                       placeholder="{{  translate($element->name) }}"
                                                       name="{{$element->name}}">
                                                @error($element->name)
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        @endif


                        @if(get_setting('google_recaptcha') == 1)
                            <div class="form-group mt-2 mx-auto row">
                                <div class="g-recaptcha" data-sitekey="{{ env('CAPTCHA_KEY') }}"></div>
                            </div>
                        @endif

                        <div class="text-right">
                            <button type="submit"
                                    class="btn btn-primary fw-600">{{ translate('Register Your Shop')}}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

@endsection

@section('script')
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script type="text/javascript">
        // making the CAPTCHA  a required field for form submission
        $(document).ready(function () {
            // alert('helloman');
            $("#shop").on("submit", function (evt) {
                var response = grecaptcha.getResponse();
                if (response.length == 0) {
                    //reCaptcha not verified
                    alert("please verify you are humann!");
                    evt.preventDefault();
                    return false;
                }
                //captcha verified
                //do the rest of your validations here
                $("#reg-form").submit();
            });

            if ($('#seller_type').val() == 'seller') {
                $('.verification_form').slideUp(100);
                $(`#seller_form`).slideDown(300);
            } else if ($('#seller_type').val() == 'influence') {
                $('.verification_form').slideUp(100);
                $(`#influence_form`).slideDown(300);
            }
            $(document).on('change', '#seller_type', function () {
                $('.verification_form').slideUp(100);
                $(`#${$(this).val()}_form`).slideDown(300);
            });
        });
    </script>
@endsection