@extends('installer.layout')
@section('content')
    <div class="card shadow-lg">
        <div class="card-body">

            <div class="position-relative m-4">
                <div class="progress" style="height: 1px;">
                    <div class="progress-bar" role="progressbar" style="width: 32%;" aria-valuenow="0" aria-valuemin="0"
                        aria-valuemax="100"></div>
                </div>
                <div class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill"
                    style="width: 2rem; height:2rem;">1</div>
                <div class="position-absolute top-0 translate-middle btn btn-sm btn-primary rounded-pill"
                    style="width: 2rem; height:2rem;left:32%">2</div>
                <div class="position-absolute top-0 translate-middle btn btn-sm btn-secondary rounded-pill"
                    style="width: 2rem; height:2rem;left:66%">3</div>
                <div class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill"
                    style="width: 2rem; height:2rem;">4</div>
            </div>

            <h4 class="card-title text-primary">{{ __('Overview') }}</h4>
            <p class="card-text">
                {{ __('Please make sure your server meets below minimum requirements before you continue:') }}
            </p>
        </div>

        <div class="card-body">
            <p class="card-text text-danger">Please make sure the PHP extensions listed below are installed.</p>
            <div class="table-responsive border-top">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Extensions</th>
                            <th class="text-center">Status</th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach ($requirement->phpExtensions() as $label => $status)
                            <tr>
                                <td>{{ $label }}</td>

                                <td class="text-center">
                                    {!! $status
                                        ? '<span class="text-success"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
                                                                            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                                                                          </svg></span>'
                                        : '<span class="text-waring"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
                                      <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                                      <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                                    </svg></span>' !!}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card-body">
            <p class="card-text text-danger">Please make sure you have set the correct permissions for the directories
                listed below.</p>
            <div class="table-responsive border-top">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Directories</th>
                            <th class="text-center">Status</th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach ($requirement->directoriesPermissions() as $label => $status)
                            <tr>
                                <td>{{ $label }}</td>

                                <td class="text-center">
                                    {!! $status
                                        ? '<span class="text-success"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
                                                                            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                                                                          </svg></span>'
                                        : '<span class="text-waring"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
                                      <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                                      <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                                    </svg></span>' !!}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card-body">
            <div class="float-end">
                <a href="{{ route('installer.configuration') }}" onclick="return check();" class="btn btn-primary"><i
                        class="fa fa-ok-circled"></i> {{ trans('Continue') }}</a>
            </div>
        </div>
    </div>

    <script>
        function check() {
            @if ($requirement->check())
                return true;
            @else
                alert("Please check minimum requirements or permissions!");
                return false;
            @endif
        }
    </script>
@endsection