@extends('layouts.master')

@section('title', $excuse->excuseType->en_name)
@section('subtitle', $excuse->title .' : '.__("tr.Show excuse details") )
@section('titleicon', "icon-files-empty")

@if($excuse->canDiscuss())

    @section('actionlink', '#cancel_excuse')
    @section('dataToggle', 'modal')
    @section('dataTarget', '#cancel_excuse')
    @section('actiontitle', __('tr.Cancel the excuse') )
    @section('actiontype', 'success')

@endif

@section('pagecss')
<style type="text/css">
    .excuse_avatar {
        vertical-align: middle;
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

    textarea
        {
            resize: none;
            overflow: hidden;
        }
</style>
@endsection

@section('content')
<!-- BEGIN .main-content -->
<div class="main-content">
    @if(!empty($errors->all()))
        <div class="alert alert-danger text-white bg-danger">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <div class="card">
        <div class="card-body">
            <table class="table table-striped">

            @if($excuse->excuse_type_id == 6) <!-- One academic year -->
                <tr>
                    <td style='width:20%'><strong>@lang('tr.Year')</strong></td>
                    <td>{{$excuse->term->years}}</td>
                </tr> 
                @elseif($excuse->excuse_type_id != 10 && $excuse->excuse_type_id != 11 && $excuse->excuse_type_id != 12 && $excuse->excuse_type_id != 13)
                <tr>
                    <td style='width:20%'><strong>@lang('tr.Term')</strong></td>
                    <td>{{$excuse->term->en_name}}</td>
                </tr>
                @endif
    
                <tr>
                    <td><strong>@lang('tr.Type')</strong></td>
                    <td>{{$excuse->excuseType->en_name}}</td>
                </tr>
                <tr>
                    <td><strong>@lang('tr.Current Status')</strong></td>
                    <td>
                        {{\App\Excuse::statusLabels()[$excuse->status]}}  
                        @if($excuse->status == \App\Excuse::STATUS_NEEDS_MORE_DOCUMENTS)
                            <br> 
                            <span style='color:red'>{{$excuse->msg_to_std}}<span>
                        @endif
                    </td>
                </tr> 
                
                @if($excuse->excuse_type_id == 1 || $excuse->excuse_type_id == 10 || $excuse->excuse_type_id == 11 || $excuse->excuse_type_id == 12 || $excuse->excuse_type_id == 13) <!-- Study period -->
                <tr>
                    <td><strong>@lang('tr.Request Details')</strong></td>
                    <td>
                        <p>From: {{$excuse->period_from}}</p>
                        <p>To: {{$excuse->period_to}}</p>
                    </td>
                </tr>
                @elseif($excuse->excuse_type_id == 2 || $excuse->excuse_type_id == 3 || $excuse->excuse_type_id == 4 || $excuse->excuse_type_id == 9) <!--Mid-term exam, Lab exam, Final exam (course/s)-->
                    <tr>
                        <td><strong>@lang('tr.Request Details')</strong></td>
                        <td>
                            @foreach($excuse->excuseCourses as $course)
                                <p>{{$course->en_name}}</p>
                            @endforeach
                        </td>
                    </tr>
                @endif
                
                <tr>
                    <td><strong>@lang('tr.Reasons')</strong></td>
                    <td>{{$excuse->reasons}}</td>
                </tr>
                <tr>
                    <td><strong>@lang('tr.Attachments')</strong></td>
                    <td>
                        @foreach($excuse->files as $file)
                        <span>
                        <i class="icon-file-empty"></i> <a href="{{ route('download_file', ['archive'=>$file->id]) }}">{{ $file->name() }}</a>
                        </span><br>
                        @endforeach
                    </td>
                </tr>
            </table>
          
           <div class="comments-footer clearfix">
                
            </div>
            @if($excuse->canDiscuss())
                <div class="col">
                    <div class="form-group">
                        <button type="submit" data-target='#add_more_files' data-toggle='modal' class="btn btn-primary float-right">@lang('tr.Add More Files')</button>
                    </div>
                </div> 
                
            @endif
        </div>
        
    </div>

   
   
   @if($excuse->canDiscuss())
    <!-- Form's comment -->
    <div class="card">
        <div class="card-body">
            <form class="ajax_form" enctype="multipart/form-data" action="{{ route('add_excuse_comment', ['excuse'=>$excuse->id]) }}" method="POST">
                {{ csrf_field() }}
                <div class="form-group">
                     <textarea name="comment" id="comment" required class="form-control" rows="1" placeholder="Write your comment..."></textarea>
                     <input type="hidden" name="comment_line" id="comment_line">
                </div>
                <div class="row gutters">
                   
                    <div class="col">
                        <div class="form-group">
                            <button type="submit" id="send_comment" class="btn btn-primary float-right">Send</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- // End -->

    <!-- Modal -->
    <div class="modal fade" id="cancel_excuse" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">
                        @lang('tr.Please state why you cancel the excuse')
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="post"  action="{{route('cancel_excuse', ['excuse'=>$excuse->id])}}">
                        {{ csrf_field() }}
                        <div class="form-group">
                            <textarea required="" class="form-control" name="action_comment" placeholder="@lang('tr.Your comment')"></textarea>
                        </div>
                        
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary" id=''>@lang('tr.Submit')</button>
                        </div>
                    </form>
                </div>
                </div>
            </div>
        </div>
    @endif
   


    <div class="card">
        <div class="card-body">
            <div class="media overflow-scroll">
                <div class="media-body" id="comments">
                        
                    @foreach($excuse->excuseMessages as $message)

                    <div class="media mt-3">
                        <div class="mr-3">
                            <a href="#">
                                <span class="media-object">
                                @php($file = ($message->user)?$message->user->archive->findChildByContentType("Personal Photo"):null)
                                @if($file)
                                    <img class="excuse_avatar" alt="48x48" src="/int/images/user.png">
                                @else
                                    <img class="excuse_avatar" alt="48x48" src="/int/images/user.png">
                                @endif
                                </span>
                            </a>
                        </div>
                        <div class="media-body">
                            <h5 class="mt-0 media-heading">
                                <a style="color: #4266b2" href="{{ route('show_profile',['user' => $message->user->id]) }}">{{ $message->user->en_name }}</a>
                                <span class="date" style="border: none;padding: 0px;">{{createdFrom($message->created_at) }}</span>
                            </h5>
                            <p>{!! nl2br(htmlspecialchars($message->comment)) !!}</p>
                           
                        </div>
                    </div>
                    @endforeach
                    <div style="display: none;">
                        <div class="media mt-3" id="comment_template">
                            <div class="mr-3">
                                <a href="#">
                                    <span class="media-object">
                                        <img class="excuse_avatar" alt="48x48" src="/int/images/user.png">
                                    </span>
                                </a>
                            </div>
                            <div class="media-body">
                                <h5 class="mt-0 media-heading">
                                    <span class="user_name"></span>
                                    <span class="date created_from" style="border: none;padding: 0px;"></span>
                                </h5>
                                <p class="comment"></p>
                                <div class="comments-footer clearfix">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="display: none;">
                        <span id="comment_file_template">
                            <i class="icon-file-empty"></i> <a></a>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>    
    
    <!-- Modal -->
    <div class="modal fade" id="add_more_files" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">
                    @lang('tr.Add More Files')
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="post"  enctype="multipart/form-data"  action="{{route('excuse_add_files', ['excuse' => $excuse->id ])}}">
                    {{ csrf_field() }}
                    <div class="form-group">
                        <input type="file" onchange="validateFileName(this)" class="filestyle" name="attachments[]" data-icon="true" multiple>
                    </div>
                    
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" id=''>@lang('tr.Submit')</button>
                    </div>
                </form>
            </div>
            </div>
        </div>
    </div>

</div>        
</script>
@endsection


@section('pagejs')
<script type="text/javascript">
    $(document).ready(function() {
        $(".ajax_form").ajaxForm([], function(response){
            var commentElement = $("#comment_template").clone();
           
            commentElement.attr('id', '');
            commentElement.find('.user_name').text(response.user_name);
            commentElement.find('.created_from').text(response.created_from);
            commentElement.find('.comment').html(response.comment.replace("<br>","\n"));
                
            commentElement.prependTo('#comments');
        });
    });
</script>

<script>
        $(document).ready(function(){
            $( "#comment" ).keyup( function() {
                $('#comment_line').val($(this).val().replace(/\n/g, '<br />'));
            });       
        });
            
    </script>

<script>
        var textarea = null;
        window.addEventListener("load", function() {
            textarea = window.document.querySelector("textarea");
            textarea.addEventListener("keypress", function() {
                if(textarea.scrollTop != 0){
                    textarea.style.height = textarea.scrollHeight + "px";
                }
            }, false);
        }, false);
    </script>
@endsection