@extends('layouts.vertical', ["page_title"=> "Datatables"])

@section('css')
<!-- third party css -->
<link href="{{asset('assets/libs/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css')}}" rel="stylesheet" type="text/css" />
<!-- third party css end -->
@endsection

@section('content')
<!-- Start Content-->
<div class="container-fluid">

    <!-- start page title -->
    <div class="row">
        <div class="col-md-6 p-2">
            <h4 class="page-title">{{$title}} Management</h4>
        </div>
        <div class="col-md-6 p-2">
            @if(isset($buttons))
                @foreach($buttons as $button)
                    <a href="{{$button['link']}}" class="btn btn-{{$button['title']=='Add New'?'success':'dark'}} waves-effect waves-light float-end me-2" id="btn-{{strtolower(str_replace(' ', '-', $button['title']))}}">{{$button['title']}}</a>
                @endforeach
            @endif
        </div>
    </div>
    <!-- end page title -->
@if(session()->has('message'))
    <div class="alert alert-success">
        {{ session()->get('message') }}
    </div>
@endif
@if(session()->has('error'))
    <div class="alert alert-danger">
        {{ session()->get('error') }}
    </div>
@endif
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <table id="list-page-datatable" class="table w-100 nowrap">
                        <thead>
                            <tr>
                                @foreach($fields as $field => $props)
                                <th>{{$props['title']}}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($items as $item)
                            <tr>
                                @foreach($fields as $field => $props)
                                    @if($field != 'actions')
                                    <td>
                                        @switch($props['type'])
                                            @case('image')
                                                <img src="{{ $item->{$field} }}" class="img-thumbnail"> 
                                                @break
                                            @case('text')
                                            @case('select')
                                                {{ isset($item->{$field}) ? $item->{$field} : '' }}
                                                @break
                                            @case('date')
                                                {{ date("d M Y", strtotime($item->{$field})) }}
                                                @break

                                        @endswitch
                                    </td>
                                    @else
                                    <td>
                                        <a href="{{$base_url}}/delete?id={{$item->id}}" class="action-icon"> <i class="mdi mdi-delete text-danger"></i></a>
                                        <button type="button" class="btn btn-link view-response" response_id="{{$item->id}}" data_object='{{ json_encode( ['user_name'=>$item->user_name,'media_type'=>$item->media_type,'title'=>$item->title,'media_url'=>$item->media_url,'createdAt'=>$item->createdAt] ) }}'> <i class="mdi mdi-eye text-info mdi-24px"></i></button>
                                        @if($item->no_of_evaluations > 0)
                                        <button type="button" class="btn btn-link view-evaluations" response_id="{{$item->id}}" data_object='{{ json_encode(isset($item->evaluations)?$item->evaluations:"[]") }}'> <i class="mdi mdi-clipboard-check-outline text-success mdi-24px"></i></button>
                                        @endif
                                    </td>
                                    @endif
                                @endforeach
                            </tr>
                            @endforeach
                        </tbody>
                    </table>

                </div> <!-- end card body-->
            </div> <!-- end card -->
        </div><!-- end col-->
    </div>
    <!-- end row-->
</div> <!-- container -->

<!-- Right modal content -->
<div id="date_filter_modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h4 class="modal-title" id="standard-modalLabel">Filter results by date</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <form method="get" id="form-date-filter">
                    <div class="col-12">
                        <div class="mb-3">
                            <label class="form-label">From Date</label>
                            <input type="text" name="startdate" class="form-control" data-provide="datepicker" value="{{isset($startdate)?date("m/d/Y", strtotime($startdate)):''}}" data-date-autoclose="true">
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="mb-3">
                            <label class="form-label">To Date</label>
                            <input type="text" name="enddate" class="form-control" data-provide="datepicker" value="{{isset($enddate)?date("m/d/Y", strtotime($enddate)):''}}" data-date-autoclose="true">
                        </div>
                    </div>
                </div>
                <button type="submit" class="btn btn-success btn-sm">Filter</button>
                <button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="modal">Close</button>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div id="response_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="standard-modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="standard-modalLabel">Modal Heading</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<style type="text/css">
    .img-thumbnail { max-width: 100px }
</style>
@endsection

@section('script')
<!-- third party js -->
<script src="{{asset('assets/libs/datatables/datatables.min.js')}}"></script>
<script src="{{asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js')}}"></script>
<script type="text/javascript">
    jQuery(document).ready(function($){
        var responses = 

        $('.view-evaluations').click(function(event){
            var evals = JSON.parse($(this).attr('data_object'))
            $('#response_modal .modal-title').html('Evaluations')
            var html = ''
            for(let eval of evals) {
                html += `<h4>Evaluated by <strong>${eval.user_info.name}</strong> on <strong>${ eval.createdAt.split('.')[0].replace("T", " ") }</strong></h4>`
                html += `<div class="row">`
                for(let score of eval.scores) {
                    html += `<div class="col-6">${score.name}</div><div class="col-6">${score.score}/${score.scale} (${score.regard})</div>`
                }
                html += `<div class="col-12">Feedback: ${eval.feedback}</div>`
                html += `</div><hr />`
            }
            $('#response_modal .modal-body').html(html)
            $('#response_modal').modal('show')
        })

        $('.view-response').click(function(event){
            var resp = JSON.parse($(this).attr('data_object'))
            $('#response_modal .modal-title').html('Uploaded By: ' + resp.user_name)
            switch(resp.media_type.toLowerCase()) {
                case 'video':
                    $('#response_modal .modal-body').html(`<h4>${resp.title}</h4>
                                                        <h5>${ resp.createdAt.split('.')[0].replace("T", " ") }</h5>
                                                       <div>
                                                        <video style="width:100%; hright:100%" controls>
                                                          <source src="${resp.media_url}" type="video/mp4">
                                                          <source src="movie.ogg" type="video/ogg">
                                                          Your browser does not support the video tag.
                                                        </video>
                                                        </div>
                                                        `)
                    break;
                case 'audio':
                    $('#response_modal .modal-body').html(`<h4>${resp.title}</h4>
                                                        <h5>${ resp.createdAt.split('.')[0].replace("T", " ") }</h5>
                                                       <div>
                                                       <audio controls>
                                                        <source src="${resp.media_url}" type="audio/mpeg">
                                                        <source src="${resp.media_url}" type="audio/ogg">
                                                        
                                                        Your browser does not support the audio element.
                                                        </audio>
                                                        </div>
                                                        `)
                    break;
                case 'image':
                    $('#response_modal .modal-body').html(`<h4>${resp.title}</h4>
                                                        <h5>${ resp.createdAt.split('.')[0].replace("T", " ") }</h5>
                                                       <div>
                                                        <img src="${resp.media_url}" class="img-fluid">
                                                        </div>
                                                        `)
                    break;
                case 'pdf':
                    $('#response_modal .modal-body').html(`<h4>${resp.title}</h4>
                                                        <h5>${ resp.createdAt.split('.')[0].replace("T", " ") }</h5>
                                                       <div>
                                                        <embed src="${resp.media_url}" style="width:100%; height:100%">
                                                        </div>
                                                        `)
                    break;
            }
            $('#response_modal').modal('show')
        })
        
        $('#list-page-datatable').DataTable({
            stateSave: true,
            "scrollX": true,
            "language": {
                "paginate": {
                    "previous": "<i class='mdi mdi-chevron-left'>",
                    "next": "<i class='mdi mdi-chevron-right'>"
                }
            },
            "drawCallback": function () {
                $('.dataTables_paginate > .pagination').addClass('pagination-rounded');
            }
        });

        $("#btn-date-filter").click(function(){
            $("#date_filter_modal").modal("show")
        })
    });

</script>
<!-- end demo js-->
@endsection