@extends('layouts.app')

@section('content')

@component('shared.breadcrumbs')
    @slot('breadcrumbs')
        <ul>
            <li><a href="{{ route('home') }}">{{ __('Dashboard') }}</a></li>
            <li>&middot;</li>
            <li><a href="{{ route('admin.schools') }}">{{ __('Schools') }}</a></li>
            <li>&middot;</li>
            <li><a href="{{ route('admin.schools.show', $school) }}">{{ $school->name }}</a></li>
        </ul>
    @endslot

    @slot('actions')
        @can('update', $school)
        <a href="{{ route('admin.schools.edit', $school) }}" class="btn btn-outline-primary">{{ __('Edit school') }}</a>
        @endcan
        <a href="{{ route('admin.schools') }}" class="btn btn-outline-secondary">{{ __('Back to list') }}</a>
    @endslot
@endcomponent

<main class="main-content">
    <div class="container">
        <div class="row">
            <div class="col">

                @include('shared.alerts')

                <div class="card mb-4">
                    <div class="card-header">{{ __('School') }}</div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-4 text-right text-dimmed leading-loose">{{ __('Name') }}</div>
                            <div class="col-8 leading-loose">{{ $school->name }}</div>
                        </div>
                        <div class="row">
                            <div class="col-4 text-right text-dimmed leading-loose">{{ __('CVR') }}</div>
                            <div class="col-8 leading-loose">{{ $school->cvr }}</div>
                        </div>
                        <div class="row">
                            <div class="col-4 text-right text-dimmed leading-loose">{{ __('Address') }}</div>
                            <div class="col-8 leading-loose">
                                <div>{{ $school->address }}</div>
                                @if($school->address2)
                                <div>{{ $school->address2 }}</div>
                                @endif
                                <div>{{ $school->zipcode }} {{ $school->city }}</div>
                                <div>{{ $school->country }}</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4 text-right text-dimmed leading-loose">{{ __('Contact email') }}</div>
                            <div class="col-8 leading-loose">{{ $school->email }}</div>
                        </div>
                        <div class="row">
                            <div class="col-4 text-right text-dimmed leading-loose">{{ __('Phone') }}</div>
                            <div class="col-8 leading-loose">{{ $school->phone }}</div>
                        </div>
                        <div class="row">
                            <div class="col-4 text-right text-dimmed leading-loose">{{ __('Rate') }}</div>
                            <div class="col-8 leading-loose">{{ $school->rate }} DKK</div>
                        </div>
                        <div class="row">
                            <div class="col-4 text-right text-dimmed leading-loose">{{ __('Commission') }}</div>
                            <div class="col-8 leading-loose">{{ $school->commission }} %</div>
                        </div>
                        <div class="row">
                            <div class="col-4 text-right text-dimmed leading-loose">{{ __('Products') }}</div>
                            <div class="col-8 leading-loose">{{ $school->products->implode('name', ', ') }}</div>
                        </div>
                        @if ($school->lat && $school->lng)
                        <div class="row">
                            <div class="col-4 text-right text-dimmed leading-loose">{{ __('Map') }}</div>
                            <div class="col-8 leading-loose">
                                <div id="map" class="my-2" style="width: 600px; height: 450px;"></div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>

                <div class="row mb-4">
                    <div class="col">
                        <div class="card">
                            <div class="card-header">{{ __('Admins') }}</div>
                            <div class="card-body">
                                @if ($school->admins->isNotEmpty())
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>{{ __('Name') }}</th>
                                            <th>{{ __('E-mail') }}</th>
                                            <th>{{ __('Mobile') }}</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($school->admins as $user)
                                        <tr>
                                            <td>
                                                @if ($user->avatar)
                                                <img src="{{ $user->avatar->url }}" class="avatar-small mr-2">
                                                @else
                                                <span class="d-inline-flex avatar-small mr-2"><i class="fas fa-user"></i></span>
                                                @endif
                                                <a href="{{ route('admin.teachers.show', $user) }}">{{ $user->name }}</a>
                                            </td>
                                            <td>{{ $user->email }}</td>
                                            <td>{{ $user->mobile }}</td>
                                            <td>
                                                @if($loop->count > 1)
                                                <a href="#" onclick="document.getElementById('demote{{ $user->id }}').submit();return false;" title="Demote"><i class="fas fa-level-down-alt"></i></a>
                                                <form id="demote{{ $user->id }}" action="{{ route('admin.schools.demote', [$school, $user]) }}" method="POST">
                                                @method('PUT')
                                                @csrf
                                                </form>
                                                @endif
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                @else
                                <em>{{ __('No admins assigned') }}</em>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mb-4">
                    <div class="col">
                        <div class="card">
                            <div class="card-header">{{ __('Teachers') }}</div>
                            <div class="card-body">
                                @if ($school->teachers->isNotEmpty())
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>{{ __('Name') }}</th>
                                            <th>{{ __('E-mail') }}</th>
                                            <th>{{ __('Mobile') }}</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($school->teachers as $user)
                                        <tr>
                                            <td>
                                                @if ($user->avatar)
                                                <img src="{{ $user->avatar->url }}" class="avatar-small mr-2">
                                                @else
                                                <span class="d-inline-flex avatar-small mr-2"><i class="fas fa-user"></i></span>
                                                @endif
                                                <a href="{{ route('admin.teachers.show', $user) }}">{{ $user->name }}</a>
                                            </td>
                                            <td>{{ $user->email }}</td>
                                            <td>{{ $user->mobile }}</td>
                                            <td>
                                                <a href="#" onclick="document.getElementById('promote{{ $user->id }}').submit();return false;" title="Promote"><i class="fas fa-level-up-alt"></i></a>
                                                <form id="promote{{ $user->id }}" action="{{ route('admin.schools.promote', [$school, $user]) }}" method="POST">
                                                @method('PUT')
                                                @csrf
                                                </form>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                @else
                                <em>{{ __('No teachers assigned') }}</em>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@section('footer')
    <script>
      // Initialize and add the map
      window.initMap = function() {
        // The location of Uluru
        var center = {
          lat: {{ $school->lat }},
          lng: {{ $school->lng }}
        };
        // The map, centered at Uluru
        var map = new google.maps.Map(
          document.getElementById('map'), {zoom: 14, center: center, disableDefaultUI: true, gestureHandling: 'none'});
        // The marker, positioned at Uluru
        var marker = new google.maps.Marker({position: center, map: map});
      }
    </script>
    <!--Load the API from the specified URL
    * The async attribute allows the browser to render the page while the API loads
    * The key parameter will contain your own API key (which is not needed for this tutorial)
    * The callback parameter executes the initMap() function
    -->
    <script async defer src="https://maps.googleapis.com/maps/api/js?key={{ env('GMAPS_API_KEY') }}&callback=initMap">
    </script>
@endsection