@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">
                        <h3 style=" text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;">Add Transaction Time Schedule</h3>
                    </div>

                    <div class="panel-body panelBodyView">

                        <!-- Filtering Start-->
                        
                            <div class="row">
                                <form action="" class="form-horizontal form-groups" method="GET">
                                    <div class="col-md-12">
                                        <div class="col-md-1">
                                            <div class="form-group">
                                                <div class="col-md-12">
                                                    <label for="Level" class="control-label pull-left">Level:</label>
                                                </div>
                                                <div class="col-md-12">
                                                    <select name="level" id="level" class="form-control input-sm" autocomplete="off" required>
                                                        <option value="">Select</option>
                                                        @foreach ($level as $key=>$item)
                                                            <option value="{{$key}}">{{$item}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-1">
                                            <div class="form-group">
                                                <div class="col-md-12">
                                                    <label for="Date" class="control-label pull-left">Date:</label>
                                                </div>
                                                <div class="col-md-12">
                                                    <input type="text" id="filDate" class="form-control input-sm" name="date" autocomplete="off" required>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        
                        
                        <!-- filtering end-->


                        <div class="row">
                            <div class="col-md-12" id="reportingDiv">
                                
                            </div>
                        </div>


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

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

        // $("form").submit(function (event) {
        $("form").on('change',function (event) {
            event.preventDefault();
            let level = $('#level').val();            
            let filDate = $('#filDate').val();            

            if (level != "" && filDate != "") {
                var serializeValue = $(this).serialize();
                $('#loadingModal').show();
                $("#reportingDiv").load('{{URL::to("gnr/app/trxTimeSlot/addTable")}}' + '?' +serializeValue);
            }
        });

    });

</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 = '';
        });
  
        var maxSlotDate = "{{ $maxSlotDate }}";
        $("#filDate").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'dd-mm-yy',
            minDate: new Date(new Date(maxSlotDate).valueOf() + 1000*3600*24) ,
            // maxDate: 0 
        });

    }); /* Ready*/

</script>
@endsection