@extends('admin.layout')
@section('content')
<style>
  	#watermarked::before {
    position: fixed;
    top: -75%;
    left: -75%;
    display: block;
    width: 300%;
    height: 300%;
    transform: rotate(-45deg);
    content: attr(data-watermark);
    font-size: 30px;
    opacity: 0.15;
    line-height: 4em;
    letter-spacing: 2px;
    color: #ff0523;
    z-index:0;
    }
	.content-wrapper, .right-side{
        background: #FFF;
    }
    .box {
        background: transparent;
        z-index: 1; 
    }
</style>
<div class="search-list">
  <div class="content-wrapper search-result-list">
    <section class="content-header">
      <h1> {{$result['pageHeading']}}</h1>
      <ol class="breadcrumb">       
        <li><a href="{{ URL::to('admin/dashboard/this_month')}}"><i class="fa fa-dashboard"></i>Dashboard</a></li>
        <li class="active"> {{$result['pageHeading']}}</li>
      </ol>
    </section>
    <section class="content"> 
      <div class="row">
        <div class="col-md-12">
          <div class="box box-info"> 
            <div class="box-body">
              <div class="row">
                <div class="col-xs-6">
                  <table class="table table-bordered">          
                    <tbody>
               
                      <tr> 
                        <th scope="row">Amount</th>
                        <td>
                          @if(count((array) $result['bramptonIptvChanelList'])>0)
                            {{ $result['bramptonIptvChanelList']->amount }} 
                          @endif
                        </td>
                      </tr> 
                      <tr> 
                        <th scope="row">Currency</th>
                        <td>
                          @if(count((array) $result['bramptonIptvChanelList'])>0)
                            {{ $result['bramptonIptvChanelList']->currency }} 
                          @endif
                        </td>
                      </tr> 
                        <th scope="row">Plan</th>
                        <td>
                            @if(count((array) $result['bramptonIptvChanelList'])>0)
                              {{ $result['bramptonIptvChanelList']->plan }} 
                            @endif
                          </td>
                      </tr>
                      <tr>
                        <th scope="row">Quantity </th>
                        <td>                              
                            @if(count((array) $result['bramptonIptvChanelList'])>0)
                              {{ $result['bramptonIptvChanelList']->quantity }} 
                            @endif
                          </td>
                      </tr>
                      <tr>
                        <th scope="row">Phone </th>
                        <td>                                                           
                            @if(count((array) $result['bramptonIptvChanelList'])>0)
                              {{ $result['bramptonIptvChanelList']->phone }} 
                            @endif
                          </td>
                      </tr>             
                      <tr>
                        <th scope="row">Billing Address </th>
                        <td>
                            @if(count((array) $result['bramptonIptvChanelList'])>0)
                              {{ $result['bramptonIptvChanelList']->street }}, {{ $result['bramptonIptvChanelList']->city }}, {{ $result['bramptonIptvChanelList']->state }}, {{ $result['bramptonIptvChanelList']->country }}, {{ $result['bramptonIptvChanelList']->zip }} 
                            @endif
                        </td>
                      </tr>
                      <tr>
                        <th scope="row">Shipping Address </th>
                        <td>                              
                            @if(count((array) $result['bramptonIptvChanelList'])>0)
                              {{ $result['bramptonIptvChanelList']->street_two }} 
                            @endif
                          </td>
                      </tr> 
                      <tr>
                        <th scope="row">Alternative Phone </th>
                        <td>
                            @if(count((array) $result['bramptonIptvChanelList'])>0)
                              {{ $result['bramptonIptvChanelList']->phone_two }} 
                            @endif
                          
                        </td>
                      </tr>              
                      <tr>
                        <th scope="row">Email </th>
                        <td>                            
                            @if(count((array) $result['bramptonIptvChanelList'])>0)
                              {{ $result['bramptonIptvChanelList']->email }} 
                            @endif
                        </td>
                      </tr>                         
                    </tbody>
                  </table>
                </div>  
                @if($result['paymentArr'])
                <div class="col-xs-6">
                  @if(Session::has('message'))
                  <p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('message') }}</p>
                  @endif
                  <div class="col-md-12">
                    <table class="table table-bordered">
                        <thead>
                          <th colspan="2"><span class="card-details">Payment Details</span></th>                      
                        </thead>
                        <tbody>
                        @if(!empty($result['card_charged_with_gateway']) && $result['card_charged_with_gateway']=='stripe')
                          <tr>
                            <th scope="row"> Transaction ID</th>
                            <td>
                              @if(count((array) $result['paymentArr'])>0)
                                {{ $result['paymentArr']->transction_id }} 
                              @endif
                            </td>
                          </tr>
                        @endif  
                        @if(!empty($result['card_charged_with_gateway']) && $result['card_charged_with_gateway']=='converge_pay')
                          <tr>
                            <th scope="row"> Transaction ID</th>
                            <td>
                              @if(count((array) $result['paymentArr'])>0)
                                {{ $result['paymentArr']->payment_id  }} 
                              @endif
                            </td>
                          </tr>
                          <tr>
                            <th scope="row"> Payment ID</th>
                            <td>
                              @if(count((array) $result['paymentArr'])>0)
                                {{ $result['paymentArr']->transction_id }} 
                              @endif
                            </td>
                          </tr> 
                        @endif                         
                         
                          <tr>
                            <th scope="row"> Transaction Amount</th>
                            <td>
                              @if(count((array) $result['paymentArr'])>0)
                                ${{ $result['paymentArr']->payment_amount }} 
                              @endif
                            </td>
                          </tr>

                          <tr>
                            <th scope="row"> Transaction Currency</th>
                            <td>
                              @if(count((array) $result['paymentArr'])>0)
                                {{ $result['paymentArr']->payment_currency }} 
                              @endif
                            </td>
                          </tr>
                          
                        </tbody>
                    </table>        
                    @if(count((array) $result['package_details'])>0)            
                    <table class="table table-bordered">
                        <thead>
                          <th colspan="2"><span class="card-details">Package Details</span></th>                      
                        </thead>
                        <tbody>
                          <tr>
                            <th scope="row"> Package Selected</th>
                            <td>
                              @if(count((array) $result['package'])>0)
                              {{ $result['package']['name'] }} @if(!empty($result['package']['model_number'])) with {{$result['package']['model_number']}} @endif @if(!empty($result['package']['existing_customer'])){{$result['package']['existing_customer']}} @endif with ${{ number_format($result['package']['price'], 2, '.', '') }} {{ $result['package']['currency'] }}
                              @endif
                            </td>
                          </tr>
                          <tr>
                            <th scope="row"> Total Quantity </th>
                            <td>
                              @if(count((array) $result['package_details'])>0)
                                {{ $result['package_details']->quantity }} 
                              @endif
                            </td>
                          </tr>                          
                          <tr>
                            <th scope="row"> Discount Amount</th>
                            <td>
                              @if(count((array) $result['package_details'])>0)
                                ${{ $result['package_details']->discount_given }} 
                              @endif
                            </td>
                          </tr>
                          <tr>
                            <th scope="row"> Transaction Amount</th>
                            <td>
                              @if(count((array) $result['package_details'])>0)
                                ${{ $result['package_details']->payment_amount }} 
                              @endif
                            </td>
                          </tr>
                        </tbody>
                    </table>    
                    @endif                
                  </div>
                </div>
                @else
                <div class="col-xs-6">
                  @if(Session::has('message'))
                  <p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('message') }}</p>
                  @endif
                  <div class="col-md-12">
                    <table class="table table-bordered">
                      <thead>
                        <th colspan="2"><span class="card-details">Card Details &nbsp;
                          
                        </span></th>                      
                      </thead>
                      <tbody>
                        <tr>
                          <th scope="row">Cardholder Name</th>
                          <td>
                          @if(count((array) $result['bramptonIptvChanelList'])>0)
                              {{ $result['bramptonIptvChanelList']->cardholder_name }} 
                            @endif
                          </td>
                        </tr>
                        <tr> 
                          <th scope="row">CVV</th>
                          <td>
                             XXX
                            </td>
                        </tr>
                        <tr> 
                          <th scope="row">Expiration Date</th>
                          <td>
                            {{ $result['bramptonIptvChanelList']->expiration_date }}
                          </td>
                        </tr> 
                        <tr> 
                          <th scope="row">Card Details</th>
                          <td>                        
                            @if(count((array) $result['bramptonIptvChanelList'])>0)
                                                            
                            @endif
                          </td>
                        </tr> 

                         <tr> 
                          <th scope="row">Card type</th>
                          <td>                        
                            @if(count((array) $result['bramptonIptvChanelList'])>0)
                                                          @endif
                          </td>
                        </tr>
                      </tbody>
                    </table> 
                  </div> 
                  <div class="row">   
                    <div class="col-md-12"><br/></div>    
                                      </div>                
                </div>            
                @endif
              </div>
            </div>
          </div>
          <div id="watermarked" data-watermark="{{ auth()->guard('admin')->user()->first_name }} {{ auth()->guard('admin')->user()->last_name }}" class="row listing">        
          </div>
        </div>
      </div>
    </section>
  </div>
</div>
<div class="modal fade" id="exampleModal"  >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <span class="card-details">Update Card Details</span>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form name="card-details-update" id="card-details-update" action="{{ route('paymentsDetailsUpdate',array('id'=>$result['bramptonIptvChanelList']->id,'req_for'=>$result['req_for'])) }}" method="POST">
        <div class="modal-body">
         
          <div id="err-message"></div>
          <div class="row">
              @csrf
              <div class="clearfix"></div>
              <div class="col-md-12">
                  <div class="form-group">
                      <div class="col-md-4">
                        <label for="cardholder_name" class="control-label">{{ trans('Cardholder Name') }}</label>
                      </div>
                      <div class="col-md-8">
                        @if(count((array) $result['bramptonIptvChanelList'])>0)
                          {!! Form::text('cardholder_name',  '', array('class'=>'form-control','required'=>'required','id'=>'cardholder_name','maxlength'=>155)) !!}	
                        @else
                          {!! Form::text('cardholder_name', '', array('class'=>'form-control','required'=>'required','id'=>'cardholder_name','maxlength'=>155)) !!}	
                        @endif  					
                      </div>
                  </div>
              </div>
              <div class="clearfix"></div>
              <div class="col-md-12">
                  <div class="form-group">
                      <div class="col-md-4">
                        <label for="cardholder_name" class="control-label">{{ trans('Card Details') }}</label>
                      </div>
                      <div class="col-md-8">
                        @if(count((array) $result['bramptonIptvChanelList'])>0)
                         
                          {!! Form::text('card_details',  '', array('class'=>'form-control credit-card-number','required'=>'required','id'=>'card_details','maxlength'=>30)) !!}	
                        @else
                          {!! Form::text('card_details', '', array('class'=>'form-control credit-card-number','required'=>'required','id'=>'card_details','maxlength'=>30)) !!}	
                        @endif  					
                      </div>
                  </div>
              </div>              
              <div class="clearfix"></div>
              <div class="col-md-12">
                  <div class="form-group">
                      <div class="col-md-4">
                        <label for="cardholder_name" class="control-label">{{ trans('CVV') }}</label>
                      </div>
                      <div class="col-md-8">
                        @if(count((array) $result['bramptonIptvChanelList'])>0)
                          {!! Form::text('cvc', '', array('class'=>'form-control','required'=>'required','id'=>'cvc','maxlength'=>5)) !!}	
                        @else
                          {!! Form::text('cvc', '', array('class'=>'form-control','required'=>'required','id'=>'cvc','maxlength'=>5)) !!}	
                        @endif  					
                      </div>
                  </div>
              </div>
              <div class="clearfix"></div>
              <div class="col-md-12">
                  <div class="form-group">
                      <div class="col-md-4">
                        <label for="cardholder_name" class="control-label">{{ trans('Expiration Date in MM/YY') }}</label>
                      </div>
                      <div class="col-md-8">
                        @if(count((array) $result['bramptonIptvChanelList'])>0)
                          {!! Form::text('expiration_date','', array('class'=>'form-control','required'=>'required','id'=>'expiration_date')) !!}	
                        @else
                          {!! Form::text('expiration_date', '', array('class'=>'form-control','required'=>'required','placeholder'=>'MM/YY','id'=>'expiration_date')) !!}	
                        @endif  					
                      </div>
                  </div>
              </div>

          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="paymentModal"  >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
		   <div class="modal-header">
			<span class="card-details">Payment Details</span>
			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
			<span aria-hidden="true">&times;</span>
			</button>
			<div>

			</div>
		</div>
      
    <div class="modal-body">
			<div class="row">
				<div class="col-md-8">												
					<table class="table table-striped">
						<tr>				
							<td>Total Amount</td>
							<td>$<span id="total_amount_calc_final"></span></td>
						</tr>
						<tr>
						
							<td>Discount</td>
							<td>$<span id="total_amount_disc_final"></span></td>
						</tr>
						<tr>
						
							<td>Amount to Be Paid</td>
							<td>$<span id="total_amount_paid_final"></span></td>
						</tr>
					</table>
				</div>				
			</div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="confirmOk">Proceed to Payment</button>
      </div>
    </div>
  </div>
</div>

<style type="text/css">
  span.card-details {
    font-size: 28px;
  }
  label.control-label {
    font-size: 18px;
  }
  div#err-message {
    color: red;
    padding: 15px;
    font-size: 18px;
}

</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

    $("#exampleModalButton").click((e)=>{
        let amt = parseFloat($('#package_id').find(':selected').data('amount'))* $("#quantity").val()
        if($('#package_id').find(':selected').val()){
          $("#total_amount_calc").html(amt);
          let disc = parseFloat($('#discount_given').val());
          $("#total_amount_disc").html(disc);
          let amt_paid = (amt - disc).toFixed(2)
          $("#total_amount_paid").html(amt_paid);
        }
    })

    $("#card-details-update").on( 'submit', function(e){
      e.preventDefault(); // Prevent default submission


      let valid = true;
      let errorMessage = '';

      // Validate Card Number (16 to 20 digits)
      const cardNumber = $('#card_details').val().replace(/\s/g, ''); // Remove spaces
      const cardNumberPattern = /^\d{15,20}$/; // 16 to 20 digits
      if (!cardNumberPattern.test(cardNumber)) {
        valid = false;
        errorMessage = 'Invalid card number. It must be between 15 to 20 digits long.<br>';
      }

      // Validate Expiration Date (MM/YY)
      const expirationDate = $('#expiration_date').val();
      const expirationDatePattern = /^(0[1-9]|1[0-2])\/\d{2}$/;
      if (!expirationDatePattern.test(expirationDate)) {
        valid = false;
        errorMessage = 'Invalid expiration date. Use MM/YY format.<br>';
      } else {
        const [month, year] = expirationDate.split('/');
        const currentDate = new Date();
        const currentYear = currentDate.getFullYear() % 100; // Get last 2 digits of current year
        const currentMonth = currentDate.getMonth() + 1; // Get current month (1-12)

        if (parseInt(year) < currentYear || (parseInt(year) === currentYear && parseInt(month) < currentMonth)) {
          valid = false;
          errorMessage = 'Card has expired.<br>';
        }
      }

      // Validate CVV (3 digits)
      const cvv = $('#cvc').val();
      const cvvPattern = /^\d{3,4}$/; // 3 or 4 digits
      if (!cvvPattern.test(cvv)) {
        valid = false;
        errorMessage = 'Invalid CVV. It must be 3 to 4  digits long.<br>';
      }

      if(!validateCardNumber(cardNumber)){
        valid = false;
        errorMessage = 'Enter a valid card number.<br>';
      }
      if(!valid){
        $("#err-message").html(errorMessage);
        return false
      }

      let formData = $("#card-details-update").serialize(); // Serialize form data
      $("#err-message").html('');
      $.ajax({
          url: $("#card-details-update").attr("action"), // Use form action URL
          method: "POST",
          type:'JSON',
          data: formData,
          success: function (response) {
              console.log('response',response)

              if(response.error){
                let errors = response.error;
                
                Object.entries(errors).forEach((err)=>{
                    console.log(err)
                    $("#err-message").html(err[1]);
                    return false
                })
              }
              if(response.success){
                $("#err-message").css('color', 'green');
                $("#err-message").html(response.message);
                setTimeout(() => {               
                  window.location.reload();
                }, 2000);
              }
          },
          error: function (err) {
            console.log('err',err)
            
          },
      });
    });

    $("#payment-form-submit").on( 'click', function(e){
        e.preventDefault(); 
        let paymentform = $("#payment-form"); // Use jQuery object
        let isValid = true;
        // Remove previous error messages
        $(".error-message").remove();
        paymentform.find(":invalid").each(function () {
            isValid = false;
            let field = $(this);

            // Check if error message already exists
            if (field.next(".error-message").length === 0) {
                let errorMessage = field[0].validationMessage; // Get default browser validation message
                field.after(`<span class="error-message" style="color: red; font-size: 12px;">${errorMessage}</span>`);
            }
        });      
        if (!isValid) {
            paymentform.find(":invalid").first().focus(); // Focus first invalid field
            return false; // Stop execution if form is invalid
        }

        let amt = parseFloat($('#package_id').find(':selected').data('amount'))* $("#quantity").val()
				$("#total_amount_calc_final").html(amt);
				let disc = parseFloat($('#discount_given').val());
				$("#total_amount_disc_final").html(disc);
				let amt_paid = (amt - disc).toFixed(2)
				$("#total_amount_paid_final").html(amt_paid);   
        $("#paymentModal").modal('show');      
    });

    $("#confirmOk").on('click', function(e){
      $("#payment-form-submit").attr('disabled', 'disabled');
      $("#payment-form")[0].submit();       
      // $.getScript('https://cdn.jsdelivr.net/npm/sweetalert2@11', function() {
      //       Swal.fire({
      //         title: 'Do you want Continue ?',
      //         icon: 'success',
      //         showCancelButton: true,
      //       }).then((result) => {
      //         if (result.isConfirmed) {
      //           $("#payment-form-submit").attr('disabled', 'disabled');
      //           $("#payment-form")[0].submit();              
      //         } 
      //       })
      //   })
    })
  });  
  document.querySelectorAll('#watermarked').forEach(function(el) {
      el.dataset.watermark = (el.dataset.watermark + ' ').repeat(500);
  });
</script>
<script>
    document.getElementById('expiration_date').addEventListener('input', function(e) {
            let value = e.target.value;
            value = value.replace(/\D/g, '');
            if (value.length > 4) {
                value = value.slice(0, 4);
            }
            if (value.length > 2) {
                value = value.replace(/(\d{2})(\d{1,2})/, '$1/$2');
            }
            e.target.value = value;
    });
    const cardDetailsInput = document.getElementById('card_details');
        cardDetailsInput.addEventListener('input', function() {
        let cardNumber = cardDetailsInput.value;       
        cardNumber = cardNumber.replace(/\D/g, '');
        let formattedCardNumber = cardNumber.replace(/(\d{4})(?=\d)/g, '$1 ');

        // Set the formatted value back to the input
        cardDetailsInput.value = formattedCardNumber;
    });            


      
</script>

@endsection