@extends('layouts/gnr_layout') 
@section('title', '| Transaction Time Schedule')
@section('content')
<style type="text/css">
    .form-group,
    .form-control {
        font-size: 11px !important;
        color: black !important;
    }

    .form-control {
        padding: 5px !important;
    }

    #reportSubmit {
        font-size: 12px;
        margin-top: 20px;
    }

</style>
<script type="text/javascript">
    // $("#loadingModal").show();
    $(document).keydown(function (e) {
        if (e.keyCode == 27) return false;
    });

</script>
<div class="row">
    <div class="col-md-12">
        <div class="" style="">
            <div class="">
                <div class="panel panel-default" style="background-color:#708090;">
                    <div class="panel-heading" style="padding-bottom:0px">
                        <div class="panel-options">
                            <a href="{{route('trxTimeSlot.add')}}" class="btn btn-info pull-right print-icon" style="color: white">Add Transaction Slot</a>
                        </div>
                        <h3 style=" text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;"> Transaction Time Schedule</h3>
                    </div>

                    <div class="panel-body panelBodyView">

                        <!-- Filtering Start-->
                        
                            <div class="row">
                               
                            </div>
                        
                        
                        <!-- filtering end-->


                        <div class="row">
                            <div class="col-md-12" id="reportingDiv">
                                <div class="form-group">
                                <table id="timeSlotTable" class="table">
                                    <thead>
                                        <tr>
                                            <th style="width:15%;">Sl</th>
                                            <th style="width:10%;">Level</th>
                                            <th style="width:15%;">Date</th>
                                            <th style="width:15%;">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($data['timeSlotData'] as $data)
                                            <tr>
                                                <td>{{$loop->iteration}}</td>
                                                <td>{{$data->level == "Region" ? "Division" : $data->level}}</td>
                                                <td>{{$data->effectiveDate}}</td>
                                                <td class="text-center">
                                                    <a href="{{route('trxTimeSlot.edit',$data->id)}}">
                                                        <span class="glyphicon glyphicon-edit"></span>
                                                    </a>
                                                    {{-- <a href="{{route('trxTimeSlot.delete',$data->id)}}">
                                                        <span class="glyphicon glyphicon-trash"></span>
                                                    </a> --}}
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                    
                                </table>
                            </div>
                            </div>
                        </div>


                    </div> {{-- panel-body panelBodyView DIV --}}
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    

</script>


<script type="text/javascript">
    $(document).ready(function () {

        $(document).on('click', '#printIcon', function (event) {


            // $("#printIcon").click(function(event) {



            // $("#hiddenTitle").show();
            // $("#hiddenInfo").show();
            // $("#loanNSavingTable1").removeClass('table table-striped table-bordered');

            // $("#note3totalTable tbody tr td:nth-child(1)").width(200);

            var mainContents = document.getElementById("printDiv").innerHTML;
            var headerContents = '';
            // var printContents = '<div id="order-details-wrapper">' + headerContents + mainContents +'</div>';


            var printStyle =
                '<style>table {float:left;height:auto;margin:10px 0px !important;width:100% !important;font-size:11px;border:1pt ash;page-break-inside:auto;font-family:Arial;} .tableHead td{text-align:center;vertical-align: top;padding:3px;font-size:11px} table thead tr th:nth-child(1){ width: 50px;} thead tr th:nth-child(10){ width: 40px;} tbody tr td:nth-child(10){ width: 40px;} tbody tr td.amount {border: 1px solid ash;text-align:right;vertical-align: middle;padding:3px;font-size:11px} tbody tr td {border: 1px solid ash;text-align:center;vertical-align: middle;padding:3px;font-size:11px} td:nth-child(1){text-align:left;} tr{ page-break-inside:avoid; page-break-after:auto } tr:last-child { font-weight: bold;} .name{text-align:left;vertical-align:left;}</style><style media="print">@page{margin:10mm 10mm;}</style><style>@media print {.element-that-contains-table { overflow: visible !important; }}</style><style>@page:first{table tbody tr:nth-of-type(10n){page-break-after: always;}} .rotating {-ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl;     -moz-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl;}</style><style>#note3totalTable tbody tr td:nth-child(1){width: 205px !important}</style>';


            /*tr:nth-of-type(10n){page-break-after: always;}*/
            // @media print {.element-that-contains-table { overflow: visible !important; }}

            var printContents = '<div id="order-details-wrapper">' + headerContents + printStyle +
                mainContents + '</div>';


            /*document.body.innerHTML = printStyle + printContents;
            window.print();*/

            var win = window.open('', 'printwindow');
            win.document.write(printContents);
            win.print();
            // $("#loanNSavingTable1").addClass('table table-striped table-bordered');
            win.close();
        });

        $("#loadingModal").hide();

        $("#filDate").on('input', function (event) {
            this.value = '';
        });


        $("#filDate").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'dd-mm-yy'
        });

    }); /* Ready*/

</script>
@endsection