@extends('layouts.app')

@section('page-css')

@endsection

@section('content')
    <div class="container-fluid d-block">
        <div id="all-items-page-container" class="py-4">
            <div class="card mb-4">
                <div class="card-header">
                    {{ $page_title }}
                </div>
    
                <div class="col-md-12">
                    <div class="row">
                        {{-- GROW Sessions --}}
                        <div class="col-md-4">
                            <div class="card-body">
                                <div class="card">
                                    <div class="card-body">
                                        <h5 class="card-title">GROW Sessions</h5>
                                        <table class="table table-hovered table-striped table-bordered">
                                            <thead>
                                                <th width="50%">Year</th>
                                                <th width="50%" class="text-center">Action</th>
                                            </thead>
                                            <tbody>
                                                @foreach ($years as $key => $value)
                                                    <tr>
                                                        <td class="font-weight-bold">{{ $value }}</td>
                                                        <td>
                                                            <button type="button" class="btn btn-sm btn-primary" onclick="reportsPageFunctions.viewGrowSessionsPreview({{ $value }});"><i class="fas fa-eye"></i> Preview</button>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Coach Summary --}}
                        <div class="col-md-4">
                            <div class="card-body">
                                <div class="card">
                                    <div class="card-body">
                                        <h5 class="card-title">Coach Summary</h5>
                                        <table class="table table-hovered table-striped table-bordered">
                                            <thead>
                                                <th width="50%">Year</th>
                                                <th width="50%" class="text-center">Action</th>
                                            </thead>
                                            <tbody>
                                                @foreach ($years as $key => $value)
                                                    <tr>
                                                        <td class="font-weight-bold">{{ $value }}</td>
                                                        <td>
                                                            <button type="button" class="btn btn-sm btn-primary" onclick="reportsPageFunctions.viewCoachSummaryPreview({{ $value }});"><i class="fas fa-eye"></i> Preview</button>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Coaching Effectiveness --}}
                        <div class="col-md-4">
                            <div class="card-body">
                                <div class="card">
                                    <div class="card-body">
                                        <h5 class="card-title">Coaching Effectiveness</h5>
                                        <table class="table table-hovered table-striped table-bordered">
                                            <thead>
                                                <th width="50%">Year</th>
                                                <th width="50%" class="text-center">Action</th>
                                            </thead>
                                            <tbody>
                                                @foreach ($years as $key => $value)
                                                    <tr>
                                                        <td class="font-weight-bold">{{ $value }}</td>
                                                        <td>
                                                            <button type="button" class="btn btn-sm btn-primary" onclick="reportsPageFunctions.viewCoachingEffectivenessPreview({{ $value }});"><i class="fas fa-eye"></i> Preview</button>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="row">
                            {{-- Coaching Contacts - COACH --}}
                            <div class="col-md-4 offset-md-1">
                                <div class="card-body">
                                    <div class="card">
                                        <div class="card-body">
                                            <h5 class="card-title">Coaching Contacts - COACH</h5>
                                            <table class="table table-hovered table-striped table-bordered">
                                                <thead>
                                                    <th width="50%">Category</th>
                                                    <th width="50%" class="text-center">Action</th>
                                                </thead>
                                                <tbody>
                                                    @foreach ($years as $key => $value)
                                                        <tr>
                                                            <td class="font-weight-bold">{{ $value }}</td>
                                                            <td>
                                                                <button type="button" class="btn btn-sm btn-primary" onclick="reportsPageFunctions.viewCoachingContactsCoachReportsPreview({{ $value }});"><i class="fas fa-eye"></i> Preview</button>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Coaching Contacts - COACHEE --}}
                            <div class="col-md-4">
                                <div class="card-body">
                                    <div class="card">
                                        <div class="card-body">
                                            <h5 class="card-title">Coaching Contacts - COACHEE</h5>
                                            <table class="table table-hovered table-striped table-bordered">
                                                <thead>
                                                    <th width="50%">Category</th>
                                                    <th width="50%" class="text-center">Action</th>
                                                </thead>
                                                <tbody>
                                                    @foreach ($years as $key => $value)
                                                        <tr>
                                                            <td class="font-weight-bold">{{ $value }}</td>
                                                            <td>
                                                                <button type="button" class="btn btn-sm btn-primary" onclick="reportsPageFunctions.viewCoachingContactsCoacheeReportsPreview({{ $value }});"><i class="fas fa-eye"></i> Preview</button>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        @include('pages.includes.footer')
    </div>
    <div id="preloader">
        <div id="loader"></div>
    </div>
@endsection

@section('page-js')
    <script type="text/javascript">
        $.csrf_token    =   $('meta[name="csrf-token"]').attr('content');
        $.backoffice_url  =   "{{ env('BACKOFFICE_URL') }}";
        $.api_url = "{{ env('API_URL') }}";

        $('#reports-link').addClass('active');

        reportsPageFunctions.initializeDataTable();
    </script>
@endsection


<style>
#preloader {
    display:none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f0f8ff96;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #67b4f3;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3490dc;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #155c96;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes  spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
</style>