@extends('admin.layouts.app')

@section('title', 'Invoice')

@section('content')
<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>Invoice</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">Home</a></li>
          <li class="breadcrumb-item active">Invoice</li>
        </ol>
      </div>
    </div>
  </div>
</section>
<section class="content">
<div class="card">
<form id="quickForm">
        @csrf
        <input type="hidden" name="id"  value="{{$invoice->id}}">
        <input type="hidden" name="booking_id"  value="{{$booking->id}}">
    <div class="card-header">
      <h3 class="card-title">Invoice</h3>

      <div class="card-tools">
        <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
          <i class="fas fa-minus"></i>
        </button>
      </div>
    </div>
<div class="card-body">
  <div class="col-md-12">
    <div class="text-center">
      <p class="pt-0">
        <img src="{{ asset('front/images/Original on Transparent.png')}}" width="100px" />
      </p>
    </div>

  </div>


  <div class="row">
    <div class="col-8">
      <ul class="list-unstyled">
        <li class="text-muted">To: <span style="color:#5d9fc5 ;">
         @if ($booking->createdBy->roles->first()->id == '2') 
            {{$booking->user->name ?? ($booking->user->firstname.' '. $booking->user->lastname)}}
        @else 
            {{$booking->createdBy->name ?? ($booking->createdBy->firstname.' '. $booking->createdBy->lastname)}}
        @endif
        </span></li>
      </ul>
    </div>
    <div class="col-4">
      <p class="text-muted">Invoice</p>
      <ul class="list-unstyled">
        <li class="text-muted"><i class="fas fa-circle" style="color:#84B0CA ;"></i> <span
            class="fw-bold">ID:</span>#{{$invoice->id}}</li>
        <li class="text-muted"><i class="fas fa-circle" style="color:#84B0CA ;"></i> <span
            class="fw-bold">Creation Date: </span>{{$invoice->created_at ? date("M d,Y", strtotime($invoice->created_at)) : ''}}</li>
      </ul>
    </div>
  </div>
    
  <div class="my-2 mx-1 justify-content-center">
    <table class="table table-striped table-borderless">
      <thead style="background-color:#303383 ;" class="text-white">
        <tr>
          <th scope="col">Description</th>
          <th scope="col">Days</th>
          <th scope="col">Unit Price</th>
          <th scope="col">Amount</th>
        </tr>
      </thead>
      <tbody class="row-invoice">
        <tr>
          <td><input type="text" name="description" class="form-control" placeholder="Enter Description" value="{{$invoice->description}}"></td>
          <td><input type="number" name="day" class="form-control" placeholder="Enter Days" value="{{$invoice->day}}"></td>
          <td>
              <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text">$</span>
                  </div>
                  <input type="text" name="per_day_price" class="form-control" value="{{$invoice->per_day_price ?? \App\Model\Setting::where('key', 'PER_DAY_PRICE')->value('value')}}" readonly>
                </div>
            </td>
          <td>
              <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text">$</span>
                  </div>
                  <input type="text" name="price" class="form-control" placeholder="Enter Price" value="{{$invoice->price}}" readonly>
                </div>
            </td>
        </tr>
        @foreach($invoice->invoiceExtra as $invoiceExtra)
            <tr>
              <td>
                  <input type="hidden" name="invoice_extra[{{$invoiceExtra->id}}][id]" value="{{$invoiceExtra->id}}">
                  <input type="text" name="invoice_extra[{{$invoiceExtra->id}}][description]" class="form-control" placeholder="Enter Description" value="{{$invoiceExtra->description}}">
                </td>
              <td>-</td>
              <td>-</td>
              <td>
                  <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text">$</span>
                  </div>
                  <input type="text" name="invoice_extra[{{$invoiceExtra->id}}][price]" class="form-control" placeholder="Enter Price" value="{{$invoiceExtra->price}}">
                </div>
              </td>
            </tr>
        @endforeach
      </tbody>

    </table>
    <a class="btn btn-primary add-row">Add</a>
  </div>
  
  <div class="row">
    <div class="col-9">
    </div>
    <div class="col-3">
      <ul class="list-unstyled">
        <li class="text-muted ms-3"><span class="text-black me-4">SubTotal</span>${{$invoice->sub_total}}</li>
        <li class="text-muted ms-3 mt-2"><span class="text-black me-4">Tax({{$invoice->gst_percentage}}%)</span>${{$invoice->gst}}</li>
      </ul>
      <p class="text-black float-start"><span class="text-black me-3"> Total Amount</span><span
          style="font-size: 25px;">${{$invoice->total}}</span></p>
    </div>
  </div>
</div>
<div class="card-footer">
    <button type="submit" class="btn btn-primary">Submit</button>
</div>
 </form>
</div>
</section>
@endsection

@section('script')
<script>
    $('#quickForm').submit(function(e) {
        e.preventDefault();
        showLoader();
        var formData = new FormData($("#quickForm")[0]);
        $.ajax({
            type: "POST",
            url: "{{ route('admin.booking.saveInvoice')}}",
            data: formData,
            processData: false,
            contentType: false,
            success: function( res ) {
                if (res.code == 200 || res.code == 0) {
                    msg = res.msg;
                    showToaster("success", msg);
                    setTimeout( function(){ 
                        redirectUrl = "{{ route('admin.booking.invoice-list',['id' => $booking->id]) }}";
                        window.location.href = redirectUrl;
                    }  , 1000 );
                    
                } else {
                    showToaster("error", res.msg);
                }
                hideLoader();
            }
        });
    });
    $(".add-row").click(function() {
        var key = $.now();
       var  html = "<tr>";
            html +=       '<td>';
            html +=         '<input type="hidden" name="invoice_extra['+key+'][id]" value="0">';
            html +=      '<input type="text" name="invoice_extra['+key+'][description]" class="form-control" placeholder="Enter Description">';
            html +=    '</td>';
            html +=  '<td>-</td>';
            html +=  '<td>-</td>';
            html +=  '<td>';
            html +=      '<div class="input-group">';
            html +=      '<div class="input-group-prepend">';
            html +=        '<span class="input-group-text">$</span>';
            html +=      '</div>'
            html +=      '<input type="text" name="invoice_extra['+key+'][price]" class="form-control" placeholder="Enter Price" >';
            html +=    '</div>';
            html +=  '</td>';
            html += '</tr>';
            
        $('.row-invoice').append(html);    
    });
</script>
@endsection