@include('header')
      <!-- partial -->
      <div class="main-panel">
        <div class="content-wrapper">
          <div class="row">
            <div class="col-md-12 grid-margin">
              <div class="rows">
              <div class="card">
                <div class="card-body">
                  <h4 class="card-title">Booking Invoice</h4>

                @foreach($bookings as $booking)

                    @php
                                $client = DB::table('clients')->where('id',$booking->client_id)->first();

                                @endphp
                    <p align="left">Invoice ID: WS000{{ $booking->id }}</p>
                    <div align="center" class="form-group">
                      <h4>Client Name</h4>
                      <p align="center">{{ $client->name }}</p>
                    </div>
                    <div align="center" class="form-group">
                      <h4>Payment for</h4>
                      <p align="center">{{ $booking->service }}</p>
                    </div>
                    <div align="center" class="form-group">
                      <h4>Date and Time</h4>
                      <p align="center">{{ $booking->start }}</p>
                    </div>
                    <div align="center" class="form-group">
                                    @php
                                      $service = DB::table('services')->where('service',$booking->service)->first();
                                    @endphp

                      <h4>Price</h4>
                      <h5 align="center">&pound; {{ $service->price }}</h5>
                    </div>
                    @if($booking->payment == 0)
                    <p align="right"><a href="{{ url('') }}/dashboard/bookings/payments/gateway/{{ $booking->id }}"><button class="btn btn-success mr-2">Make Payment</button></a></p>
                    @else
                    <h5 align="right">Invoice Paid</h5>
                    @endif
                @endforeach
                </div>
              </div>
                </div>
              </div>
            </div>

          </div>

        <!-- partial: -->
        <footer class="footer">
          <div class="d-sm-flex justify-content-center justify-content-sm-between">
            <span class="text-muted text-center text-sm-left d-block d-sm-inline-block"><p align="center" class="mb-0">Copyright &copy; Tritek Consulting Ltd 2022 </p>  </span>
          </div>
        </footer>
        <!-- partial -->

      </div>
      <!-- main-panel ends -->
    </div>   
    <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->
  <!-- container-scroller -->
  <!-- plugins:js -->
  <script src="{{ asset('vendors/js/vendor.bundle.base.js') }}"></script>
  <!-- endinject -->
  <!-- Plugin js for this page -->
  <script src="{{ asset('vendors/typeahead.js/typeahead.bundle.min.js') }}"></script>
  <script src="{{ asset('vendors/select2/select2.min.js') }}"></script>
  <!-- End plugin js for this page -->
  <!-- inject:js -->
  <script src="{{ asset('js/off-canvas.js') }}"></script>
  <script src="{{ asset('js/hoverable-collapse.js') }}"></script>
  <script src="{{ asset('js/template.js') }}"></script>
  <script src="{{ asset('js/settings.js') }}"></script>
  <script src="{{ asset('js/todolist.js') }}"></script>
  <!-- endinject -->
  <!-- Custom js for this page-->
  <script src="{{ asset('js/file-upload.js') }}"></script>
  <script src="{{ asset('js/typeahead.js') }}"></script>
  <script src="{{ asset('js/select2.js') }}"></script>
  <!-- End custom js for this page-->

  <!-- Plugin js for this page -->
  <script src="{{ asset('vendors/chart.js/Chart.min.js') }}"></script>
  <!-- Custom js for this page>
  <script src="{{ asset('js/chart.js') }}"></script-->
  <!-- Custom js for this page-->
  <script src="{{ asset('js/dashboards.js') }}"></script>
  <script src="{{ asset('js/Chart.roundedBarCharts.js') }}"></script>
  <!-- End custom js for this page-->

  <!-- End custom js for this page-->


</body>

</html>