@extends('layouts.admin')
@section('content')
@section('styles')
<style>
.dataTables_length
{
    display:none
}
.dt-buttons
{
    display:none;
}
.dataTables_filter
{
    text-align: left !important;
    float: left !important;
}
.dataTables_filter .form-control 
{
    width:500px !important;
}
table.dataTable tbody td.select-checkbox::before
{
    display: none;
}
.box .box-body
{
    display: flex;
    gap: 10px;
    flex-direction: row;
    align-items: center;
    background: #ececec;
    padding: 6px;
    margin: 10px 0px;
    border-radius:4px;
}
</style>
@endsection

@php
 $role= auth()->user()->roles()->first()->title   
@endphp

@if ($role !=='Trainee')
<a class="btn btn-md btn-success addresourcemodal mb-2" data-toggle="modal" data-target="#resourcemodal" style="color: #fff">
    Add resource
 </a>
 @endif
<div class="card">
    <div class="card-header text-center">
       <b>Welcome to BPMI resource hub </b>
    </div>

    <div class="card-body">
        <div class="table-responsive">
            <table class=" table table-bordered table-striped table-hover datatable datatable-Batch">
                <thead>
                    <tr>
                        <th>
                            File No
                        </th>
                       
                        <th>
                           File name
                        </th>
                        <th>
                            Course
                         </th>
                         <th>
                            Lesson
                         </th>
                        <th>
                            Uploaded By
                        </th>
                        <th>
                         Action
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($resource as $key => $resource)
                        <tr>
                            <td>
                                {{$key+1}}

                            </td>
                         
                            <td>
                                {{ $resource->file_name ?? '' }}
                            </td>
                            <td>
                                {{ $resource->course?$resource->course->title:'' }}
                            </td>
                            <td>
                                {{ $resource->lesson?$resource->lesson->lesson_name:'' }}
                            </td>
                            <td>
                                {{ $resource->user?$resource->user->name: '' }}
                            </td>
                            <td>
                                <a class="btn btn-sm btn-primary" href="{{ asset('upload/files').'/'.$resource->file }}" target="_blank">Donwload</a>
                                {{-- <a class="btn btn-sm btn-info" href="javascript:void(0)" data-toggle="modal" data-target="#comment">Add a comment</a>
                                <a class="btn btn-sm btn-success" href="javascript:void(0)" data-toggle="modal" data-target="#allcomments">All comments</a> --}}
                            </td>

                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="modal fade" id="comment" tabindex="-1" role="dialog" aria-labelledby="resourcemodal" aria-hidden="true">
    <div class="modal-dialog" role="document" style="max-width: 800px;">
        <div class="modal-content">
            <div class="modal-header">
               <h4> Add your comment to this resource</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
               <label for="">Comment</label>
               <textarea name="comment" id="" cols="30" rows="5" class="form-control"></textarea>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="allcomments" tabindex="-1" role="dialog" aria-labelledby="resourcemodal" aria-hidden="true">
    <div class="modal-dialog" role="document" style="max-width: 800px;">
        <div class="modal-content">
            <div class="modal-header">
               <h4>Comments on this resource</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="box">
                    <div class="box-body">
                        <img src="https://cdn3.iconfinder.com/data/icons/business-avatar-1/512/3_avatar-512.png" width="50px" class="img-rounded" alt="">
                        <div class="content">
                            <p>Its very use full content, liked it. <a href="#">Absar uddin</a> <span>BREB</span></p>
                        </div>
                    </div>
                    <div class="box-body">
                        <img src="https://iconape.com/wp-content/png_logo_vector/avatar-11.png" width="50px" class="img-rounded" alt="">
                        <div class="content">
                            <p>Amazing Resources. <a href="#">Lipa Ahmed</a><span>Chuet</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="resourcemodal" tabindex="-1" role="dialog" aria-labelledby="resourcemodal" aria-hidden="true">
    <div class="modal-dialog" role="document" style="max-width: 600px;">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Add Resource</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <form action="{{ route('training-resource.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group">
                        <label for="course_id">Course :</label>
                        <select name="course_id" id="course_id" class="form-control select2">
                            <option value="">Please select a course</option>
                            @foreach($courses as $course)
                            <option value="{{$course->id}}">{{$course->title}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="lesson_id">Lesson :</label>
                        <select name="lesson_id" id="lesson_id" class="form-control select2">
                           
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="course_id">Resource Category :</label>
                        <select name="resource_cat" id="resource_cat" class="form-control select2">
                            <option value="selected">Please select a Resource Category</option>
                            <option value="Management">Management</option>
                            <option value="Technical">Technical</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="course_id">Resource Sub Category :</label>
                        <select name="resource_sub_cat" id="resource_sub_cat" class="form-control select2">
                           
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="">Resource Title/Name :</label>
                        <input type="text" class="form-control" name="file_name" id="">
                    </div>
                    <div class="form-group">
                        <label for="">Upload file</label>
                        <input type="file" name="file" id="" class="form-control">
                    </div>
                
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>


@endsection

@section('scripts')
@parent
<script>
    $(function () {
        let table = $('.datatable-Batch:not(.ajaxTable)').DataTable()
    })
    var mgt_resource_sub_cat=['Business Plan','Content Management System','Gap Analysis']
    var tech_resource_sub_cat=['Generation','Transmission','Distribution']
    $('select[name="resource_cat"]').on('change', function () {
        $('select[name="resource_sub_cat"]').empty();
        var resource_cat = $(this).val();
        $('select[name="resource_sub_cat"]').append('<option value="null" selected disabled>Please Select sub category</option>');
        if (resource_cat=='Management') {
            $.each(mgt_resource_sub_cat, function (key, value) {
                $('select[name="resource_sub_cat"]').append('<option value="' + value + '">' + value + '</option>');
            });
        } else {
            $.each(tech_resource_sub_cat, function (key, value) {
                $('select[name="resource_sub_cat"]').append('<option value="' + value + '">' + value + '</option>');
            });
        }
    });
    $('select[name="course_id"]').on('change', function () {
        var course_id = $(this).val();
        if (course_id) {
            $.ajax({
                url: '/get-lessons/' + course_id,
                type: "GET",
                dataType: "json",
                success: function (data) {
                    $('select[name="lesson_id"]').empty();
                    $('select[name="lesson_id"]').append('<option value="" selected disabled>Please Select a lesson</option>');
                    if (data) {
                        $.each(data.course_lessons, function (key, value) {
                            $('select[name="lesson_id"]').append('<option value="' + value.id + '">' + value.lesson_name + '</option>');
                        });
                    }
                }
            });
        } else {
            $('select[name="lesson_id"]').empty();
        }
    });
</script>
@endsection