@if(!isset($expand))
    @php($expand = true)
@endif

@extends('layouts.master')

@section('title',  __('tr.My Research Plan') )
@section('titleicon', "icon-lab" )

@section('content')

    <!-- BEGIN .main-content -->
    <div class="main-content">

        <div class='modal fade' id='edit_modal' tabindex='-1' role='dialog' aria-labelledby='edit_modal' aria-hidden='true'>
            <form action="" method="post" enctype='multipart/form-data'>
                {{ csrf_field() }}
                <div class='modal-dialog modal-lg' role='document'>
                    <div class='modal-content'>
                        <div class='modal-header'>
                            <div class="col-11 p-0">
                                <h5 class='modal-title' id='modal_label'></h5>
                            </div>
                            <div class="col-1 p-0">
                                <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
                                    <span aria-hidden='true'>&times;</span>
                                </button>
                            </div>
                        </div>
                        <div class='modal-body'>
                            <div class="form-group">
                                <label for="report_steps">@lang("tr.research_report_q1")</label>
                                <textarea required class="form-control" id="q1" name="q1" rows="4" 
                                 title="@lang('tr.research_report_q1')" 
                                 placeholder="@lang('tr.research_report_q1')"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="report_steps">@lang("tr.research_report_q1")</label>
                                <textarea required class="form-control" id="q2" name="q2" rows="4"
                                          title="@lang('tr.research_report_q2')"
                                          placeholder="@lang('tr.research_report_q2')"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="report_steps">@lang("tr.research_report_q1")</label>
                                <textarea required class="form-control" id="q3" name="q3" rows="4"
                                          title="@lang('tr.research_report_q3')"
                                          placeholder="@lang('tr.research_report_q3')"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="report_steps">@lang("tr.research_report_q1")</label>
                                <textarea required class="form-control" id="q4" name="q4" rows="4"
                                          title="@lang('tr.research_report_q4')"
                                          placeholder="@lang('tr.research_report_q4')"></textarea>
                            </div>
                        </div>
                        <div class='modal-footer'>
                            <button type='submit' class='btn btn-primary' id='action'>@lang('tr.Submit') <span id="progress_text"></span></button>
                            <button type='button' class='btn btn-light' id='close' data-dismiss='modal'>@lang('tr.Cancel')</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <div class='modal fade' id='upload_report_modal' tabindex='-1' role='dialog'
             aria-labelledby='upload_report_modal' aria-hidden='true'>
            <form action="" method="post" enctype='multipart/form-data'>
                {{ csrf_field() }}
                <div class='modal-dialog' role='document'>
                    <div class='modal-content'>
                        <div class='modal-header'>
                            <h5 class='modal-title'>
                                @lang('tr.Upload Report')
                            </h5>
                            <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
                                <span aria-hidden='true'>&times;</span>
                            </button>
                        </div>
                        <div class='modal-body'>
                            <input type="file" onchange="validateFileName(this)" id="report" name="report" class="form-control">
                        </div>
                        <div>
                            <div id='progress_bar' style="background-color: green; width: 0%; height: 2px;"></div>
                        </div>
                        <div class='modal-footer'>
                            <button type='submit' class='btn btn-primary' id='action'>@lang('tr.Submit') <span
                                        id="progress_text"></span></button>
                            <button type='button' class='btn btn-light' id='close'
                                    data-dismiss='modal'>@lang('tr.Cancel')</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        @if($research->isSubmitted() && !$research->isRegistered())
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                <div class="alert alert-warning">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <i class="icon-flash"></i><strong>Announcement!</strong> Dear student, your are not registered yet.
                    <br>
                    <br><b>First</b>: Make sure, that you provide all research information. Click update to complete the
                    missing information.
                    <br><b>Second</b>: Contact one of your supervisors to complete your registeration. The supervisor
                    will (1) locate your registration (using your code) under [Research\Registrations], then (2) review
                    it, then (3) set the supervisors list, and finally (4) approve it.
                    <br><b>Third</b>: (1) Print the resgistration form, then (2) provide it to the postgraduate affairs
                    employee. The employee will (3) complete the paper work and finally (4) register the official
                    approval dates.
                    <br><b>Finally</b>: Your registartion will be approved.
                </div>
            </div>
        @endif

        <div class="card">
            <div class="card-header">
                <a data-toggle="collapse" href="#collapseCardResearch" aria-expanded="{{$expand}}"
                   aria-controls="collapseCardResearch" class="">
                    <span class="icon-media-play"></span> @lang('tr.My Research Plan')
                </a>

                @if($research->isSubmitted())
                    <a href="{{route('print_research')}}" class="btn btn-primary btn-sm float-right">
                        <span class="icon-print"></span> @lang('tr.Print')
                    </a>

                    <span class="float-right">&nbsp;</span>
                @endif
                @if(!$research->isRegistered())
                    <a href="{{ route('edit_research') }}" class="btn btn-primary btn-sm float-right"> <span
                                class="icon-edit"></span> @lang('tr.Update')</a>
                @endif
            </div>

            <div class="card-body">
                <div id="collapseCardResearch" class="collapse {{$expand?'show':'hide'}}" role="tabpanel"
                     aria-labelledby="cardheadingResearch" style="">
                    <table class="table table-striped m-0">
                        <tbody>

                        <tr>
                            <th style="vertical-align: top;">@lang('tr.Status')</th>
                            <td>
                                <ul class="stages">
                                    @if($research->isSubmitted())
                                        <li class='icon-tick'>
                                            <strong>@lang('tr.Submitted')</strong> @if($research->submitted_at) @lang('tr.at')
                                            <strong>{{$research->submitted_at}}</strong> @endif @if($research->submitted_by) @lang('tr.by')
                                            <strong>{{$research->submittedBy->lang('name')}}</strong> @endif</li>
                                    @endif
                                    <hr>
                                    @foreach($research->stages as $stage)
                                        <li class='icon-tick' style="line-height: 150%;">
                                            <strong>{{$stage->statusLabel()}}</strong> @if($stage->submitted_at) @lang('tr.at')
                                            <strong>{{$stage->submitted_at}}</strong>@endif

                                            @if($stage->submittedBy)
                                                - @lang('tr.provided by')
                                                <strong>{{$stage->submittedBy->academicName()}}</strong>
                                            @endif

                                            @if($stage->department_approval_at)
                                                <br/><strong>@lang('tr.Department Approval')</strong> @lang('tr.at')
                                                <strong>{{$stage->department_approval_at}}</strong>
                                            @endif

                                            @if($stage->faculty_approval_at)
                                                , <strong>@lang('tr.Faculty Approval')</strong> @lang('tr.at')
                                                <strong>{{$stage->faculty_approval_at}}</strong>
                                            @endif

                                            @if($stage->university_approval_at)
                                                , <strong>@lang('tr.University Approval')</strong> @lang('tr.at')
                                                <strong>{{$stage->university_approval_at}}</strong>
                                            @endif

                                            @if($stage->department_approval_at && $stage->submittedBy)
                                                - @lang('tr.provided by')
                                                <strong>{{$stage->submittedBy->academicName()}}</strong>
                                            @endif
                                        </li>
                                        <hr>
                                    @endforeach
                                </ul>
                            </td>
                        </tr>

                        <tr>
                            <th style="width:200px;">@lang('tr.Student Code')</th>
                            <td>
                                <a href="{{route('show_student', ['student'=>$student->id])}}">{{ $student->user->code }}</a>
                            </td>
                        </tr>

                        <tr>
                            <th>@lang('tr.Student Name')</th>
                            <td>
                                <a href="{{route('show_student', ['student'=>$student->id])}}">{{ $student->user->lang('name') }}</a>
                            </td>
                        </tr>

                        <tr>
                            <th>@lang('tr.Study Plan')</th>
                            <td>{{$student->plan->name()}} @if($student->last_level)<strong>, @lang('tr.Level')</strong>
                                : {{$student->level->lang('name')}} @endif @if($student->last_term_id),
                                <strong>@lang('tr.Term')</strong>: {{$student->term->lang('name')}} @endif</td>
                        </tr>

                        <tr>
                            <th>@lang('tr.Research Plan')</th>
                            <td>{{ $research->researchPlan->lang('name') }}</td>
                        </tr>

                        <tr>
                            <th>@lang('tr.English Title')</th>
                            <td><span style="direction: ltr;text-align: justify;">{{ $research->en_title }}</span></td>
                        </tr>

                        <tr>
                            <th>@lang('tr.Arabic Title')</th>
                            <td><span style="direction: rtl;text-align: justify;">{{ $research->ar_title }}</span></td>
                        </tr>

                        <tr>
                            <th>@lang('tr.Supervisors')</th>
                            <td>
                                @foreach($research->supervisors as $supervisor)
                                    {{ $supervisor->user->academicName() }},
                                @endforeach
                            </td>
                        </tr>

                        @php($archive = $student->user->archive->findChildByContentType('Research Plan'))
                        <tr>
                            <th colspan="2">@lang('tr.English Abstract')</th>
                        </tr>
                        <tr>
                            <td colspan="2" style="background-color: white;">
                                <div style="direction: ltr;text-align: justify;">@if($archive) {!! $archive->getLocale('en')->page() !!}@endif</div>
                            </td>
                        </tr>

                        <tr>
                            <th colspan="2">@lang('tr.Arabic Abstract')</th>
                        </tr>
                        <tr>
                            <td colspan="2" style="background-color: white;">
                                <div style="direction: rtl;text-align: justify;">@if($archive) {!! $archive->getLocale('ar')->page() !!}@endif</div>
                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                @lang('tr.Reports')
            </div>
            <div class="card-body">
                <table id="data_table" class="display" style="width:100%">
                    <thead>
                    <tr>
                        <th width="10%">@lang('#')</th>
                        <th width="20%">@lang('tr.Report')</th>
                        <th width="40%">@lang('tr.Information')</th>
                        <th width="20%">@lang('tr.Status')</th>
                        <th width="10%"></th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <!-- END: .main-content -->
@endsection

@section('pagejs')
    <script type="text/javascript">

        var downloadReport = '{{route('download_file', ['archive'=>'#id']) }}';
        var editReport = '{{route('manage_research_report', ['research'=>$research->id, 'report'=>'#id']) }}';

        $(document).ready(function () {

            var table = $('#data_table').DataTable({
                processing: true,
                serverSide: true,
                scrollX: true,
                stateSave: false,
                rowId: 'id',
                "ajax": {
                    "url": "{{ route('show_research') }}",
                    "dataSrc": "data.data"
                },
                "columns": [
                    {"data": "id", "name": "id"},
                    {
                        "data": "archive_id", "name": "archive_id",
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                            var html = "";
                            html += oData.report_year + " (" + oData.report_cycle + ")";
                            $(nTd).html(html);
                        }
                    },
                    {
                        "data": "archive_id", "name": "archive_id",
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                            var html = "";
                            html += "Submitted at " + oData.submitted_at;
                            $(nTd).html(html);
                        }
                    },
                    {
                        "data": "status", "name": "status",
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {

                            var html = "";

                            if(oData.status == {{'App\StudentResearchReport'::STATUS_REQUIRED}})
                                html += "<span>Required</span>";
                            else if(oData.status == {{'App\StudentResearchReport'::STATUS_SUBMITTED}})
                                html += "<span class='badge badge-warning'>Submitted</span>";
                            else if(oData.status == {{'App\StudentResearchReport'::STATUS_APPROVED}})
                                html += "<span class='badge badge-success'>Approved</span>";
                            else if(oData.status == {{'App\StudentResearchReport'::STATUS_REJECTED}})
                                html += "<span class='color: red'>Rejected</span>";
                            else if(oData.status == {{'App\StudentResearchReport'::STATUS_PARTIALLY_APPROVED}})
                                html += "<span class='badge badge-primary'>Partially Approved</span>";

                            $(nTd).html(html);
                        }
                    },
                    {
                        "data": "archive_id", "name": "archive_id",
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {

                            var html = "";
                            html += "<a title='@lang('tr.Show')' href='javascript:void(0)' class='show_researcher_report'><i class='icon-eye'></i></a>&nbsp;";

                            if (oData.status != {{'App\StudentResearchReport'::STATUS_APPROVED}}) {
                                html += "<a title='@lang('tr.Edit')' href='"+editReport.replace('#id',oData.id)+"' target='_blank'><i class='icon-edit'></i></a>&nbsp;";
                            }

                            $(nTd).html(html);
                        }
                    },
                ]
            });

            $(".dataTables_filter").hide();

            $(document).on("click", ".upload", function () {

                var modal = $('#upload_report_modal').clone();
                var row = $(this).closest('tr');
                var data = table.row(row).data();
                var action = "{{ route('upload_report', ['studentResearchReport' => '#id']) }}";

                action = action.replace('#id', data.id);

                modal.find('form').attr('action', action);

                modal.execModal({
                    progressBar: 'progress_bar',
                    progressText: 'progress_text',
                }, function (response) {
                    table.ajax.reload(null, false);
                }, function (response) {

                });
            });

            function edit(row) {
                var modal = $('#edit_modal').clone();
                var data = null;
                modal.find('form')[0].reset();
                modal.find("option:selected").removeAttr("selected");
                if(row) {
                    data = table.row(row).data();
                    reportData = JSON.parse(data.data);
                    if(reportData) {

                        modal.find('#q1').val(reportData.q1 || '');
                        modal.find('#q2').val(reportData.q2 || '');
                        modal.find('#q3').val(reportData.q3 || '');
                        modal.find('#q4').val(reportData.q4 || '');
                    }
                }
                var action = '{{ route('save_research_report', ["research"=>$research->id, 'report'=>'#id']) }}';
                modal.find('#modal_label').text((data)?'Edit Report':'Add Report');
                action = action.replace('#id', (data)?data.id:0);
                modal.find('form').attr('action', action);
                modal.execModal({
                    progressBar: 'progress_bar',
                    progressText: 'progress_text',
                }, function(response){
                    if(row) {
                    table.draw(false);
                    } else {
                        table.page('last').draw('page');
                    }
                }, function(response){
                    var errorString = '';
                    $.each( response.errors, function( key, value) {
                        errorString += value + ',';
                    });
                    errorBox(errorString);
                });
            }

            $('#add_researcher_report').on('click', function () {
                edit(null);
            });

            $(document).on("click", ".edit_researcher_report", function () {
                edit($(this).closest('tr'));
            });

            $(document).on("click", ".show_researcher_report", function () {
                row = $(this).closest('tr')
                var modal = $('#edit_modal').clone();
                var data = null;
                modal.find('form')[0].reset();
                modal.find("option:selected").removeAttr("selected");
                if(row) {
                    data = table.row(row).data();
                    reportData = JSON.parse(data.data);
                    if(reportData) {

                        modal.find('#q1').val(reportData.q1 || '');
                        modal.find('#q2').val(reportData.q2 || '');
                        modal.find('#q3').val(reportData.q3 || '');
                        modal.find('#q4').val(reportData.q4 || '');
                    }
                }
                modal.find('#modal_label').text('Show Report');
                modal.find('#action').hide();
                modal.find('#q1').attr('disabled', true);
                modal.find('#q2').attr('disabled', true);
                modal.find('#q3').attr('disabled', true);
                modal.find('#q4').attr('disabled', true);

                modal.execModal({
                    progressBar: 'progress_bar',
                    progressText: 'progress_text',
                }, function(response){
                    
                }, function(response){
                    var errorString = '';
                    $.each( response.errors, function( key, value) {
                        errorString += value + ',';
                    });
                    errorBox(errorString);
                });
            });
        });
    </script>
@endsection