@extends('layouts.FrontLayout')
@section('content')

    <!-- Content wrapper -->
    <div class="content-wrapper">
        <!-- content -->
        <section class="apply-domain-content">
             <!-- Content wrapper -->
    <div class="content-wrapper">
        <!-- slider start -->
        <div id="hero">
<div class="container-fluid p-0">
                <div id="carouselExampleSlidesOnly" class="" data-bs-ride="carousel" >
                    <div class="carousel-inner " >
                        <div class="carousel-item active">
                            <img src="{{asset('assets/img/domain_name_banner.png')}}" class="d-block w-100" alt="...">
                        </div>
                        <div class="carousel-item">
                            <img src="{{asset('assets/img/domain_name_banner.png')}}" class="d-block w-100" alt="...">
                        </div>
                        <div class="carousel-item">
                            <img src="{{asset('assets/img/domain_name_banner.png')}}" class="d-block w-100" alt="...">
                        </div>
                    </div>
                </div>
            </div>
            <div class="search-domain" >
                <div class="">
            <div class="container-fluid">
                <div class="apply-domain-inner">
                    <div class="row">
                        <div class="col-12 py-5">
                            <div class="ad-search-domain" >
                                <div class="search-domain-inner container">
                                    <form action="{{url('checkDomainAvailability')}}" method="post" accept-charset="utf-8" >
                                        @csrf
                                        <div class="row mb-3">
                                            <div class="col-md-4 px-2">
                                                <select name="lang" id="lang_code" class="form-control me-2" required>
                                                    <option value="">Select Language</option>
                                                    @foreach(DB::table('domain_languages')->get() as $lang)
                                                    @if($lang->status=='active')
                                                        <option value="{{$lang->id}}">{{$lang->language_name}}</option>
                                                    @endif
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="col-md-6 px-2">
                                                <input class="form-control me-2" type="search" id="domainName" name="domainName" placeholder="Search Your Domain Here" aria-label="Search" required onKeyPress="if(this.value.length==30) return false;">
                                            </div>
                                            <div class="col-md-2">
                                                <button class="btn" type="submit">Search Domain</button>
                                            </div>
                                        </div>
                                        <div class="row">

                                            <div class="col-md-10">
                                                <div class="text-white">
                                                    <div id="extensions">

                                                    </div>
                                                </div>
                                            </div>

                                           

                                        </div>
                                    </form>
                                    @if(Session::has('message'))
                                        <div class="text-danger" style="color: red">{{ Session::get('message') }}</div>
                                        {{--                        <p class="alert text-dark {{ Session::get('alert-class', 'alert-danger') }}">{{ Session::get('message') }} <button type="button" class="close" data-dismiss="alert" aria-label="Close">--}}
                                        {{--                                <span aria-hidden="true">&times;</span>--}}
                                        {{--                            </button></p>--}}
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="apply-domain-note">
                        </div>

                    </div>
                </div>
            </div>
            </div>
            </div>

            </div>
            </div>
        </section>
        <!-- /content -->
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script type="text/javascript">
       
$(document).ready(function() {

$('#domainName').on('keypress',function(e){

var regex=new RegExp("^[a-zA-Z0-9_,.]");
var key=String.fromCharCode(!e.charCode ? e.which :e.charCode);
if(!regex.test(key)){
  
    e.preventDefault();
    return false;
}

});

            $('#domainName').keyup(function(e) {
                if (e.key === ' ' || e.key === 'Spacebar') {
                    // ' ' is standard, 'Spacebar' was used by IE9 and Firefox < 37
                    var domainName = $(this).val();
                    var domainLang = $('#lang_code').val();
                    if (domainLang == 'en'){
                        return false;
                    }else {
                        $.ajax({
                            url: "{{ url('translateDomainName') }}",
                            dataType : "json",
                            type: "get",
                            data:{domainName:domainName,domainLang:domainLang},
                            success : function(response) {
                                if(response.status == true) {
                                    $('#domainName').val('');
                                    $('#domainName').val(response.data);
                                } else if(response.status == false) {
                                    alert(response.message);
                                }
                            },
                        });
                    }
                }

            });

            //get extensions
            $(document).on("change",'#lang_code',function(){
                var lang_id =$(this).val();
                $.ajax({
                    url: "{{ url('getExtensionByLang') }}",
                    dataType : "json",
                    type: "GET",
                    data:{lang_id:lang_id},
                    success : function(response) {
                        if(response.status == true) {
                            $('#extensions').empty();
                            $('#extensions').append('' +
                                '<input style="height: 20px !important; width: 20px!important; border-radius: 5px!important;" name="" value="" class="form-check-input vehicleAll mt-1" type="checkbox"  id="flexCheckDefault">\n' +
                                '                                                    <label style="padding-top: 3px;margin-right: 10px" class="form-check-label" for="flexCheckDefault">\n' +
                                '                                                        Select All\n' +
                                '                                                    </label>');
                            $.each( response.data, function( key, value ) {
                                $('#extensions').append('' +
                                    ' <input style="height: 20px !important; width: 20px!important; border-radius: 5px!important;" name="extension[]" value="'+value.id+'" class="form-check-input vehicle1 mt-1" type="checkbox"  id="flexCheckDefault">\n' +
                                    '                                                        <label style="padding-top: 3px;margin-right: 10px" class="form-check-label" for="flexCheckDefault">\n' +
                                    '                                                            '+value.domain_extension+'\n' +
                                    '                                                        </label>');
                            });
                        } else if(response.status == false) {
                            alert(response.message);
                        }

                    },
                });
            });

            //check all
            $(document).on("change",'.vehicleAll',function() {
                if(this.checked) {
                    $('.vehicle1').prop('checked', true);

                }else {
                    $('.vehicle1').prop('checked', false);
                }
            });
        });
    </script>
        <!-- Content wrapper -->
        @endsection
        @section("js")

        @endsection