@extends('vendor.installer.layouts.master')

@section('template_title')
    {{ trans('installer_messages.environment.menu.templateTitle') }}
@endsection

@section('title')
    <i class="fa fa-list-ul fa-fw" aria-hidden="true"></i>
    {{ trans('installer_messages.requirements.title') }}
@endsection

@section('style')
    <style>
        .gradient-btn-bg.disabled {
            opacity: 0.85;
        }
        a.disabled {
            pointer-events: none;
        }
    </style>
@endsection

@section('container')
    <ul class="list">
        @if(! $dbSupportInfo['current'])
            <li class="list__item list__title">
                <strong>DB</strong>
                <span class="float-right">
                    <i class="fa fa-fw fa-question-circle row-icon" aria-hidden="true"></i>
                </span>
            </li>
            <li class="list__item">
                Version <b>{{ $dbSupportInfo['minimum'] }}</b> required
                <i class="fa fa-fw fa-question-circle row-icon" aria-hidden="true"></i>
            </li>
            <li class="list__item">
                <strong><small>{{ $dbSupportInfo['driver'] }}</small></strong>
            </li>
        @else
            <li class="list__item list__title {{ $dbSupportInfo['supported'] ? 'success' : 'error' }}">
                <strong>DB</strong>
                <strong><small>(Driver {{ $dbSupportInfo['driver'] }})</small></strong>
                <span class="float-right">
                    <strong>{{ $dbSupportInfo['current'] }}</strong>
                    <i class="fa fa-fw fa-{{ $dbSupportInfo['supported'] ? 'check-circle-o' : 'exclamation-circle' }} row-icon" aria-hidden="true"></i>
                </span>
            </li>
            <li class="list__item {{ $dbSupportInfo['supported'] ? 'success' : 'error' }}">
                Version {{ $dbSupportInfo['minimum'] }} required
                <i class="fa fa-fw fa-{{ $dbSupportInfo['supported'] ? 'check-circle-o' : 'exclamation-circle' }} row-icon" aria-hidden="true"></i>
            </li>
        @endif
    </ul>

    @if ($dbSupportInfo['supported'])
        <div class="button-group">
            <div class="gradient-btn-bg install"></div>
            <a href="{{ route('LaravelInstaller::database') }}" class="gradient-btn" role="button">
                <i class="fa fa-check fa-fw" aria-hidden="true"></i>
                {!! trans('installer_messages.environment.classic.install') !!}
                <i class="fa fa-angle-double-right fa-fw" aria-hidden="true"></i>
            </a>
        </div>
    @endif

@endsection

@section('scripts')
    <script>
        document.querySelector('.gradient-btn').addEventListener('click', function() {
            // Button Content
            this.innerHTML = '{{ trans('installer_messages.installing') }}... <i class="fa fa-spinner fa-spin"></i>';
            this.classList.add('disabled');

            // Button Background
            var divElement = document.querySelector('.gradient-btn-bg.install');
            divElement.classList.remove('install');
            divElement.classList.add('disabled');
        });
    </script>
@endsection