@extends('Layouts.Application')

@section('MainContent')

<style>
.vCenter {
    vertical-align: middle !important;
}
</style>

<div class="row">
    <div class="col-sm-12">
        <div class="panel panel-default">
            <div class="panel-heading"><strong>Student Home Work</strong></div>
            <div class="panel-body">
                <div class="table-responsive">
                    <table class="table table-condensed table-bordered text-uppercase">
                        <thead style="background-color:#9ea4cf;">
                            <tr>
                                <td colspan="3">
                                    NAME : <strong> {{Auth::user()-> full_name}} </strong>
                                </td>
                                <td colspan="2">
                                    ID : <strong> {{ $studentID->system_generated_student_id }} </strong>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    ROLL : <strong>{{ $studentID->roll_no }}</strong>
                                </td>
                                <td>
                                    CLASS : <strong>{{ $studentID->ClassName }}</strong>
                                </td>
                                <td>
                                    SECTION : <strong>{{ $studentID->SectionName }}</strong>
                                </td>
                                <td colspan="2">
                                    GROUP : <strong>{{ $studentID->GroupName }}</strong>
                                </td>
                            </tr>
                        </thead>
                    </table>
                    <table id="tbl_homework" class="table table-condensed table-bordered">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Subject</th>
                                <th>Description</th>
                                <th>Image View<br>/File Download</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(isset($HomeWork))
                                @foreach($HomeWork as $key => $hw)
                                    <tr>
                                        <td class="vCenter">{{ date('Y-m-d',strtotime($hw->create_time)) }}</td>
                                        <td class="vCenter">{{ $hw->name }}</td>
                                        <td>{!! $hw->homework_description !!}</td>
                                        <td>
                                            @if (count($hw->images))
                                                <a href="#hwModal-{{ $key }}" id="hwbutton" data-toggle="modal" class="btn btn-info">
                                                    <i class="fa fa-eye"></i> <strong>{{ $hw->homework_title }}</strong>
                                                </a>
                                            @endif

                                            @if ($hw->homework_file && file_exists('uploads/homework/' . $hw->homework_file))
                                                <a class="btn btn-success" download="{{ $hw->homework_title }}" href="{{ asset('uploads/homework/' . $hw->homework_file) }}" title="Homework"><i class="fa fa-download"></i></a>
                                            @endif

                                            <!-- Modal -->
                                            <div class="modal fade" id="hwModal-{{ $key }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                <div class="modal-dialog" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title text-center" id="exampleModalLabel">{{ $hw->homework_title }} Home Work
                                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                    <span aria-hidden="true">&times;</span>
                                                                </button>
                                                            </h5>
                                                        </div>
                                                        <div class="modal-body">
                                                            <h4 class="text-warning text-center" id="subject_name"></h4>
                                                            @if (count($hw->images))
                                                                @foreach ($hw->images as $image)
                                                                    <div style="width: 100%; margin-bottom: 10px;">
                                                                        <button type="button" class="btn btn-success rotateImageLeft"><i class="fa fa-rotate-left"></i></button>
                                                                        <button type="button" class="btn btn-success rotateImageRight"><i class="fa fa-rotate-right"></i></button>
                                                                        <img src="{{ asset('uploads/homework/' . $image->image_name) }}" class="img img-thumbnail" width="100%" style="display: block">
                                                                    </div>
                                                                @endforeach
                                                            @endif
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
var rotation = 0;

jQuery.fn.rotate = function(degrees) {
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
    return $(this);
};

$("#tbl_homework").on('click', ".rotateImageRight", function() {
    rotation += 90;
    $(this).siblings("img").rotate(rotation);
});
$("#tbl_homework").on('click', ".rotateImageLeft", function() {
    rotation -= 90;
    $(this).siblings("img").rotate(rotation);
});
</script>

@endsection