@extends('layouts.customer')

@section('content')
<style type="text/css">
    .pac-container{
        top : 383px !important;
    }
    div.btn-group{
            width: 100%;
            border-radius: 0.1rem;
            border: 1px solid #d7d7d7;
    }
    .multiselect-selected-text{
        float: left;
    }
    b.caret{
       margin-left: 79%;
    }
    ul.multiselect-container.dropdown-menu.show {
    width: 100%;
}
#smartWizardValidation .card-body > div {
	height: 100%;
}
</style>

<link rel="stylesheet" href="{{ secure_url('css/bootstrap-multiselect.css')}}">
    <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <h1>{{ $location->name ?: '' }}</h1>
                    <nav class="breadcrumb-container d-none d-sm-block d-lg-inline-block" aria-label="breadcrumb">
                        <ol class="breadcrumb pt-0">
                            <li class="breadcrumb-item">
                               <a href="{{url('/')}}/dashboard">Dashboard</a>
                            </li>
                            
                            <li class="breadcrumb-item active" aria-current="page">Restaurant Location</li>
                        </ol>
                    </nav>
                    <div class="separator mb-5"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card mb-4">
                        <div class="card-body">
                          <div class="row mb-2">
                @if ($message = Session::get('success'))
                    <div class="w-100 alert alert-success">
                        <p>{{ $message }}</p>
                    </div>
                @endif
            </div>


    		<div class="col-12 mb-4">
                     <div id="smartWizardValidation" class="sw-main sw-theme-check">
                            <ul class="card-header nav nav-tabs step-anchor">
                                <li class="nav-item active"><a href="{{secure_url('#step-0')}}" class="nav-link">Restaurant Information<br><small>Restaurant Information</small></a></li>
                                <!-- <li class="nav-item"><a href="#step-1" class="nav-link">Location Staff<br><small>Location Staff</small></a></li> -->
                                <li class="nav-item"><a href="{{secure_url('#step-2')}}" class="nav-link">Taxes<br><small>Tax of location</small></a></li>
                            </ul>

                            <div class="card-body sw-container tab-content" style="min-height: 180px;">
                                <div id="step-0" class="tab-pane step-content" style="display: block;">
                                	@php $userIds = Auth::user()->locationAttachUsers($location->id); @endphp
                            <form action="{{-- route('restaurant-location.update', ['account' => $account, 'restaurant_location' => $location->id ]) --}}{{ secure_url('restaurant-location/'.$location->id) }}" id="form-step-0" class="tooltip-label-right" method="POST" novalidate="">
                                        
                            
                                @csrf
                                @method('PUT')
                                <input type="hidden" id="__tax" name="tax" value="{{ $location->tax }}">
                                <input type="hidden" id="__tax_title" name="tax_title" value="{{ $location->tax_title }}">
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="name">Name</label>
                                        <input type="text" class="form-control" value="{{ $location->name ?: '' }}" name="name" id="name" placeholder="Enter name">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="franchise">Owner</label>
                                        <input type="text" class="form-control" value="{{-- $location->owner ?: '' --}}" name="franchise" id="franchise" placeholder="Enter owner" disabled>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="address">Address</label>
                                        <input type="text" class="form-control __googleauto" value="{{ $location->address ?: '' }}" name="address" id="address"
                                            placeholder="Address">
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label for="street">Street</label>
                                        <input type="text" class="form-control" value="{{ $location->street ?: '' }}" name="street" id="street"
                                            placeholder="Street">
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label for="city">City</label>
                                        <input type="city" class="form-control" value="{{ $location->city ?: '' }}" name="city" id="city" placeholder="City">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="city">State</label>
                                        <input type="text" class="form-control" value="{{ $location->state ?: '' }}" name="state" id="state" placeholder="State">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="city">Country</label>
                                        <input type="text" class="form-control" value="{{ $location->country ?: '' }}" name="country" id="country" placeholder="Country">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="city">Postal Code</label>
                                        <input type="text" class="form-control" value="{{ $location->zip_code ?: '' }}" name="zip_code" id="zip_code" placeholder="Postal Code">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="phone">Phone Number</label>
                                        <input type="text" class="form-control" value="{{ $location->phone ?: '' }}" name="phone" id="phone" placeholder="Phone Number">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="closed">Temporarily Closed</label>
                                         <select name="closed" id="closed" class="form-control">
                                             <option value="0" @if($location->closed == 0) selected @endif>No</option>
                                             <option value="1" @if($location->closed == 1) selected @endif>Yes</option>
                                         </select>
                                    </div>
                                    <!-- <div class="form-group col-md-6">
                                         <label for="location_users">Users</label>
                                         <select class="form-control" name="location_users[]"id="multiple-checkboxes" multiple="multiple">
                                              @foreach(Auth::user()->locationUsers() ?? [] as $val)

                                                 <option @if(in_array($val['id'],$userIds)) selected="" @endif value="{{ $val['id']}}">{{ $val['first_name']}} {{$val['last_name']}}</option>
                                              @endforeach
                                         </select>
                                    </div> -->
                                    <input type="hidden" name="lat" id="lat" value="{{ $location->lat}}">
                                    <input type="hidden" name="long" id="long" value="{{ $location->long}}">
                                    <input type="hidden" name="restaurant_id" value="{{ $location->restaurant_id}}">
                                    <input type="hidden" name="location_id" value="{{ $location->id}}">

                                    <div class="form-group col-md-12">
                                        <div><button type="submit" style="float: right;" class="btn btn-primary">Save</button></div>
                                    </div>
                                </div>
                            </form>
                             
                                </div>
                                <div id="step-1" class="tab-pane step-content">
                                    <form id="form-step-1" class="tooltip-label-right" novalidate="">
                                            <input type="hidden" class="form-control" name="nameValidation" id="nameValidation" value="demo" placeholder="Your first name" >
                                            <input type="hidden" class="form-control" name="lastNameValidation" id="lastNameValidation" value="demo" placeholder="Your last name" >
                                       <h3>Location Staff</h3>
                              <div class="row">
                                @php $ids = array(); @endphp
                                @foreach($location->users as $user)
                                                    @php
                                                       $ids[] = $user->id;
                                                    @endphp
                               @endforeach                     
                                            <div class="col-12">
                                              <a href="javascript:void(0)" class="btn btn-primary __addStaffToLocation" style="float: right;" data-toggle="modal" data-target="#exampleModalStaff"><i class="iconsminds-add-user"></i></a>
                                            </div>
                                       </div>     
                                            <div id="DataTables_Table_0_wrapper">
                                        <table class="data-table" id="DataTables_Table_0"> <!-- data-table data-table-feature -->
                                        <thead>
                                        <tr>
                                        <th>#StaffID</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Role</th>
                                        <th>Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($location->users as $user)

                                        <tr>
                                        <th scope="row">{{$user->id}}</th>
                                        <td>
                                        <div class="d-flex flex-row">
                                        <a class="d-flex">
                                        <img alt="Profile Picture" src="{{ $user->getProfileImage() ?: 'img/profiles/default.png' }}" class="img-thumbnail border-0 rounded-circle mr-3 list-thumbnail align-self-center xsmall">
                                        </a>
                                        <div class="d-flex flex-grow-1 min-width-zero">
                                        <div class="m-2 pl-0 align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero">
                                        <div class="min-width-zero">
                                        <a>
                                        <p class="mb-0 truncate">{{ $user->getName() }}</p>
                                        </a>
                                        </div>
                                        </div>
                                        </div>
                                        </div>
                                        </td>
                                        <td>{{$user->email}}</td>
                                        <td>{{$user->roleName()}}</td>
                                        <td>
                                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#unassignModal_{{$user->id}}" >unassign</button>
                                        <form id="deteach_form_{{$user->id}}" action="{{ url('deteach/location/staff/'.$location->id.'/'.$user->id)}}" method="post"> 
                                        @csrf
                                        <input type="hidden" name="already_attached" value="{{ implode(",",$ids)}}">
                                        <div class="modal fade" id="unassignModal_{{$user->id}}" 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">Confirm unassign staff</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                        </button>
                                        </div>
                                        <div class="modal-body">
                                        Are you sure to remove {{ $user->getName() }} from this location
                                        </div>
                                        <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                        <button type="submit" class="btn btn-primary">Unassign</button>
                                        </div>
                                        </div>
                                        </div>
                                        </div>
                                        </form>
                                        </td>
                                        </tr>
                                        @endforeach
                                        </tbody>
                                        </table>

                                    </div>
                                      
                                    </form>
                                </div>
                                <div id="step-2" class="tab-pane step-content">
                                        <div class="form-group position-relative error-l-75">
                                          <label for="tax_title">Tax Title</label>
                                          <input type="text" class="form-control" name="tax_title1" id="tax_title" placeholder="Tax Title" required="" value="{{ $location->tax_title ?: ''}}">
                                        </div> 
                                        <div class="form-group position-relative error-l-75">
                                          <label for="tax">States Sales Tax (%)</label>
                                          <input type="text" onkeypress="return isNumber(event)" class="form-control" name="tax_field" id="tax" placeholder="States Sales Tax %" required="" value="{{ $location->tax}}">
                                        </div>  
                                        <div>
                                          <button style="float: right;" type="submit" class="btn btn-primary __lastStep">Save</button>
                                        </div>                             
                                </div>
                            </div>

                            <div class="btn-toolbar custom-toolbar text-center card-body pt-0 sw-container tab-content" style="min-height: 180px;">
                                <button class="btn btn-secondary prev-btn disabled" type="button">Previous</button>
                                <button class="btn btn-secondary next-btn" type="button">Next</button>
                                <button disabled="" style="display: none;" class="btn btn-secondary finish-btn" type="button">Next</button>
                                
                            </div>
                        </div>
                    </div>
                




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


<!-- modal start -->
<!-- Modal -->
<div class="modal fade" id="exampleModalStaff" 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">Add Staff In Location</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form name="attach_staff" action="{{url('attach/location/staff/'.$location->id)}}" method="post">
          @csrf
         <label>Staff Users</label>
         @php $restStaffUsers = Auth::user()->restStaffUsers($ids);  @endphp
          <select class="form-control" id="multiple-checkboxes" name="location_users[]" multiple="">
              @foreach($restStaffUsers as $value)
                  <option value="{{ $value->id}}">{{$value->first_name}} {{$value->last_name}} ({{$value->roleName()}})</option>
              @endforeach
          </select>
            
         @foreach($ids as $val)
          <input type="hidden" name="already_attached[]" value="{{ $val}}">
         @endforeach 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Add Staff</button>
      </form>
      </div>
    </div>
  </div>
</div>

<!-- end modal -->

<!-- Modal -->

        
@endsection
@section('script')
<script src="{{ asset('/js/bootstrap-multiselect.min.js')}}"></script>
<script src="{{ asset('/js/vendor/jquery.smartWizard.min.js')}}"></script>
<script type="text/javascript">
    $(document).on('click','.__lastStep',function(){
         $("#__tax").val($("#tax").val());
         $("#__tax_title").val($("#tax_title").val());
          $("#form-step-0").submit();
    })



    function isNumber(evt) {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 48 || charCode > 57)){
             return false;
         }
         return true;
    }
   
    $(document).on('keyup','#tax',function(){
            if($(this).val() >=100){
                  $("#tax").val(100);
                  $("#__tax").val(100);
            }else{
            $("#__tax").val($(this).val());
          }  
    })
   
    $('#multiple-checkboxes').multiselect({
          includeSelectAllOption: true,
          nonSelectedText:'Select users'
        });
   

      $(function() {
    $('#smartwizard').smartWizard();
});


//end code

  </script>
  <script type="text/javascript">
    var placeSearch, autocomplete ,autocompletev1;
    
      function initAutocompletev1() {
        // Create the autocomplete object, restricting the search to geographical
        // location types.
      setTimeout(function(){   autocompletev1 = new google.maps.places.Autocomplete(
            (document.getElementById('address')),
            {});  autocompletev1.addListener('place_changed', fillInAddressv1);},500)  
      

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.
       
      }

      function fillInAddressv1() {
        // Get the place details from the autocomplete object.
        var place = autocompletev1.getPlace();
         if(autocompletev1.getPlace().geometry.location.lat()){
              $("#lat").val(autocompletev1.getPlace().geometry.location.lat());
              $("#long").val(autocompletev1.getPlace().geometry.location.lng());
         }
         console.log(place);
          for (var i = 0; i < place.address_components.length; i++) {
            for (var j = 0; j < place.address_components[i].types.length; j++) {
              // Set street
              document.getElementById('street').value = place.name || '';

              if (place.address_components[i].types[j] == "postal_code") {
                document.getElementById('zip_code').value = place.address_components[i].long_name;
              }else if(place.address_components[i].types[j] == "locality" || place.address_components[i].types[j] == "postal_town") {
                document.getElementById('city').value = place.address_components[i].long_name;
              }
              else if(place.address_components[i].types[j] == "administrative_area_level_1") {
                document.getElementById('state').value = place.address_components[i].long_name;
              }
              else if(place.address_components[i].types[j] == "country") {
                document.getElementById('country').value = place.address_components[i].long_name;
              }
            }
          }
      }
      initAutocompletev1();
</script>
  @endsection