@extends('franchise.layouts.master')

@section('title', 'Station Details')

@section('links')
<style>          
          #map { 
            height: 300px;    
            width: 500px;            
          }     
          #description {
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
      }

      #infowindow-content .title {
        font-weight: bold;
      }

      #infowindow-content {
        display: none;
      }

      #map #infowindow-content {
        display: inline;
      }

      .pac-card {
        margin: 10px 10px 0 0;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        background-color: #fff;
        font-family: Roboto;
      }

      #pac-container {
        padding-bottom: 12px;
        margin-right: 12px;
      }

      .pac-controls {
        display: inline-block;
        padding: 5px 11px;
      }

      .pac-controls label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }

      #pac-input {
        background-color: #fff;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 400px;
      }

      #pac-input:focus {
        border-color: #4d90fe;
      }

      #title {
        color: #fff;
        background-color: #4d90fe;
        font-size: 25px;
        font-weight: 500;
        padding: 6px 12px;
      }
      #target {
        width: 345px;
      }     

          @media screen {
      #printSection {
        display: none;
      }
      }
      
      @media print {
      body * {
      visibility:hidden;
  margin: 0 !important; 
  padding: 0 !important;
  overflow: hidden;
      }
      #printSection, #printSection * {
      visibility:visible;
      }
      #printSection {
      position:absolute;
      left:25%;
      top:0;
      }
      }
      

            @page 
            {
                size:  auto;
                margin: 0mm;
            }
        </style>
@endsection



@section('content')

<div class="br-mainpanel">
<div class="br-pageheader pd-y-15 pd-l-20">
      <nav class="breadcrumb pd-0 mg-0 tx-12">
        <a class="breadcrumb-item" href="">PlugNgo</a>
       <a class="breadcrumb-item" href="#">Stations</a>
        <span class="breadcrumb-item active">control</span>
      </nav>
      <!-- <button class="btn btn-success success">Toast</button> -->
    </div><!-- br-pageheader -->
      <div class="pd-x-20 pd-sm-x-30 pd-t-20 pd-sm-t-30">
        <h4 class="tx-gray-800 mg-b-5">Station Control</h4>
      </div><!-- d-flex -->

<div class="br-pagebody">
        <div class="br-section-wrapper">
         

        
        <div class="row row-sm mg-t-20">
        <div class="col-lg-6 mg-t-20 mg-lg-t-0">
            <div class="card shadow-base bd-0">
              <div class="card-header pd-20 bg-transparent">
                <h6 class="card-title tx-uppercase tx-12 mg-b-0">Station Details</h6>
              </div><!-- card-header -->
              <table class="table table-responsive mg-b-0 tx-12">
              
                <tbody>
                  <tr>
                    <td class="pd-l-20">
                      Station Name
                    </td>
                    <td>
                      <p href="#" class="tx-inverse tx-14 tx-medium d-block">{{ $stations->station_name }}</p>
                    </td>
                  </tr>
                  <tr>
                      <td class="pd-l-20">
                        Location Name
                      </td>
                      <td>
                        <p href="#" class="tx-inverse tx-14 tx-medium d-block">{{ $stations->location_name  }}</p>
                      </td>
                    </tr>
                  <tr>
                  <tr>
                    <td class="pd-l-20">
                      Station ID
                    </td>
                    <td>
                      <p href="#" class="tx-inverse tx-14 tx-medium d-block">{{ $stations->station_id }}</p>
                    </td>
                  </tr>
                  <tr>
                    <td class="pd-l-20">
                      Created By
                    </td>
                    <td>
                      <p href="#" class="tx-inverse tx-14 tx-medium d-block">{{ $stations->created_by }}</p>
                    </td>
                  </tr>
                  <tr>
                    <td class="pd-l-20">
                       Name
                    </td>
                    <td>
                      <p href="#" class="tx-inverse tx-14 tx-medium d-block">{{ $created_by }}</p>
                    </td>
                  </tr>
              
                    <td class="pd-l-20">
                       Status
                    </td>
                    <td>
                      <span class="label @if($stations->status=='active') label-success @else label-danger @endif">{{ App\Classes\Helper::toword($stations->status) }}</span>
                    </td>
                  </tr>

                  <tr>
                    <td class="pd-l-20">
                       City Name
                    </td>
                    <td>
                        <p href="#" class="tx-inverse tx-14 tx-medium d-block"> {{ $stations->city_name }}</p>
                    </td>
                  </tr>



                  <tr>
                      <td class="pd-l-20">
                         Address
                      </td>
                      <td>
                          <p href="#" class="tx-inverse tx-14 tx-medium d-block">{{ $stations->address }}</p>
                      </td>
                    </tr>
                    @php  $taxes=json_decode($stations->service_tax) @endphp

                    @foreach($servicetax as $key=> $tax)
                    @if(isset($taxes[$key]->value))
                    @if($taxes[$key]->value)
                    <tr>
                       <td class="pd-l-20">
                       {{ $tax->name }}
                       </td>
                       <td>
                           <p href="#" class="tx-inverse tx-14 tx-medium d-block">{{ $taxes[$key]->value }}</p>
                       </td>
                     </tr>
                     @endif
                     @endif
                    @endforeach
                 
               
                 
                </tbody>
              </table>
             
            </div><!-- card -->
          </div><!-- col-6 -->

          <div class="col-lg-6 mg-t-20 mg-lg-t-0">
          <div id="map"></div>
          <div class="row mg-t-20">
            {!! Form::label('opening_time','Opening Time ',['class' => 'col-sm-4 form-control-label'])!!}
                <div class="col-sm-8 mg-t-10 mg-sm-t-0">	
            <div class="wd-150 mg-b-30">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-clock-o tx-16 lh-0 op-6"></i></span>
                 {!! Form::input('opening_time','opening_time',isset($stations->opening_time) ? $stations->opening_time : '',['readonly'=>'readonly','id'=>'opening_time','style'=>'width: 104%;','class'=>'form-control','placeholder'=>'Opening Time '])!!}
              </div>
            </div>
          </div>
              </div>
         <div class="row mg-t-20">
             {!! Form::label('closing_time','Closing Time ',['class' => 'col-sm-4 form-control-label'])!!}
                <div class="col-sm-8 mg-t-10 mg-sm-t-0">	
            <div class="wd-150 mg-b-30">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-clock-o tx-16 lh-0 op-6"></i></span>
                {!! Form::input('closing_time','closing_time',isset($stations->closing_time) ? $stations->closing_time : '',['readonly'=>'readonly','id'=>'closing_time','style'=>'width: 104%;','class'=>'form-control','placeholder'=>'Closing Time '])!!}
              </div>
            </div>
          </div>
        </div>
          </div><!-- col-6 -->


          <div class="col-lg-12 mg-t-20 mg-lg-t-0">
            <div class="card shadow-base bd-0">
              <div class="card-header pd-20 bg-transparent">
                <h6 class="card-title tx-uppercase tx-12 mg-b-0">Chargers Details</h6>
                {{-- <a href="#" class="tx-gray-600 mg-l-10 pull-right tx-primary" data-toggle="modal" data-target="#addnozil">Add</a> --}}
                <a href="{{ route('franchisechargers.create').'?station='.\Crypt::encrypt($stations->id) }}" class="tx-gray-600 mg-l-10 pull-right tx-primary" title="Add Charger">Add Charger</a>
              </div><!-- card-header -->
              <div class="row">
              @foreach($nozilss as $nozil)
            <div class="col-md-4">
              <div class="card">
                <div class="card-header d-flex align-items-center justify-content-between pd-y-5  bg-primary">
                  <h6 class="mg-b-0 tx-14 tx-white">Ocpp ID : {{ $nozil->nozzle_id }}</h6>
                  <div class="card-option tx-24">
                    <!-- <a href="#" ></a> -->
                  
            <div class="dropdown">
      <a href="#" class="tx-gray-600 mg-l-10 " data-toggle="dropdown">
      <i class="icon ion-android-more-vertical lh-0 tx-white"></i></a>
          <div class="dropdown-menu dropdown-menu-header wd-200">
            <ul class="list-unstyled">
         
      <li><a href="#" data-href="{{ Crypt::encrypt($nozil->id)}}/change-nozzil-status" class="btn btn-default btn-xs edit-form" data-toggle="modal" data-target="#mymodel">Change Status</i></a></li>
      {{-- <li><a href="#" data-href="{{ 	Crypt::encrypt($nozil->id) }}/change-nozzil-type" class="btn btn-default btn-xs edit-form" data-toggle="modal" data-target="#mymodel">Change Type</i></a></li> --}}
      <li><a href="/franchise/chargers/{{ \Crypt::encrypt($nozil->id) }}/edit" class="btn btn-default btn-xs edit-form" data-toggle="tooltip" title="Edit Charger">Edit Charger</i></a></li>
      
    </ul>
          </div><!-- dropdown-menu -->
        </div><!-- dropdown -->
   

                  </div><!-- card-option -->
                </div><!-- card-header -->
                <div class="card-body hljs">
                  <table class="table table-responsive mg-b-0 tx-12">
        
                    <tbody>
                    <tr>
                        <td style="width: 10em;">Type</td>
                        <td>{{ $nozil->connection_type }}</td>
                      </tr>
                      <tr>
                        <td>Charger Code</td>
                        <td>{{ $nozil->charger_code }}</td>
                      </tr>
                      <tr>
                        <td>Power Rating</td>
                        <td>{{ $nozil->power_rating }}</td>
                      </tr>
                      <tr>
                        <td>Description</td>
                        <td>{{ $nozil->description }}</td>
                      </tr>
                      <tr>
                        <td>Sim No</td>
                        <td>{{ $nozil->simno }}</td>
                      </tr>
                      <tr>
                        <td>Status</td>
                        <td><span class="label @if($nozil->status=='active') label-success @else label-danger @endif">{{\App\Classes\Helper::toWord($nozil->status) }}</span></td>
                      </tr>
                      <!-- <tr>
                <td>Capacity</td>
                <td> 
                    {{ Form::open(['class' => 'capacity']) }}
                  <div class="input-group">
                  {!! Form::hidden('id',$nozil->nozzle_id) !!}
              
                  {!! Form::input('capacity','capacity',isset($nozil->capacity) ? $nozil->capacity : '',['class'=>'form-control number','id'=>'capacity','placeholder'=>trans('Capacity')])!!}
                  <button class="btn btn-primary"><i class="fa fa-refresh" aria-hidden="true" title="Update Capacity"></i></button>
                 
                  
                </div>
                {{ Form::close() }}
                </td>
              </tr> -->
              <tr>
                <td>Price</td>
                <td>
                    <form class='price'>
                    <div class="input-group">
                        {!! Form::hidden('id',$nozil->nozzle_id) !!}
                        {!! Form::hidden('charger_id',$nozil->charger_id) !!}
                        {!! Form::hidden('id_id',$nozil->id) !!}
                        {!! Form::input('price','price',isset($nozil->price) ? $nozil->price : '',['class'=>'form-control number','id'=>'price','placeholder'=>trans('Price')])!!}  
                        <button class="btn btn-primary"><i class="fa fa-refresh" aria-hidden="true"title="Update Capacity"></i></button>
                      </div>
                  </form>
                    </td>
              </tr>
			  <tr>
                <td colspan="2" align="center">
                  Genarate QR<a  href="#" data-tooltip="tooltip" title="Generate QR Code"  data-href="/franchise/qr-code/{{ $nozil->nozzle_id }}/{{ $nozil->charger_id }}/generate" data-toggle="modal" data-target="#mymodel" class="btn btn-default btn-xs edit-form" >
                    <i class="fa fa-qrcode" style="font-size: 50px;"></i></a>
                </td>

              </tr>
           
           
            </tbody>
          </table>
                </div><!-- card-body -->
              </div><!-- card -->
            </div><!-- col-6 -->
        
            @endforeach
             
            </div><!-- card -->
          </div><!-- col-6 -->

          </div>
    
          
       

        </div><!-- br-section-wrapper -->
      </div><!-- br-pagebody -->



      <div id="addnozil" class="modal fade">
    <div class="modal-dialog" role="document">
      <div class="modal-content tx-size-sm">
      <div class="modal-header pd-y-20 pd-x-25">
                  <h6 class="tx-14 mg-b-0 tx-uppercase tx-inverse tx-bold">Add Nozzil</h6>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
        <div class="modal-body tx-center pd-y-20 pd-x-20">
        
          {!! Form::open(['route' => 'franchisestations.add_nozil','role' => 'form', 'class'=>'employee-form','id' => 'employee-form','data-form-table' => 'employee_table']) !!}

          <table >
           
           <tbody>
            {{ Form::hidden('station_id', $stations->id ) }}
           <tr>
               <td>{!! trans('Type') !!}</td>
               <td> {!! Form::select('type', $connections,'',['class'=>'form-control input-xlarge select2me','placeholder'=>trans('messages.select_one')])!!}
			  	
			  </td>
        </tr>
            
           </tbody>
         </table>
          {!! Form::submit(isset($buttonText) ? $buttonText : trans('messages.add'),['class' => 'btn btn-primary pull-right']) !!}
					{!! Form::close() !!}
         
          
        </div><!-- modal-body -->
      </div><!-- modal-content -->
    </div><!-- modal-dialog -->
  </div><!-- modal -->
 
@endsection
 

@section('scripts')

<script>
$(document).ready(function(){
$('.capacity').submit(function(){

// show that something is loading
$('#response').html("<b>Loading response...</b>");

// Call ajax for pass data to other place
$.ajax({
type: 'POST',
url: 'change_nozzil_price_capacity',
data: $(this).serialize(), // getting filed value in serialize form
success:function(result){
   $("#response").html('');
  toastr.success(result.message, result.status, {timeOut: 5000})
 }
})
.fail(function() { // if fail then getting message
$('#response').html("Change failed." );
      toastr.error(result.message, result.status, {timeOut: 5000})

});

return false;

});

});
</script>
<script>
$(document).ready(function(){
$('.price').submit(function(){

// show that something is loading
$('#response').html("<b>Loading response...</b>");

// Call ajax for pass data to other place
$.ajax({
type: 'POST',
url: 'change_nozzil_price_capacity',
data: $(this).serialize(), // getting filed value in serialize form
success:function(result){
   $("#response").html('');
  toastr.success(result.message, result.status, {timeOut: 5000})
 }
})
.fail(function() { // if fail then getting message
$('#response').html("Change failed." );
      toastr.error(result.message, result.status, {timeOut: 5000})

});

return false;

});

});
</script>

<script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: {{ $stations->latitude }}, lng: {{ $stations->longitude }}};
  // The map, centered at Uluru
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 15, center: uluru});
  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map, icon:"{{ $mapicon }}",
              draggable: true,
              animation: google.maps.Animation.DROP,
              title:"{{ $stations->station_name }}"
              });
}
// 
 
      
    </script>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDedw7jUE0W3kHltX2lNOhzkicm3GvBHbQ&libraries=places&callback=initMap"
        async defer></script>

@endsection