@extends('layouts.admin.main')

@section('content')
    <div class="col-md-12">
        <div class="card">
            <div class="card-header card-header-primary">
                <h4 class="card-title">{{$ocom->ocom.' / '.$ocom->objectif_competence}}</h4>
            </div>
            <div class="card-body">
                <div class="content">
                    <div class="row">
                        <div class="col-md-1 text-center align-middle p-3">
                            @if($ocom->wasGiven() != false)
                                <div data-toggle="tooltip" data-placement="right" title="Le cours a été donné cette année">
                                    <p class="d-none">1</p>
                                    <i class="fas fa-check-circle fa-2x text-success"></i>
                                </div>
                            @else
                                <div data-toggle="tooltip" data-placement="right" title="Le cours n'a pas été donné cette année">
                                    <p class="d-none">0</p>
                                    <i class="fas fa-times-circle fa-2x text-warning"></i>
                                </div>
                            @endif
                        </div>
                        <div class="col-md-2">
                            <label>OREN</label>
                            <p>{{$ocom->oren}}</p>
                        </div>
                        <div class="col-md-2">
                            <label>OCOM</label>
                            <p>{{$ocom->ocom}}</p>
                        </div>
                        <div class="col-md-4">
                            <label>Objectif de compétence</label>
                            <p>{{$ocom->objectif_competence}}</p>
                        </div>
                        <div class="col-md-3">
                            <label>Nombre de période</label>
                            <p>{{$ocom->nbPeriode}}</p>
                        </div>
                        <div class="col-md-4">
                            <label>Objectif de rendement</label>
                            <p>{{$ocom->objectif_rendement}}</p>
                        </div>
                        <div class="col-md-8 text-right">
                            <a href="/admin/ocom/{{$ocom->id}}/edit" class="btn btn-warning">Modifier</a>
                            <button type="button" class="btn btn-danger" onclick="deleteOCOM('{{$ocom->id}}')">Supprimer</button>
                        </div>
                        <div class="col-12">
                            <label>Index des périodes</label>
                            @if($ocom->course_id == "")
                                <p class="text-center text-muted">Le cours n'a jamais été donnée</p>
                            @else
                                <table id="table" class="table table-striped">
                                    <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Date</th>
                                        <th>Instructeur</th>
                                        <th>Niveau</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($ocom->courses() as $course)
                                        <tr>
                                            <th>{{$course->id}}</th>
                                            <td>{{$course->event->date_begin}}</td>
                                            <td>{{$course->instructor()}}</td>
                                            <td>{{$course->level}}</td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('breadcrumb')
    <a class="navbar-brand" href="/admin/ocom">Base de données des cours</a> / {{$ocom->ocom}}
@endsection

@section('custom_scripts')
    <script src="/js/ocom.js"></script>
    <script>
        $('.tooltip').tooltip('enable')
        $(document).ready(function() {
            $('#table').DataTable({
                "lengthMenu": [[25, 50, -1], [25, 50, "All"]],
                "ordering" : true,
                "order": [[1, "asc"]]
            });
        } );
    </script>
@endsection