@extends('backend.layouts.invoice.master')
@section('title','Pay Invoice')
@section('main-content')

@push('styles')
<style>
    .ctp-logo{max-width:200px;}
    .pay-logo{max-width:225px;}
    .row.pay_group {
        background: white;
        padding: 20px;
        align-items: center;
        justify-content: center;
        border-radius: 15px;
    }
    .detailWrap {
        
        margin-top: -0.5rem;
    }
    .pay_group .col {
        width: 50%;
    }
    
    @media (max-width: 767px){
        .ctp-logo{max-width:150px;}
    .pay-logo{max-width:160px;}
        
    }

    .detailWrap .heading {
        background-color: {{ $settings->invoice_label_bg }}
    }
    .dashboardBody {
        background-color: {{ $settings->invoice_bg }}
    }
    .btn-style-1 {
        background-color: {{$settings->invoice_btn_bg}}
    }

</style>
@endpush

<section class="dashboardBody">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
          @include('backend.layouts.notification')
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-md-6">
          <div class=" p-3 rounded-3" style="background: #fff3cc;">
              <p class="m-0 fw-semibold text-dark"><strong>Note:</strong> Please do not refresh or close this
                  page while your payment is processing.
                  Doing so may result in double charges or
                  incomplete transactions. Additionally, avoid
                  clicking the payment button multiple times
                  as it may also cause duplicate charges.
                  Your patience is appreciated as we securely
                  process your payment. Thank you.</p>
          </div>
      </div>
      <div class="col-md-12"></div>  
      <div class="col-md-6">
        <div class="row pay_group">
            <div class="col">
              <img src="{{ $settings->logo }}" class="ctp-logo" alt="logo" />
            </div>
        </div>
      </div>
      <div class="col-md-12"></div>
      <div class="col-md-6">
          <div class="detailWrap">
              <h4 class="heading">Customer Details</h4>
              <ul class="cusDetlList">
                  <li><i class="fas fa-user mr-2"></i><strong>Name: {{$invoice->name}} </strong></li>
                  <li><i class="far fa-envelope mr-2"></i><strong>Email: {{$invoice->email}} </strong></li>
                  <li><i class="fa fa-phone mr-2"></i><strong>Contact: {{$invoice->phone}} </strong></li>
              </ul>
          </div>
      </div>
      <div class="col-md-12"></div>
        <div class="col-md-6">
          <div class="detailWrap">
              <h4 class="heading">Invoice Details <span style="float:right;">#{{ $invoice->id }}</span></h4>
              <ul class="cusDetlList dotted">
                @if (!empty($invoice->invoiceItems))
                  @foreach ($invoice->invoiceItems as $item)
                    <li><i class="fas fa-shopping-cart me-2"></i>
                      <b>{{ $item->service }}: </b>
                      <span style="color:#145857;">{{ $item->price }} </span> <i class="fas {{$invoice->Currency->symbol}} "></i>
                    </li>
                  @endforeach
                @endif
                <li><i class="fas fa-shopping-cart me-2"></i>
                    <b>Total: </b>
                    <span style="color:#145857;">{{ $invoice->invoiceItems->sum('price') }} </span> <i class="fas {{$invoice->Currency->symbol}} "></i>
                </li>
              </ul>
          </div>
      </div>
      <div class="col-md-12"></div>
          <div class="col-md-6">
              <div class="loginWrap detailWrap paymentWrap">
                  <h4 class="heading">Payment Details</h4>
                  @if($invoice->is_paid == 'unpaid')
                  <strong style="padding-left: 20px;">PAY WITH CARD: </strong>
                  <form action="{{ route('invoice.submitPayment', $invoice->slug) }}" method="POST" class="row paymentForm" style="padding-left: 20px;padding-right: 20px;">
                    @csrf
                      <div class="col-md-6">
                          <label>Card Number <sup class="text-danger">*</sup></label>
                          <input type="text" name="card_num" required class="form-control" placeholder="XXXXXXXXXXXXXXXX" />
                          @error('card_num')
                          <span class="text-danger">{{$message}}</span>
                          @enderror
                      </div>
                        <div class="col-md-6">
                          <label>Name On Card<sup class="text-danger">*</sup></label>
                          <input type="text" name="name" required class="form-control" placeholder="Enter Name" />
                          @error('name')
                          <span class="text-danger">{{$message}}</span>
                          @enderror
                      </div>
                        <div class="col-md-6">
                          <label>Card Holder Address<sup class="text-danger">*</sup></label>
                          <input type="text" name="address" required class="form-control" placeholder="Enter Address" />
                          @error('address')
                          <span class="text-danger">{{$message}}</span>
                          @enderror
                      </div>
                        <div class="col-md-6">
                          <label>Zip Code<sup class="text-danger">*</sup></label>
                          <input type="text" name="zip" required class="form-control" placeholder="00000" />
                          @error('zip')
                          <span class="text-danger">{{$message}}</span>
                          @enderror
                      </div>
                      <div class="col-md-6">
                          <label>Valid Thru <sup class="text-danger">*</sup></label>
                          <input type="text" name="expiry" maxlength="5" id="expiry" required class="form-control" placeholder="MM/YY" />
                          @error('expiry')
                          <span class="text-danger">{{$message}}</span>
                          @enderror
                      </div>
          
                      <div class="col-md-6">
                          <label>CVV <sup class="text-danger">*</sup></label>
                          <input type="text" name="cvv" required class="form-control" placeholder="***" />
                          @error('cvv')
                          <span class="text-danger">{{$message}}</span>
                          @enderror
                      </div>
                      <div class="col-md-12">
                          <button type="submit" id="payNowBtn" name="submit" class="btn-style-1 d-flex align-items-center gap-2 justify-content-center " >
                            Submit
                            <div class="spinner-border spinner-border-sm ms-2" id="paymentSpinner" style="display: none" role="status">
                                <span class="visually-hidden"></span>
                            </div>
                          </button>
                      </div>
                  </form>
                  @endif
                  @if($invoice->is_paid == 'paid')
                    <ul class="cusDetlList">
                        <li><i class="fas fa-bars me-2"></i><span style="font-weight: bolder;color: black;">Payment Status:</span><span style="float:right;color: black;">{{ $invoice->invoicePayments->transaction_status }}</span></li>
                        <li><i class="fas fa-calendar  me-2"></i><span style="font-weight: bolder;color: black;">Status Date:</span><span style="float:right;color: black;">
                        {{ date('d M Y', strtotime($invoice->invoicePayments->created_at)) }} </span></li>
                          <li><i class="fas fa-university me-2"></i><span style="font-weight: bolder;color: black;">Transaction Id:</span><span style="float:right;color: black;"> 
                          {{ $invoice->invoicePayments->transaction_id }} </span></li>
                    </ul>
                  @endif
              </div>
          </div>
    </div>
  </div>
</section>
@endsection

@push('scripts')

<script>
  const expiryInput = document.getElementById('expiry');

  expiryInput.addEventListener('input', function() {
      let inputValue = expiryInput.value;

      // Remove non-digit characters
      inputValue = inputValue.replace(/\D/g, '');

      // Limit to 4 characters
      inputValue = inputValue.substring(0, 4);

      if (inputValue.length >= 2) {
          // Format MM/YY
          const month = inputValue.substring(0, 2);
          const year = inputValue.substring(2);

          // Combine month and year with '/'
          expiryInput.value = month + '/' + year;
      } else {
          expiryInput.value = inputValue;
      }
  });
</script>

<script>
    function disableButton() {
        var payNowBtn = document.getElementById('payNowBtn');
        payNowBtn.disabled = true;
        payNowBtn.classList.add('pe-none', 'user-select-none', 'opacity-50');
    }
    document.querySelector('.paymentForm').addEventListener('submit', function() {
        disableButton();
        document.getElementById('paymentSpinner').style.display = 'block';
    });
</script>

<script>
    setTimeout(function(){
      $('.alert').slideUp();
    },4000);
</script>

@endpush
