@extends('admin.layout')
@section('content')
<style> 
    #watermarked::before {
    position: fixed;
    top: -75%;
    left: -75%;

    display: block;
    width: 300%;
    height: 300%;

    transform: rotate(-45deg);
    content: attr(data-watermark);

    font-size: 30px;
    opacity: 0.15;
    line-height: 4em;
    letter-spacing: 2px;
    color: #ff0523;
    z-index:0;
    }
    .bootstrap-select.btn-group .dropdown-menu li {
        border-bottom: 1px solid #6c6c6cde;
    }
  .report-div {
    margin-bottom: 6px;
  }
.report-div .table-bordered>tbody>tr>th {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 3px;
}
/*tbody.result-data tr:first-child th {
    background: rgb(60 141 188 / 82%);
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    color: rgb(7 64 97);
    font-weight: bold;
    box-shadow: none;
}*/
.report-div tbody.result-data {
    box-shadow: 0px 3px 10px 7px rgb(60 141 188 / 28%);
}
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td{
  border: 1px solid #3c8dbc47 !important;
}
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    padding: 3px 5px;
    font-size: 13px;
}
.col-xs-3.report-div {
    padding-left: 3px;
    padding-right: 3px;
}
._thead th{
    background: rgb(60 141 188 / 82%);
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    color: rgb(7 64 97);
    font-weight: bold;
    box-shadow: none;
}
.content-wrapper, .right-side{
        background: #FFF;
    }
    .box {
        background: transparent;
        z-index: 1; 
    }
</style>
<div class="search-list">
    <div class="content-wrapper search-result-list">    
    <section class="content-header">
        <h1> {{ trans('Top five machines wise manufacturing report') }}</h1>
        <ol class="breadcrumb">
            <li><a href="{{ URL::to('admin/dashboard/this_month')}}"><i class="fa fa-dashboard"></i> {{ trans('labels.breadcrumb_dashboard') }}</a></li>
            <li class="active"> {{ trans('Top five machines wise manufacturing report') }}</li>
        </ol>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box box-info">                 
                    <div class="box-body">                     
                        <div class="col-xs-12">
                            <div class="row">
                                <form action="" method="get">
                                    <input type="hidden" name="date_range" id="date_range" value="">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-12"> 
                                            <strong>Filter by:Machines/Date Range/Time Range</strong>
                                        </div>             
                                        <div class="col-sm-3 col-md-3"> 
                                            <div class="form-group">  
                                                {{-- <select name="my_machines_name[]" id="my_machines_name" multiple class="form-control">
                                                    @if(count((array) $result['machinesData'])>0)
                                                        @foreach ($result['machinesData'] as  $rsVal)    
                                                            <option value="{{ $rsVal->id }}">{{ $rsVal['get_machines']->name }}</option>
                                                        @endforeach
                                                    @endif
                                                </select> --}} 
                                                <input type="text" name="my_machines_name" id="my_machines_name" value="" placeholder="Please enter machines name" class="form-control">
                                                <span class="error my_machines_name"></span> 
                                            </div>
                                        </div>
                                        <div class="col-sm-3 col-md-3"> 
                                            <div class="form-group">
                                                <input type="text" name="mpr_from_date" id="mpr_from_date" value="" placeholder="Date range" readonly="" class="form-control">               
                                                <span class="error mpr_from_date"></span>    
                                            </div>
                                        </div>
                                        <div class="col-sm-2 col-md-2"> 
                                            <div class="form-group">
                                                <input type="text" name="selected_machines_start_time" id="selected_machines_start_time" value="" placeholder="Machines start time" class="form-control" pattern="([01]?[0-9]|2[0-3]):[0-5][0-9]">                
                                                <span class="error selected_machines_start_time"></span>    
                                            </div>
                                        </div>
                                        <div class="col-sm-2 col-md-2"> 
                                            <div class="form-group">
                                                <input type="text" name="selected_machines_end_time" id="selected_machines_end_time" value="" placeholder="Machines end time" class="form-control" pattern="([01]?[0-9]|2[0-3]):[0-5][0-9]"> 
                                                <span class="error selected_machines_end_time"></span>
                                            </div>
                                        </div>                                                                                
                                        <div class="col-sm-2 col-md-2">
                                            <div class="pull-right">
                                                <ul  class="list-inline">                      
                                                    <li class="list-inline-item"><a href="{{ URL('admin/top-five-mask-production-report') }}" class="btn-primary-apply">Clear Filter</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div> 
                        <div class="col-xs-12">
                            <div class="row">
                                @if(session()->has('message'))
                                <div class="alert alert-success alert-dismissible">
                                   <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                                   <h4><i class="icon fa fa-check"></i> {{ trans('labels.Successlabel') }}</h4>
                                    {{ session()->get('message') }}
                                </div>
                                @endif
                                @if(session()->has('error'))
                                    <div class="alert alert-warning alert-dismissible">
                                       <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                                       <h4><i class="icon fa fa-warning"></i> {{ trans('labels.WarningLabel') }}</h4>
                                        {{ session()->get('error') }}
                                    </div>
                                @endif
                            </div>
                        </div>
                        <div class="row">
                            <div class="report-resuls-data">
                                @include('admin.mask-production-report.mask-top-five-report-data')
                            </div>
                        </div>
                    </div>
                </div>
                <div id="watermarked" data-watermark="{{ auth()->guard('admin')->user()->first_name }} {{ auth()->guard('admin')->user()->last_name }}" class="row listing">        
                </div>
            </div>
        </div>
    </section>  
</div>
</div>
<script src="{!! asset('assets/admin/plugins/jQuery/jQuery-2.2.0.min.js') !!}"></script>
<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        placement : 'top',
        trigger : 'hover'
    });
});    
$(function() {
    $('#selected_machines_start_time').timepicker({ 
        timeFormat: 'H:i',
        show2400: true,            
        step: 1,
        //interval: 1,
        minTime: '00:00',
        maxTime: '23:59',
    });  
    $('#selected_machines_end_time').timepicker({ 
        timeFormat: 'H:i',
        show2400: true,            
        //interval: 1,
        step: 1,
        minTime: '00:00',
        maxTime: '23:59',
    }); 
});
</script>
<script>
    document.querySelectorAll('#watermarked').forEach(function(el) {
              el.dataset.watermark = (el.dataset.watermark + ' ').repeat(500);
          });
  </script>
@endsection