@extends('layouts.app')

@section('content')
@include ('components.Combo_FDP')



<div class="container box">   
            <i id="help" class="fas fa-question-circle active" data-toggle="popover-click" data-content="@include ('help.spotreba_help')" data-original-title="Spotřeba energií prostoru" title=""></i> 
            <div class="row" id="rowDet">
                @if ($typPres == "P")
                    <h2 id="nadpis">Odečty měřičů prostoru {{ $prostor->popis }} </h2>    
                @endif
                @if ($typPres == "D")
                    <h2 id="nadpis">Odečty měřičů domu {{ $dum->popis }} </h2>    
                @endif
            </div>    
            
            
            
    
    <form method="get">
    {{ csrf_field() }}
        @php ($selected = "")
        
        <input type="text" value="{{$typPres}}" size="1"  id="typPres" name="typPres" style="display:none">
        
        <div class="row" id="rowDetX">
           <div class="col-sm-2"> <label for="druhOM"><h6>Druh OM:</h6></label> </div> 
            
                <select id="druhyOMComboSp" name="druhOM" class="form-control-sm col-sm-3">
                    <option value="">...vše</option> 
                    @foreach($druhyOMCombo as $druhOM)
                        @php ($selected = "")
                        @if ($druhOM == $druhOMzobr)
                            @php ($selected = "selected")
                        @endif
                        <option value="{{$druhOM}}" {{$selected}} >{{ $typyOMNaz[$druhOM] }}</option> 
                    @endforeach    
                </select>
            
           <div class="col-sm-3"> <label for="cislaMericuOM"><h6>Měřiče na OM:</h6></label> </div>
            <div class="col-sm-3" id="cislaMericuOMSp">
                    @include ('components.cisloMericeOM')
            </div> 
        </div>
        
        <div class="row" id="rowDetX">
            
            <div class="col-sm-3"> <label for="odData"><h6>Od období:</h6></label> </div>
            <div class="col-sm-2"> <input type="month" value="{{ date('Y-m',strtotime($odData)) }}" name="odDataSp" class="form-control" size=1 id="odDataSp" > </div>
            
            
            <div class="col-sm-3"> <label for="doData"><h6>Do období:</h6></label> </div>
            <div class="col-sm-2"> <input type="month" value="{{ date('Y-m',strtotime($doData)) }}" name="doDataSp" class="form-control" size=1 id="doDataSp" > </div>
        </div>  
        
        
        
    </form> 
            
   <div id="rowDet"> 
   </div>            
       
            
    <div id="spotreby"> 
        @include ('prostor.mericeVE',['beznadpisu' => 'N'])
    </div>        

    
   

<script type="text/javascript">
$(document).ready(function(){
    var druhOM = "";
    var idMerice = 0;
    var odDataSp="";
    var doDataSp="";
    var typPres = $('#typPres').val();
    $("#druhyOMComboSp").change(function(){
        var druhOM = $('#druhyOMComboSp').val();
        $.get("{{ route('ajaxdata.cislaMericOM') }}"  , { druhOM : druhOM }, function(dataCmer , status){
                    $("#cislaMericuOMSp").html(dataCmer);
        });
        idMerice = 0;
        _getSpotreby();
    });
    
    $("#cislaMericuOMSp").change(function(){
         _getSpotreby();
    });
    
    $("#odDataSp").change(function(){
         _getSpotreby();
    });

    $("#doDataSp").change(function(){
         _getSpotreby();
    });
    
    function _getSpotreby() {
        druhOM = $('#druhyOMComboSp').val();
        odDataSp = $('#odDataSp').val();
        doDataSp = $('#doDataSp').val();
        idMerice = $('#idMerice').val();
        
        $.get("{{ route('ajaxdata.getOdectyAjax') }}"  , { typProstoru: typPres , druhOM : druhOM, idMerice : idMerice, odDataSp : odDataSp, doDataSp : doDataSp}, function(dataSpotreb , status){
            $("#spotreby").html(dataSpotreb);
        });
    }
    
    
})    
  
</script>              

 @endsection