@extends('layouts.report_dashboard')
@section('title-content')
    <title>{{ config('app.name') }} | Dash Index</title>
@endsection
@section('content')
    <div class="col-md-12">
        <center>
            <h1 style="margin-top: 1%">Semester Results</h1>
        </center>
        <br>
        <div class="table-responsive-sm">
            <table class="tablex table-borderless">
                <tbody>
                    <tr>
                        <th>Program Name</th>
                        <td style="padding-left: 2%"> Bsc Science</td>
                    </tr>
                    <tr>
                        <th>Code</th>
                        <td style="padding-left: 2%"> CS</td>
                    </tr>
                    <tr>
                        <th>Academic Year</th>
                        <td style="padding-left: 2%"> 2019/2020</td>
                    </tr>
                    <tr>
                        <th>Study Year</th>
                        <td style="padding-left: 2%"> 1</td>
                    </tr>
                    <tr>
                        <th>Semester</th>
                        <td style="padding-left: 2%"> 1</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <br>
        <div class="table-responsive-sm">
            <table class="tablex table-bordered" border="1" width="100%">
                <thead>
                    <tr>
                        <th colspan="3" class="text-center">MODULES EXAMINED IN SEMESTER 1 Year 1 - 2018/2019</th>
                    </tr>
                    <tr>
                        <th class="text-center">MODULE CODE</th>
                        <th class="text-center">MODULE NAME</th>
                        <th class="text-center">INSTRUCTOR</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>DFUD3109</td>
                        <td>Computer Application</td>
                        <td>Instructor</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <br>
        <div class="table-responsive-sm">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th colspan="10" class="text-center">SUMMARISED RESULTS BY GRADE</th>
                    </tr>
                    <tr>
                        <th class="text-center">SNO</th>
                        <th class="text-center">SEX</th>
                        <th class="text-center">REG No</th>
                        <th class="text-center rotated_cell">
                            <div class='rotate_text'>DFUD3212</div>
                        </th>
                        <th class="text-center rotated_cell">
                            <div class='rotate_text'>TOTAL CREDITS TAKEN</div>
                        </th>
                        <th class="text-center rotated_cell">
                            <div class='rotate_text'>CREDITS AQUIRED</div>
                        </th>
                        <th class="text-center rotated_cell">
                            <div class='rotate_text'>MODULES FAILED</div>
                        </th>
                        <th class="text-center rotated_cell">
                            <div class='rotate_text'>GPA</div>
                        </th>
                        <th class="text-center">REMARKS</th>
                        <th class="text-center">MODULES UNDER SUPPLEMENTARY</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>M</td>
                        <td>Instructor</td>
                        <td>A</td>
                        <td>Inst</td>
                        <td>Ins</td>
                        <td>Ivhh</td>
                        <td>Ins</td>
                        <td>Ins</td>
                        <td>Ins</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
@endsection
@section('css')
    <style>
        table {
            font-size: 12px;
            font-family: 'Nunito', sans-serif;
        }

        td {
            text-align: left;
            vertical-align: middle;
        }

        th {
            color: #666;
            font-weight: normal;
        }

        td,
        th {
            padding: 10px;
            text-align: center;
            border: solid 1px #999;
        }

        .rotate_text {
            -moz-transform: rotate(-90deg);
            /* FF3.5+ */
            -o-transform: rotate(-90deg);
            /* Opera 10.5 */
            -webkit-transform: rotate(-90deg);
            /* Saf3.1+, Chrome */
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
            /* IE6,IE7 */
            -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
            /* IE8 */
            vertical-align: top;
            padding: 15px 0;
            /*-moz-transform:rotate(-90deg);*/
            /*-moz-transform-origin: top left;*/
            /*-webkit-transform: rotate(-90deg);*/
            /*-webkit-transform-origin: top left;*/
            /*-o-transform: rotate(-90deg);*/
            /*-o-transform-origin:  top left;*/
            /*position:relative;*/
            /*top:20px;*/
            /*text-wrap: none;*/

        }

        /*table*/
        /*{*/
        /*    border: 1px solid black;*/
        /*    table-layout: fixed;*/
        /*    width: 69px; !*Table width must be set or it wont resize the cells*!*/
        /*}*/
        /*th, td*/
        /*{*/
        /*    border: 1px solid black;*/
        /*    width: 23px;*/
        /*}*/
        .rotated_cell {
            /*height:100px;*/
            /*vertical-align:bottom*/
        }






        .container {
            height: 842px;
            width: 595px;
            /* to centre page on screen*/
            margin-left: auto;
            margin-right: auto;
        }

        .page-break {
            page-break-after: always;
        }

        * {
            box-sizing: border-box;
        }

        .column {
            float: left;
            padding: 10px;
            /*height: 300px; !* Should be removed. Only for demonstration *!*/
        }

        /* Clear floats after the columns */
        /*.row {*/
        /*display: flex;*/
        /*}*/
        @media screen and (max-width: 600px) {
            .column {
                width: 100%;
            }
        }

        /*.row:after {*/
        /*    content: "";*/
        /*    display: table;*/
        /*    clear: both;*/
        }
    </style>
@endsection

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