@extends('front.layout-ref')

@section('ls_scripts')
<link rel="stylesheet" href="{{ asset('intl-tel-input/css/intlTelInput.css') }}" />
<link rel="stylesheet" href="{{ asset('intl-tel-input/css/demo.css') }}" />
@endsection

@section('content')
<style>
    .iti--allow-dropdown input,
.iti--allow-dropdown input[type=text],
.iti--allow-dropdown input[type=tel], .iti--separate-dial-code input,
.iti--separate-dial-code input[type=text],
.iti--separate-dial-code input[type=tel] {
  padding-right: 6px;
  padding-left: 52px;
  margin-left: 0;
}
</style>
<main class="container-fluid main-content-ls-section p-0 px-xl-3 py-xl-5" style="max-width:1776px !important;overflow:hidden !important;">
    <div class="row p-3 pt-xl-5">
      <div class="col-12 col-md-7 p-1">
            @if(get_live_stream_setting('auth_page_display'))                      
                @php
                    $authfeaturedpage = url('setting-images').'/'.get_live_stream_setting('auth_page_display')->value;
                @endphp
            @else 
                @php
                    $authfeaturedpage = "";
                @endphp
            @endif
            <img class="img-fluid movies-collection-image" src="{{$authfeaturedpage}}" />
      </div>
      <div class="col-12 col-md-4 p-3">
      <form method="POST">
                                    {{ csrf_field() }}
                                    @honeypot
                                    <h3 class="h3 fw-bold mb-3" style="color:#fff;">Register Here...</h3>
                                    

                                     <div class="d-flex justify-content-between p-0">
                                        <div class="form-group mb-4 mx-2" style="margin-left:0 !important;">
                                            <label class="text-white">First Name*</label>
                                            <input class="form-control bg-accent-color border-0" type="text" name="name" value="{{old('name')}}" placeholder=" " required style="padding-top:12px !important;padding-bottom:12px !important;">
                                        </div>
                                         <div class="form-group mb-4 mx-2">
                                            <label class="text-white">Surname*</label>
                                            <input class="form-control bg-accent-color border-0" type="text" name="surname" value="{{old('surname')}}" placeholder=" " required style="padding-top:12px !important;padding-bottom:12px !important;">
                                        </div>
                                    </div>
                                    
                                    
                                    <div id="phone_dropdown" class="form-group mb-4">
                                        <label style="display:block;" class="text-white">Phone Number*</label>
                                        
                                        <input type="text" name="phone" id="phone" class="form-control bg-accent-color border-0" value="{{old('phone')}}" placeholder=" " required style="padding-top:12px !important;padding-bottom:12px !important;">
                                        <input type="hidden" name="retr_country" id="retr_country"/>
                                        <input type="hidden" name="retr_code" id="code"/>
                                    </div>

                                    <div class="form-group mb-4">
                                        <label class="text-white">Email</label>
                                        <input type="email" name="email"  class="form-control bg-accent-color border-0" value="{{old('email')}}" placeholder="" style="padding-top:12px !important;padding-bottom:12px !important;">
                                    </div>

                                    <div class="form-group mb-4">
                                        <label class="text-white">Password*</label>
                                        <input type="password" name="password"  class="form-control bg-accent-color border-0" value="{{old('password')}}" placeholder=" " required style="padding-top:12px !important;padding-bottom:12px !important;">
                                    </div>
                                    
                                    <div class="form-group mb-4">
                                        {!! NoCaptcha::renderJs() !!}
                                        {!! NoCaptcha::display() !!}
                                    </div>

                                    <div class="form-group mb-4">
                                        <button class="btn btn-danger w-100 login-registration-submit-button text-black py-3 fw-bold" style="background-color:rgb(253, 22, 0) !important;">Register</button>
                                    </div>
                                    
                                    <div class="form-group mb-4 d-flex justify-content-even" style="display:none !important;">
                                        <button type="button" class="btn btn-danger mx-0">
                                            <a href="{{ url('auth/google/redirect')}}" style="float:right;">Sign up with Google</a>
                                        </button>
                                        <button type="button" class="btn btn-info mx-2">
                                            <a href="{{ url('auth/facebook/redirect')}}" style="float:right;">Sign up with Facebook</a>
                                        </button>
                                    </div>
                                    
                                    <br />
                                     

                                    @if(\Session::has('error'))
                                        <div class="col-xs-12">
                                            <li class="alert alert-danger">{!! \Session::get('error') !!}</li>
                                        </div>
                                    @endif

                                    @if ($errors->any())
                                        <div class="col-xs-12">
                                            @foreach ($errors->all() as $error)
                                                <li class="alert alert-danger">{{ $error }}</li>
                                            @endforeach
                                        </div>
                                    @endif
                                    <div class="form-group">
                                        <a href="{{route('front.userLogin')}}" class="text-decoration-none text-white" style="float:right;">Already have an account? Login here</a>
                                        <br />
                                       

                                    </div>
                                </form>
      </div>
    </div>
<div class="bg-gray-1100 space-1 d-none" style="padding-top:120px!important;">
    <div class="container px-md-6 px-xl-7 px-wd-6 pb-3 pt-1">
        <div class="pb-4">
            <div class="border-g-1200-op mb-1 pb-3">
                <div class="dark">
                     <div class="row align-items-center">
                        <div class="col-8 mobile">
                            @if(get_live_stream_setting('auth_page_display'))                      
                                @php
                                    $authfeaturedpage = url('setting-images').'/'.get_live_stream_setting('auth_page_display')->value;
                                @endphp
                            @else 
                                @php
                                    $authfeaturedpage = "";
                                @endphp
                            @endif
                            <img class="movies-collection-image" src="{{$authfeaturedpage}}" />
                        </div>
                        <div class="col-4 mobile">
                        <form method="POST">
                                    {{ csrf_field() }}
                                    @honeypot
                                    <h3 style="color:#fff;">Register Here...</h3>
                                    
                                     <div class="d-flex justify-content-between p-0">
                                        <div class="form-group mx-2" style="margin-left:0 !important;">
                                            <label>First Name*</label>
                                            <input class="form-control" type="text" name="name" value="{{old('name')}}" placeholder=" " required>
                                        </div>
                                         <div class="form-group mx-2">
                                            <label>Surname*</label>
                                            <input class="form-control" type="text" name="surname" value="{{old('surname')}}" placeholder=" " required>
                                        </div>
                                    </div>
                                    
                                    
                                    <div id="phone_dropdown" class="form-group">
                                        <label style="display:block;">Phone Number*</label>
                                        
                                        <input type="text" name="phone" id="phone" class="form-control" value="{{old('phone')}}" placeholder=" " required>
                                        <input type="hidden" name="retr_country" id="retr_country"/>
                                        <input type="hidden" name="retr_code" id="code"/>
                                    </div>

                                    <div class="form-group">
                                        <label>Email</label>
                                        <input type="email" name="email"  class="form-control" value="{{old('email')}}" placeholder="">
                                    </div>

                                    <div class="form-group">
                                        <label>Password*</label>
                                        <input type="password" name="password"  class="form-control" value="{{old('password')}}" placeholder=" " required>
                                    </div>
                                    
                                    <div class="form-group">
                                        {!! NoCaptcha::renderJs() !!}
                                        {!! NoCaptcha::display() !!}
                                    </div>

                                    <div class="form-group">
                                        <button class="btn btn-primary login-registration-submit-button">Register</button>
                                    </div>
                                    
                                    <div class="form-group d-flex justify-content-even" style="display:none !important;">
                                        <button type="button" class="btn btn-danger mx-0">
                                            <a href="{{ url('auth/google/redirect')}}" style="float:right;">Sign up with Google</a>
                                        </button>
                                        <button type="button" class="btn btn-info mx-2">
                                            <a href="{{ url('auth/facebook/redirect')}}" style="float:right;">Sign up with Facebook</a>
                                        </button>
                                    </div>
                                    
                                    <br />
                                     

                                    @if(\Session::has('error'))
                                        <div class="col-xs-12">
                                            <li class="alert alert-danger">{!! \Session::get('error') !!}</li>
                                        </div>
                                    @endif

                                    @if ($errors->any())
                                        <div class="col-xs-12">
                                            @foreach ($errors->all() as $error)
                                                <li class="alert alert-danger">{{ $error }}</li>
                                            @endforeach
                                        </div>
                                    @endif
                                    <div class="form-group">
                                        <a href="{{route('front.userLogin')}}" style="float:right;">Already have an account? Login here</a>
                                        <br />
                                       

                                    </div>
                                </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--Dakar Section End-->




    </div>
</div>


</main>
<script src="{{ asset('intl-tel-input/js/intlTelInput.js') }}"></script>
<script>
     var input = document.querySelector("#phone");
     var drelement = document.querySelector('.iti iti--container');
     const country_input_field = document.querySelector("#retr_country");
     const country_input_field_container = document.getElementById("phone_dropdown");
     
     window.intlTelInput(input, {
        dropdownContainer : document.querySelector('#phone_dropdown'),
        initialCountry: "auto",
        geoIpLookup: function(callback) {
        fetch("https://ipapi.co/json")
            .then(function(res) { return res.json(); })
            .then(function(data) { 
                country_input_field.value = data.country_name;
                console.log(data.country_name); // Log the entire data object
                callback(data.country_code); 
            })
            .catch(function() { callback("ke"); });
        },
        utilsScript: "intl-tel-input/js/utils.js",
  });
  
  // Attach an event listener for the 'countrychange' event to retrieve the selcted user country
    input.addEventListener("countrychange", function (e) {
        var selectedCountryData = window.intlTelInputGlobals.instances[0].getSelectedCountryData();
        document.getElementById("code").value = selectedCountryData.iso2;
    });
    
</script>
@endsection