@extends('layouts.app')

@section('content')
@include('layouts.sidebar')

<div class="page-content-wrapper">

    <!-- Welcome Toast -->
    <!-- <div class="toast toast-autohide custom-toast-1 toast-success home-page-toast" role="alert" aria-live="assertive"
      aria-atomic="true" data-bs-delay="7000" data-bs-autohide="true">
      <div class="toast-body">
        <i class="bi bi-bookmark-check text-white h1 mb-0"></i>
        <div class="toast-text ms-3 me-2">
          <p class="mb-1 text-white">Welcome to Affan!</p>
          <small class="d-block">Click the <strong>Add to Home Screen</strong> button &amp; enjoy it like an
            app.</small>
        </div>
      </div>
      <button class="btn btn-close btn-close-white position-absolute p-1" type="button" data-bs-dismiss="toast"
        aria-label="Close"></button>
    </div> -->

   

    <div class="pt-3"></div>

  


    <div class="container direction-rtl">
		<div class="print_section">
          <div class="card mb-3">
            <div class="card-body">
              <h3>Customer Details</h3>
              <div class="register-form mt-4">
                  <div class="form-group">
                    <label class="form-label" for="defaultSelect">Customer Name</label>
                    <p>{{ $booking->customerID->customer_name }}</p>
                  </div>
        
                  <div class="form-group">
                    <label class="form-label" for="defaultSelect">Customer Mobile</label>
                    <p>{{ $booking->customerID->customer_mobile }}</p>
                    
                  </div>
                  <div class="form-group">
                    <label class="form-label" for="defaultSelect">From Date</label>
                    <p>{{ $booking->booking_date }}</p>
                    
                  </div>
                  <div class="form-group">
                    <label class="form-label" for="defaultSelect">To Date</label>
                    <p>{{ $booking->booking_date }}</p>
                  </div>
              </div>
            </div>
          </div>
          <div class="card mb-3">
            <div class="card-body">
              <h3>Payment Details</h3>
              <div class="register-form mt-4">
                  <div class="form-group">
                    <label class="form-label" for="defaultSelect">Payment</label>
                    <p>{{ $booking->total_amount }}</p>
                  </div>
                  <div class="form-group">
                    <label class="form-label" for="defaultSelect">Paid</label>
                    <p>{{ number_format($booking->bookingTransaction->where('remarks', '==' , '')->sum('paid_amount'), 2) }}</p>
                  </div>
                  <div class="form-group">
                    <label class="form-label" for="defaultSelect">Balance</label>
                    <p>{{ $booking->balance_amount }}</p>
                  </div>

                  @if ($booking->bookingTransactionStaff()->exists()) 
					<h4>Expenses</h4>
					@foreach($booking->bookingTransactionStaff as $booking_transaction)
						<div class="col-12">
						<div class="card single-product-card">
							<div class="card-body">
							<div class="d-flex align-items-center">
							<div class="card-content px-4 py-2">
								<label>Amount: {{ $booking_transaction->paid_amount }}</label><br/>
								<label>Remarks: {{ $booking_transaction->remarks }}</label><br/>
								<!-- <a class="btn btn-primary rounded-pill btn-sm" href="{{ route('edit-expenses', $booking_transaction->id) }}">Edit</a> -->
							</div>
							</div>
							</div>
						</div>
						</div> 
					@endforeach
                @endif

				<br/>
				@if ($booking->bookingAttachment()->exists()) 
					<h4>Uploaded Attachment</h4>
					@foreach($booking->bookingAttachment as $bookingAttachment)
						<img src="{{ URL::to('/') }}/uploads/attachment/{{ $bookingAttachment->attachment }}" alt="Profile photo" width="150" height="150">
					@endforeach
				@endif

				<br/><br/><br/>
              </div>
			  
            </div>
          </div>
		</div>
		  	
			<button class="btn btn-primary w-100" id="btn">Print</button><br/><br/>
			<a class="btn btn-primary w-100" href="{{ route('list-booking') }}">Close</a>
    </div>

@endsection

@push('custom-scripts')
    <script>
        $(document).on('click','#btn',function(){
         	let pdf = new jsPDF();
          	let section=$('.print_section');
          	let page= function() {
            	pdf.save('report.pdf');
          	};

          	pdf.addHTML(section,page);
        });
    </script>
@endpush