@extends('layouts.app')

@push('style')
  

 
  <style>
@media only screen and(max-width: 525px)  {
    .custom-select{
        width: 100%;
    }
}
@media only screen and(min-width: 769px)  {
      .input-group {
      
      width:200px;
  }
  .input-group-text {
    min-width:260px;
  /*  max-width:200px;*/
  }
}
body{background: #fff}.rounded{border-radius: 1rem}.nav-pills .nav-link{color: #555}.nav-pills .nav-link.active{color: white}input[type="radio"]{margin-right: 5px}.bold{font-weight:bold}
      </style>
@endpush

@section('content')  
<div class="paymentbody">

    <div class="lead text-nowrap pb-4">  </div>
    <form action=" {{ route('subscribe') }}" method="POST" id="registerForm" class="d-inline  fs-6 needs-validation"> 
        <div class="mb-3 col-sm-12 col-md-6 col-xl-6 mx-auto">
            <input type="hidden" name="pageId" value='{{isset($data["pageId"]) ? $data["pageId"] : "" }}'>
            <input type="hidden" name="facebookuserId" value='{{isset($data["facebookuserId"]) ? $data["facebookuserId"] : "" }}'> 
            <input type='hidden' name='subscription_types_id'   value="{{isset($subscription_type) ? $subscription_type['id'] : '' }}" >
            
            <div class="d-flex mx-auto justify-content-center  mb-3 col-sm-12 mx-auto">
                <div class="input-group justify-content-center flex-nowrap  ">
                    <label class="input-group-text col-sm-4" for="name">{{ __('applabels.name') }}</label> 
                    <input class="form-control item col-sm-8"   type='text' name='name' placeholder=" {{ __('applabels.provide name') }} " value='{{isset($data["name"]) ? $data["name"] : "" }}' required>
                    <div class="invalid-feedback">Please provide a phone number</div>  
                </div>
            </div>
            <div class="d-flex mx-auto justify-content-center  mb-3 col-sm-12 mx-auto">
                <div class="input-group justify-content-center flex-nowrap  ">
                    <label class="input-group-text col-sm-4" for="email">{{ __('menu.email') }}</label> 
                    <input class="form-control item col-sm-8"   type='email' name='email' placeholder=" {{ __('menu.provide email') }} " value='{{isset($data["pageEmail"]) ? $data["pageEmail"] : "" }}' required>
                    <div class="invalid-feedback">Please provide a phone number</div>  
                </div>
            </div>
            <div class="d-flex mx-auto justify-content-center  mb-3 col-sm-12 mx-auto">
                <div class="input-group justify-content-center flex-nowrap  ">
                    <label class="input-group-text col-sm-4" for="name">{{ __('applabels.company') }}</label> 
                    <input class="form-control item col-sm-8"   type='text' name='company' placeholder=" " value=''>
                </div>
            </div>
            <div class="d-flex mx-auto justify-content-center  mb-3 col-sm-12 mx-auto">
                <div class="input-group justify-content-center flex-nowrap  ">
                    <label class="input-group-text col-sm-4" for="name">{{ __('applabels.VAT') }}</label> 
                    <input class="form-control item col-sm-8"   type='text' name='VAT' placeholder=" " value=''>
                </div>
            </div>
            <div class="d-flex mx-auto justify-content-center  mb-3 col-sm-12 mx-auto">
                <div class="input-group justify-content-center flex-nowrap  ">
                    <label class="input-group-text col-sm-4" for="name">{{ __('applabels.address') }}</label> 
                    <input class="form-control item col-sm-8"   type='text' name='address' placeholder="  " value=''>
                </div>
            </div>
            <div class="d-flex mx-auto justify-content-center  mb-3 col-sm-12 mx-auto">
                <div class="input-group justify-content-center flex-nowrap  ">
                    <label class="input-group-text col-sm-4" for="name">{{ __('applabels.zip') }}</label> 
                    <input class="form-control item col-sm-8"   type='text' name='zipcode' placeholder="   " value='' required>
                </div>
            </div>
            <div class="d-flex mx-auto justify-content-center  mb-3 col-sm-12 mx-auto">
                <div class="input-group justify-content-center flex-nowrap  ">
                    <label class="input-group-text col-sm-4" for="name">{{ __('applabels.city') }}</label> 
                    <input class="form-control item col-sm-8"   type='text' name='city' value='' required>
                </div>
            </div>   

            <div class="d-flex mx-auto justify-content-center  mb-3 col-sm-12 mx-auto">
                <div class="input-group justify-content-center flex-nowrap  ">
                    <label class="input-group-text col-sm-4" for="name">{{ __('applabels.country') }}</label> 
                    <select class="custom-select w-75 ps-2" name="country" id="country"    >
                        @foreach($countries as $country)
                        <option value="{{ $country }}" {{ $country=='Portugal' ? 'selected' : '' }}>{{ $country }} </option>
                        @endforeach
                    </select>
                </div>
            </div>   
            <div class="d-flex mx-auto justify-content-center   mb-3 col-sm-12 mx-auto">                    
                <div class="input-group justify-content-center flex-nowrap ">
                    <label class="input-group-text col-sm-4" for="phone">{{ __('menu.phone') }}</label>
                    <input class="form-control item col-sm-8"   type='phone' name='phone' placeholder=" {{ __('menu.provide phone') }} " value='{{isset($data["phone"]) ? $data["phone"] : "" }}' required>
                    <div class="invalid-feedback">Please provide a phone number</div>
                </div>
            </div> 
            <div class="d-flex mx-auto justify-content-center   mb-3 col-sm-12 mx-auto   " id="">
                
                <div class="input-group  justify-content-center flex-nowrap col-sm-12">
                    <label class="input-group-text col-sm-4" for="businessName"  > {{ __('applabels.businessPage') }}  </label>
                    <input class="form-control item col-sm-8" type='text' id='businessName' placeholder=" {{ __('applabels.provide businesspage') }} " name='businessName' value='{{isset($data["businessName"]) ? $data["businessName"] : "" }}'  required >
                    <div class="invalid-feedback">Please provide information</div>
                </div>
              
            </div> 
             @if (isset($subscription_type) )
             <!-- gratis? -->
               @if ($subscription_type['id'] == 1 )
               <input type="hidden" name="paymentMethod" class="form-control" value="free" required="required"> 
               <div class="pay px-5 mx-auto text-center"> <button class="btn btn-primary btn-block btn-pay" id="freebtn">{{ __('applabels.subscribe') }}  </button>                
                @else
                    <!-- payment methods accordion -->
                    @include('subscriptions.paymentmethods')

                @endif
            @endif
            
           
        </div>
</form>
</div>

    @push('scripts')   
    <script>//jQuery.noConflict();</script>
   
    <script type="text/javascript">  
 

 
        $(document).ready(function(){   
            

            $(".btn-pay").on("click", function(event) {
                event.preventDefault();
                paymentmethod = $(this).attr('id');
                alert('submiting');
                console.log(paymentmethod);
                $('#paymentMethod').val(paymentmethod);
                $("#registerForm").submit();
            });  
           
            // when the submit is clicked
            $("#registerForm input[type='submit']").on("click", function(event) {
                event.preventDefault();
                 
                console.log(active);
            });  

        }); 

        
    </script>

    @endpush
    @endsection