@extends('layouts.main')
@section('title', 'Training')
@section('content')
<!-- push external head elements to head -->
@push('head')
<link rel="stylesheet" href="{{ asset('plugins/DataTables/datatables.min.css') }}" />
{{-- date --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
{{-- --}}
<style>
    #pdfFrame{
        width: 100%;
        height: 1100px;
    }
    .training-info {
        font-size: 1.1rem;
        margin-bottom: 1.2rem;
    }
    .info-title {
        font-weight: bold;
    }

    .training-resource {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .resourceView {
        width: 95% !important;
    }
    .training-card {
        min-height: 100vh;
    }
</style>
@endpush



<div class="container-fluid">
    <x-breadcrumb :pageTitle="$pageTitle" :desc="$desc"  :iconName="$iconName"  />
    <div class="card"> 
        <div class="card-header"> 
            <h5>{{ $training->title }}  |  
                @if($training->publish == 0)
                <small class="badge badge-danger">
                    inactive
                </small>
                @elseif($training->publish == 1)
                <small class="badge badge-success">
                    active
                </small>
                @endif</h5> 
        </div>
        <div class="card-body"> 
                {{ $training->description }}
        </div>
        <div class="card-footer"> 
            <span class="info-title">Type:</span> {{ $training->type }}  ||   
            Tags: <span class="badge badge-info">{{ $training->tags }}</span> 
            <button  data-toggle="modal" data-target="#resourceViewModal" class="btn btn-outline-primary float-right">View Training Resource</button> 
            <a href="{{route('edit_training',$training->id)}}" class="btn btn-outline-dark float-right mr-3">Edit</a> 
        </div>

    </div>

 

</div>



{{-- Resource View Modal --}}
<div class="modal fade" id="resourceViewModal" tabindex="-1" role="dialog" aria-labelledby="resourceViewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body">
            <div class="training-resource">
            @if($training->type == "document")
            <iframe id="pdfFrame" src="{{ $training->filename }}" title="{{ $training->description }}"></iframe>
            @elseif($training->type == "audio")
            <audio controls>
                <source src="{{ $training->filename }}" type="audio/mp3">
                Your browser does not support mp3 audios
            </audio>
            @elseif($training->type == "video")
            <video width="100%" controls>
                <source src="{{ $training->filename }}" type="video/mp4">
                Your browser does not support mp4 videos
            </video>
            @endif
            </div>
        </div>
    </div>
</div>
{{-- END Resource View Modal --}}
@push('script')
<script>
    document.body.classList.add("sidebar-mini");
</script>
@endpush
@endsection