@extends('common.index')
@section('content')
<style>
    .bs-stepper .step-trigger {
  padding: 0.5rem 1rem;
  border: none;
  background-color: transparent;
}

.bs-stepper .step-trigger:hover {
  background-color: #f0f0f0;
}

.bs-stepper .step-trigger.active {
  background-color: #007bff;
  color: #fff;
}

.bs-stepper .line {
  width: 100%;
  height: 2px;
  background-color: #ddd;
  margin: 0 10px;
}

.bs-stepper-content {
  padding: 20px;
}
.select-tests-list{
    border: 1px solid #92a598;
    height: 150px;
    background-color: #f1eeee;
    box-sizing: border-box;
    /* box-shadow: 0px 1px 1px 1px; */
    overflow: scroll;
} 
.select-tests-list li{
    list-style-type: decimal;
}
.selected-tests-list{
    border: 1px solid #92a598;
    height: 150px;
    background-color: #f1eeee;
    box-sizing: border-box;
    /* box-shadow: 0px 1px 1px 1px; */
    overflow: scroll;
}
.selected-tests-list li{
    list-style-type: decimal;
}
</style>
<main class="app-main">
        <!--begin::App Content Header-->
        <div class="app-content-header">
          <!--begin::Container-->
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
              <div class="col-sm-6"><h3 class="mb-0">Patient History</h3></div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
                  <li class="breadcrumb-item active" aria-current="page">Patient History</li>
                </ol>
              </div>
            </div>
            <!--end::Row-->
          </div>
          <!--end::Container-->
        </div>
        <!--end::App Content Header-->
        <!--begin::App Content-->
        <div class="app-content">
          <!--begin::Container-->
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row g-4">

              @if(session('user')->user_type_id==2)
              <div class="col-12">
                  <div class="callout callout-info">
                      <span class="bi bi-info-circle-fill"></span>
                       You can <strong>edit</strong> existing entries, but <strong>deletion is restricted</strong> if they are linked to any records. 
                    
                      
                  </div>
              </div>
              @endif              

              <div class="col-md-12">

                @if(session('error'))
                <div class="col-12">
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <strong>Error!</strong> {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                </div>
                @endif

                @if(session('success'))
                <div class="col-12">
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <strong>Success!</strong> {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                </div>
                @endif

                <div class="card card-info card-outline mb-4">
                  <div class="card-header">
                    <div class="row w-100 align-items-center">
                      <div class="col-md-6">
                        <h3 class="card-title mb-0">Patient Order List</h3>
                      </div>
                      <div class="col-md-6 text-end">
                        <div class="d-flex justify-content-end gap-2 flex-wrap">
                          {{-- Dropdown --}}
                          <select class="form-select w-auto d-none" name="filter_status" id="filter_status">
                            <option value="">All Status</option>
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                          </select>
                          {{-- Search --}}
                          <input type="text" class="form-control w-auto d-none" placeholder="Search..." id="searchBox" name="search">
                          {{-- Add New --}}
                          <a href="{{route('add-patients')}}"  class="btn btn-info">Patient List</a>

                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- /.card-header -->
                  <div class="card-body">
                    <div class="table-responsive">
                      <table class="table table-bordered mb-0 table-striped table-center">
                        <thead>
                          <tr>
                            <th style="width: 5%" class="text-center">#</th>
                            <th class="text-center">Test Item</th>
                            <th class="text-center">Application Date</th>
                            <th class="text-center">Application Status</th>
                            <th class="text-center">Bill Amount</th>
                            <th class="text-center">Paid Amount</th>
                            <th class="text-center">Due Amount</th>
                            <th class="text-center">Action</th>
                          </tr>
                        </thead>
                        <tbody>
                          @foreach ($testorders as $ind=>$order)
                                @php
                                  $paidamount = 0;
                                  @endphp
                                @foreach ($payments[$ind] as $payment)
                                  @php
                                  $paidamount+= $payment->payment_amount
                                  @endphp
                                @endforeach
                                @php
                                  $due =$order->total_amount-$paidamount;
                                @endphp
                              
                            <tr>
                              <td class="text-center">{{$loop->iteration}}</td>
                              <td class="text-center">
                                @foreach ($order->testCarts as $index=>$cartitem)
                                  <strong>{{$index+1}}: {{$cartitem->test_name}}</strong><br>
                                @endforeach
                              </td>
                              <td class="text-center">{{date('d-m-Y',strtotime($order->order_date))}}</td>
                              <td class="text-center">
                                @if($order->order_status==0)
                                <span class="badge badge-danger text-danger">Pending</span>
                                @elseif($order->order_status==1)
                                <span class="badge badge-warning text-warning">Sample Collected</span>

                                @elseif($order->order_status==2)
                                <span class="badge badge-success text-success">Approved</span>

                                @endif
                              </td>
                              <td class="text-center">₹ {{number_format($order->total_amount,2)}}</td>
                              <td class="text-center">₹ {{number_format($paidamount,2)}}</td>
                              <td class="text-center">₹ {{number_format($due,2)}}</td>
                              <td class="text-center">
                                  @if($due>0)
                                  <a href="javascript:void(0)" onclick="paymentmodal({{$order->id}},{{$due}},{{$patients->id}})">
                                    <button class="btn btn-warning">Make Payment</button>
                                  </a><br><br>
                                  @endif
                                 <a href="{{route('print-invoice',$order->id)}}" target="_blank">
                                    <button class="btn btn-success  ">Print Invoice</button>
                                  </a>
                              </td>
                              
                            </tr>
                          @endforeach
                          
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <!-- /.card-body -->
                  <div class="card-footer clearfix">
                    <div class="pagination">
                    
                    </div>
                  </div>
                </div>

              </div>
            </div>
            <!--end::Row-->
          </div>
          <!--end::Container-->
        </div>
        <!--end::App Content-->
    
        <div class="modal fade" id="makepayment" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
            <div class="modal-dialog">
                
                <div class="modal-content">
                    <div class="modal-header bg-warning text-white">
                    <h5 class="modal-title" id="modalLabel">Make Payments</h5>
                    <button type="button" class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                    <form action="#" id="payment">
                      @csrf
                      <input type="hidden" name="order_id" id="order_id">
                      <input type="hidden" name="patient_id" id="patient_id">
                      <div class="row">
                      <div class="col-12">
                          <label for="name">Due Amount:</label>
                              <div class="input-group">
                                  <span class="input-group-text"><span class="bi bi-currency-rupee"></span></span>
                                  <input type="text" class="form-control" name="due_amount" id="due_amount" readonly placeholder="Enter Due amount">
                                  
                              
                              </div>
                          </div>
                        <div class="col-12">
                          <label for="name">Paid Amount: <span class="text-danger">*</span></label>
                              <div class="input-group">
                                  <span class="input-group-text"><span class="bi bi-currency-rupee"></span></span>
                                  <input type="text" class="form-control" name="paid_amount" id="paid_amount" placeholder="Enter Paid amount" required>
                                  <span class="text-danger" id="error"> </span>
                              
                              </div>
                          </div>
                          <div class=" col-12">
                              <div class="form-group">
                                  <label for="test-category">Payment Method: <span class="text-danger">*</span></label>
                                  <select  name="payment_method" id="payment_method" class="form-control" required>
                                      <option value="Cash" selected>Cash</option>
                                      <option value="Online">Online</option>
                                  </select>
                              </div>
                          </div>
                          <div class="col-12">
                            <button type="submit" class="btn btn-primary mt-2" id="payment_button">Procced</button>
                          </div>
                      </div>
                    </form>

                    </div>

                </div>
            </div>
          </div>

      </main>
<script>
  $('#payment').submit(function(e){
  e.preventDefault();
  $('#payment_button').attr('disabled',true);
  let due_amount = parseInt($('#due_amount').val());
  let paid_amount = parseInt($('#paid_amount').val());
  if(paid_amount>0){
    if(due_amount<paid_amount){
      $('#error').html('Paid amont should equal to due amount. you are paing extra amount')
    }                         
    else{
      var formData = new FormData($('#payment')[0]);
      $('#error').html('');
        $.ajax({
            type: "POST",
            url: "{{route('make-payment')}}",
            data: formData,
            processData: false,
            contentType: false,
            // data:$('#patient_information').serialize ,
            success: function(response) {
              console.log(response);
              if(response.success){
                alertSuccessMessage(response.message);
                $('#makepayment').modal('hide');
                location.reload();

              }else{
                alertErrorMessage(response.message);
                $('#payment_button').attr('disabled',false);

              }
            },
            error: function(xhr, status, error) {
              console.log(xhr.responseText);
              alertErrorMessage(xhr.responseText);

            }
          });
    }
  }


  })

  function paymentmodal(order_id, due_amount,patient_id){
    $('#due_amount').val(due_amount);
    $('#order_id').val(order_id);
    $('#patient_id').val(patient_id);
    $('#makepayment').modal('show');
  }
</script>
      @endsection