@extends('plate')
    @section('content')
        <div class="row justify-content-md-center fadeIn animated">
            <div class="col-md-6" style="margin-top:5%; margin-bottom: 2%">
                <form class="form-inline checker" action="{{route('pay-check')}}"  method="post">
                        {{csrf_field()}}
                    <div class="form-group mb-2">
                        <label for="staticEmail2" class="sr-only">Email</label>
                        <input type="email" class="form-control" name="email" value="{{Auth::user()->email}}" readonly>
                    </div>
                    <div class="form-group mx-sm-2 mb-2">
                        <label for="inputPassword2" class="sr-only">Payment Code</label>
                        <input type="text" class="form-control " id="pay_code" name="pay_code" placeholder="Enter Payment Code" required>
                    </div>

                    <button type="submit" class="btn btn-rounded btn-outline-amber btn-sm mb-2 check" style="height:40px;">Check</button>
                </form>
                    <div class="warning">
                    </div>
            </div>
            <div class="col-md-11" style="margin-bottom: 10%" id="eye">
                <div class="card" style="opacity:0.91">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-7">
                                <div class="row">
                                    <div class="col-md-12" id="image">
                                        <img src="{{asset('images/no_image.png')}}" class="img-text img-fluid z-depth-1 img-thumbnail" height="400" width="700"/>
                                    </div>

                                     <div class="col-md-12" id="paymentform">
                                         <br>
                                        <form class="form-for-payment">

                                            <div class="form-row">
                                                <div class="form-group col-md-4">
                                                    <label for="inputCity">Pay Via</label>
                                                    <select id="pmethod"  name="pmethod" class="mdb-select colorful-select dropdown-dark">
                                                        <option disabled selected>Choose option</option>
                                                        <option>Cardless</option>
                                                    </select>
                                                </div>
                                                <div class="form-group col-md-4 see invisible">
                                                    <label for="inputState">Operator</label>
                                                    <select id="operator" name="operator" class="mdb-select colorful-select dropdown-dark">
                                                        <option disabled selected>Choose operator</option>
                                                        <option value="mtn">MTN</option>
                                                    </select>
                                                </div>
                                                <div class="form-group col-md-5" id="mm_col">
                                                    <label for="inputZip">Mobile Money No.</label>
                                                    <input type="number" id="mm_num" value="" class="form-control" required>
                                                </div>
                                            </div>

                                            <button class="btn elegant-color-dark btn-sm btn-rounded konfirm">
                                                <i class="fa fa-money"></i>
                                                Confirm
                                            </button>
                                        </form>

                                     </div>
                                </div>

                            </div>
                            <div class="col-md-5">
                                <form>
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label for="inputEmail4">Category</label>
                                            <input type="text" id="category" class="form-control empty" value="" readonly>
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label for="inputPassword4">Ad Size</label>
                                            <input type="text" class="form-control empty" id="size" value="" readonly>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label for="inputZip">Type </label>
                                            <input type="text" class="form-control empty" value="" id="type" readonly>
                                        </div>

                                        <div class="form-group col-md-6">
                                            <label for="inputZip">Publication Date</label>
                                            <input type="text" class="form-control empty" value="" id="date1" readonly>
                                        </div>

                                    </div>
                                    <div class="form-row">

                                        <div class="form-group col-md-6">
                                            <label for="inputZip">Cost <strong class="text-primary">(GHC)</strong></label>
                                            <input type="text" class="form-control empty" value="" id="cost" readonly>
                                        </div>

                                        <div class="form-group col-md-6 invisible">
                                            <label for="inputAddress">Location</label>
                                            <input type="text" class="form-control empty" id="location" value="" readonly>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    @endsection

@push('my-script')
    <script>
        $(document).ready(function(){
            $('#paymentform').hide();
            $('#mm_col').hide();
            $('.checker').on('submit',function(e){
                e.preventDefault();
                var myform = $(this).closest('form');
                var route  = $(this).attr('action');
                var method = $(this).attr('method');
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        type:method,
                        url:route,
                        data:myform.serialize(),
                        beforeSend:function(){
                            $('.check').html('wait <i class="fa fa-spinner fa-spin fa-fw"></i>');
                        },
                        success:function(data) {
                            if($.isEmptyObject(data))
                            {
                                $('#image').html('<img src="/images/no_image.png" class="img-text img-fluid z-depth-1 img-thumbnail" height="400" width="700"/>')
                                $('.empty').empty();
                                $('.empty').val('');
                                $('#paymentform').hide();
                                $('.warning').html('<h4 class="red-text"><strong><u>Invalid payment code. you do not own this code !!!</u></strong></h4>');
                                $('.check').html('<b class="red-text">Failed <i class="fa fa-times"></i></b>');
                            }
                            else{
                                        const file = data.media;
                                        let ext = file.split('.').pop();
                                        if(ext ==='jpeg' || ext === 'jpg' || ext === 'png' ){
                                            $('#image').html(' <img class="img-thumbnail img-text img-fluid z-depth-1" src="/storage/avatars/'+ data.media +'"/>');
                                        }
                                        else if( ext === 'pdf'){
                                            $('#image').html(' <a class="btn btn-outline-danger" href="/storage/avatars/'+ data.media +'">' +
                                                '<i class="fa fa-file-pdf-o fa-3x text-danger"></i></a>');
                                        }
                                        else{
                                            alert('not compatible')
                                        }

                                    $('#category').val(data.cat_id);
                                    $('#size').val(data.size);
                                    $('#cost').val(data.amt_tbp);
                                    $('#date1').val(data.date1);
                                    $('#type').val(data.format);
                                    $('.check').html('Done <i class="fa fa-check text-success"></i>');
                                     $('.warning').html('<h4 class="green-text"><strong><em>Great !!!</em></strong></h4>');

                                $('#paymentform').show();
                                $('.konfirm').hide();

                                //When payment method is changed
                                $('#pmethod').on('change',function(){
                                    var value = $(this).val();

                                    if(value === 'Cardless'){
                                        $('.see').removeClass('invisible')
                                          $('#operator').on('change',function(){
                                              var vendor = $(this).val();
                                              $('#mm_col').show();
                                              // console.log(vendor);
                                              $('#mm_num').on('keyup',function(){
                                                  var  endpoint = $(this).val();
                                                  if(endpoint !=='' && endpoint.length === 10){
                                                      $('.konfirm').show();  //showing confirmation button
                                                        console.log(endpoint); // confirmation if vendor has been chosen
                                                      //for making payment once the necessary fields are sent

                                                   $('.form-for-payment').on('submit',function (e) {
                                                          e.preventDefault();
                                                              var hashed_id = $('#pay_code').val();
                                                              var cost = $('#cost').val();

                                                                // console.log(endpoint,vendor,hashed_id);
                                                              $.ajax({
                                                                  headers: {
                                                                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                                                  },
                                                                  type:'post',
                                                                  url:'{{route('mm-money')}}',
                                                                  data:{
                                                                          endpoint:endpoint,
                                                                          vendor:vendor,
                                                                          cost:cost,
                                                                          hashed_id:hashed_id,
                                                                          '_token':$('input[name=_token]').val()
                                                                  },
                                                                  beforeSend(){
                                                                      $('.konfirm').html('...please wait <i class="fa fa-spinner fa-spin"></i>');
                                                                  },
                                                                  success:function (data) {
                                                                      $('.konfirm').html('Acknowledged <i class="fa fa-check"></i>');
                                                                      console.log(data);
                                                                      setTimeout(function () {
                                                                          window.location.reload()
                                                                      },300)
                                                                  },
                                                                  error:function(){
                                                                      alert('There was an error');
                                                                  }
                                                              })
                                                      })

                                                  }
                                                  else if(endpoint === '' || endpoint.length < 10 || endpoint.length >10 ){
                                                      $('.konfirm').hide();
                                                  }

                                              });
                                          })
                                    }
                                    else if(value ==='Card'){
                                        $('#operator').html(' ' +
                                            '<option></option>\n' +
                                            '<option>Visa</option>\n' +
                                            '<option>Smart Card</option>\n' +
                                            '<option>Ezwich</option>');
                                    }
                                    else {
                                        $('#operator').empty();
                                    }
                                })
                            }

                        },
                        error:function () {
                            alert('there was an error');
                        }
                    })
            })
        });
    </script>
    @endpush

@push('payment')
    active
@endpush