@extends('mngr::app')
@section('content')
    <!--
  This component uses @tailwindcss/forms

  yarn add @tailwindcss/forms
  npm install @tailwindcss/forms

  plugins: [require('@tailwindcss/forms')]
-->

    <div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
        <div class="max-w-lg mx-auto text-center">
            <h1 class="text-2xl font-bold sm:text-3xl">Get started !</h1>

            <p class="mt-4 text-gray-500">
                Installation Process for {{env('SOFT_NAME')}}
                Please fill-up database information below
            </p>
        </div>

        <div class="max-w-md mx-auto mt-8 mb-0 space-y-4">
            <div>
                <label for="email" class="sr-only">Database Server</label>

                <div class="relative">
                    <input
                        type="text" id="server"
                        class="w-full p-4 pr-12 text-sm border-gray-200 rounded-lg shadow-sm"
                        placeholder="Database Server (localhost)"
                    />
                    <span class="absolute inset-y-0 inline-flex items-center right-4">
                 </span>
                </div>
            </div>
            <div>
                <label for="email" class="sr-only">Database Name</label>

                <div class="relative">
                    <input
                        type="text" id="dbn"
                        class="w-full p-4 pr-12 text-sm border-gray-200 rounded-lg shadow-sm"
                        placeholder="Database Name "
                    />
                    <span class="absolute inset-y-0 inline-flex items-center right-4">
                 </span>
                </div>
            </div>
            <div>
                <label for="email" class="sr-only">Database User</label>

                <div class="relative">
                    <input
                        type="text" id="dbu"
                        class="w-full p-4 pr-12 text-sm border-gray-200 rounded-lg shadow-sm"
                        placeholder="Database User "
                    />
                    <span class="absolute inset-y-0 inline-flex items-center right-4">
                 </span>
                </div>
            </div>
            <div>
                <label for="email" class="sr-only">Database Password</label>

                <div class="relative">
                    <input
                        type="password" id="dbp"
                        class="w-full p-4 pr-12 text-sm border-gray-200 rounded-lg shadow-sm"
                        placeholder="Database Password "
                    />
                    <span class="absolute inset-y-0 inline-flex items-center right-4">
                 </span>
                </div>
            </div>



            <div  id="test" class="flex items-center justify-between">
                <p class="text-sm text-gray-500">

                </p>

                <a

                    class="inline-block px-5 py-3 ml-3 text-sm font-medium text-white bg-blue-500 rounded-lg"
                >
                    Connect
                    
                </a>
            </div>
            <div id="message" class="text-xl font-black ">

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

    @push('scr')
        <script>
            $(document).ready(function(){  console.log('l');

                $("#test").click(function(){
                    $('#test').addClass('animate-pulse');
                    var  dbserver = $('#server').val();
                    var dbname = $('#dbn').val();;
                    var  dbuser = $('#dbu').val();
                    var dbpass = $('#dbp').val();;
                    //console.log('/lic/dbcheck/'+dbserver+'/'+dbname+'/'+dbuser+'/'+dbpass);
                    $.ajax({
                        type: 'GET',
                        url: '/lic/dbcheck/'+dbserver+'/'+dbname+'/'+dbuser+'/'+dbpass,
                        success:function(data){
                    
                            $('#test').removeClass('animate-pulse');
                            $('#message').html(data);
                            if(data.search('connected') != -1 ) {
                                $('#message').removeClass('text-red-500');
                                $('#message').addClass('text-green-500');
                                //location.href='/lic/install'

                                $.ajax({
                        type: 'GET',
                        url: '/lic/dbinstall',
                        success:function(data){
                    
                            $('#test').removeClass('animate-pulse');
                            $('#message').html(data);
                            if(data.search('connected') != -1 ) {
                                $('#message').removeClass('text-red-500');
                                $('#message').addClass('text-green-500');
                               
                            }else{
                                $('#message').removeClass('text-green-500');
                                $('#message').addClass('text-red-500');
                            }

                        }});
                            }else{
                                $('#message').removeClass('text-green-500');
                                $('#message').addClass('text-red-500');
                            }

                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            $('#test').removeClass('animate-pulse');
                            $('#message').removeClass('text-green-500');
                            $('#message').addClass('text-red-500');

                            //  $('#message').html(jqXHR.responseText);
                        }
                    });
                    return false;
                });
            });

        </script>
 @endpush
@stop