@extends('layouts.master')

@section('title', __('installer.server_requirements'))

@section('content')
    <div class="w-full h-screen flex">
        <div class="bg-white flex flex-col justify-start w-1/5 items-center max-h-full overflow-scroll-container overflow-auto overflow-x-hidden">
            <img class="w-full h-8 mt-10 mb-2 px-5" src="{{ asset('images/logos/ehr_logo.png') }}" alt="LibreHealth Logo">
            <div class="p-4 justify-center">
                <h4 class="leading-10 prose underline uppercase font-semibold">Installation Steps</h4>
                @include('includes.installer_sidebar', ['step' => 1])
             </div>
        </div>
        <div class="bg-white flex flex-col w-4/5 items-center max-h-full overflow-scroll-container overflow-auto shadow-lg border-solid border-t-4 border-orange-600">
            @include('includes.language_switcher')
            <div class="my-5 w-full">
                <div class="mr-32 ml-32 mt-10 rounded-sm border border-gray-200 bg-white shadow-lg">
                    <div class="text-right p-4">
                        <span class="text-xs text-gray-500 tracking-widest">
                            <span class="uppercase">{{ app_name() }}</span> <span>(v{{ app_version() }})</span>
                        </span>
                    </div>
                    <div class="flex items-center relative mt-2 mb-8">
                        <div class="ml-20 mr-2">
                            @include('includes.installer_step', ['step' => 1])
                        </div>
                        <div class="border-t border-gray-200 z-20 w-full"></div>
                        <div class="rounded-full bg-white border border-t z-20 p-2 inline-block absolute mx-5">
                            <a href="https://github.com/LibreHealthIO/lh-ehr-laravel.git" title="LibreHealth Logo">
                                <img alt="{{ config('app.name') }}" src="{{ asset('images/logo.png') }}" class="fill-current text-white inline-block h-8 w-8">
                            </a>
                        </div>
                        <div class="rounded-full bg-gray-800 z-20 p-2 inline-block right-5 absolute mx-5">
                            <a href="https://github.com/LibreHealthIO/lh-ehr-laravel.git" title="Fork me on Github">
                                <svg xmlns="http://www.w3.org/2000/svg" class="fill-current text-white inline-block h-8 w-8" viewBox="0 0 25 25">
                                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                                </svg>
                            </a>
                        </div>
                    </div>
                    @if(isset($requirements['errors']) || !$phpSupportInfo['supported'])
                        <div class="mb-3 mt-8 mr-32 ml-32 bg-red-100 border-red-500 text-red-900 rounded-b border-t-4 px-4 py-3 shadow-md" role="alert">
                            <div class="flex">
                                <div class="py-1"><svg class="fill-current h-6 w-6 text-red-500 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg></div>
                                <p class="text-sm py-2 font-semibold">
                                    Please ensure to correct the errors before proceeding.
                                </p>
                            </div>
                        </div>
                    @endif
                    <div class="pr-32 pl-32 pb-16 w-full">
                        <table class="text-left w-full table-auto text-base" style="border-collapse:collapse">
                            <thead>
                            <tr>
                                <th colspan="2" class="py-4 px-6 bg-grey-lighter font-sans font-medium uppercase text-sm text-grey border-b border-grey-light">
                                    <strong>
                                        <small>
                                            PHP (version {{ $phpSupportInfo['minimum'] }} required)
                                        </small>
                                    </strong>
                                    <span class="flex flex-row float-right">
                                        <strong class="mr-1">
                                            <span class="text-xs">Current</span> {{ $phpSupportInfo['current'] }}
                                        </strong>
                                        <svg class="{{ $phpSupportInfo['supported'] ? 'text-green-500' : 'text-red-500' }} h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            @if($phpSupportInfo['supported'])
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                            @else
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                            @endif
                                        </svg>
                                    </span>
                                </th>
                            </tr>
                            </thead>
                            <tbody id="phpInfo">
                            @foreach($requirements['requirements'] as $type => $requirement)

                                @foreach($requirements['requirements'][$type] as $extension => $enabled)
                                    <tr class="{{ $enabled ? 'hover:bg-blue-100' : 'bg-red-100 hover:bg-red-200' }}">
                                        <td class="py-4 px-6 border-b border-gray-100 text-sm">{{ $extension }}</td>
                                        <td class="py-4 px-6 border-b border-gray-100 text-center">
                                            <svg class="{{ $enabled ? 'text-green-500' : 'text-red-500' }} h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                @if($enabled)
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                                    @else
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                                @endif
                                            </svg>
                                        </td>
                                    </tr>
                                @endforeach

                            @endforeach
                            </tbody>
                        </table>
                    </div>

                    <div class="flex flex-row justify-between">
                        <div class="justify-start">
                            <a href="{{ route('ehr_installer.index') }}" class="ehr_prev_button flex text-base text-white items-center ml-10 mr-10 px-10 py-3 rounded-md bg-gray-900 mb-3">
                                <svg class="ehr_btn_icon -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
                                </svg>
                                <svg class="ehr_btn_loader hidden animate-spin mr-2 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                                {{ __('forms.previous') }}
                            </a>
                        </div>
                        <div class="justify-end">
                            <a href="{{ route('ehr_installer.file_permissions') }}" class="ehr_next_button flex text-base text-white items-center ml-10 mr-10 px-10 py-3 rounded-md bg-gray-900 mb-3">
                                {{ __('forms.continue') }}
                                <svg class="ehr_btn_loader hidden animate-spin ml-2 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                                <svg class="ehr_btn_icon -mr-1 ml-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            @include('partials.footer')
        </div>
    </div>
@endsection

@section('js_scripts')
    <script type="text/javascript">
    </script>
@endsection