@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(session()->get('from_import') != null)
    <input type="hidden" id="from_import" value="{{session()->get('from_import')}}">
    <input type="hidden" id="monitoring_id" value="{{$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-6">
                <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($temp_monitoring)) disabled @endif>
                            <option value=""></option>
                            @foreach($equipment as $e)
                            <option value="{{$e->id}}" @if(isset($temp_monitoring) && $temp_monitoring->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($temp_monitoring)) value="{{$temp_monitoring->equipment->equipment_category->category_name}}" @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($temp_monitoring)) value="{{$temp_monitoring->equipment->location->location}}" @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($temp_monitoring)) value="{{$temp_monitoring->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($temp_monitoring)) value="{{$temp_monitoring->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($temp_monitoring))
                        <input type="text" class="form-control" disabled value="{{date('F Y', strtotime($temp_monitoring->date))}}">  
                        @else
                        <input required type="text" id="month_year" class="form-control" autocomplete="off">  
                        <input type="hidden" name="date" id="month_year_hidden">
                        @endif  
                    </div>
                </div>
            </div>

        </div>

@if(isset($temp_monitoring))

        <div class="row m-2">
            <a id="import_btn" class="btn btn-primary btn-sm to_remove mr-2" data-toggle="modal" data-target="#import_modal"><i class="fa fa-plus mr-1"></i> {{__(' Import')}} </a>
            <a id="template_btn" href="{{ route('admin.temp_monitoring.download_template') }}" class="btn btn-primary btn-sm to_remove"><i class="fas fa-file-download mr-1"></i> {{__(' Download Template')}} </a>
        </div>

@endif

        <div class="row m-2 @if(!isset($temp_monitoring)) d-none @endif" >
            <table class="table">
                <thead>
                    <tr>
                        <th rowspan="2" style="text-align: center; vertical-align: middle; border-right: 2px #dee2e6 solid; font-size: 16px;">Day</th>
                        <th colspan="4" style="text-align: center;">Temperature/Humidity Reading</th>
                        <th rowspan="2" style="text-align: center; vertical-align: middle; border-left: 2px #dee2e6 solid; font-size: 16px; width:25%;">Action Taken (In case of deviation)</th>
                    </tr>
                    <tr>
                        <th style="text-align: center; width: 19%;">10:00 AM</th>
                        <th style="text-align: center; width: 16%;">Person Responsible</th>
                        <th style="text-align: center; width: 19%;">3:00 PM</th>
                        <th style="text-align: center; width: 16%;">Person Responsible</th>
                    </tr>
                </thead>
                <tbody id="table_body">
                    @if(isset($temp_monitoring))
                    @foreach($days as $day)
                    <tr class="row_data">
                        <input type="hidden" class="day_id" name="day[{{$day->day}}][id]" value="{{$day->id}}">
                        <input type="hidden" class="day_date" name="day[{{$day->day}}][date]" value="{{$day->date}}">
                        <td class="day_text" style="font-weight: 600; text-align: center; border-right: 2px #dee2e6 solid; vertical-align: middle;">{{$day->day}}</td>
                        <td>
                            <div class="row">
                                <div class="col">
                                    <div class="input-group mb-3"> 
                                        <input type="number" placeholder="Temperature" name="day[{{$day->day}}][ten_am_temp]" value="{{$day->ten_am_temp}}" class="form-control ten_am_temp">
                                        <div class="input-group-append">
                                          <span class="input-group-text" id="basic-addon2" style="font-weight: 600;">°C</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group mb-3"> 
                                        <input type="number" placeholder="Relative Humidity" name="day[{{$day->day}}][ten_am_humidity]" value="{{$day->ten_am_humidity}}" class="form-control ten_am_humidity">
                                        <div class="input-group-append">
                                          <span class="input-group-text" id="basic-addon2" style="font-weight: 600;">%</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <select name="day[{{$day->day}}][ten_am_person]" class="form-control ten_am_person select2_person">
                                <option value=""></option>
                            @foreach($branch_users as $b)
                                <option value="{{$b->user->id}}" @if($day->ten_am_person == $b->user->id) selected @endif>{{$b->user->name}}  {{$b->user->last_name}}</option>
                            @endforeach
                            </select>
                        </td>
                        <td>
                            <div class="row">
                                <div class="col">
                                    <div class="input-group mb-3"> 
                                        <input type="number" placeholder="Temperature" name="day[{{$day->day}}][three_pm_temp]" value="{{$day->three_pm_temp}}" class="form-control three_pm_temp">
                                        <div class="input-group-append">
                                          <span class="input-group-text" id="basic-addon2" style="font-weight: 600;">°C</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group mb-3"> 
                                        <input type="number" placeholder="Relative Humidity" name="day[{{$day->day}}][three_pm_humidity]" value="{{$day->three_pm_humidity}}" class="form-control three_pm_humidity">
                                        <div class="input-group-append">
                                          <span class="input-group-text" id="basic-addon2" style="font-weight: 600;">%</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <select name="day[{{$day->day}}][three_pm_person]" class="form-control three_pm_person select2_person">
                                <option value=""></option>
                            @foreach($branch_users as $b)
                                <option value="{{$b->user->id}}" @if($day->three_pm_person == $b->user->id) selected @endif>{{$b->user->name}}  {{$b->user->last_name}}</option>
                            @endforeach
                            </select>
                        </td>
                        <td>
                            <textarea name="day[{{$day->day}}][action_taken]" class="form-control action_taken" rows="1">{{$day->action_taken}}</textarea>
                        </td>
                    </tr>
                    @endforeach
                    @endif
                </tbody>
            </table>
        </div>

    </div>  
</div>

<table class="table d-none">
    <tr id="day_row">
        <input type="hidden" class="day_num" name="[day]">
        <input type="hidden" class="day_date" name="[date]">
        <td class="day_text" style="font-weight: 600; text-align: center; border-right: 2px #dee2e6 solid; vertical-align: middle;"></td>
        <td>
            <div class="row">
                <div class="col">
                    <div class="input-group mb-3"> 
                        <input type="text" placeholder="Temperature" name="[ten_am_temp]" class="form-control ten_am_temp">
                    </div>
                </div>
                <div class="col">
                    <div class="input-group mb-3"> 
                        <input type="text" placeholder="Relative Humidity" name="[ten_am_humidity]" class="form-control ten_am_humidity">
                    </div>
                </div>
            </div>
        </td>
        <td>
        </td>
        <td>
            <div class="row">
                <div class="col">
                    <div class="input-group mb-3">
                        <input type="text" placeholder="Temperature" name="[three_pm_temp]" class="form-control three_pm_temp">
                    </div>
                </div>
                <div class="col">
                    <div class="input-group mb-3">
                        <input type="text" placeholder="Relative Humidity" name="[three_pm_humidity]" class="form-control three_pm_humidity">
                    </div>
                </div>
            </div>
        </td>
        <td>
        </td>
        <td>
        </td>
    </tr>
</table>

@if(isset($temp_monitoring))

<div class="card card-primary col-lg-12 p-1 m-0 mb-3">
    <div class="card-header">
        <h6 class="m-0 p-0">
            {{ __('Statistics') }}
        </h6>
    </div>
    <div class="card-body m-0 p-0">
        <div class="row m-0 p-0">
            <div class="card card-primary col-lg-6 m-0 p-1">
                <div class="card-header">
                    <h6 class="m-0 p-0">
                        {{ __('Temperature') }}
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row m-1">
            
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="mean">{{ __('Mean')}}</label>
                                <div class="input-group mb-3">
                                    <input type="text" readonly class="form-control" id="temp_mean" name="stats[temp_mean]">
                                </div>
                            </div>
                        </div>
            
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="sd">{{ __('SD')}}</label>
                                <div class="input-group mb-3">
                                    <input type="text" readonly class="form-control" id="temp_sd" name="stats[temp_sd]">  
                                </div>
                            </div>
                        </div>
            
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="cv">{{ __('CV')}}</label>
                                <div class="input-group mb-3">
                                    <input type="text" readonly class="form-control" id="temp_cv" name="stats[temp_cv]">   
                                </div>
                            </div>
                        </div>
            
                    </div>
            
                    <div class="row m-1">
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="sd1">{{ __('+1SD')}}</label>
                                <div class="input-group mb-3">
                                    <input type="text" readonly class="form-control" id="temp_sd1" name="stats[temp_sd1]">   
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="sd2">{{ __('+2SD')}}</label>
                                <div class="input-group mb-3">
                                    <input type="text" readonly class="form-control" id="temp_sd2" name="stats[temp_sd2]">   
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="sd3">{{ __('+3SD')}}</label>
                                <div class="input-group mb-3">
                                    <input type="text" readonly class="form-control" id="temp_sd3" name="stats[temp_sd3]">   
                                </div>
                            </div>
                        </div>
                    </div>
            
                    <div class="row m-1">
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="m_sd1">{{ __('-1SD')}}</label>
                                <div class="input-group mb-3">
                                    <input type="text" readonly class="form-control" id="temp_m_sd1" name="stats[temp_m_sd1]">   
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="m_sd2">{{ __('-2SD')}}</label>
                                <div class="input-group mb-3">
                                    <input type="text" readonly class="form-control" id="temp_m_sd2" name="stats[temp_m_sd2]">   
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="m_sd3">{{ __('-3SD')}}</label>
                                <div class="input-group mb-3">
                                    <input type="text" readonly class="form-control" id="temp_m_sd3" name="stats[temp_m_sd3]">   
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card card-primary col-lg-6 m-0 p-1">
                <div class="card-header">
                    <h6 class="m-0 p-0">
                        {{ __('Humidity') }}
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row m-1">
            
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="mean">{{ __('Mean')}}</label>
                                <div class="input-group mb-3">
                                    <input type="text" readonly class="form-control" id="humidity_mean" name="stats[humidity_mean]">
                                </div>
                            </div>
                        </div>
            
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="sd">{{ __('SD')}}</label>
                                <div class="input-group mb-3">
                                    <input type="text" readonly class="form-control" id="humidity_sd" name="stats[humidity_sd]">  
                                </div>
                            </div>
                        </div>
            
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="cv">{{ __('CV')}}</label>
                                <div class="input-group mb-3">
                                    <input type="text" readonly class="form-control" id="humidity_cv" name="stats[humidity_cv]">   
                                </div>
                            </div>
                        </div>
            
                    </div>
            
                    <div class="row m-1">
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="sd1">{{ __('+1SD')}}</label>
                                <div class="input-group mb-3">
                                    <input type="text" readonly class="form-control" id="humidity_sd1" name="stats[humidity_sd1]">   
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="sd2">{{ __('+2SD')}}</label>
                                <div class="input-group mb-3">
                                    <input type="text" readonly class="form-control" id="humidity_sd2" name="stats[humidity_sd2]">   
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="sd3">{{ __('+3SD')}}</label>
                                <div class="input-group mb-3">
                                    <input type="text" readonly class="form-control" id="humidity_sd3" name="stats[humidity_sd3]">   
                                </div>
                            </div>
                        </div>
                    </div>
            
                    <div class="row m-1">
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="m_sd1">{{ __('-1SD')}}</label>
                                <div class="input-group mb-3">
                                    <input type="text" readonly class="form-control" id="humidity_m_sd1" name="stats[humidity_m_sd1]">   
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="m_sd2">{{ __('-2SD')}}</label>
                                <div class="input-group mb-3">
                                    <input type="text" readonly class="form-control" id="humidity_m_sd2" name="stats[humidity_m_sd2]">   
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="m_sd3">{{ __('-3SD')}}</label>
                                <div class="input-group mb-3">
                                    <input type="text" readonly class="form-control" id="humidity_m_sd3" name="stats[humidity_m_sd3]">   
                                </div>
                            </div>
                        </div>
                    </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">
            {{ __('Charts') }}
        </h6>
    </div>
    <div class="card-body m-0 p-0">
        <div class="row m-0 p-0">
            <div class="card card-primary col-lg-6 m-0 p-1">
                <div class="card-header">
                    <h6 class="m-0 p-0">
                        {{ __('Temperature') }}
                    </h6>
                </div>
                <div class="card-body p-0 m-0" id="temp_chart_container">
                    <canvas id="temp_chart" width="80" height="20"></canvas>
                </div>
            </div>
            <div class="card card-primary col-lg-6 m-0 p-1">
                <div class="card-header">
                    <h6 class="m-0 p-0">
                        {{ __('Humidity') }}
                    </h6>
                </div>
                <div class="card-body p-0 m-0" id="humidity_chart_container">
                    <canvas id="humidity_chart" width="80" height="20"></canvas>
                </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">
            {{ __('Remarks') }}
        </h6>
    </div>
    
    <div class="card-body m-1 p-2">
        <div class="row">
            <div class="col">
                <label for="temp_remarks">Temperature Remarks</label>
                <textarea class="form-control" name="temp_remarks" id="temp_remarks">@if(isset($temp_monitoring)) {{$temp_monitoring->temp_remarks}} @endif</textarea>
            </div>
            <div class="col">
                <label for="humidity_remarks">Humidity Remarks</label>
                <textarea class="form-control" name="humidity_remarks" id="humidity_remarks">@if(isset($temp_monitoring)) {{$temp_monitoring->humidity_remarks}} @endif</textarea>
            </div>
        </div>
    </div> 
</div>

@endif

@section('scripts')
    <script src="{{url('js/admin/temp_monitoring.js')}}"></script>
@endsection