@section('css')
    <style>
        .over_2sd, .below_m_2sd {
            background-color: rgb(246, 246, 195)!important
        }
        .over_3sd, .below_m_3sd {
            background-color: lightcoral!important
        }
    </style>
@endsection
@if(isset($view))
    <input type="hidden" id="is_view" value="true">
@endif

@if(session()->get('from_import') != null)
    <input type="hidden" id="from_import" value="{{session()->get('from_import')}}">
    <input type="hidden" id="monitoring_id" value="{{$data_logger_temp_monitoring->id}}">
@endif

<div class="card card-primary col-lg-12 p-1 m-0 mb-3">
    <div class="card-body m-0 p-0">
        <div class="row m-2">
            
            <div class="col-sm-9">
                <div class="form-group">
                    <label for="equipment_id"><span style="color:red">*</span> {{ __('Equipment')}}</label>
                    <div class="input-group mb-3">
                        <select required id="equipment_id" name="equipment_id" class="form-control select2" @if(isset($data_logger_temp_monitoring)) disabled @endif>
                            <option value=""></option>
                            @foreach($equipment as $e)
                            <option value="{{$e->id}}" @if(isset($data_logger_temp_monitoring) && $data_logger_temp_monitoring->equipment_id == $e->id) selected @elseif(old('equipment_id') && old('equipment_id') == $e->id) selected @endif>{{$e->name}}</option>
                            @endforeach
                        </select>          
                    </div>
                </div>
            </div>
        </div>

        <div class="row m-1">
            
            <div class="col-sm-3">
                <div class="form-group">
                    <label for="category">{{ __('Category')}}</label>
                    <div class="input-group mb-3">
                          <input type="text" disabled name="category" id="category" class="form-control" @if(isset($data_logger_temp_monitoring)) value="{{$data_logger_temp_monitoring->equipment->equipment_category->category_name}}" @else value="{{old('category')}}" @endif>    
                    </div>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="form-group">
                    <label for="location">{{ __('Location')}}</label>
                    <div class="input-group mb-3">
                           <input type="text" disabled name="location" id="location" class="form-control" @if(isset($data_logger_temp_monitoring->equipment->location)) value="{{$data_logger_temp_monitoring->equipment->location->location}}" @else value="{{old('location')}}" @endif>   
                    </div>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="form-group">
                    <label for="last_cal_date">{{ __('Last Calibration Date of Data Logger')}}</label>
                    <div class="input-group mb-3">
                           <input type="date" name="last_cal_date" id="last_cal_date" class="form-control form_date" @if(isset($data_logger_temp_monitoring)) value="{{$data_logger_temp_monitoring->last_cal_date}}" @else value="{{old('last_cal_date')}}" @endif>
                    </div>
                </div>
            </div>

        </div>

        <div class="row m-1">
            
            <div class="col-sm-3">
                <div class="form-group">
                    <label for="ex_temp_range">{{ __('Expected Temperature Range')}}</label>
                    <div class="input-group mb-3">
                          <input type="text" name="ex_temp_range" id="ex_temp_range" class="form-control" @if(isset($data_logger_temp_monitoring)) value="{{$data_logger_temp_monitoring->ex_temp_range}}" @else value="{{old('ex_temp_range')}}" @endif>
                    </div>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="form-group">
                    <label for="tolerance">{{ __('Tolerance')}}</label>
                    <div class="input-group mb-3">
                           <input type="text" name="tolerance" id="tolerance" class="form-control" @if(isset($data_logger_temp_monitoring)) value="{{$data_logger_temp_monitoring->tolerance}}" @else value="{{old('tolerance')}}" @endif>  
                    </div>
                </div>
            </div>

        </div>

        <div class="row m-1">
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="month_year"><span style="color:red">*</span> {{ __('Month and Year')}}</label>
                    <div class="input-group mb-3">
                        @if(isset($data_logger_temp_monitoring))
                        <input type="text" class="form-control" disabled value="{{date('F Y', strtotime($data_logger_temp_monitoring->date))}}">  
                        @else
                        <input required type="text" id="month_year" class="form-control">  
                        <input type="hidden" name="date" id="month_year_hidden">
                        @endif  
                    </div>
                </div>
            </div>
        </div>
    </div>  
</div>

<div class="card card-primary col-lg-12 p-1 m-0 mb-3">
    <div class="card-header">
        <h6 class="m-0 p-0">
            {{ __('Limits') }}
        </h6>
    </div>
    <div class="card-body m-0 p-0">
        <div class="row m-2">
            
            <div class="col-sm-4">
                <div class="form-group">
                    <label for="target"><span style="color:red">*</span> {{ __('Target')}}</label>
                    <div class="input-group mb-3">
                        <input required type="number"  name="target" id="target" class="form-control" @if(isset($data_logger_temp_monitoring->limits)) value="{{$data_logger_temp_monitoring->limits->target}}" @endif>        
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="form-group">
                    <label for="upper_limit">{{ __('Upper Limit')}}</label>
                    <div class="input-group mb-3">
                        <input type="number"  name="upper_limit" id="upper_limit" class="form-control" @if(isset($data_logger_temp_monitoring->limits)) value="{{$data_logger_temp_monitoring->limits->upper_limit}}" @endif>        
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="form-group">
                    <label for="lower_limit">{{ __('Lower Limit')}}</label>
                    <div class="input-group mb-3">
                        <input type="number"  name="lower_limit" id="lower_limit" class="form-control" @if(isset($data_logger_temp_monitoring->limits)) value="{{$data_logger_temp_monitoring->limits->lower_limit}}" @endif>        
                    </div>
                </div>
            </div>

        </div>

        <div class="row m-1">
            
            <div class="col-sm-4">
                <div class="form-group">
                    <label for="mean">{{ __('Mean')}}</label>
                    <div class="input-group mb-3">
                        <input type="text" readonly class="form-control" id="mean" name="mean"@if(isset($data_logger_temp_monitoring->limits)) value="{{$data_logger_temp_monitoring->limits->mean}}" @endif>
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="form-group">
                    <label for="sd">{{ __('SD')}}</label>
                    <div class="input-group mb-3">
                        <input type="text" readonly class="form-control" id="sd" name="sd"@if(isset($data_logger_temp_monitoring->limits)) value="{{$data_logger_temp_monitoring->limits->sd}}" @endif>  
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="form-group">
                    <label for="cv">{{ __('CV')}}</label>
                    <div class="input-group mb-3">
                        <input type="text" readonly class="form-control" id="cv" name="cv"@if(isset($data_logger_temp_monitoring->limits)) value="{{$data_logger_temp_monitoring->limits->cv}}" @endif>   
                    </div>
                </div>
            </div>

            <div class="col-sm-2">
                <div class="form-group">
                    <label for="sd1">{{ __('+1SD')}}</label>
                    <div class="input-group mb-3">
                        <input type="text" readonly class="form-control" id="sd1" name="sd1" @if(isset($data_logger_temp_monitoring->limits)) value="{{$data_logger_temp_monitoring->limits->sd1}}" @endif>   
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="form-group">
                    <label for="sd2">{{ __('+2SD')}}</label>
                    <div class="input-group mb-3">
                        <input type="text" readonly class="form-control" id="sd2" name="sd2" @if(isset($data_logger_temp_monitoring->limits)) value="{{$data_logger_temp_monitoring->limits->sd2}}" @endif>   
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="form-group">
                    <label for="sd3">{{ __('+3SD')}}</label>
                    <div class="input-group mb-3">
                        <input type="text" readonly class="form-control" id="sd3" name="sd3" @if(isset($data_logger_temp_monitoring->limits)) value="{{$data_logger_temp_monitoring->limits->sd3}}" @endif>   
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="form-group">
                    <label for="m_sd1">{{ __('-1SD')}}</label>
                    <div class="input-group mb-3">
                        <input type="text" readonly class="form-control" id="m_sd1" name="m_sd1" @if(isset($data_logger_temp_monitoring->limits)) value="{{$data_logger_temp_monitoring->limits->m_sd1}}" @endif>   
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="form-group">
                    <label for="m_sd2">{{ __('-2SD')}}</label>
                    <div class="input-group mb-3">
                        <input type="text" readonly class="form-control" id="m_sd2" name="m_sd2" @if(isset($data_logger_temp_monitoring->limits)) value="{{$data_logger_temp_monitoring->limits->m_sd2}}" @endif>   
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="form-group">
                    <label for="m_sd3">{{ __('-3SD')}}</label>
                    <div class="input-group mb-3">
                        <input type="text" readonly class="form-control" id="m_sd3" name="m_sd3" @if(isset($data_logger_temp_monitoring->limits)) value="{{$data_logger_temp_monitoring->limits->m_sd3}}" @endif>   
                    </div>
                </div>
            </div>

        </div>
    </div> 
</div>

@if(isset($data_logger_temp_monitoring))

<div class="card card-primary col-lg-12 p-1 m-0 mb-3">
    <div class="card-header">
        <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
        </div>
        <h6 class="m-0 p-0" style="display: inline-block;">
            {{ __('Logs') }}
        </h6>
        <div class="float-right">
            <a id="add_form_row" class="btn btn-primary btn-sm to_remove" style="padding: 0px 6px; margin-right: 10px;">
                <i class="fa fa-plus mr-1"></i> {{__(' Add')}} 
            </a>
            <a id="import_info" class="btn btn-primary btn-sm to_remove" style="padding: 0px 6px; margin-right: 10px;" data-toggle="modal" data-target="#exampleModal">
                <i class="fa fa-plus mr-1"></i> {{__(' Import')}} 
            </a>
            <a id="down_template" href="{{ route('admin.dltm.download_template') }}" class="btn btn-primary btn-sm to_remove" style="padding: 0px 6px;">
                <i class="fas fa-file-download mr-1"></i> {{__(' Download Template')}} 
            </a>
        </div>
    </div>
    <div class="card-body m-0 p-0">
        <ul class="list-group list-group-flush" id="form_table">
            <li class="list-group-item pt-1 pb-1" id="form_labels">
                <div class="row">
                    <div class="col-sm-3">
                        <label class="m-0" for="">{{ __('Date')}}</label>
                    </div>

                    <div class="col-sm-3">
                        <label class="m-0" for="">{{ __('Time')}}</label>
                    </div>
        
                    <div class="col-sm-3">
                        <label class="m-0" for="">{{ __('Temperature')}}</label>
                    </div>
                </div>
            </li>

            @if(isset($data_logger_temp_monitoring->logs))
            <input type="hidden" name="log_to_delete" id="log_to_delete">
            @foreach($data_logger_temp_monitoring->logs()->orderBy('datetime', 'asc')->get() as $log)
            <li class="list-group-item form_row">
                <input type="hidden" name="log[{{$log->id}}][id]" value="{{$log->id}}">
                <div class="row">
                    <div class="col-sm-3">
                        <input required type="date" class="form-control form_date date_log" name="log[{{$log->id}}][date]" value="{{date('Y-m-d', strtotime($log->datetime))}}">
                    </div>
                    <div class="col-sm-3">
                        <input required type="time" class="form-control form_time time_log" name="log[{{$log->id}}][time]" value="{{date('H:i', strtotime($log->datetime))}}">
                    </div>
                    <div class="col-sm-3">
                        <input required type="number" class="form-control temp_log" name="log[{{$log->id}}][temperature]" value="{{$log->temperature}}">
                    </div>
                    <button type="button" class="btn btn-danger btn-sm delete_log to_remove" data-log_id="{{$log->id}}">
                        <i class="fa fa-trash"></i>
                    </button>
                </div>
            </li>
            @endforeach
            @endif

            <li class="list-group-item d-none" id="form_row">
                <div class="row">
                    <div class="col-sm-3">
                        <input required type="date" class="form-control date_log form_date" name="[date]">
                    </div>
                    <div class="col-sm-3">
                        <input required type="time" class="form-control time_log form_date" name="[time]">
                    </div>
                    <div class="col-sm-3">
                        <input required type="number" class="form-control temp_log" name="[temperature]">
                    </div>
                    <button type="button" class="btn btn-danger btn-sm delete_form_row">
                        <i class="fa fa-trash"></i>
                    </button>
                </div>
            </li>
        </ul>
    </div>
</div>

<div class="card card-primary col-lg-12 p-1 m-0 mb-3">
    <div class="card-header">
        <h6 class="m-0 p-0">
            {{ __('Chart') }}
        </h6>
    </div>
    <div class="card-body m-1 p-2" id="logs_chart_container">
        <canvas id="logs_chart" width="80" height="20"></canvas>
    </div>
</div>

<div class="card card-primary col-lg-12 p-1 m-0 mb-3">
    <div class="card-header">
        <h6 class="m-0 p-0">
            {{ __('Remarks') }}
        </h6>
    </div>
    <div class="card-body m-1 p-2">
        <textarea class="form-control" name="remarks" id="remarks">@if(isset($data_logger_temp_monitoring)) {{$data_logger_temp_monitoring->remarks}} @endif</textarea>
    </div>
</div>



@endif

<div class="modal fade" id="file_errors" 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" id="exampleModalLabel">File Errors</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body p-2" id="errors_body">
            
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
</div>

@section('scripts')
    <script src="{{url('js/admin/data_logger_temp_monitoring.js')}}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
@endsection