@extends('admin.master', ['menu' => 'memberShip', 'submenu' => 'allMembership'])
@section('title', isset($title) ? $title : '')
@section('content')
<div class="row">
  <div class="col-md-12">
    <div class="breadcrumb__content">
      <div class="breadcrumb__content__left">
        <div class="breadcrumb__title">
          <h2>{{__('Membership Invoices')}}</h2>
        </div>
      </div>
      <div class="breadcrumb__content__right">
        <nav aria-label="breadcrumb">
          <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">{{__('Home')}}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{__('Membership Invoices')}}</li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <div class="customers__area bg-style mb-30">
      <div class="row">
        <div class="col-md-4">
          <div class="card membership-type-card">
            <div class="card-header border-bottom-0 bg-transparent text-center">
              <div class="membership-type-tit" style="color: black;">Total Unpaid Invoices =
                @if($total > 0)
                  <span>{{ $total }}</span> JD
                @else
                  <span>0 JD</span>
                @endif
              </div>
            </div>
            @if($total > 0)
              <div class="card-body pt-0">
                <div class="mb-3">
                  @if (app()->getLocale() == 'en')
                    <i class="fas fa-caret-right"></i>
                  @else
                    <i class="fas fa-caret-left {{ (app()->getLocale() == 'en') ? 'me-2' : 'ms-2'}}"></i>
                  @endif
                  <span>Pay due invoice?<div>please choose the payment method</div></span>
                </div>
                <div class="membership-type-links-box">
                  <form method="POST" action="{{ route('user.payInvoices') }}">
                    @csrf
                    <input type="hidden" id="user_id" name="user_id" value="{{ $membership->user->id }}">
                    <button type="submit" class="membership-type-link rscnSaveBtn">{{ __('Card') }}</button>
                  </form>
                  <button id="onsite" class="membership-type-link rscnSaveBtn">{{ __('Onsite') }}</button>
                </div>
                <div class="row pt-3" id="payOnsite"  @if($errors->any()) style="display:block" @else style="display:none" @endif>
                  <form method="POST" action="{{ route('admin.payInvoicesOnsite') }}">
                    @csrf
                    <input type="hidden" id="user_id" name="user_id" value="{{ $membership->user->id }}">
                    <div class="input__group">
                      <label for="payment_date">payment date (Optional)</label>
                      <input id="payment_date" type="date" class="form-control" name="payment_date">
                    </div>
                    <button type="submit" class="float-end btn bg-secondary py-1 px-4 mt-2 text-white">{{ __('Pay Now') }}</button>
                  </form>
                </div>
              </div>
            @endif
          </div>
        </div>
      </div>
      <div class="table-responsive">
        <table class="table table-striped mb-0 table-bordered activity-booking-updated-table">
          <thead>
            <tr>
              <th scope="col">Membership ID</th>
              <th scope="col">Membership Type</th>
              <th scope="col">English Name</th>
              <th scope="col">Arabic Name</th>
              <th scope="col">Reason</th>
              <th scope="col">Amount</th>
              <th scope="col">Payment Method</th>
              <th scope="col">Payment Status</th>
              <th scope="col">Payment Date</th>
              <th scope="col">Start Date</th>
              <th scope="col">End Date</th>
              <th scope="col">Created at</th>
            </tr>
          </thead>
          <tbody class="border-top-0">
            @foreach($membershipInvoices as $invoice)
              <tr>
                <td>{{ $invoice->membership_id }}</td>
                <td>{{ $membership->type }}</td>
                <td>{{ $membership->user->name }}</td>
                <td>{{ $membership->user->name_ar }}</td>
                <td>{{ $invoice->reason }}</td>
                <td>{{ $invoice->total }}</td>
                <td>{{ $invoice->payment_type }}</td>
                <td>{{ $invoice->payment_status }}</td>
                <td>{{ $invoice->payment_date }}</td>
                <td>{{ $invoice->start_date }}</td>
                <td>{{ $invoice->end_date }}</td>
                <td>{{ date('Y-m-d', strtotime($invoice->created_at)) }}</td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
      {{ $membershipInvoices->appends(request()->input())->links('admin.pagination') }}
    </div>
  </div>
</div>

<!--Row-->
@push('post_scripts')
  <script src="{{asset('backend/js/admin/datatables/activity-booking.js')}}"></script>
  <!-- Page level custom scripts -->

  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css">
  <script src="https://cdn.datatables.net/buttons/2.3.5/js/dataTables.buttons.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.3.5/js/buttons.html5.min.js"></script>
  <script>
    $(document).ready(function (){
      $( "#onsite" ).on( "click", function() {
        $("#payOnsite").toggle();
      });
   });
  </script>
@endpush

@endsection