@extends('layouts.main')

@section('content')
    <h1>Add Purchase</h1>           
    <a href="{{route('purchases.edit',$purchase->id)}}" class="btn btn-dark">Details</a>
    <hr>                   
    <div class="row">
        <div class="col-md-6">

            <input type="hidden" id="parchase_id" value="{{$purchase->id}}">
            <label>Choose Supplier *</label>
            <select id="supplier_id" class="form-control">
                @foreach($suppliers as $supplier)
                    <option value="{{$supplier->id}}" style="text-transform: uppercase;">{{$supplier->name}}</option>
                @endforeach
            </select>

            <label>Choose Stock *</label>
            <select id="stock_id" class="form-control">
                @foreach($stocks as $stock)
                  @if ($stock->category->name == "Good")
                        <option value="{{$stock->id}}" style="text-transform: uppercase;"> {!! $stock->name($stock) !!}  </option>                     
                  @endif
                @endforeach
            </select>   

            <label>Quantity</label>
            <input type="number" id="quantity"  class="form-control">

            <label>Date purchased</label>
            <input type="date" id="date_purchased" value="{{ date('Y-m-d') }}" class="form-control">                    

            <div class="row">
                <div class="col-md-6 col-sm-12">
                    <label>Unit Price (UGX)</label>
                    <input type="text" id="unit_price"  class="form-control">
                </div>

                <div class="col-md-6 col-sm-12">
                    <label>Exchange rate (USD)</label>
                    <input type="text" id="exchange_rate"  class="form-control">                            
                </div>
            </div>           

             <hr>
            <button class="btn btn-dark" id="saveBtn">Save</button>
            <a href="" style="float: right;">Refresh</a>
        </div>

        <div class="col-md-6">
            <div class="card" style="border: 2px solid #28a745;">
                <div class="card-body">        
                    <h3 id="total_amount" style="color: green;">PAYMENT</h3>
                    <br>
                    <label>Amount Paid (UGX)</label>
                    <input type="text" id="amount_paid" class="form-control">

                    <label>Date Paid</label>
                    <input type="date" id="date_paid" class="form-control">

                    <label>Payment Exchange rate (USD)</label>
                    <input type="text" id="payment_exchange_rates" class="form-control">
                    <br>
                    <button id="save_payments" class="btn btn-dark">Save</button>
                </div>
            </div>
        </div>
    </div>

    <br><br>
        

        <table class="table" id="example">
            <thead>
                <th>Items</th>
                <th>Quantity</th>
                <th>Unit price</th>
                <th>Amount</th>
            </thead>

            <tbody id="emp">
                
            </tbody>

        </table>
        
@endsection

@push('scripts')
  <script>
       $("#supplier_id,#stock_id").chosen();

       $("#saveBtn").click(function() {
            $("#saveBtn").text("Processing ...");
            $("total_amount").html("")

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

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


            $.ajax({
                    type: "POST",
                    url: "{{ route('purchases.store') }}",
                data: {
                    supplier_id: $("#supplier_id").val(),                              
                    stock_id: $("#stock_id").val(),                              
                    quantity: $("#quantity").val(),                              
                    unit_price: $("#unit_price").val(),                              
                    parchase_id: $("#parchase_id").val(),
                    exchange_rate: $("#exchange_rate").val(),
                    date_purchased: $("#date_purchased").val(),                      
                    _token: "{{Session::token()}}"
                },
                    success: function(result){
                        $("#emp > tr").remove();
                        load_table();
                        $("display").html(result)
                        $("#unit_price").val(" ")
                        $("#quantity").val(" ")
                        $("#stock_id").val(" ")
                        $("#saveBtn").text("Add new item");
                }
            })
        });


        $("#save_payments").click(function() {
            $("#save_payments").text("Processing ...");

            $("#amount_paid").val(
              $("#amount_paid").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").text(result);
                         location.reload();
                }
            })
        });


    function load_table(){
          $.ajax({ 
            url : "{{route('purchases.show',$purchase->id)}}",
            type : 'GET',
            dataType : 'JSON',
            success : function(data) {
            var sum_amount = 0;                
                $(data).each(
                  function() {
                      $('tbody#emp').append('<tr> <td>'+this.category_name+'(' + this.name+ ')</td><td>'+ this.size+ '</td><td>' + this.amount+ '</td> <td> '+ this.size*this.amount +' </td></tr>');
                      sum_amount = sum_amount + (this.amount*this.size);
                  });

                $("#total_amount").html("TOTAL UGX: "+sum_amount);
            },
            error : function(data) {} 
          });
      }
  </script>

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

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

 

@endpush