@extends('front.layout-ref')
<style>
    p{
        font-size:14px !important;
    }

     #search-block {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .cs-form-control{
        padding:12px !important;
        background-color:#DFA326 !important;
    }

    .login-registration-submit-button
    {
        background: #FD1600!important;
        width:100%;
        color:#000;
    }
    .login-registration-submit-button:hover
    {
        background: #FD1600!important;
        color: #000;
    }

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

        .breadcrump-section
        {
            padding-top:70px;
            background: #000f1e!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%;
        }


    }

    @media only screen and (max-width: 576px){
        .top-div{
            padding-top: 20px !important;
        }
    }

    @media only screen and (min-width: 1200px){
        .top-div{
            padding-top: 120px !important;
        }
    }
</style>
@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 Login</h6>
                    <nav aria-label="breadcrumb">
                    <ol class="breadcrumb justify-content-center p-0">

                    <li class="breadcrumb-item active" aria-current="page">Max sessions</li>

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

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



    <!--overlay-->

    <div class="bg-gray-1100 space-1 top-div">
        <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-12 col-md-8 mobile">
                                <img class="movies-collection-image" src="{{url('front/login-register/assets/images/Login-Page-PNG.png')}}" />
                            </div>
                            <div class="col-12 col-md-4 mt-3 mt-xl-0 mobile">
                                <form action="{{ route('front.logOutAllDevices') }}" method="post">
                                    {{ csrf_field() }}
                                     @honeypot
                                    <h4 class="fw-bold" style="color:#fff;">Max Sessions Reached!</h4>
                                    <p style="color:#fff;">Your account is currently signed into more than 2 devices or browsers. Log out of one to proceed or enter password to sign out of all devices</p>
                                  
                                    <div class="form-group mb-2">
                                        <label class="text-white">Password*</label>
                                        <input type="password" name="password"  class="form-control my-4 cs-form-control border-0" value="{{old('password')}}" placeholder=" " required>
                                    </div>
                                    
                                     <div class="form-group">
                                        {!! NoCaptcha::renderJs() !!}
                                        {!! NoCaptcha::display() !!}
                                    </div>
                                    
                                    <div class="form-group my-4">
                                        <button type="submit" class="btn btn-danger text-black py-3 fw-bold login-registration-submit-button">Sign Out of all Devices</button>
                                    </div>
                                    
                                    @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
                                </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