@extends('layouts.auth-master')

@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;*/
  }
}
      </style>
  @endpush

@section('content')  
          
<!-- div class="d-flex lead text-nowrap pb-4 w-50 mx-auto justify-content-center" -->
    @if(!isset($page))    
        <div id="alert" class="alert alert-danger  w-100 mx-auto" role="alert">
            {!! isset($message) ? $message : '' !!}
        </div>
    @else
    <div class="lead text-nowrap pb-4"> {{ $page }} </div>
    <form action=" {{ route('auth.facebook.pageinfo') }}" method="POST" id="fbpageinfoform" 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='userId' value='{{ $id }}'>            
            <input type='hidden' name='userName' value='{{ $name }}'>
            <input type='hidden' name='userEmail' value='{{ $email }}'>
            <input type='hidden' name='userToken' value='{{ $userToken }}'>
            <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="phoneNumber">{{ __('menu.phone') }}</label>
                    <input class="form-control item col-sm-8"   type='phone' name='phoneNumber' placeholder=" {{ __('menu.provide phone') }} " value='{{ $phoneNumber }}' 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="pageEmail">{{ __('menu.email') }}</label> 
                    <input class="form-control item col-sm-8"   type='email' name='pageEmail' placeholder=" {{ __('menu.provide email') }} " value='{{ $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="typeOfBusiness">{{ __('menu.Business Type') }}</label>
                    <select class="custom-select w-75 ps-2" name="typeOfBusiness" id="typeOfBusiness"    required>
                        <option  selected disabled>Choose... </option>
                        @foreach($pageTypes as $pagetype )
                            <option value="{{ $pagetype['id'] }}" 
                            @if((isset($pageTypeId)) and  ($pageTypeId==$pagetype['id']) ) 
                                selected
                            @endif
                            >
                                {{ $pagetype['title'] }}
                            </option>                        
                        @endforeach
                    </select>
                    <div class="invalid-feedback">Please select a Business Type.</div> 
                </div>
            </div>
            <div class="d-flex mx-auto justify-content-center mb-3 col-sm-12 mx-auto {{ ( (0 != $pageSubTypeId) && ('text' != $typeOfSubTypeInfo)) ? '' : 'd-none' }} " id="storeSelect">
                <div class="input-group  justify-content-center flex-nowrap ">
                    <label class="input-group-text col-sm-4" for="typeOfStore">{{ __('menu.Store Type') }}</label>
                    <select class="custom-select w-75 ps-2" name="typeOfStore" id="typeOfStore"    >
                        <option {{ (0 != $pageSubTypeId) ? '' : 'selected' }} value="" >Choose...</option>
                        @if(null !== $pageSubTypes)
                            @foreach($pageSubTypes as $pagesubtype )
                                <option value="{{ $pagesubtype['id'] }}"  {{ ($pageSubTypeId == $pagesubtype['id'] ) ? 'selected' : ''}} >
                                    {{ $pagesubtype['title'] }}
                                </option>                        
                            @endforeach
                        @endif
                    </select>
                    <div class="invalid-feedback">Please select a Store Type.</div>
                </div>                        
            </div>
                <input type='hidden'  id='subtypeOfPage' name='subtypeOfPage' value='{{ $pageSubTypeId }}'>
            <div class="d-flex mx-auto justify-content-center   mb-3 col-sm-12 mx-auto {{ ('text' == $typeOfSubTypeInfo) ? '' : 'd-none' }} " id="businessText">
                
                <div class="input-group  justify-content-center flex-nowrap col-sm-12">
                    <label class="input-group-text col-sm-4" for="typeOfSubBusiness"  > {{ $typeOfSubTypeTitle  }}</label>
                    <input class="form-control item col-sm-8" type='text' id='typeOfSubBusiness' name='typeOfSubBusiness' value="{{ $pageSubTypeTxt }}"   {{ ('text' == $typeOfSubTypeInfo) ? 'required' : '' }} >
                    <div class="invalid-feedback">Please provide information</div>
                </div>
            </div>
            
           
            <div class="d-flex pt-2 flex-row bd-highlight justify-content-center mb-2">
                <button type="submit" class="btn btn-primary"> {{ __('menu.submit') }}</button>
            </div>
</div>
    </form>
 
    @endif
 


@endsection
    @push('scripts')   
    

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
    <script type="text/javascript">  
        $(document).ready(function(){ 

           
      /*      $('#fbpageinfoform').on('submit',function save  (e) {
                e.preventDefault();

                var form = $("#fbpageinfoform")


                if (form[0].checkValidity()) {
                    form.addClass('was-validated');
                
                    var formData  = form.serializeArray(); //serialize
                    console.log(formData);
                    $.ajax({
                            type: 'POST',
                            url: "{{ route('auth.facebook.pageinfo') }}",
                            data: formData,
                            datatype: "json",
                            success: function(response) {
                                console.log(response, ' Resposta AJAX')
                                //modalProduct.hide()
                                //location.reload()
                            }, 
                            error: function(XMLHttpRequest, textStatus, errorThrown) {
                                alert(textStatus);
                            }
                        });
                
                } else { 
                    form[0].reportValidity();
                    event.preventDefault()
                    event.stopPropagation()
                }

            });
*/

            $('#phone-number').mask('000000000');


            $('#typeOfBusiness').change(function(){
                const subtypeid = "{{ isset($pageSubTypeId) ? $pageSubTypeId : 0 }}";
                $.get("{{ url('api/pagetypedropdown')}}", 
                { id: $(this).val() }, 
                function(data) {
                    $('#typeOfStore').empty(); 
                    $('#businessInput').empty(); 
                    console.log($('#storeSelect'));
                    console.log($('#storeSelect').attr("required"));
                  
                   // $('#storeSelect').toggleClass('collapse');

                    if ($.isEmptyObject(data)){
                       // console.log(data);
                          
                        $('#storeSelect').removeAttr('required'); 
                        $('#storeSelect').addClass('d-none'); 
                        $('#storeSelect').val(''); 
                        
                        $('#typeOfSubBusiness').removeAttr('required'); 
                        $('#typeOfSubBusiness').val('');
                        $('#businessText').addClass('d-none'); 
                        $('#subtypeOfPage').val('');                            
                        
                        
                    } else {
                        console.log(data);
                        
                        //show store types
                        if (data[0]['type_of_info'] != 'text'){
                            // hide text input
                                
                            $('#typeOfSubBusiness').removeAttr('required'); 
                            $('#typeOfSubBusiness').val('');
                            $('#businessText').addClass('d-none'); 
                            $('#subtypeOfPage').val('');  


                            $('#storeSelect').removeClass('d-none');
                            $('#storeSelect').attr("required","required"); 
                            
                            $.each(data, function(key, element) {                                
                                $('#typeOfStore').append("<option value='" + element['id'] +"'"+ 
                                ((subtypeid == element['id']) ? ' selected ' : '' )+ ">" +element['title']  + "</option>");
                            });
                        } else {
                            // hide store types
                            $('#storeSelect').removeAttr('required'); 
                            $('#storeSelect').addClass('d-none'); 
                            $('#storeSelect').val(''); 

                            console.log('change to text: ID ');
                            console.log(data[0]['id'] );
                            // show business text input
                            $('#businessText').removeClass('d-none');
                            $('#typeOfSubBusiness').attr("required","required");
                          
                            $("label[for='typeOfSubBusiness']").text(data[0]['title']);
                            $('#subtypeOfPage').val(data[0]['id']);
                          //      alert($('#subtypeOfPage').val());
                        }

                    }

                    console.log($('#storeSelect'));
                });
            });

            
            });
    </script>

    @endpush