@extends('layouts.main')

@section('content')    

    <button type="button" class="btn btn-dark btn-sm" data-toggle="modal" data-target="#add_payment" id="exclude">
      Add Payment
    </button>

    <button type="button" class="btn btn-dark btn-sm" data-toggle="modal" data-target="#set_reminder">
      Set Remider
    </button>  

<hr>
 
  <div class="row">        
      <div class="col-md-6 col-lg-6 col-sm-6 col-xs-6">
        @include("mainsale._address")
      
      </div>

      <div class="col-md-6 col-lg-6 col-sm-6 col-xs-6">
          <p style="text-transform: uppercase;">{{$purchase->supplier->name}} (Saler)</p>
          <p>{{$purchase->supplier->phone_number}}</p>
          <p>{{$purchase->supplier->address}}</p>
      </div>
  </div>

<p style="float: right; font-size: 20px; color: red;">No. {{$purchase->id}}</p>
<span>Transaction date: {{$purchase->date_purchased}}</span>

<center><h1><u>PURCHASE RECIEPT</u></h1></center>

<div class="row">        
    <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
        <p style="text-transform: uppercase;">Particular</p>
        <div class="table-responsive">
        <table class="table table-hover table-striped">
            <thead>
              <th>#</th>  <th>Item</th> <th>Quantity</th> <th>Amount</th> <th>Exchange rate</th> <th></th>
            </thead>

            <tbody>
                                @foreach($purchase->parchasedetails as $details)
                                  <tr>
                    <td>{{$details->id}}</td>
                    <td>{!! $details->stock->name($details->stock) !!}</td>
                    <td>{{number_format($details->quantity,2)}} {{$details->stock->category->unit}} @ UGX {{number_format($details->unit_price,3)}}</td>
                    <td>{{number_format($details->unit_price * $details->quantity,3)}}</td>
                    <td>${{ number_format($details->exchange_rate,3) }}</td>
                    <td>                             
                      <form action="{{ url('delete_detail/'.$details->id) }}" method="post">
                        @csrf
                        @if(Auth::user()->canDo(['edit_purchases']))
                          <span class="btn btn-info btn-sm" data-toggle="modal" data-target="#edit{{$details->id}}"><i class="fa fa-edit"></i></span>
                        @endif

                        @if(Auth::user()->canDo(['delete_purchases']))
                          <button class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></button>
                        @endif
                      </form>                            
                    </td>                        
                  </tr>

                  <div class="modal fade" id="edit{{$details->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title" id="exampleModalLabel">Edit {{$details->stock->category->name}} ({{$details->stock->name}})</h5>
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
                        </div>
                        <div class="modal-body">

                          <form action="{{ url('update_details/'.$details->id) }}" method="post">
                            @csrf
                            @method('PATCH')

                              <label for="quantity">Quantity</label>
                              <input type="text"   name="quantity" value="{{ $details->quantity }}" class="form-control">

                              <label for="unit_price">Unit price</label>
                              <input type="text"   name="unit_price" value="{{ $details->unit_price }}" class="form-control">

                              <label for="exchange_rate">Exchange rate</label>
                              <input type="text"  name="exchange_rate" value="{{ $details->exchange_rate }}" class="form-control">

                              <br>
                              <button class="btn btn-dark" type="submit">Save</button>

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



                @endforeach

                <tr>
                    <th>Total</th>  <th></th> <th></th> <th>{{number_format($total,2)}}</th> <th></th> <th></th>
                </tr>
            </tbody>
        </table>
      </div>              
  </div>

    <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
        <p style="text-transform: uppercase;">Payments</p>

          <table class="table table-hover table-striped">
            <thead>
                <th>Date</th> <th>Amount (UGX)</th> <th>Exchange rate</th> <th></th>
            </thead>

            <tbody>
                                @foreach($purchase->parchasepayment as $details)
                                <tr>
                    <td>{{$details->date_paid}}</td>                                        
                    <td>{{number_format($details->amount,2)}}</td>
                    <td>${{ number_format($details->exchange_rate,2) }}</td>
                    <td>                      
                      <form action="{{ route('purchase_payment.destroy',$details->id) }}" method="post">
                        @csrf
                        @method('DELETE')
                          @if(Auth::user()->canDo(['delete_purchases']))
                        <button class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></button>
                          @endif
                      </form>                        
                    </td>
                </tr>
                @endforeach

                <tr>
                    <th>Total</th> <th>{{number_format($payments_total,2)}}</th> <th></th> <th></th>
                </tr>
            </tbody>
        </table>

        <h3>Balance: UGX {{ number_format($total-$payments_total,2) }}</h3>

      <div class="modal fade" id="add_payment" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Record payment</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                   <h3>Add Payment</h3>            

                  <label for="amount_paid">Amount Paid (UGX)</label>
                  <input type="text" id="amount_paid" class="form-control ">

                  <input type="hidden" id="parchase_id" value="{{$purchase->id}}">

                  <label for="payment_exchange_rates">Paying Exchange rate (USD)</label>
                  <input type="text" id="payment_exchange_rates" class="form-control">

                  <label>Date Paid</label>
                  <input type="date" id="date_paid" value="{{ date('Y-m-d') }}" class="form-control">
                  
                  <br>
                  <button id="save_payments" class="btn btn-dark">Save</button>

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

  
    </div>
</div>

  <div class="modal fade" id="set_reminder" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="updateCustomerl" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="updateCustomerl">Set balance reminder</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">

          <form action="{{ route('reminders.store') }}" method="post">
            @csrf

            <input type="hidden" value="{{ $purchase->id }}" name="parchase_id">          

            <label for="reminder_date">Choose Credit reminder date</label>
            <input type="date" name="reminder_date" class="form-control" min="{{ date('Y-m-d') }}">
            
            <hr>
            <button type="submit" class="btn btn-dark">Store reminder</button>
          </form>
        </div>          
      </div>
    </div>
  </div>
     

@endsection

@section('style')
  <style>
    @media print{
      #exclude,a,nav{
        display: none;      
     }

     #hide{
      display: none;
     }
    }

    .p{
      font-weight:  bold;
    }
 
  </style>
@endsection

@push('scripts')
  <script>
      $("#save_payments").click(function() {
            $("#save_payments").text("Processing ...");
            $("#save_payments").attr("disabled","disabled");

             $("#amount_paid").val(
              $("#amount_paid").val().replace(/,/g, "")
            );

            $("#payment_exchange_rates").val(
              $("#payment_exchange_rates").val().replace(/,/g, "")
            );            

             $.ajax({
                    type: "POST",
                    url: "{{ route('purchase_payment.store') }}",
                data: {
                    amount: $("#amount_paid").val(),      
                    payment_exchange_rates: $('#payment_exchange_rates').val(),                          
                    parchase_id: $("#parchase_id").val(),   
                    date_paid: $("#date_paid").val(),                       
                    _token: "{{Session::token()}}"
                },
                    success: function(result){
                        $("#amount_paid").val(" ")
                        $("#save_payments").removeAttr("disabled");
                        $("#save_payments").text(result);
                        location.reload();
                }
            })
        });
  </script>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
          const amount_paid = document.getElementById("amount_paid");
          addCommas(amount_paid); 
      });
    </script>

       <script>
      document.addEventListener("DOMContentLoaded", function () {
          const payment_exchange_rates = document.getElementById("payment_exchange_rates");
          addCommas(payment_exchange_rates); 
      });
    </script>


@endpush