@extends('adminlte::page')

@section('title', 'Payment Link')

@section('content_header')

    <div class="row mb-2">
        <div class="col-sm-6 col-6">
            <h1>Payment Link</h1>
        </div>
		<div class="col-sm-6 col-6">
			<div class=" float-right">
				<a href="{{route('visament.payment.link.add',['id'=>$id])}}" class="btn btn-primary">Add</a>
			</div>
		</div>
    </div>


@stop
@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <!-- /.card-header -->
                <div class="card-body table-responsive">
                    <div class="custom-table table-light">
                        <div class="custom-table-row body-head">
                            <div class="item"><span>Amount</span></div>
                            <div class="item"><span>Link</span></div>
                            <div class="item"><span>Status</span></div>
							<div class="item"><span>Action</span></div>
                        </div>
                        @foreach ($paymentLinks as $blg)
                            <div class="custom-table-row body-table" id="tr_{{$blg->id}}">
								<div class="item"><span>Amount</span></div>
                                <div class="item">{{$blg->amount }}</div>
                                <div class="item"><span>Link</span></div>
                                <div class="item"><span class="text-cpy" data-url="{{$blg->link }}">{{$blg->link }} </span> <a href="javascript:void(0)" class="badge bg-primary text-cpy-btn cursor-pointer">Copy</a></div>  
								<div class="item"><span>Status</span></div>
                                <div class="item switch-flex">
								<span class="text-danger">Unpaid</span>
								<label class="switch">
									<input type="checkbox" class="change-status" name="status" {{$blg->status==1?'checked':''}} data_href="{{route('visament.payment.link.status',['id'=>$blg->id])}}">
									<span class="slider"></span>
								</label>
								
								<span class="text-success">Paid</span>
                                </div>
								<div class="item"><span>Action</span></div>
								<div class="item">
									<a href="{{route('visament.payment.link.edit',['id'=>$blg->id])}}" class="btn btn-primary btn-xs">Edit</a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <!-- /.card-body -->

                <div class="box-footer clearfix">
                    {{ $paymentLinks->links() }}
                </div>
            </div>
        </div>
        <!-- /.col -->
    </div>
	@section('js')
	<script src="{{ asset('front/plugins/bootstrap-switch/js/bootstrap-switch.min.js')}}"></script>
	<script>
		
		$(document).on("change",".change-status",function(e) {
			e.preventDefault();
			var url = $(this).attr('data_href');
			var status = 0;
			if($(this).is(':checked')){
				status = 1;
			}
			$.ajax({
				url: url,
				type: 'POST',
				headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
				data: {status:status},
				success: function (data) {
					if (data['success']) {
						mytoast.success(data['success']);
					} else if (data['error']) {
						mytoast.error(data['error']);
					} else {
						mytoast.error('Whoops Something went wrong!!');
					}
				},
				error: function (data) {
					alert(data.responseText);
				}
			});


			return false;
		});
	</script>

	<script>
// document.getElementById('copyToClipboard-a').addEventListener('click', function() {
  
//   var text = document.getElementById('textA');
//   text.select();
//   document.execCommand('copy');

// })
$(document).on("click",".text-cpy-btn",function(e) {
	var text = $(this).parent('div.item').find('span.text-cpy').attr('data-url');
	var $temp = $("<input>");
    $("body").append($temp);
    $temp.val(text).select();
    document.execCommand("copy");
    $temp.remove();
	mytoast.success('link copied');
});
</script>
	@stop

@stop