@extends('layouts.master')

@section('content')
<div class="container">
	<div class="card card-custom gutter-b">
		<div class="card-header flex-wrap py-3">
			<div class="card-title">
				<h3 class="card-label">API Configuration</h3>
			</div>
			<div class="card-toolbar">
				<!--begin::Button-->
				<button type="button" class="btn btn-primary save-config-api">
				    Save API Configuration
				</button>
				<!--end::Button-->
			</div>
		</div>
		<div class="card-body">
            <form>
                @csrf
                <div class="form-group">
                    <label>API Key</label>
                    <input type="text" class="form-control" name="api_key" id="api_key" placeholder="Enter API Key" />
                </div>
                <div class="form-group">
                    <label>Collection ID</label>
                    <input type="text" class="form-control" name="collection_id" id="collection_id" placeholder="Enter Collection ID" />
                </div>
                <div class="form-group">
                    <label>Is Testing Mode</label>
                    <select class="form-control" id="is_testing_mode" name="is_testing_mode">
                        <option value="" selected disabled>Please Select</option>
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Production URL</label>
                    <input type="text" class="form-control" name="production_url" id="production_url" placeholder="Enter Production URL" />
                </div>
                <div class="form-group">
                    <label>Sandbox URL</label>
                    <input type="text" class="form-control" name="sandbox_url" id="sandbox_url" placeholder="Enter Sandbox URL" />
                </div>
            </form>
        </div>
	</div>
</div>

@endsection
@push('script')
<script type="text/javascript">
    $(document).ready(function() {

        var url = "{{ route('configure.api.data') }}";

        $.ajax({
            url: url,
            type: "GET",
            dataType: "json",
            success: function(data) 
            {
                let item = data.data;

                $('#api_key').val(item.api_key);
                $('#collection_id').val(item.collection_id);
                $('#is_testing_mode').val(item.is_testing_mode).select();
                $('#production_url').val(item.production_url);
                $('#sandbox_url').val(item.sandbox_url);
            }
        });

        $('.save-config-api').on('click', function () {
            addConfigApi();
        });   
    });

    function addConfigApi()
    {
        var api_key         = $('#api_key').val();
        var collection_id   = $('#collection_id').val();
        var is_testing_mode = $('#is_testing_mode').val();
        var production_url  = $('#production_url').val();
        var sandbox_url     = $('#sandbox_url').val();
     	var _token 		    = $("input[name='_token']").val();
        var url 		    = "{{ route('configure.api.store') }}";

        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: {
                api_key         : api_key,
                collection_id   : collection_id,
                is_testing_mode : is_testing_mode,
                production_url  : production_url,
                sandbox_url     : sandbox_url,
                _token          : _token
            },
            success: function(data) {
                if(data.status != 'success'){
                    var errors = data;
                    $.each(errors, function(index, sm){
                        toastr.error(sm, {timeOut: 5000});
                    });
                } else{
                	Swal.fire({
					  	title: "Success!",
					  	text: "Successfully Update API Configuration!",
					  	icon: "success",
					  	buttonsStyling: false,
					  	showConfirmButton: false,
        				timer: 3000
					 });
                }
            }
        });
    }
</script>
@endpush