@extends('layouts.customer')
@section('content')
<style type="text/css">
	
.custom-control.teleport-switch {
  --color: #4cd964;
  padding-left: 0; }
  .custom-control.teleport-switch .teleport-switch-control-input {
    display: none; }
    .custom-control.teleport-switch .teleport-switch-control-input:checked ~ .teleport-switch-control-indicator {
      border-color: var(--color); }
      .custom-control.teleport-switch .teleport-switch-control-input:checked ~ .teleport-switch-control-indicator::after {
        left: -14px; }
      .custom-control.teleport-switch .teleport-switch-control-input:checked ~ .teleport-switch-control-indicator::before {
        right: 2px;
        background-color: var(--color); }
    .custom-control.teleport-switch .teleport-switch-control-input:disabled ~ .teleport-switch-control-indicator {
      opacity: .4; }
  .custom-control.teleport-switch .teleport-switch-control-indicator {
    display: inline-block;
    position: relative;
    margin: 0 10px;
    top: 4px;
    width: 32px;
    height: 20px;
    background: #fff;
    border-radius: 16px;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    border: 2px solid #ccc;
    overflow: hidden; }
    .custom-control.teleport-switch .teleport-switch-control-indicator::after {
      content: '';
      display: block;
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      -webkit-transition: .3s;
      -o-transition: .3s;
      transition: .3s;
      top: 2px;
      left: 2px;
      background: #ccc; }
    .custom-control.teleport-switch .teleport-switch-control-indicator::before {
      content: '';
      display: block;
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      -webkit-transition: .3s;
      -o-transition: .3s;
      transition: .3s;
      top: 2px;
      right: -14px;
      background: #ccc; }
      .__settingChanger{
      	  cursor: pointer;
      }
</style>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <!-- <h1>Settings</h1> -->
                <div class="card">
                	<div class="card-body">
                    <form name="setting" id="setting_form" action="{{ route('restaurants.settings.update',['account' => $account, 'restaurant_id' => $restaurant->id]) }}" method="post">
                        @csrf
                        <h3>Restaurant Settings</h3>
                        <div class="w-100 d-flex p-4">
                            <div class="w-20">
                                <strong>Website Active</strong>
                            </div>
                            <div class="w-80">
                                <label data-id="ab" class="custom-control teleport-switch __settingChanger">
                                    <input name="website_active" type="checkbox" class="teleport-switch-control-input" @if(isset($data->website_active) && $data->website_active) checked="" @endif>
                                    <span class="teleport-switch-control-indicator"></span>
                                </label>
                            </div>
                        </div>
                        <div class="w-100 d-flex p-4">
                            <div class="w-20">
                                <strong>Temporarily Closed</strong>
                            </div>
                            <div class="w-80">
                                <label data-id="ab" class="custom-control teleport-switch __settingChanger">
                                    <input name="closed" type="checkbox" class="teleport-switch-control-input" @if(isset($restaurant->closed) && $restaurant->closed) checked="" @endif>
                                    <span class="teleport-switch-control-indicator"></span>
                                </label>
                            </div>
                        </div>

                	    <hr>
                	 	<h3>Ratings</h3>
                	 	<div class="w-100 d-flex p-4">
                	 		<div class="w-20">
                	 	        <strong>Individual Product Rating</strong>
                	 	    </div>
                	 	    <div class="w-80">
                	 	    	<label data-id="cd" class="custom-control teleport-switch __settingChanger">
									<input name="individual_rating" type="checkbox" class="teleport-switch-control-input" @if(isset($data->individual_rating) && $data->individual_rating) checked="" @endif>
									<span class="teleport-switch-control-indicator"></span>
								</label>
                	 	    </div>
                	 	</div>  
                	 	<div class="w-100 d-flex p-4">
                	 		<div class="w-20">
                	 	        <strong>Overall Experience Rating</strong>
                	 	    </div>
                	 	    <div class="w-80">
                	 	    	<label data-id="de" class="custom-control teleport-switch __settingChanger">
									<input type="checkbox" name="overall_rating" class="teleport-switch-control-input" @if(isset($data->overall_rating) && $data->overall_rating) checked="" @endif>
									<span class="teleport-switch-control-indicator"></span>
								</label>
                	 	    </div>
                	 	</div> 
                	 	<div class="w-100 d-flex p-4">
                	 		<div class="w-20">
                	 	        <strong>Delivery Experience Rating</strong>
                	 	    </div>
                	 	    <div class="w-80">
                	 	    	<label data-id="if" class="custom-control teleport-switch __settingChanger">
									<input type="checkbox" name="delivery_rating" class="teleport-switch-control-input" @if(isset($data->delivery_rating) && $data->delivery_rating) checked="" @endif>
									<span class="teleport-switch-control-indicator"></span>
								</label>
                	 	    </div>
                	 	</div>



                        <h3>Checkout Settings</h3>
                        <div class="w-100 d-flex p-4">
                	 		<div class="w-20">
                	 	        <strong>Curbside</strong>
                	 	    </div>
                	 	    <div class="w-80">
                	 	    	<label data-id="if" class="custom-control teleport-switch __settingChanger">
									<input type="checkbox" name="curbside" class="teleport-switch-control-input" value="1" @if(isset($data->curbside) && $data->curbside) checked="" @endif>
									<span class="teleport-switch-control-indicator"></span>
								</label>
                	 	    </div>
                	 	</div>

                        <!-- Auto Accept Order -->
                        <!-- <div class="w-100 d-flex p-4">
                            <div class="w-20">
                                <strong>Enable Auto Order Confirmation</strong>
                            </div>
                            <div class="w-80">
                                <label data-id="if" class="custom-control teleport-switch __settingChanger">
                                    <input name="is_auto_confirm" type="checkbox" class="teleport-switch-control-input" value="1" @if(isset($data->is_auto_confirm) && $data->is_auto_confirm) checked="" @endif>
                                    <span class="teleport-switch-control-indicator"></span>
                                </label>
                            </div>
                        </div> -->
                        
                	  </form> 	

                	</div>

                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
   <script>
   	        $('.__settingChanger').change(function(e){
   	        	
   	        	var form = $("#setting_form");
               // e.preventDefault();
               $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                  }
              });
                 $.ajax({
				    type: form.attr('method'),
				    url: form.attr('action'),
				    data: form.serialize(),
				    success: function (data) {
				         console.log(data);

				    }
				});
            });
   </script>
@endsection