@extends('layouts.auth-master')

@section('content')
<div class="bg-light py-5 rounded text-left">
    @if ( (!isset($page)) && (!isset($pages[0])) )
        <div id="alert" class="alert alert-danger  w-100 mx-auto" role="alert">
            {!! isset($message) ? $message : '' !!}
        </div>
    
    <div class="lead text-nowrap pb-4 w-100 mx-auto"> {{ __('menu.nopage from FB')}}</div>
    @else
    <div class="lead text-nowrap pb-4"> {{ __('menu.select FB page for session')}}</div>
              
        <form action="{{ route('auth.facebook.page') }}" method="POST" class="d-inline">

            <input type='hidden' name='userId' value='{{ $id }}'>
            
            <input type='hidden' name='userName' value='{{ $name }}'>
            <input type='hidden' name='userToken' value='{{ $userToken }}'> 
            
            @if(isset($email))                
                <input type='hidden' name='userEmail' value='{{ $email }}' required>
               @else 
                <div class="row text-start  pb-2">
                <div class="form-group  mb-3">
                        <label for="title" class="form-label"> {{ __('menu.email') }}  </label>
                        <input class="mx-0 form-control" type='email' name='userEmail' value='' placeholder="{{ __('menu.provide email') }}" required>
                    </div>
              
                </div>

                
            @endif

            <div class="d-flex flex-row bd-highlight justify-content-center mb-2 pb-2 mx-auto">
                <label class="form-check-label ps-2 text-nowrap" for="userEmail">
                

            @foreach($pages as $page )
                <div class="d-flex flex-row bd-highlight justify-content-start mb-2 ">
                    <input class="form-check-input" type="radio" name="pageID" id="{{ $page['id'] }}" value="{{ $page['id'] }}"  required>
                    <label class="form-check-label ps-2 text-nowrap " for="{{ $page['id'] }}">
                        {{ $page['name'] }}
                    </label>
        
                     
                </div>
            @endforeach
            <input class="invisible" type="hidden" name="pagename" id="pagename" value=""  >
                    
            @csrf
            <div class="d-flex pt-2 flex-row bd-highlight justify-content-start mb-2">
            <button type="submit" class="btn btn-primary"> {{ __('menu.select') }}</button>
            </div>
        </form>
        
    </div>@endif
 
@endsection
@push('scripts')   
     
    <script type="text/javascript">  
        $(document).ready(function(){ 

           
            $('input[type=radio][name=pageID]').change( function  () {
                console.log('change')
                console.log($('input[name=pageID]:checked').parent().find('label').text());
                 $('#pagename').val($('input[name=pageID]:checked').parent().find('label').text());
            });

            
        });
    </script>
@endpush