@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">

            <div class="card">
                <div class="card-header">Available schools</div>

                <div class="card-body">

                    @foreach ($schools as $school)
                        <h3>{{ $school->name }}</h3>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <div class="row">
                                    <span class="col-md-3">School ID:</span>
                                    <span class="col-md-9 font-weight-bold">{{ $school->id }}
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div class="row">
                                    <span class="col-md-3">API type:</span>
                                    <span class="col-md-9 font-weight-bold">{{ $school->api }}
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div class="row">
                                    <span class="col-md-3">API instance ID:</span>
                                    <span class="col-md-9 font-weight-bold">{{ $school->instanceId }}
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div class="row">
                                    <span class="col-md-3">API access token:</span>
                                    <span class="col-md-9 font-weight-bold">{{ $school->apiAccessToken }}
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div class="row">
                                    <span class="col-md-3">Client access token:</span>
                                    <span class="col-md-9 font-weight-bold">{{ $school->clientAccessToken }}
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div class="row">
                                    <span class="col-md-3">Transformer:</span>
                                    <span class="col-md-9 font-weight-bold">{{ $school->transformer }}
                                </div>
                            </li>
                        </ul>
                        <br><br>
                    @endforeach

                    @if (session('status'))
                        <div class="alert alert-success">
                            {{ session('status') }}
                        </div>
                    @endif

                    <!-- You are logged in! -->
                </div>
            </div>

            <br>

            <div class="card">
                <div class="card-header">Add a new school</div>
                <div class="card-body">
                    <form method="POST" action="{{ route('addschool') }}">
                        @csrf

                        <div class="form-group row">
                            <label for="name" class="col-md-4 col-form-label text-md-right">School name</label>
                            <div class="col-md-6">
                                <input name="name" id="name" type="text" class="form-control" required autofocus>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="api" class="col-md-4 col-form-label text-md-right">API type</label>
                            <div class="col-md-6">
                                <select id="api" name="api" class="form-control" required autofocus>
                                    <option value="">-</option>
                                    <option value="wonde">wonde</option>
                                    <option value="sis">sis</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="instanceId" class="col-md-4 col-form-label text-md-right">API instance ID</label>
                            <div class="col-md-6">
                                <input name="instanceId" id="instanceId" type="text" class="form-control" autofocus>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="apiAccessToken" class="col-md-4 col-form-label text-md-right">API access token</label>
                            <div class="col-md-6">
                                <input name="apiAccessToken" id="apiAccessToken" type="text" class="form-control" autofocus>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="clientAccessToken" class="col-md-4 col-form-label text-md-right">Client access token</label>
                            <div class="col-md-6">
                                <input name="clientAccessToken" id="clientAccessToken" type="text" class="form-control" autofocus>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="transformer" class="col-md-4 col-form-label text-md-right">Transformer</label>
                            <div class="col-md-6">
                                <input name="transformer" id="transformer" type="text" class="form-control" autofocus>
                            </div>
                        </div>

                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    Add school
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection