@extends('layouts/layout')
@section('title', 'Incident Report')
@push('style')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.css">

@endpush

@section('content')
@if ($message = Session::get('success'))
@include('sweetalert::alert')
@endif
<!-- page content -->
<div class="" role="main">
    <div class="">
        <div class="row">
            <div class="col-md-12 col-sm-12 mt-2">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>Incident Report Photo/Video</h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="row">
                        @foreach($incident_images as $incident_images)
                        <!-- image show-->
                        
                            @if(pathinfo($incident_images->image_path, PATHINFO_EXTENSION) != "mp4")  
                            
                                    <img src="{{ url('checkmate_images/'. $incident_images->image_path) }}" style="height: 200px; width: 250px;" class="m-2">
                            
                            @else
                            
                                <video autoplay="" loop="" controls="" width="250px" height="200px" class="m-2">
                                    <source type="video/mp4" src="{{ url('checkmate_images/'. $incident_images->image_path) }}">
                                </video>
                           
                            @endif
                        <!-- image end -->
                        @endforeach
                    </div>
                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 text-center mt-3">
                            <div class="form-group">
                                <a href="javascript:history.back()" class="btn btn-primary btn-round">Back</a>
                                <!-- <input type="submit" class="btn btn-success mx-1" name="create_product" id="create_product" value="Update Campaign"  style="margin-top: 10px;"/> -->
                                <input type="hidden" id="trainingid" name="trainingid" class="form-control" value="{{$incident_id}}">
                                <button type="button" id="remark_view" name="remark_view" class="btn btn-primary btn-round" data-toggle="modal" data-target="#exampleModal">Remarks
                                                </button>        
                            </div>
                        </div>
                    </div>
                    <!-- Modal -->
                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-lg" role="document">
                                    <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Remarks</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <table id="datatable-fixed-header tblfirst" class="table table-striped table-bordered text-center" style="width:100%">
                                            <thead>
                                                <tr>
                                                    <th>Incident.No</th>
                                                    <th>Remark</th>
                                                    <th>Remark By</th>
                                                    <th>Date</th>
                                                </tr>
                                            </thead>
                                            <tbody id="myTable" name="Table">
                                        
                                            </tbody>    
                                        </table>
                                            <label class="form-control-label mb-1">Admin Remark</label>
                                            <input type="text" id="remark" name="remark" required="required" class="form-control" style="height:30px" value="">
											<span id="remark_error" class="validate"></span>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-round btn-secondary" data-dismiss="modal">Close</button>
                                        <button id="update_status" data-dismiss="modal" class="btn btn-round btn-primary remarkupdate scrollToTop" type="button">Update</button>
                                                                
                                    </div>
                                    </div>
                                </div>
                                </div>
                                <!-- end modal -->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /page content -->
@endsection
@push('scripts')
<script>
    $(document).ready(function(){
        $("#update_status").on('click', function() {
            var error_msg = "";

            if($("#remark").val() == "") {
                $("#remark_error").text("Please enter remark.");
                error_msg = "Error";
            } else {
                $("#module_name_error").text("");
            }    

           if(error_msg) {
                return false;
            }
        }); 
        
    });
</script>
<script>
function timeFunctionLong(input) {
    setTimeout(function() {
        input.type = 'text';
    }, 60000);
}
</script>
<script>
    $(document).ready(function() 
    {
        $(document).on('click', '#remark_view', function()
        {
            $("#myTable tr").detach();
            var training_id = $('#trainingid').val();
            console.log(training_id);
                $.ajax(
                    {
                        url: "{{url('viewincidentremarks')}}",
                        type: "POST",
                        data: {
                            training_id : training_id,
                            _token: '{{csrf_token()}}'
                        },
                        dataType: 'json',
                        success: function (res) 
                        {
                            console.log(res);
                            
                            $.each(res,function(key, val){
                              
                                $("#myTable").append('<tr'+
                                            '<td>' + val.remark_id + '</td>'+
                                            '<td>' + val.remark_id + '</td>'+
                                            '<td>' + val.remark + '</td>'+
                                            '<td>' + val.Trainer + '</td>'+
                                            '<td>' + val.created_at + '</td>'+
                                            '</tr>');
                            });
                       
                        }
                    });
        });
    });
</script>
<script>
    $(document).ready(function() {
        $(document).on('click', '.remarkupdate', function(){
        var training_id = $('#trainingid').val();
        var remark = $('#remark').val();
        console.log(training_id);
                $.ajax({
                url: "{{url('updateincidentremarks')}}",
                type: "POST",
                data: {
                    training_id : training_id,
                    remark : remark,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (res) {
                    console.log(res);
                    swal({
                            title: "Success!",
                            text: "Your Remark Updated Successfully.",
                            type: "success"
                        },
                        function() {
                            location.reload();
                        });
                }
            });
        });
    });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.js"></script>

@endpush