@extends('front.layout')
@section('custom-style')
<style>
    .login-registration-submit-button
    {
        background: #FD1600!important;
        width:100%;ph
        color:#000;
    }
    .login-registration-submit-button:hover
    {
        background: #FD1600!important;
        color: #000;
    }
    
   

    .movies-collection-image
    {
        width:100%;
        /* height:480px; */
        height: auto;
    }
     .active{
            color:#292826!important;
        }
        .pages-content
        {
            color:#292826!important;
            margin:0px 50px;
        }

        .breadcrump-section
        {
            padding-top:70px;
            background: #000f1e!important;
        }
        
    /*.iti iti--allow-dropdown iti--show-flags{*/
    /*    border:10px solid pink !important;*/
    /*}*/
    
    .iti__country-name{
        color: #000000 !important;
    }
    
    #iti-0__country-listbox{
      width:100% !important;
      height:400px;
    }
    
    #phone{
        width:100% !important;
    }
    
    .iti iti--container{
       top: 0 !important; 
       left:0 !important;
    }
        
    @media only screen and (max-width: 768px) {

        .mobile {
            flex: 0 0 100%;
            max-width: 100%;
        }


    }
        
</style>
@endsection
@section('content')
    <! -- int-tel-input scripts -->
        <link rel="stylesheet" href="{{ asset('intl-tel-input/css/intlTelInput.css') }}" />
        <link rel="stylesheet" href="{{ asset('intl-tel-input/css/demo.css') }}" />
    <! -- int-tel-input scripts -->
    
    <main id="content">



        {{-- <section class="breadcrump-section">
            <div class="bg-gray-1000 py-6 pt-lg-9 pb-lg-11 mb-lg-10" style="margin-bottom: 0px!important;">
                <div class="container px-md-5 mb-lg-2">
                    <h6 class="font-size-30 font-weight-semi-bold text-center mb-1">User Registration</h6>
                    <nav aria-label="breadcrumb">
                    <ol class="breadcrumb justify-content-center p-0">

                    <li class="breadcrumb-item active" aria-current="page">Make your account</li>

                    </ol>
                    </nav>
                 </div>

            </div>
        </section> --}}



    <!--overlay-->

    <div class="bg-gray-1100 space-1" 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">
                                <img class="movies-collection-image" src="{{url('front/login-register/assets/images/Login-Page-PNG.png')}}" />
                            </div>
                            <div class="col-4 mobile">
                                <form method="POST">
                                    {{ csrf_field() }}
                                    <h3 style="color:#fff;">Register Here...</h3>
                                    
                                    <div class="form-group d-flex justify-content-even">
                                        <button type="button" class="btn btn-danger mx-0">
                                            <a href="{{ url('auth/google/redirect')}}" style="float:right;"> <i class="bi bi-google"></i> 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>
                                    
                                    <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="First name" required>
                                        </div>
                                         <div class="form-group mx-2">
                                            <label>Surname*</label>
                                            <input class="form-control" type="text" name="surname" value="{{old('surname')}}" placeholder="Surname" required>
                                        </div>
                                    </div>
                                    

                                    <div id="phone_dropdown" class="form-group">
                                        <label style="display:block;">Phone Number*</label>
                                        
                                        <input type="number" name="phone" id="phone" class="form-control" value="{{old('phone')}}" required>
                                        <input type="hidden" name="retr_country" id="retr_country"/>
                                    </div>

                                    <div class="form-group">
                                        <label>Email</label>
                                        <input type="email" name="email"  class="form-control" value="{{old('email')}}" placeholder="Your email">
                                    </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>
                                    <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("gb"); });
            },
            utilsScript: "intl-tel-input/js/utils.js",
      });
    </script>
@endsection

@section('custom-script')



@endsection