@extends('layouts.customer')

@section('content')
    <div class="container-fluid disable-text-selection">
        <div class="row">
            <div class="col-12">
                <div class="mb-2">
                    <h1>POS Configuration</h1>
                    <div class="top-right-button-container">
                    </div>
                    <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="#">Home</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">POS Configuration</li>
                        </ol>
                    </nav>
                </div>

                <div class="separator mb-5"></div>
            </div>
        </div>

        <div class="row mb-2">
            <div class="error-message d-none w-100 alert alert-danger"></div>
        </div>

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

        @php
        	$pos_lists = array(
        		array(
        			"id" => "0",
        			"name" => "Eaterli"
        		),
        		array(
        			"id" => "1",
        			"name" => "SquareUP"
        		),
        		array(
        			"id" => "2",
        			"name" => "Clover"
        		),
        		array(
        			"id" => "3",
        			"name" => "Other"
        		),
        	);

        @endphp

        <style>
            .card-label .card {
		      border: 1px solid #e2ebf6;
			}

			.card-label:hover .card {
		      cursor: pointer;
		      border: 1px solid #e2ebf6;
			  /*box-shadow: 0px 1px 5px rgba(0 0 0 / 15%);*/
			}

			.pos_type {
			    font-size: inherit;
			    margin: 0;
			    position: absolute;
			    right: 20px;
			    top: 4px;
			    z-index: 10;
			}

			@supports (-webkit-appearance: none) or (-moz-appearance: none) {
			  .pos_type {
			    -webkit-appearance: none;
			    -moz-appearance: none;
			    background: #fff;
			    border: 2px solid #e2ebf6;
			    border-radius: 50%;
			    cursor: pointer;
			    height: 1.5em;
			    outline: none;
			    transition: background 0.2s ease-out, border-color 0.2s ease-out;
			    width: 1.5em;
			  }
			  .pos_type::after {
			    border: 2px solid #fff;
			    border-top: 0;
			    border-left: 0;
			    content: "";
			    display: block;
			    height: 0.75rem;
			    left: 25%;
			    position: absolute;
			    top: 50%;
			    transform: rotate(45deg) translate(-50%, -50%);
			    width: 0.375rem;
			  }
			  .pos_type:checked {
			    background: #184f90 !important;
			    border-color: #184f90 !important;
			  }

			  .card-label:hover .pos_type {
			    border-color: #c4d1e1;
			  }
			  .card-label:hover .pos_type:checked {
			    border-color: #184f90 !important;
			  }
			}

			.card-label:hover .card {
			  border-color: #c4d1e1;
			}

			.pos_type:checked ~ .card {
			  border-color: #184f90 !important;
			}

			.pos_type:focus ~ .card {
			  box-shadow: 0 0 0 2px #c4d1e1;
			}

			.pos_type:disabled ~ .card {
			  color: #c4d1e1;
			  cursor: default;
			}

			.pos_type:disabled ~ .card .plan-type {
			  color: #c4d1e1;
			}

			.card-label:hover .pos_type:disabled ~ .card {
			  border-color: #e2ebf6;
			  box-shadow: none;
			}

			.card-label:hover .pos_type:disabled {
			  border-color: #e2ebf6;
			}

			.pos-content.hide-token .access_token_wrapper, .pos-content .no_access_token_wrapper {
				display: none !important;
			}

			.pos-content.hide-token .no_access_token_wrapper, .pos-content .access_token_wrapper {
				display: block !important;
			}

            .clover_location.hide-location, .clover_merchant.hide-merchant {
                display: none !important;
            }
			        
		</style>

        <div class="row"><!-- app-row -->
        	@foreach( $pos_lists as $pos )
	            <div class="col-3">
	            	<label for="pos_type_{{ $pos['id'] }}" class="card-label w-100">
	            		<input type="radio" id="pos_type_{{ $pos['id'] }}" class="pos_type" name="pos_type" value="{{ $pos['id'] }}" {{ $active_pos == $pos['id'] ? 'checked' : ''; }} />
		                <div class="card d-flex flex-row mb-3"> <!-- .active -->
		                    <div class="d-flex flex-grow-1 min-width-zero">
		                        <div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center">
		                        	<div class="w-60">
			                            <!-- <a class="list-item-heading mb-0 truncate w-40 w-xs-100 mt-0" href="{{ route('pos.edit', ['account' => $account, 'po' => $restaurant_id ]) }}"> -->
			                                <span class="align-middle d-inline-block">{{ $pos['name'] }}</span>
			                            <!-- </a> -->
			                            <p class="mb-0 text-muted text-small w-60 w-xs-100">POS</p>
			                        </div>
		                            <div class="w-40 w-xs-100">
		                                <span class="badge badge-pill {{ $active_pos == $pos['id'] ? 'badge-success' : 'badge-light'; }}">{{ $active_pos == $pos['id'] ? 'ACTIVATED' : 'DEACTIVATED'; }}</span>
		                            </div>
		                        </div>
		                    </div>
	                	</div>
	                </label>
	            </div>
	        @endforeach
        </div>

        <div class="row">
            <div class="col-12">
                <div class="pos-content card mb-4 {{ $active_pos == '0' ? 'hide-token' : ''; }}">
                    <div class="card-body">
                    	@foreach( $pos_lists as $pos )
	                        <form class="pos-form pos-form-{{ $pos['id'] }} {{ $active_pos != $pos['id'] ? 'd-none' : '' }}" action="{{ route('pos.update', ['account'=>$account, 'po'=>$restaurant_id]) }}" method="post">
	                            @csrf
	                            @method('PUT')

	                            @if( $pos['id'] == '2' )
		                            @if( $locations )
		                                <div class="form-group">
		                                    <label for="restaurant_location_id">Restaurant Location</label>
		                                    <select class="form-control" name="restaurant_location_id" id="restaurant_location_id">
		                                        @foreach( $locations as $location )
		                                            <option value="{{ $location->id }}" {{ ( $primaryId == $location->id ) ? 'selected' : '' }}>{{ $location->name }}</option>
		                                        @endforeach
		                                    </select>
		                                </div>
		                            @endif

		                            <div class="form-group">
		                                <label for="merchant_id">Merchant ID</label>
		                                <input type="text" class="form-control" name="merchant_id" id="merchant_id" value="{{ ( $active_pos == $pos['id'] ? $pos_access['merchant_id'] : '' ) }}" placeholder="AS968SD5" required="">
		                            </div>

		                        @endif



	                            @if( $pos['id'] == '0' )
		                            <h4 class="form-text text-muted mb-3">
									  You don't need access token for Eaterli POS.<br /> Just click on the save button your POS will configured successfully.
									</h4>
								@else
									<div class="form-group">
		                                <label for="access_token">Access Token</label>
		                                <input type="text" class="form-control" name="access_token" id="access_token" value="{{ ( $active_pos == $pos['id'] ? $pos_access['access_token'] : '' ) }}" placeholder="AS968f9sdf9aA98as-asd-af85as-asfASD5" required>
		                            </div>
								@endif
	                            
	                            <input type="hidden" value="{{ $active_pos }}" name="pos_type" class="set_pos_type">
	                            <button type="submit" class="d-none btn btn-primary save-button-{{ $pos['id'] }} mb-0">Save</button>
	                            <button type="button" data-toggle="modal" data-target="#confirm-submit-{{ $pos['id'] }}" class="btn btn-primary mb-0">Save</button>
	                        </form>
	                    @endforeach
                    </div>
                </div>
            </div>
        </div>

            </div>
@endsection

@section('script')
@foreach( $pos_lists as $pos )
	<div class="modal fade" id="confirm-submit-{{ $pos['id'] }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	    <div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	            	<h2>Confirmation</h2>
	            </div>
	            <div class="modal-body">
	                Are you sure you want to change the POS?
	            </div>

	            <div class="modal-footer">
	                <button type="button" class="btn btn-danger confirmation" data-target="{{ $pos['id'] }}">Yes</button>
	                <button type="button" class="btn btn-dark modal-close" data-dismiss="modal">No</button>
	            </div>
	        </div>
	    </div>
	</div>
@endforeach
<script>
	$(document).ready(function() {
		$('input[type="radio"][name="pos_type"]').change(function() {
		    if ( this.value == '0' ) {
		    	$('.pos-form').addClass('d-none');
		    	$('.pos-form-' + this.value).removeClass('d-none');
            } else if (this.value == '1') {
            	$('.pos-form').addClass('d-none');
		    	$('.pos-form-' + this.value).removeClass('d-none');
            } else if( this.value == '2' ){
            	$('.pos-form').addClass('d-none');
		    	$('.pos-form-' + this.value).removeClass('d-none');
            } else {
            	$('.pos-form').addClass('d-none');
		    	$('.pos-form-' + this.value).removeClass('d-none');
		    }

		    // set value
		    $('.set_pos_type').val(this.value);
		});

		$('.confirmation').click(function() {
			let target = $(this).data('target');
			$( ".save-button-" + target ).trigger('click');
		});

		$.ajaxSetup({
	        headers: {
	            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	        }
	    });

	    $(".save-button-0, .save-button-1, .save-button-2, .save-button-3").click(function(e) {
	    	// prevent default
	        e.preventDefault();

	        // Hide errors
	        $('.error-message').addClass('d-none');


            $('#confirm-submit').modal('toggle');

	        var form = $(this).parents('form');
	        console.log( form.serialize() );

	        $.ajax({
	           type: 'POST',
	           url: form.attr('action'),
	           data: form.serialize(),
	           success: function( response ) {
	              console.log( response );
	              if( response.status ) {
	              	location.reload();
	              } else {
	              	$('.modal-close').trigger('click');
	              	setTimeout(function() {
	              		$('.error-message').html('<p>' + response.error + '</p>').removeClass('d-none');
	              	}, 0);
                    // alert( response.error );    
                  }
	           },
	           error: function( error ) {
           		console.log( error );
	           }
	        });
	    });

        // window onload
        /*$(window).on('load', function() {
            // do something
            var val = $('#restaurant_location_id').find(':selected').val(),
                target_url = '';

            if( val != '' ) {
                $.ajax({
                   type: 'POST',
                   url: target_url,
                   data: {"location_id":val},
                   success: function( response ) {
                      console.log( response );
                      if( response.status ) {
                        $
                      }
                   },
                   error: function( error ) {
                        console.log( error );
                   }
                });
            }
        });*/
	});
</script>
@endsection